admin/ota-admin-portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'main' into CEC-3796

Browse Source
This commit is contained in:
Paul Adamsen
2023-10-13 17:24:08 -04:00
committed by GitHub
parent 66706b9c3c db0d3dd319
commit 8a371cc83d
10 changed files with 292 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/components/Contexts/CarUpdatesContext.jsx
View File

@@ -32,6 +32,26 @@ const validateDeployFleetUpdates = (data) => {
return validateDeployClosure(data, "fleet_names", "Fleets");
};
export function downloadPercent(status) {
if (status.status === "install_succeeded") {
return 100;
}
if (status.package_total === 0) {
return 0;
}
return Math.floor((100 * status.package_current) / status.package_total);
}
export function installPercent(status) {
if (status.total_files === 0) {
return 0;
}
return Math.floor((100 * status.installed) / status.total_files);
}
export const CarUpdatesProvider = ({ children }) => {
const [busy, setBusy] = useState(false);
const [carUpdates, setCarUpdates] = useState([]);
@@ -142,30 +162,10 @@ export const CarUpdatesProvider = ({ children }) => {
return result;
};
const getDownloadProgress = (status) => {
const disabled = status.status === "install_succeeded";
if (disabled) {
return -1;
}
const calculated = status.package_total > 0;
if (calculated) {
return Math.floor((100 * status.package_current) / status.package_total);
}
return 0;
};
const getInstallProgress = (status) => {
if (status.total_files > 0)
return Math.floor((100 * status.installed) / status.total_files);
return 0;
};
const applyProgressStatus = (item, status) => {
if (validateStatusMessage(status)) {
if (status.msg === "downloading") {
item.progress = getDownloadProgress(status);
item.progress = downloadPercent(status);
item.status = `${item.ecu || ""} downloading ${item.progress}%`.trim();
return;
} else if (status.msg === "package_download_complete") {
@@ -173,7 +173,7 @@ export const CarUpdatesProvider = ({ children }) => {
item.status = "download complete";
return;
} else if (status.msg === "installing") {
item.progress = getInstallProgress(status);
item.progress = installPercent(status);
item.status = `${item.ecu || ""} installing ${item.progress}%`.trim();
return;
} else if (status.msg === "package_install_complete") {

72
src/components/Contexts/FleetContext.jsx
View File

@@ -1,7 +1,10 @@
import React, { useContext, useState } from "react";
import React, { useContext, useState, useEffect, useRef } from "react";
import api from "../../services/fleetsAPI";
import updatesApi from "../../services/updatesAPI";
import vehiclesAPI from "../../services/vehiclesAPI";
import { downloadPercent, installPercent } from "./CarUpdatesContext";
import { validateCANID, validateFilter, validateVIN } from "../../utils/validationSupplier";
import Polling from "../../utils/polling";
const FleetContext = React.createContext();
@@ -16,6 +19,10 @@ export const FleetProvider = ({ children }) => {
const [fleetVehicles, setFleetVehicles] = useState([]);
const [totalFleetVehicles, setTotalFleetVehicles] = useState(0);
const [carUpdateIds, setCarUpdateIds] = useState([]);
const carUpdateIdsRef = useRef();
carUpdateIdsRef.current = carUpdateIds;
const [fleetCANFilters, setFleetCANFilters] = useState([]);
const [totalFleetCANFilters, setTotalFleetCANFilters] = useState(0);
@@ -115,7 +122,7 @@ export const FleetProvider = ({ children }) => {
const vins = result.data.map(vehicle => vehicle.vin);
const connectionsResult = await vehiclesAPI.getConnections({ "VINs": vins }, token)
if (result.error) {
if (connectionsResult.error) {
setFleetVehicles([])
throw new Error(`Get vehicles connections error. ${result.message}`);
}
@@ -127,8 +134,12 @@ export const FleetProvider = ({ children }) => {
connected: connectionsResult[vehicle.vin] || false,
connectedHMI: connectionsResult[`2:${vehicle.vin}`] || false,
trex_version: vehicle.carstate?.trex_version || "",
})
})
car_update_id: vehicle.carupdate?.id || "",
car_update_name: vehicle.carupdate?.updatemanifest?.name || "",
car_update_status: vehicle.carupdate?.status || "",
car_update_type: vehicle.carupdate?.updatemanifest?.type || "",
});
});
setFleetVehicles(cars)
if (result.total) {
@@ -140,6 +151,52 @@ export const FleetProvider = ({ children }) => {
}
};
const watchFleetVehicles = new Polling(async ({ token }) => {
const result = await updatesApi.getCarUpdateProgress(
carUpdateIdsRef.current.join(","),
token
);
let pivot = result.statuses.length - 1;
setFleetVehicles((fleetVehicles) => fleetVehicles.map((vehicle) => {
result.statuses.find((status, i) => {
if (vehicle.car_update_id !== status.car_update_id) {
return false;
}
switch (status.msg) {
case "downloading":
vehicle.car_update_progress = downloadPercent();
vehicle.car_update_status = `${status.ecu} downloading ${vehicle.car_update_progress}%`.trim();
break;
case "package_download_complete":
vehicle.car_update_progress = 100;
vehicle.car_update_status = `download complete`;
break;
case "installing":
vehicle.car_update_progress = installPercent();
vehicle.car_update_status = `${status.ecu} installing ${vehicle.car_update_progress}%`.trim();
break;
case "package_install_complete":
vehicle.car_update_progress = 100;
vehicle.car_update_status = `install complete`;
break;
default:
vehicle.car_update_progress = -1;
break;
}
// Move found status' to end to reduce time complexity to Ologn
result.statuses[i] = result.statuses[pivot];
result.statuses[pivot] = status;
pivot -= 1;
return true;
});
return vehicle;
}));
return Promise.resolve();
}, 2000);
const addFleetVehicles = async (name, vehicles, token) => {
try {
setBusy(true);
@@ -254,6 +311,12 @@ export const FleetProvider = ({ children }) => {
}
};
useEffect(() => {
setCarUpdateIds(() => fleetVehicles
.filter((vehicle) => vehicle.car_update_status !== "installed")
.map((vehicle) => vehicle.car_update_id));
}, [fleetVehicles, setCarUpdateIds]);
return (
<FleetContext.Provider
value={{
@@ -270,6 +333,7 @@ export const FleetProvider = ({ children }) => {
fleetVehicles,
totalFleetVehicles,
watchFleetVehicles,
getFleetVehicles,
addFleetVehicles,
deleteFleetVehicle,

12
src/components/Contexts/FleetContext.test.jsx
View File

@@ -805,18 +805,30 @@ const expectedFleetVehiclesData = [
connected: true,
connectedHMI: false,
trex_version: "",
car_update_id: "",
car_update_name: "",
car_update_status: "",
car_update_type: "",
},
{
vin: "USWESTVIN12345679",
connected: true,
connectedHMI: false,
trex_version: "",
car_update_id: "",
car_update_name: "",
car_update_status: "",
car_update_type: "",
},
{
vin: "USWESTVIN12345670",
connected: true,
connectedHMI: false,
trex_version: "",
car_update_id: "",
car_update_name: "",
car_update_status: "",
car_update_type: "",
},
];

3
src/components/Contexts/__mocks__/FleetContext.jsx
View File

@@ -1,3 +1,5 @@
import Polling from "../../../utils/polling";
let busy = false;
let fleetCANFilters = [
{
@@ -66,6 +68,7 @@ export const useFleetContext = () => ({
fleetVehicles,
totalFleetVehicles,
watchFleetVehicles: new Polling(jest.fn(), 0),
getFleetVehicles: jest.fn().mockImplementation((name, search, _token) => {
const result = [
{

46
src/components/Fleets/Status/Vehicles/Table/__snapshots__/index.test.jsx.snap
View File

@@ -150,6 +150,52 @@ exports[`FleetVehiclesTable Render 1`] = `
</svg>
</span>
</th>
<th
class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
scope="col"
>
<span
aria-disabled="false"
class="MuiButtonBase-root MuiTableSortLabel-root"
role="button"
tabindex="0"
>
Car Update
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
/>
</svg>
</span>
</th>
<th
class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
scope="col"
>
<span
aria-disabled="false"
class="MuiButtonBase-root MuiTableSortLabel-root"
role="button"
tabindex="0"
>
Car Update Status
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
/>
</svg>
</span>
</th>
<th
class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
scope="col"

29
src/components/Fleets/Status/Vehicles/Table/index.jsx
View File

@@ -1,5 +1,6 @@
import {
Grid,
LinearProgress,
Table,
TableBody,
TableCell,
@@ -38,6 +39,14 @@ const tableColumns = [
id: "trex_version",
label: "T.REX Version",
},
{
id: "car_update",
label: "Car Update",
},
{
id: "car_update_status",
label: "Car Update Status",
},
{
id: "",
label: "Actions",
@@ -58,6 +67,7 @@ const MainForm = ({ name }) => {
const {
fleetVehicles,
totalFleetVehicles,
watchFleetVehicles,
getFleetVehicles,
deleteFleetVehicle,
} = useFleetContext();
@@ -87,11 +97,15 @@ const MainForm = ({ name }) => {
},
token
);
watchFleetVehicles.start({ token });
} catch (e) {
setMessage(e.message);
logger.warn(e.stack);
}
})();
return () => {
watchFleetVehicles.end();
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [token, pageIndex, pageSize, orderBy, order, search]);
@@ -209,7 +223,20 @@ const MainForm = ({ name }) => {
<Link key={"link" + car.vin} to={`/vehicle-status/${car.vin}`}>{car.vin}</Link>
</TableCell>
<TableCell key={"cell2" + car.vin} align="center">{car.trex_version}</TableCell>
<TableCell key={"cell3" + car.vin} align="center">{Actions(car.vin)}</TableCell>
<TableCell key={"cell3" + car.car_update_name}>
<Tooltip key={"cell3tooltip"} title={`${car.car_update_id} / ${car.car_update_type}`}>
<Link to={`/vehicle-status/${car.vin}/${car.car_update_id}`} className={classes.truncateCell}>
{car.car_update_name}
</Link>
</Tooltip>
</TableCell>
<TableCell key={"cell4" + car.car_update_status}>
{car.car_update_status}
{car.car_update_progress > -1 && (
<LinearProgress variant="determinate" value={car.car_update_progress} />
)}
</TableCell>
<TableCell key={"cell5" + car.vin} align="center">{Actions(car.vin)}</TableCell>
</TableRow>
)
))}

46
src/components/Fleets/Status/__snapshots__/VehiclesTab.test.jsx.snap
View File

@@ -149,6 +149,52 @@ exports[`VehiclesTab Render 1`] = `
</svg>
</span>
</th>
<th
class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
scope="col"
>
<span
aria-disabled="false"
class="MuiButtonBase-root MuiTableSortLabel-root"
role="button"
tabindex="0"
>
Car Update
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
/>
</svg>
</span>
</th>
<th
class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
scope="col"
>
<span
aria-disabled="false"
class="MuiButtonBase-root MuiTableSortLabel-root"
role="button"
tabindex="0"
>
Car Update Status
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
/>
</svg>
</span>
</th>
<th
class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
scope="col"

7
src/components/useStyles.jsx
View File

@@ -327,6 +327,13 @@ const useStyles = makeStyles((theme) => ({
noWrap: {
whiteSpace: "nowrap",
},
truncateCell: {
textOverflow: "ellipsis",
maxWidth: "200px",
overflow: "hidden",
display: "inline-block",
whiteSpace: "nowrap",
}
}));
export default useStyles;