Merge branch 'development' into main
This commit is contained in:
jwu-fisker
75
package-lock.json
generated
75
package-lock.json
generated
@@ -1275,9 +1275,9 @@
|
||||
"integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg=="
|
||||
},
|
||||
"@datadog/browser-core": {
|
||||
"version": "2.8.1",
|
||||
"resolved": "https://registry.npmjs.org/@datadog/browser-core/-/browser-core-2.8.1.tgz",
|
||||
"integrity": "sha512-pxY/jOtWGpWcs04LPKBSXd0bChzgQY0oiActomB+z7xdhmqGB/R0Fy50ZA1gtJXny3Pava1O7tIY51E/CiH0Vg==",
|
||||
"version": "2.15.0",
|
||||
"resolved": "https://registry.npmjs.org/@datadog/browser-core/-/browser-core-2.15.0.tgz",
|
||||
"integrity": "sha512-qWTAysGYQXVpM5FOdstaqIF6B99nyQ2N/rJsi1ruPgFmU9yMM9tRdvqiJ7NZcy+OOsZWiinvFRFUMv9SOsHeUA==",
|
||||
"requires": {
|
||||
"tslib": "^1.10.0"
|
||||
},
|
||||
@@ -1314,12 +1314,12 @@
|
||||
}
|
||||
},
|
||||
"@datadog/browser-rum": {
|
||||
"version": "2.8.1",
|
||||
"resolved": "https://registry.npmjs.org/@datadog/browser-rum/-/browser-rum-2.8.1.tgz",
|
||||
"integrity": "sha512-p/tp1869oyJXutOyr67Aip3e3tIJpSarO3RAwf2mt1evEbUfvopwNWfQPKifMzbtMRwRA26O9nmZ7wEKjMxvxA==",
|
||||
"version": "2.15.0",
|
||||
"resolved": "https://registry.npmjs.org/@datadog/browser-rum/-/browser-rum-2.15.0.tgz",
|
||||
"integrity": "sha512-E9PmGHxGQEdn8SUA7DmUu2mf/ifWGXLuGm95Hes/+dqoXbIPryFdmPCFnHaVF2nZNIA7wwW23oqe60KKo2Qjaw==",
|
||||
"requires": {
|
||||
"@datadog/browser-core": "2.8.1",
|
||||
"@datadog/browser-rum-core": "2.8.1",
|
||||
"@datadog/browser-core": "2.15.0",
|
||||
"@datadog/browser-rum-core": "2.15.0",
|
||||
"tslib": "^1.10.0"
|
||||
},
|
||||
"dependencies": {
|
||||
@@ -1331,11 +1331,11 @@
|
||||
}
|
||||
},
|
||||
"@datadog/browser-rum-core": {
|
||||
"version": "2.8.1",
|
||||
"resolved": "https://registry.npmjs.org/@datadog/browser-rum-core/-/browser-rum-core-2.8.1.tgz",
|
||||
"integrity": "sha512-5z95vUEWwugcokv/vTKxQ26oW50Uv5XxoNkg/sgwDZFrIcOpjMqzRwEaot/dUM2w+THobnRzufBBYJcXmj5HpQ==",
|
||||
"version": "2.15.0",
|
||||
"resolved": "https://registry.npmjs.org/@datadog/browser-rum-core/-/browser-rum-core-2.15.0.tgz",
|
||||
"integrity": "sha512-XXEe3JpSyvSvYXpXz/MgrVqs5Rl4Zu2eJXmHfxafAxb3i+VxyA6vc/pLnXPaKeWVcO489MpBEr6Gv7HiOEFZNA==",
|
||||
"requires": {
|
||||
"@datadog/browser-core": "2.8.1",
|
||||
"@datadog/browser-core": "2.15.0",
|
||||
"tslib": "^1.10.0"
|
||||
},
|
||||
"dependencies": {
|
||||
@@ -2075,16 +2075,16 @@
|
||||
}
|
||||
},
|
||||
"@testing-library/dom": {
|
||||
"version": "7.30.4",
|
||||
"resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-7.30.4.tgz",
|
||||
"integrity": "sha512-GObDVMaI4ARrZEXaRy4moolNAxWPKvEYNV/fa6Uc2eAzR/t4otS6A7EhrntPBIQLeehL9DbVhscvvv7gd6hWqA==",
|
||||
"version": "7.31.2",
|
||||
"resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-7.31.2.tgz",
|
||||
"integrity": "sha512-3UqjCpey6HiTZT92vODYLPxTBWlM8ZOOjr3LX5F37/VRipW2M1kX6I/Cm4VXzteZqfGfagg8yXywpcOgQBlNsQ==",
|
||||
"requires": {
|
||||
"@babel/code-frame": "^7.10.4",
|
||||
"@babel/runtime": "^7.12.5",
|
||||
"@types/aria-query": "^4.2.0",
|
||||
"aria-query": "^4.2.2",
|
||||
"chalk": "^4.1.0",
|
||||
"dom-accessibility-api": "^0.5.4",
|
||||
"dom-accessibility-api": "^0.5.6",
|
||||
"lz-string": "^1.4.4",
|
||||
"pretty-format": "^26.6.2"
|
||||
},
|
||||
@@ -2101,9 +2101,9 @@
|
||||
}
|
||||
},
|
||||
"@testing-library/jest-dom": {
|
||||
"version": "5.12.0",
|
||||
"resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.12.0.tgz",
|
||||
"integrity": "sha512-N9Y82b2Z3j6wzIoAqajlKVF1Zt7sOH0pPee0sUHXHc5cv2Fdn23r+vpWm0MBBoGJtPOly5+Bdx1lnc3CD+A+ow==",
|
||||
"version": "5.14.1",
|
||||
"resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.14.1.tgz",
|
||||
"integrity": "sha512-dfB7HVIgTNCxH22M1+KU6viG5of2ldoA5ly8Ar8xkezKHKXjRvznCdbMbqjYGgO2xjRbwnR+rR8MLUIqF3kKbQ==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.9.2",
|
||||
"@types/testing-library__jest-dom": "^5.9.1",
|
||||
@@ -2111,14 +2111,15 @@
|
||||
"chalk": "^3.0.0",
|
||||
"css": "^3.0.0",
|
||||
"css.escape": "^1.5.1",
|
||||
"dom-accessibility-api": "^0.5.6",
|
||||
"lodash": "^4.17.15",
|
||||
"redent": "^3.0.0"
|
||||
}
|
||||
},
|
||||
"@testing-library/react": {
|
||||
"version": "11.2.6",
|
||||
"resolved": "https://registry.npmjs.org/@testing-library/react/-/react-11.2.6.tgz",
|
||||
"integrity": "sha512-TXMCg0jT8xmuU8BkKMtp8l7Z50Ykew5WNX8UoIKTaLFwKkP2+1YDhOLA2Ga3wY4x29jyntk7EWfum0kjlYiSjQ==",
|
||||
"version": "11.2.7",
|
||||
"resolved": "https://registry.npmjs.org/@testing-library/react/-/react-11.2.7.tgz",
|
||||
"integrity": "sha512-tzRNp7pzd5QmbtXNG/mhdcl7Awfu/Iz1RaVHY75zTdOkmHCuzMhRL83gWHSgOAcjS3CCbyfwUHMZgRJb4kAfpA==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.12.5",
|
||||
"@testing-library/dom": "^7.28.1"
|
||||
@@ -2344,9 +2345,9 @@
|
||||
"integrity": "sha512-0VBprVqfgFD7Ehb2vd8Lh9TG3jP98gvr8rgehQqzztZNI7o8zS8Ad4jyZneKELphpuE212D8J70LnSNQSyO6bQ=="
|
||||
},
|
||||
"@types/testing-library__jest-dom": {
|
||||
"version": "5.9.5",
|
||||
"resolved": "https://registry.npmjs.org/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.9.5.tgz",
|
||||
"integrity": "sha512-ggn3ws+yRbOHog9GxnXiEZ/35Mow6YtPZpd7Z5mKDeZS/o7zx3yAle0ov/wjhVB5QT4N2Dt+GNoGCdqkBGCajQ==",
|
||||
"version": "5.14.0",
|
||||
"resolved": "https://registry.npmjs.org/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.0.tgz",
|
||||
"integrity": "sha512-l2P2GO+hFF4Liye+fAajT1qBqvZOiL79YMpEvgGs1xTK7hECxBI8Wz4J7ntACJNiJ9r0vXQqYovroXRLPDja6A==",
|
||||
"requires": {
|
||||
"@types/jest": "*"
|
||||
}
|
||||
@@ -2967,11 +2968,6 @@
|
||||
"resolved": "https://registry.npmjs.org/async-each/-/async-each-1.0.3.tgz",
|
||||
"integrity": "sha512-z/WhQ5FPySLdvREByI2vZiTWwCnF0moMJ1hK9YQwDTHKh6I7/uSckMetoRGb5UBZPC1z0jlw+n/XCgjeH7y1AQ=="
|
||||
},
|
||||
"async-limiter": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.1.tgz",
|
||||
"integrity": "sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ=="
|
||||
},
|
||||
"asynckit": {
|
||||
"version": "0.4.0",
|
||||
"resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
|
||||
@@ -5109,9 +5105,9 @@
|
||||
}
|
||||
},
|
||||
"dom-accessibility-api": {
|
||||
"version": "0.5.4",
|
||||
"resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.4.tgz",
|
||||
"integrity": "sha512-TvrjBckDy2c6v6RLxPv5QXOnU+SmF9nBII5621Ve5fu6Z/BDrENurBEvlC1f44lKEUVqOpK4w9E5Idc5/EgkLQ=="
|
||||
"version": "0.5.6",
|
||||
"resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.6.tgz",
|
||||
"integrity": "sha512-DplGLZd8L1lN64jlT27N9TVSESFR5STaEJvX+thCby7fuCHonfPpAlodYc3vuUYbDuDec5w8AMP7oCM5TWFsqw=="
|
||||
},
|
||||
"dom-converter": {
|
||||
"version": "0.2.0",
|
||||
@@ -15968,11 +15964,18 @@
|
||||
}
|
||||
},
|
||||
"ws": {
|
||||
"version": "6.2.1",
|
||||
"resolved": "https://registry.npmjs.org/ws/-/ws-6.2.1.tgz",
|
||||
"integrity": "sha512-GIyAXC2cB7LjvpgMt9EKS2ldqr0MTrORaleiOno6TweZ6r3TKtoFQWay/2PceJ3RuBasOHzXNn5Lrw1X0bEjqA==",
|
||||
"version": "6.2.2",
|
||||
"resolved": "https://registry.npmjs.org/ws/-/ws-6.2.2.tgz",
|
||||
"integrity": "sha512-zmhltoSR8u1cnDsD43TX59mzoMZsLKqUweyYBAIvTngR3shc0W6aOZylZmq/7hqyVxPdi+5Ud2QInblgyE72fw==",
|
||||
"requires": {
|
||||
"async-limiter": "~1.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"async-limiter": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.1.tgz",
|
||||
"integrity": "sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ=="
|
||||
}
|
||||
}
|
||||
},
|
||||
"yargs": {
|
||||
|
||||
@@ -4,11 +4,11 @@
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@datadog/browser-logs": "^2.15.0",
|
||||
"@datadog/browser-rum": "^2.8.1",
|
||||
"@datadog/browser-rum": "^2.15.0",
|
||||
"@material-ui/core": "^4.11.4",
|
||||
"@material-ui/icons": "^4.11.2",
|
||||
"@testing-library/jest-dom": "^5.12.0",
|
||||
"@testing-library/react": "^11.2.6",
|
||||
"@testing-library/jest-dom": "^5.14.1",
|
||||
"@testing-library/react": "^11.2.7",
|
||||
"@testing-library/user-event": "^12.8.3",
|
||||
"axios": "^0.21.1",
|
||||
"clsx": "^1.1.1",
|
||||
@@ -49,5 +49,8 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"react-test-renderer": "^17.0.2"
|
||||
},
|
||||
"jest": {
|
||||
"globalSetup": "./testEnv.js"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,6 +2,8 @@ jest.mock("../Contexts/FileUploadContext");
|
||||
jest.mock("../Contexts/VehicleContext");
|
||||
jest.mock("../Contexts/UpdatesContext");
|
||||
jest.mock("../Contexts/UserContext");
|
||||
jest.mock("../Contexts/ManifestsContext");
|
||||
jest.mock("../Contexts/CarUpdatesContext");
|
||||
jest.mock("../../services/monitoring");
|
||||
|
||||
import { render, screen, cleanup, waitForElementToBeRemoved } from "@testing-library/react";
|
||||
@@ -91,6 +93,18 @@ describe("App", () => {
|
||||
await check("/dashboard", "span.MuiButton-label", "Sign In");
|
||||
});
|
||||
|
||||
it("Route /manifests unauthenticated", async () => {
|
||||
await check("/manifests", "span.MuiButton-label", "Sign In");
|
||||
});
|
||||
|
||||
it("Route /manifest-status unauthenticated", async () => {
|
||||
await check("/manifest-status/1", "span.MuiButton-label", "Sign In");
|
||||
});
|
||||
|
||||
it("Route /manifest-deploy unauthenticated", async () => {
|
||||
await check("/manifest-deploy/1", "span.MuiButton-label", "Sign In");
|
||||
});
|
||||
|
||||
it("Route / authenticated", async () => {
|
||||
setToken(TEST_AUTH_OBJECT);
|
||||
await check("/", "h1", "Welcome John!");
|
||||
@@ -155,4 +169,18 @@ describe("App", () => {
|
||||
await check("/dashboard", "h6", "Dashboard");
|
||||
});
|
||||
|
||||
it("Route /manifests authenticated", async () => {
|
||||
setToken(TEST_AUTH_OBJECT);
|
||||
await check("/manifests", "h6", "Deploy Manifest");
|
||||
});
|
||||
|
||||
it("Route /manifest-status authenticated", async () => {
|
||||
setToken(TEST_AUTH_OBJECT);
|
||||
await check("/manifest-status/1", "h6", "Manifest Test Manifest 1.0");
|
||||
});
|
||||
|
||||
it("Route /manifest-deploy authenticated", async () => {
|
||||
setToken(TEST_AUTH_OBJECT);
|
||||
await check("/manifest-deploy/1", "h6", "Deploy Test Manifest 1.0");
|
||||
});
|
||||
});
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -17,6 +17,7 @@ import { LocalDateTimeString } from "../../../utils/dates";
|
||||
import TableHeaderSortable from "../../Table/HeaderSortable";
|
||||
import { logger } from "../../../services/monitoring";
|
||||
import ConnectedIcon from "../../Controls/ConnectedIcon";
|
||||
import ECUList from "../../Controls/ECUList";
|
||||
|
||||
const tableColumns = [
|
||||
{
|
||||
@@ -53,7 +54,7 @@ const CarSelectionTable = (props) => {
|
||||
const [order, setOrder] = useState("asc");
|
||||
const { getVehicles, vehicles, totalVehicles } = useVehicleContext();
|
||||
const { setMessage } = useStatusContext();
|
||||
|
||||
const { search: searchTerm } = search;
|
||||
const sortHandler = (event, property) => {
|
||||
if (property === orderBy) {
|
||||
if (order === "asc") {
|
||||
@@ -143,6 +144,12 @@ const CarSelectionTable = (props) => {
|
||||
style={{ marginRight: 5 }}
|
||||
/>
|
||||
<Link to={`/vehicle-status/${row.vin}`}>{row.vin}</Link>
|
||||
{row.ecu_list && (
|
||||
<>
|
||||
<br />
|
||||
<ECUList list={row.ecu_list} search={searchTerm} />
|
||||
</>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell align="center">{row.model}</TableCell>
|
||||
<TableCell align="center">{row.year}</TableCell>
|
||||
|
||||
@@ -22,6 +22,7 @@ import TableHeaderSortable from "../../Table/HeaderSortable";
|
||||
import SearchField from "../../Controls/SearchField";
|
||||
import { logger } from "../../../services/monitoring";
|
||||
import ConnectedIcon from "../../Controls/ConnectedIcon";
|
||||
import ECUList from "../../Controls/ECUList";
|
||||
|
||||
const tableColumns = [
|
||||
{
|
||||
@@ -138,6 +139,12 @@ const MainForm = () => {
|
||||
style={{ marginRight: 5 }}
|
||||
/>
|
||||
<Link to={`/vehicle-status/${row.vin}`}>{row.vin}</Link>
|
||||
{row.ecu_list && (
|
||||
<>
|
||||
<br />
|
||||
<ECUList list={row.ecu_list} search={search} />
|
||||
</>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell align="center">{row.model}</TableCell>
|
||||
<TableCell align="center">{row.year}</TableCell>
|
||||
|
||||
176
src/components/Contexts/CarUpdatesContext.jsx
Normal file
176
src/components/Contexts/CarUpdatesContext.jsx
Normal file
@@ -0,0 +1,176 @@
|
||||
import React, { useContext, useState } from "react";
|
||||
|
||||
import api from "../../services/updates";
|
||||
|
||||
const CarUpdatesContext = React.createContext();
|
||||
|
||||
const validateDeployCarUpdates = (data) => {
|
||||
if (data === null) {
|
||||
throw new Error("No car update data");
|
||||
}
|
||||
|
||||
if (!data.manifest_id || data.manifest_id === 0) {
|
||||
throw new Error("Manifest id required");
|
||||
}
|
||||
|
||||
if (!data.vins || data.vins.length === 0) {
|
||||
throw new Error("Cars are required");
|
||||
}
|
||||
};
|
||||
|
||||
export const CarUpdatesProvider = ({ children }) => {
|
||||
const [busy, setBusy] = useState(false);
|
||||
const [carUpdates, setCarUpdates] = useState([]);
|
||||
const [totalCarUpdates, setTotalCarUpdates] = useState(0);
|
||||
const [delayCount, setDelayCount] = useState(0);
|
||||
let progressTimer = 0;
|
||||
|
||||
const deployCarUpdates = async (data, token) => {
|
||||
let result;
|
||||
|
||||
try {
|
||||
setBusy(true);
|
||||
validateDeployCarUpdates(data);
|
||||
result = await api.createCarUpdates(data, token);
|
||||
if (result.error)
|
||||
throw new Error(`Deploy car updates error. ${result.message}`);
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
|
||||
return result;
|
||||
};
|
||||
|
||||
const getCarUpdates = async (search, token) => {
|
||||
let result;
|
||||
|
||||
try {
|
||||
setBusy(true);
|
||||
result = await api.getCarUpdates(search, token);
|
||||
if (result.error)
|
||||
throw new Error(`Get car updates error. ${result.message}`);
|
||||
setCarUpdates(result.data);
|
||||
if (search && search.offset === 0 && result.total) {
|
||||
setTotalCarUpdates(result.total);
|
||||
}
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
|
||||
return result;
|
||||
};
|
||||
|
||||
const getVINUpdates = async (vin, token) => {
|
||||
let result;
|
||||
|
||||
try {
|
||||
setBusy(true);
|
||||
result = await api.getVINUpdates(vin, token);
|
||||
if (result.error)
|
||||
throw new Error(`Get VIN updates error. ${result.message}`);
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
|
||||
return result;
|
||||
};
|
||||
|
||||
const applyProgressStatus = (item, status) => {
|
||||
if (status.msg === "DONE") {
|
||||
delete item.progress;
|
||||
item.status = "downloaded";
|
||||
} else if (status.msg === "downloading" && status.total > 0) {
|
||||
let progress = Math.floor((100 * status.bytes) / status.total);
|
||||
if (progress > 99) progress = 0;
|
||||
item.progress = progress;
|
||||
item.status = `downloading ${progress}%`;
|
||||
} else if (status.error > 0) {
|
||||
item.status = "download error";
|
||||
} else {
|
||||
item.status = "downloading";
|
||||
}
|
||||
};
|
||||
|
||||
const applyProgressStatuses = (statuses) => {
|
||||
let items = JSON.parse(JSON.stringify(carUpdates));
|
||||
|
||||
statuses.forEach((status) => {
|
||||
let item = items.find((item) => status.id === item.id);
|
||||
if (!item || status.id === 0) return;
|
||||
applyProgressStatus(item, status);
|
||||
});
|
||||
|
||||
setCarUpdates(items);
|
||||
};
|
||||
|
||||
const updateStatusProgress = async (token) => {
|
||||
stopMonitor();
|
||||
|
||||
if (!token || carUpdates.length === 0) return;
|
||||
|
||||
try {
|
||||
setBusy(true);
|
||||
const carupdateids = carUpdates.reduce((accum, update) => {
|
||||
if (update.status !== "downloaded") accum.push(update.id);
|
||||
return accum;
|
||||
}, []);
|
||||
if (carupdateids.length === 0) return;
|
||||
|
||||
const result = await api.getCarUpdateProgress(
|
||||
carupdateids.join(","),
|
||||
token
|
||||
);
|
||||
if (result.error)
|
||||
throw new Error(`Get update progress error. ${result.message}`);
|
||||
|
||||
applyProgressStatuses(result.statuses);
|
||||
} catch (e) {
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
};
|
||||
|
||||
const getDelay = () => {
|
||||
if (delayCount < 3) {
|
||||
setDelayCount(delayCount + 1);
|
||||
return 1000;
|
||||
}
|
||||
for (let i = 0, len = carUpdates.length; i < len; i++) {
|
||||
if (carUpdates[i].status.indexOf("downloading") > -1) return 1000;
|
||||
}
|
||||
return 10000;
|
||||
};
|
||||
|
||||
const startMonitor = async (token) => {
|
||||
const delay = getDelay();
|
||||
stopMonitor();
|
||||
progressTimer = setTimeout(() => {
|
||||
updateStatusProgress(token);
|
||||
}, delay);
|
||||
};
|
||||
|
||||
const stopMonitor = async () => {
|
||||
if (progressTimer === 0) return;
|
||||
clearTimeout(progressTimer);
|
||||
progressTimer = 0;
|
||||
};
|
||||
|
||||
return (
|
||||
<CarUpdatesContext.Provider
|
||||
value={{
|
||||
busy,
|
||||
carUpdates,
|
||||
totalCarUpdates,
|
||||
deployCarUpdates,
|
||||
getCarUpdates,
|
||||
getVINUpdates,
|
||||
startMonitor,
|
||||
stopMonitor,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</CarUpdatesContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
export const useCarUpdatesContext = () => useContext(CarUpdatesContext);
|
||||
66
src/components/Contexts/ManifestsContext.jsx
Normal file
66
src/components/Contexts/ManifestsContext.jsx
Normal file
@@ -0,0 +1,66 @@
|
||||
import React, { useContext, useState } from "react";
|
||||
|
||||
import api from "../../services/manifests";
|
||||
|
||||
const ManifestsContext = React.createContext();
|
||||
|
||||
export const ManifestsProvider = ({ children }) => {
|
||||
const [busy, setBusy] = useState(false);
|
||||
const [manifests, setManifests] = useState([]);
|
||||
const [totalManifests, setTotalManifests] = useState(0);
|
||||
|
||||
const getManifests = async (search, token) => {
|
||||
let result;
|
||||
|
||||
try {
|
||||
setBusy(true);
|
||||
result = await api.getManifests(search, token);
|
||||
if (result.error)
|
||||
throw new Error(`Get manifests error. ${result.message}`);
|
||||
setManifests(result.data);
|
||||
if (search && search.offset === 0 && result.total) {
|
||||
setTotalManifests(result.total);
|
||||
}
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
|
||||
return result;
|
||||
};
|
||||
|
||||
const deleteManifest = async (package_id, token) => {
|
||||
let result;
|
||||
|
||||
const index = manifests.findIndex((element) => {
|
||||
return element.id === package_id;
|
||||
});
|
||||
manifests.splice(index, 1);
|
||||
|
||||
try {
|
||||
setBusy(true);
|
||||
result = await api.deleteManifest(package_id, token);
|
||||
if (result.error)
|
||||
throw new Error(`Delete manifest error. ${result.message}`);
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
|
||||
return result;
|
||||
};
|
||||
|
||||
return (
|
||||
<ManifestsContext.Provider
|
||||
value={{
|
||||
busy,
|
||||
manifests,
|
||||
totalManifests,
|
||||
getManifests,
|
||||
deleteManifest,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</ManifestsContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
export const useManifestsContext = () => useContext(ManifestsContext);
|
||||
@@ -13,7 +13,7 @@ import { TEST_AUTH_OBJECT } from "../../utils/testing";
|
||||
|
||||
describe("UpdatesContext", () => {
|
||||
describe("getPackages", () => {
|
||||
const expectedData = `[{"id":1,"package_name":"Test","version":"1.0","link":"http://cloudfront.com/download"},{"id":2,"package_name":"Test","version":"1.1","link":"http://cloudfront.com/download"},{"id":3,"package_name":"Test","version":"1.2","link":"http://cloudfront.com/download"}]`;
|
||||
const expectedData = `[{"id":1,"package_name":"Test","version":"1.0","link":"http://cloudfront.com/download","ecu_list":"ECU1 1.0.0,ECU2 1.0.2"},{"id":2,"package_name":"Test","version":"1.1","link":"http://cloudfront.com/download","ecu_list":"ECU1 1.0.1,ECU2 1.0.2"},{"id":3,"package_name":"Test","version":"1.2","link":"http://cloudfront.com/download","ecu_list":"ECU1 1.1.0,ECU2 1.1.2"}]`;
|
||||
const checkState = (busy, packages, message) => {
|
||||
expect(screen.getByTestId("busy").innerHTML).toEqual(busy);
|
||||
expect(screen.getByTestId("packages").innerHTML).toEqual(packages);
|
||||
|
||||
@@ -134,11 +134,30 @@ describe("VehicleContext", () => {
|
||||
});
|
||||
|
||||
const expectedVehicleData = [
|
||||
{ vin: "3C4PDCBG0ET127145", connected: true },
|
||||
{
|
||||
vin: "3C4PDCBG0ET127145",
|
||||
year: 2021,
|
||||
model: "Ocean",
|
||||
trim: "Basic",
|
||||
ecu_list: "ECUA 2.0.0, ECUB 2.1.1",
|
||||
connected: true,
|
||||
},
|
||||
{ vin: "1G1FP87S3GN100062", connected: true },
|
||||
{ vin: "1HGCG325XYA062256", connected: true },
|
||||
{ vin: "1J4GZ78YXWC160024", connected: true },
|
||||
{ vin: "2C3CCAAG8CH222800", connected: true },
|
||||
{ vin: "KNADM4A39C6028108", connected: true },
|
||||
{ vin: "1G11C5SL9FF153507", connected: true },
|
||||
{ vin: "1HGCG325XYA062256", year: 2021, connected: true },
|
||||
{ vin: "1J4GZ78YXWC160024", year: 2021, model: "Ocean", connected: true },
|
||||
{ vin: "2C3CCAAG8CH222800", model: "Ocean", trim: "Basic", connected: true },
|
||||
{
|
||||
vin: "KNADM4A39C6028108",
|
||||
year: 2021,
|
||||
model: "Ocean",
|
||||
trim: "Basic",
|
||||
connected: true,
|
||||
},
|
||||
{
|
||||
vin: "1G11C5SL9FF153507",
|
||||
year: 2021,
|
||||
model: "Ocean",
|
||||
trim: "Basic",
|
||||
connected: true,
|
||||
},
|
||||
];
|
||||
|
||||
31
src/components/Contexts/__mocks__/CarUpdatesContext.jsx
Normal file
31
src/components/Contexts/__mocks__/CarUpdatesContext.jsx
Normal file
@@ -0,0 +1,31 @@
|
||||
import React from "react";
|
||||
|
||||
const CarUpdatesContext = React.createContext();
|
||||
|
||||
let busy = false;
|
||||
let carUpdates = [
|
||||
{
|
||||
id: 1,
|
||||
vin: "1G1FP87S3GN100062",
|
||||
updatepackage_id: 18,
|
||||
status: "downloaded",
|
||||
created: "2021-07-01T22:40:07.778509Z",
|
||||
updated: "2021-07-12T18:22:13.736755Z",
|
||||
},
|
||||
];
|
||||
let totalCarUpdates = 1;
|
||||
|
||||
export const CarUpdatesProvider = ({ children }) => {
|
||||
return <div data-testid="mocked-carupdatesprovider">{children}</div>;
|
||||
};
|
||||
|
||||
export const useCarUpdatesContext = () => ({
|
||||
busy,
|
||||
carUpdates,
|
||||
totalCarUpdates,
|
||||
deployCarUpdates: jest.fn((data) => data),
|
||||
getCarUpdates: jest.fn(() => carUpdates),
|
||||
getVINUpdates: jest.fn(() => carUpdates),
|
||||
startMonitor: jest.fn(),
|
||||
stopMonitor: jest.fn(),
|
||||
});
|
||||
27
src/components/Contexts/__mocks__/ManifestsContext.jsx
Normal file
27
src/components/Contexts/__mocks__/ManifestsContext.jsx
Normal file
@@ -0,0 +1,27 @@
|
||||
import React from "react";
|
||||
|
||||
const ManifestsContext = React.createContext();
|
||||
|
||||
let busy = false;
|
||||
let manifests = [
|
||||
{
|
||||
id: 1,
|
||||
name: "Test Manifest",
|
||||
version: "1.0",
|
||||
created: "2021-07-01T22:40:07.778509Z",
|
||||
updated: "2021-07-12T18:22:13.736755Z",
|
||||
},
|
||||
];
|
||||
let totalManifests = 1;
|
||||
|
||||
export const ManifestsProvider = ({ children }) => {
|
||||
return <div data-testid="mocked-manifestsprovider">{children}</div>;
|
||||
};
|
||||
|
||||
export const useManifestsContext = () => ({
|
||||
busy,
|
||||
manifests,
|
||||
totalManifests,
|
||||
getManifests: jest.fn(() => manifests),
|
||||
deleteManifest: jest.fn(),
|
||||
});
|
||||
@@ -10,9 +10,11 @@ const examplePackage = {
|
||||
version: "1.0",
|
||||
desc: "Description",
|
||||
release_notes: "https://www.google.com/",
|
||||
created: Date.now().toString(),
|
||||
timestamp: 1625615299,
|
||||
created: "2021-07-01T22:40:07.778509Z",
|
||||
updated: "2021-07-12T18:22:13.736755Z",
|
||||
};
|
||||
packages.push(examplePackage)
|
||||
packages.push(examplePackage);
|
||||
let totalPackages = 0;
|
||||
let carUpdates = [];
|
||||
let totalCarUpdates = 0;
|
||||
|
||||
34
src/components/Controls/ECUList/index.jsx
Normal file
34
src/components/Controls/ECUList/index.jsx
Normal file
@@ -0,0 +1,34 @@
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
import { Chip } from "@material-ui/core";
|
||||
|
||||
const ECUList = ({ list, delimiter, search }) => {
|
||||
if (!list) return null;
|
||||
if (!delimiter) delimiter = ",";
|
||||
|
||||
const items = list.split(delimiter);
|
||||
|
||||
return items.map((item, index) => {
|
||||
const match = search
|
||||
? item.toLowerCase().split(" ").indexOf(search.toLowerCase())
|
||||
: -1;
|
||||
return (
|
||||
<Chip
|
||||
key={index}
|
||||
label={item}
|
||||
size="small"
|
||||
variant={match > -1 ? "default" : "outlined"}
|
||||
color={match > -1 ? "primary" : "default"}
|
||||
style={{ margin: 1 }}
|
||||
/>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
ECUList.propTypes = {
|
||||
list: PropTypes.string,
|
||||
delimiter: PropTypes.string,
|
||||
search: PropTypes.string,
|
||||
};
|
||||
|
||||
export default ECUList;
|
||||
@@ -26,6 +26,11 @@ const menuData = [
|
||||
to: "/package-upload",
|
||||
roles: [Roles.CREATE],
|
||||
},
|
||||
{
|
||||
label: "Deploy Manifest",
|
||||
to: "/manifests",
|
||||
roles: [Roles.CREATE, Roles.READ],
|
||||
},
|
||||
{
|
||||
label: "View Vehicles",
|
||||
to: "/vehicles",
|
||||
|
||||
@@ -96,6 +96,28 @@ exports[`SideMenu Authenticated 1`] = `
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
aria-disabled="false"
|
||||
class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
|
||||
href="/manifests"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="MuiListItemText-root"
|
||||
>
|
||||
<span
|
||||
class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
|
||||
>
|
||||
Deploy Manifest
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
class="MuiTouchRipple-root"
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
aria-disabled="false"
|
||||
|
||||
161
src/components/Manifest/Deploy/index.jsx
Normal file
161
src/components/Manifest/Deploy/index.jsx
Normal file
@@ -0,0 +1,161 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { useParams, Redirect } from "react-router";
|
||||
import { Button, Grid, Typography } from "@material-ui/core";
|
||||
import {
|
||||
ManifestsProvider,
|
||||
useManifestsContext,
|
||||
} from "../../Contexts/ManifestsContext";
|
||||
import {
|
||||
CarUpdatesProvider,
|
||||
useCarUpdatesContext,
|
||||
} from "../../Contexts/CarUpdatesContext";
|
||||
import { VehicleProvider } from "../../Contexts/VehicleContext";
|
||||
import { useUserContext } from "../../Contexts/UserContext";
|
||||
import { useStatusContext } from "../../Contexts/StatusContext";
|
||||
import useStyles from "../../useStyles";
|
||||
import SearchField from "../../Controls/SearchField";
|
||||
import CarSelectionTable from "../../Cars/CarSelectionTable";
|
||||
import { logger } from "../../../services/monitoring";
|
||||
import { LocalDateTimeString } from "../../../utils/dates";
|
||||
|
||||
const MainForm = () => {
|
||||
const { manifest_id } = useParams();
|
||||
const { getManifests, manifests, busy } = useManifestsContext();
|
||||
const { deployCarUpdates } = useCarUpdatesContext();
|
||||
const {
|
||||
token: {
|
||||
idToken: { jwtToken: token },
|
||||
},
|
||||
} = useUserContext();
|
||||
const { setMessage, setTitle } = useStatusContext();
|
||||
const [manifestName, setManifestName] = useState("");
|
||||
const [version, setVersion] = useState("");
|
||||
const [createDate, setCreateDate] = useState("");
|
||||
const [selected, setSelected] = useState([]);
|
||||
const [search, setSearch] = useState("");
|
||||
const [redirect, setRedirect] = useState("");
|
||||
const classes = useStyles();
|
||||
|
||||
const handleSearch = (search) => {
|
||||
setSelected([]);
|
||||
setSearch(search);
|
||||
};
|
||||
|
||||
const handleSelectAll = (cars) => {
|
||||
setSelected(cars);
|
||||
};
|
||||
|
||||
const handleSelect = (event, key) => {
|
||||
try {
|
||||
let newSelected;
|
||||
if (event.target.checked) {
|
||||
newSelected = [...selected];
|
||||
newSelected.push(key);
|
||||
} else {
|
||||
newSelected = selected.filter((vin) => vin !== key);
|
||||
}
|
||||
setSelected(newSelected);
|
||||
} catch (e) {
|
||||
logger.warn(e.stack);
|
||||
}
|
||||
};
|
||||
|
||||
const onSubmit = async (event) => {
|
||||
try {
|
||||
event.preventDefault();
|
||||
const data = {
|
||||
manifest_id: parseInt(manifest_id),
|
||||
vins: selected,
|
||||
};
|
||||
await deployCarUpdates(data, token);
|
||||
setMessage(
|
||||
`Deployed ${manifestName} ${version} to ${selected.length} cars`
|
||||
);
|
||||
setRedirect(`/manifest-status/${manifest_id}`);
|
||||
} catch (e) {
|
||||
setMessage(e.message);
|
||||
logger.warn(e.stack);
|
||||
}
|
||||
};
|
||||
|
||||
const getData = async () => {
|
||||
try {
|
||||
getManifests({ id: parseInt(manifest_id) }, token);
|
||||
} catch (e) {
|
||||
setMessage(e.message);
|
||||
logger.warn(e.stack);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
getData();
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [token]);
|
||||
|
||||
useEffect(() => {
|
||||
setTitle(`Deploy ${manifestName} ${version}`);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [manifestName, version]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!manifests || manifests.length === 0) return;
|
||||
var data = manifests[0];
|
||||
|
||||
setManifestName(data.name);
|
||||
setVersion(data.version);
|
||||
setCreateDate(LocalDateTimeString(data.created));
|
||||
}, [manifests]);
|
||||
|
||||
if (redirect.length > 0) {
|
||||
return <Redirect to={redirect} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={classes.paper}>
|
||||
<form className={classes.form} noValidate action="{onSubmit}">
|
||||
<Typography variant="body2">Created {createDate}.</Typography>
|
||||
<Grid container className={classes.root} spacing={2}>
|
||||
<Grid item md={10}>
|
||||
<SearchField classes={classes} onSearch={handleSearch} />
|
||||
<div
|
||||
className={classes.labelInline}
|
||||
>{`${selected.length} Selected`}</div>
|
||||
</Grid>
|
||||
<Grid item md={2} style={{ textAlign: "right" }}>
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={busy || selected.length === 0}
|
||||
fullWidth
|
||||
variant="contained"
|
||||
color="primary"
|
||||
className={classes.formControl}
|
||||
onClick={onSubmit}
|
||||
>
|
||||
{busy ? "Deploying..." : "Deploy"}
|
||||
</Button>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<CarSelectionTable
|
||||
classes={classes}
|
||||
token={token}
|
||||
search={{ search }}
|
||||
selected={selected}
|
||||
onSelect={handleSelect}
|
||||
onSelectAll={handleSelectAll}
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const ManifestDeployForm = () => (
|
||||
<VehicleProvider>
|
||||
<ManifestsProvider>
|
||||
<CarUpdatesProvider>
|
||||
<MainForm />
|
||||
</CarUpdatesProvider>
|
||||
</ManifestsProvider>
|
||||
</VehicleProvider>
|
||||
);
|
||||
|
||||
export default ManifestDeployForm;
|
||||
249
src/components/Manifest/List/index.jsx
Normal file
249
src/components/Manifest/List/index.jsx
Normal file
@@ -0,0 +1,249 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableFooter,
|
||||
TablePagination,
|
||||
TableRow,
|
||||
Toolbar,
|
||||
Tooltip,
|
||||
} from "@material-ui/core";
|
||||
import SendIcon from "@material-ui/icons/Send";
|
||||
import VisibilityIcon from "@material-ui/icons/Visibility";
|
||||
import DeleteIcon from "@material-ui/icons/Delete";
|
||||
|
||||
import {
|
||||
useManifestsContext,
|
||||
ManifestsProvider,
|
||||
} from "../../Contexts/ManifestsContext";
|
||||
import { useUserContext } from "../../Contexts/UserContext";
|
||||
import { useStatusContext } from "../../Contexts/StatusContext";
|
||||
import useStyles from "../../useStyles";
|
||||
import { LocalDateTimeString } from "../../../utils/dates";
|
||||
import TableHeaderSortable from "../../Table/HeaderSortable";
|
||||
import SearchField from "../../Controls/SearchField";
|
||||
import { logger } from "../../../services/monitoring";
|
||||
import ECUList from "../../Controls/ECUList";
|
||||
import { Roles, hasRole } from "../../../utils/roles";
|
||||
|
||||
const tableColumns = [
|
||||
{
|
||||
id: "id",
|
||||
label: "ID",
|
||||
},
|
||||
{
|
||||
id: "name",
|
||||
label: "Name",
|
||||
},
|
||||
{
|
||||
id: "version",
|
||||
label: "Version",
|
||||
},
|
||||
{
|
||||
id: "created_at",
|
||||
label: "Created",
|
||||
},
|
||||
{
|
||||
id: "updated_at",
|
||||
label: "Updated",
|
||||
},
|
||||
{
|
||||
id: "",
|
||||
label: "Actions",
|
||||
},
|
||||
];
|
||||
|
||||
const MainForm = () => {
|
||||
const classes = useStyles();
|
||||
const [pageSize, setPageSize] = useState(10);
|
||||
const [pageIndex, setPageIndex] = useState(0);
|
||||
const [orderBy, setOrderBy] = useState("id");
|
||||
const [order, setOrder] = useState("asc");
|
||||
const [search, setSearch] = useState("");
|
||||
const { getManifests, deleteManifest, manifests, totalManifests } =
|
||||
useManifestsContext();
|
||||
const { setMessage, setTitle } = useStatusContext();
|
||||
const {
|
||||
token: {
|
||||
idToken: { jwtToken: token },
|
||||
},
|
||||
groups,
|
||||
} = useUserContext();
|
||||
|
||||
const sortHandler = (event, property) => {
|
||||
if (property === orderBy) {
|
||||
if (order === "asc") {
|
||||
setOrder("desc");
|
||||
} else {
|
||||
setOrder("asc");
|
||||
}
|
||||
} else {
|
||||
setOrderBy(property);
|
||||
setOrder("asc");
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setTitle("Deploy Manifest");
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
try {
|
||||
await getManifests(
|
||||
{
|
||||
limit: pageSize,
|
||||
offset: pageSize * pageIndex,
|
||||
order: `${orderBy} ${order}`,
|
||||
search,
|
||||
},
|
||||
token
|
||||
);
|
||||
} catch (e) {
|
||||
setMessage(e.message);
|
||||
logger.warn(e.stack);
|
||||
}
|
||||
})();
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [pageIndex, pageSize, token, orderBy, order, search]);
|
||||
|
||||
const handleChangePageIndex = (event, newIndex) => {
|
||||
setPageIndex(newIndex);
|
||||
};
|
||||
|
||||
const handleChangePageSize = (event) => {
|
||||
setPageSize(parseInt(event.target.value, 10));
|
||||
setPageIndex(0);
|
||||
};
|
||||
|
||||
const handleSearch = (search) => {
|
||||
setSearch(search);
|
||||
};
|
||||
|
||||
const onDelete = async (manifest_id) => {
|
||||
try {
|
||||
await deleteManifest(parseInt(manifest_id), token);
|
||||
} catch (e) {
|
||||
setMessage(e.message);
|
||||
logger.warn(e.stack);
|
||||
}
|
||||
};
|
||||
|
||||
const Actions = (row) => {
|
||||
let actions = [];
|
||||
if (hasRole([Roles.CREATE, Roles.READ], groups)) {
|
||||
actions.push({
|
||||
tip: `Status "${row.name} ${row.version}"`,
|
||||
link: `/manifest-status/${row.id}`,
|
||||
icon: (
|
||||
<VisibilityIcon aria-label={`Status ${row.name} ${row.version}`} />
|
||||
),
|
||||
});
|
||||
}
|
||||
if (hasRole([Roles.CREATE], groups)) {
|
||||
actions = actions.concat([
|
||||
{
|
||||
tip: `Deploy "${row.name} ${row.version}"`,
|
||||
link: `/manifest-deploy/${row.id}`,
|
||||
icon: <SendIcon aria-label={`Deploy ${row.name} ${row.version}`} />,
|
||||
},
|
||||
{
|
||||
tip: `Delete "${row.name} ${row.version}"`,
|
||||
id: row.id,
|
||||
icon: <DeleteIcon aria-label={`Delete ${row.name} ${row.version}`} />,
|
||||
},
|
||||
]);
|
||||
}
|
||||
|
||||
if (actions.length === 0) return "No actions";
|
||||
|
||||
return actions.map((action) => {
|
||||
if (action.link != null) {
|
||||
return (
|
||||
<Tooltip key={action.link} title={action.tip}>
|
||||
<Link to={action.link} style={{ margin: 5 }}>
|
||||
{action.icon}
|
||||
</Link>
|
||||
</Tooltip>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<Tooltip key={`delete-${action.id}`} title={action.tip}>
|
||||
<Link to="#" onClick={() => onDelete(action.id)}>
|
||||
{action.icon}
|
||||
</Link>
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={classes.paper} style={{ height: 700, width: "100%" }}>
|
||||
<Toolbar className={classes.tableToolbar}>
|
||||
<SearchField classes={classes} onSearch={handleSearch} />
|
||||
</Toolbar>
|
||||
<Table>
|
||||
<TableHeaderSortable
|
||||
classes={classes}
|
||||
orderBy={orderBy}
|
||||
order={order}
|
||||
columnData={tableColumns}
|
||||
onSortRequest={sortHandler}
|
||||
/>
|
||||
<TableBody>
|
||||
{manifests.map((row) => (
|
||||
<TableRow key={row.id}>
|
||||
<TableCell align="center">{row.id}</TableCell>
|
||||
<TableCell align="center">
|
||||
{row.name}
|
||||
{row.ecu_list && (
|
||||
<>
|
||||
<br />
|
||||
<ECUList list={row.ecu_list} search={search} />
|
||||
</>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell align="center">{row.version}</TableCell>
|
||||
<TableCell align="center">
|
||||
{LocalDateTimeString(row.created)}
|
||||
</TableCell>
|
||||
<TableCell align="center">
|
||||
{LocalDateTimeString(row.updated)}
|
||||
</TableCell>
|
||||
<TableCell align="center">{Actions(row)}</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
<TableFooter>
|
||||
<TableRow>
|
||||
<TablePagination
|
||||
rowsPerPageOptions={[5, 10, 25, 100]}
|
||||
colSpan={6}
|
||||
count={totalManifests}
|
||||
rowsPerPage={pageSize}
|
||||
page={pageIndex}
|
||||
SelectProps={{
|
||||
inputProps: { "aria-label": "rows per page" },
|
||||
native: true,
|
||||
}}
|
||||
onChangePage={handleChangePageIndex}
|
||||
onChangeRowsPerPage={handleChangePageSize}
|
||||
/>
|
||||
</TableRow>
|
||||
</TableFooter>
|
||||
</Table>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const ManifestsList = () => (
|
||||
<ManifestsProvider>
|
||||
<MainForm />
|
||||
</ManifestsProvider>
|
||||
);
|
||||
|
||||
export default ManifestsList;
|
||||
174
src/components/Manifest/Status/index.jsx
Normal file
174
src/components/Manifest/Status/index.jsx
Normal file
@@ -0,0 +1,174 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { useParams } from "react-router";
|
||||
import { Link } from "react-router-dom";
|
||||
import {
|
||||
LinearProgress,
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableFooter,
|
||||
TableHead,
|
||||
TablePagination,
|
||||
TableRow,
|
||||
} from "@material-ui/core";
|
||||
|
||||
import {
|
||||
ManifestsProvider,
|
||||
useManifestsContext,
|
||||
} from "../../Contexts/ManifestsContext";
|
||||
import {
|
||||
CarUpdatesProvider,
|
||||
useCarUpdatesContext,
|
||||
} from "../../Contexts/CarUpdatesContext";
|
||||
import { useUserContext } from "../../Contexts/UserContext";
|
||||
import { useStatusContext } from "../../Contexts/StatusContext";
|
||||
import useStyles from "../../useStyles";
|
||||
import { LocalDateTimeString } from "../../../utils/dates";
|
||||
import { logger } from "../../../services/monitoring";
|
||||
|
||||
const MainForm = () => {
|
||||
const { manifest_id } = useParams();
|
||||
const classes = useStyles();
|
||||
const [pageSize, setPageSize] = useState(10);
|
||||
const [pageIndex, setPageIndex] = useState(0);
|
||||
const { getManifests, manifests } = useManifestsContext();
|
||||
const {
|
||||
getCarUpdates,
|
||||
carUpdates,
|
||||
totalCarUpdates,
|
||||
startMonitor,
|
||||
stopMonitor,
|
||||
} = useCarUpdatesContext();
|
||||
const { setMessage, setTitle } = useStatusContext();
|
||||
const {
|
||||
token: {
|
||||
idToken: { jwtToken: token },
|
||||
},
|
||||
} = useUserContext();
|
||||
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
try {
|
||||
await getManifests({ id: manifest_id }, token);
|
||||
} catch (e) {
|
||||
setMessage(e.message);
|
||||
logger.warn(e.stack);
|
||||
}
|
||||
})();
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [token]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!manifests || manifests.length === 0) return;
|
||||
setTitle(`Manifest ${manifests[0].name} ${manifests[0].version}`);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [manifests]);
|
||||
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
try {
|
||||
stopMonitor();
|
||||
await getCarUpdates(
|
||||
{
|
||||
manifest_id,
|
||||
limit: pageSize,
|
||||
offset: pageSize * pageIndex,
|
||||
},
|
||||
token
|
||||
);
|
||||
} catch (e) {
|
||||
setMessage(e.message);
|
||||
logger.warn(e.stack);
|
||||
}
|
||||
})();
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [pageIndex, pageSize, token]);
|
||||
|
||||
useEffect(() => {
|
||||
try {
|
||||
if (carUpdates.length === 0) return;
|
||||
startMonitor(token);
|
||||
} catch (e) {
|
||||
setMessage(e.message);
|
||||
logger.warn(e.stack);
|
||||
}
|
||||
return () => {
|
||||
stopMonitor();
|
||||
};
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [carUpdates]);
|
||||
|
||||
const handleChangePageIndex = (event, newIndex) => {
|
||||
setPageIndex(newIndex);
|
||||
};
|
||||
|
||||
const handleChangePageSize = (event) => {
|
||||
setPageSize(parseInt(event.target.value, 10));
|
||||
setPageIndex(0);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={classes.paper} style={{ height: 700, width: "100%" }}>
|
||||
<Table>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell align="center">ID</TableCell>
|
||||
<TableCell align="center">Vehicle</TableCell>
|
||||
<TableCell align="center">Status</TableCell>
|
||||
<TableCell align="center">Created</TableCell>
|
||||
<TableCell align="center">Updated</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{carUpdates.map((row) => (
|
||||
<TableRow key={row.id}>
|
||||
<TableCell align="center">{row.id}</TableCell>
|
||||
<TableCell align="center">
|
||||
<Link to={`/vehicle-status/${row.vin}`}>{row.vin}</Link>
|
||||
</TableCell>
|
||||
<TableCell align="center">
|
||||
{row.status}
|
||||
{row.progress > 0 && (
|
||||
<LinearProgress variant="determinate" value={row.progress} />
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell align="center">
|
||||
{LocalDateTimeString(row.created)}
|
||||
</TableCell>
|
||||
<TableCell align="center">
|
||||
{LocalDateTimeString(row.updated)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
<TableFooter>
|
||||
<TableRow>
|
||||
<TablePagination
|
||||
rowsPerPageOptions={[5, 10, 25, 100]}
|
||||
colSpan={5}
|
||||
count={totalCarUpdates}
|
||||
rowsPerPage={pageSize}
|
||||
page={pageIndex}
|
||||
SelectProps={{
|
||||
inputProps: { "aria-label": "rows per page" },
|
||||
native: true,
|
||||
}}
|
||||
onChangePage={handleChangePageIndex}
|
||||
onChangeRowsPerPage={handleChangePageSize}
|
||||
/>
|
||||
</TableRow>
|
||||
</TableFooter>
|
||||
</Table>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const ManifestStatus = () => (
|
||||
<ManifestsProvider>
|
||||
<CarUpdatesProvider>
|
||||
<MainForm />
|
||||
</CarUpdatesProvider>
|
||||
</ManifestsProvider>
|
||||
);
|
||||
|
||||
export default ManifestStatus;
|
||||
@@ -19,6 +19,9 @@ const CarUpdates = React.lazy(() => import("../Cars/Status"));
|
||||
const VehiclesList = React.lazy(() => import("../Cars/List"));
|
||||
const SendCommandBulk = React.lazy(() => import("../Cars/SendCommandBulk"));
|
||||
const Dashboard = React.lazy(() => import("../Dashboard"));
|
||||
const Manifests = React.lazy(() => import("../Manifest/List"));
|
||||
const ManifestDeploy = React.lazy(() => import("../Manifest/Deploy"));
|
||||
const ManifestStatus = React.lazy(() => import("../Manifest/Status"));
|
||||
|
||||
const SiteRoutes = () => {
|
||||
const { token, groups } = useUserContext();
|
||||
@@ -119,6 +122,30 @@ const SiteRoutes = () => {
|
||||
groups={groups}
|
||||
roles={[Roles.READ, Roles.CREATE]}
|
||||
/>
|
||||
<AuthRoute
|
||||
path="/manifests"
|
||||
render={() => <Manifests />}
|
||||
type={TYPES.PROTECTED}
|
||||
token={token}
|
||||
groups={groups}
|
||||
roles={[Roles.READ, Roles.CREATE]}
|
||||
/>
|
||||
<AuthRoute
|
||||
path="/manifest-deploy/:manifest_id"
|
||||
render={() => <ManifestDeploy />}
|
||||
type={TYPES.PROTECTED}
|
||||
token={token}
|
||||
groups={groups}
|
||||
roles={[Roles.CREATE]}
|
||||
/>
|
||||
<AuthRoute
|
||||
path="/manifest-status/:manifest_id"
|
||||
render={() => <ManifestStatus />}
|
||||
type={TYPES.PROTECTED}
|
||||
token={token}
|
||||
groups={groups}
|
||||
roles={[Roles.READ, Roles.CREATE]}
|
||||
/>
|
||||
<PageNotFound />
|
||||
</Switch>
|
||||
</Suspense>
|
||||
|
||||
@@ -25,6 +25,7 @@ import { Roles, hasRole } from "../../../utils/roles";
|
||||
import TableHeaderSortable from "../../Table/HeaderSortable";
|
||||
import SearchField from "../../Controls/SearchField";
|
||||
import { logger } from "../../../services/monitoring";
|
||||
import ECUList from "../../Controls/ECUList";
|
||||
|
||||
const tableColumns = [
|
||||
{
|
||||
@@ -195,7 +196,15 @@ const UpdatePackagesList = () => {
|
||||
{packages.map((row) => (
|
||||
<TableRow key={row.id}>
|
||||
<TableCell align="center">{row.id}</TableCell>
|
||||
<TableCell align="center">{row.package_name}</TableCell>
|
||||
<TableCell align="center">
|
||||
{row.package_name}
|
||||
{row.ecu_list && (
|
||||
<>
|
||||
<br />
|
||||
<ECUList list={row.ecu_list} search={search} />
|
||||
</>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell align="center">{row.version}</TableCell>
|
||||
<TableCell align="center">
|
||||
{LocalDateTimeString(row.created)}
|
||||
|
||||
59
src/services/__mocks__/manifests.js
Normal file
59
src/services/__mocks__/manifests.js
Normal file
@@ -0,0 +1,59 @@
|
||||
|
||||
|
||||
const updatesAPI = {
|
||||
createCarUpdates: async (data, token) => {
|
||||
if (!data.id) data.id = 0;
|
||||
data.id++;
|
||||
return data;
|
||||
},
|
||||
|
||||
getPackages: async (search, token) => {
|
||||
return {
|
||||
data: [
|
||||
{
|
||||
id: 1,
|
||||
package_name: "Test",
|
||||
version: "1.0",
|
||||
link: "http://cloudfront.com/download",
|
||||
ecu_list: "ECU1 1.0.0,ECU2 1.0.2",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
package_name: "Test",
|
||||
version: "1.1",
|
||||
link: "http://cloudfront.com/download",
|
||||
ecu_list: "ECU1 1.0.1,ECU2 1.0.2",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
package_name: "Test",
|
||||
version: "1.2",
|
||||
link: "http://cloudfront.com/download",
|
||||
ecu_list: "ECU1 1.1.0,ECU2 1.1.2",
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
updatePackage: async (data, token) => {
|
||||
return data;
|
||||
},
|
||||
|
||||
deployPackage: async (data, token) => {
|
||||
return data;
|
||||
},
|
||||
|
||||
getCarUpdates: async (filter, token) => {
|
||||
return { data: [] };
|
||||
},
|
||||
|
||||
getVINUpdates: async (vin, token) => {
|
||||
return { data: [] };
|
||||
},
|
||||
|
||||
getCarUpdateProgress: async (carupdateids, token) => {
|
||||
return { statuses: [] };
|
||||
},
|
||||
};
|
||||
|
||||
export default updatesAPI;
|
||||
@@ -14,19 +14,22 @@ const updatesAPI = {
|
||||
id: 1,
|
||||
package_name: "Test",
|
||||
version: "1.0",
|
||||
link: "http://cloudfront.com/download"
|
||||
link: "http://cloudfront.com/download",
|
||||
ecu_list: "ECU1 1.0.0,ECU2 1.0.2",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
package_name: "Test",
|
||||
version: "1.1",
|
||||
link: "http://cloudfront.com/download"
|
||||
link: "http://cloudfront.com/download",
|
||||
ecu_list: "ECU1 1.0.1,ECU2 1.0.2",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
package_name: "Test",
|
||||
version: "1.2",
|
||||
link: "http://cloudfront.com/download"
|
||||
link: "http://cloudfront.com/download",
|
||||
ecu_list: "ECU1 1.1.0,ECU2 1.1.2",
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
|
||||
const data = [
|
||||
{ vin: "3C4PDCBG0ET127145" },
|
||||
{ vin: "3C4PDCBG0ET127145", year: 2021, model: "Ocean", trim: "Basic", ecu_list: "ECUA 2.0.0, ECUB 2.1.1" },
|
||||
{ vin: "1G1FP87S3GN100062" },
|
||||
{ vin: "1HGCG325XYA062256" },
|
||||
{ vin: "1J4GZ78YXWC160024" },
|
||||
{ vin: "2C3CCAAG8CH222800" },
|
||||
{ vin: "KNADM4A39C6028108" },
|
||||
{ vin: "1G11C5SL9FF153507" },
|
||||
{ vin: "1HGCG325XYA062256", year: 2021 },
|
||||
{ vin: "1J4GZ78YXWC160024", year: 2021, model: "Ocean" },
|
||||
{ vin: "2C3CCAAG8CH222800", model: "Ocean", trim: "Basic" },
|
||||
{ vin: "KNADM4A39C6028108", year: 2021, model: "Ocean", trim: "Basic" },
|
||||
{ vin: "1G11C5SL9FF153507", year: 2021, model: "Ocean", trim: "Basic" },
|
||||
];
|
||||
|
||||
const vehiclesAPI = {
|
||||
|
||||
23
src/services/manifests.js
Normal file
23
src/services/manifests.js
Normal file
@@ -0,0 +1,23 @@
|
||||
import { getAuthHeaderOptions, fetchRespHandler, addQueryParams } from "../utils/http";
|
||||
|
||||
const API_ENDPOINT = process.env.REACT_APP_UPLOAD_SERVICE_URL || "https://gw-dev.fiskerdps.com/ota_update";
|
||||
|
||||
const manifestsAPI = {
|
||||
deleteManifest: async (manifest_id, token) => fetch(`${API_ENDPOINT}/manifest?id=${manifest_id}`, {
|
||||
method: "DELETE",
|
||||
headers: Object.assign({ "Content-Type": "application/json" }, getAuthHeaderOptions(token)),
|
||||
})
|
||||
.then(fetchRespHandler),
|
||||
|
||||
getManifests: async (search, token) => {
|
||||
var u = addQueryParams(`${API_ENDPOINT}/manifests`, search);
|
||||
return fetch(u, {
|
||||
method: "GET",
|
||||
headers: Object.assign({ "Content-Type": "application/json" }, getAuthHeaderOptions(token)),
|
||||
|
||||
})
|
||||
.then(fetchRespHandler);
|
||||
},
|
||||
};
|
||||
|
||||
export default manifestsAPI;
|
||||
3
testEnv.js
Normal file
3
testEnv.js
Normal file
@@ -0,0 +1,3 @@
|
||||
module.exports = async () => {
|
||||
process.env.TZ = 'UTC';
|
||||
};
|
||||
Reference in New Issue
Block a user