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

Merge branch 'main' into CEC-5443

Browse Source
This commit is contained in:
Paul Adamsen
2024-01-08 15:05:22 -05:00
committed by GitHub
parent 754c5eb746 f388a205fc
commit 7bdbec6ab5
25 changed files with 670 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
src/components/App/__snapshots__/App.test.js.snap
View File

@@ -3515,7 +3515,7 @@ exports[`App Route /issues authenticated 1`] = `
</span>
</th>
<th
aria-sort="ascending"
aria-sort="descending"
class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
scope="col"
>
@@ -3529,11 +3529,11 @@ exports[`App Route /issues authenticated 1`] = `
<span
class="makeStyles-hiddenSortSpan-0"
>
sorted ascending
sorted descending
</span>
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionDesc"
focusable="false"
viewBox="0 0 24 24"
>
@@ -4578,22 +4578,16 @@ exports[`App Route /package-deploy authenticated 1`] = `
</span>
</th>
<th
aria-sort="ascending"
class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
scope="col"
>
<span
aria-disabled="false"
class="MuiButtonBase-root MuiTableSortLabel-root MuiTableSortLabel-active"
class="MuiButtonBase-root MuiTableSortLabel-root"
role="button"
tabindex="0"
>
VIN
<span
class="makeStyles-hiddenSortSpan-0"
>
sorted ascending
</span>
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
@@ -4699,19 +4693,25 @@ exports[`App Route /package-deploy authenticated 1`] = `
</span>
</th>
<th
aria-sort="descending"
class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
scope="col"
>
<span
aria-disabled="false"
class="MuiButtonBase-root MuiTableSortLabel-root"
class="MuiButtonBase-root MuiTableSortLabel-root MuiTableSortLabel-active"
role="button"
tabindex="0"
>
Updated
<span
class="makeStyles-hiddenSortSpan-0"
>
sorted descending
</span>
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionDesc"
focusable="false"
viewBox="0 0 24 24"
>
@@ -5538,7 +5538,7 @@ exports[`App Route /package-status authenticated 1`] = `
</span>
</th>
<th
aria-sort="ascending"
aria-sort="descending"
class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
scope="col"
>
@@ -5552,11 +5552,11 @@ exports[`App Route /package-status authenticated 1`] = `
<span
class="makeStyles-hiddenSortSpan-0"
>
sorted ascending
sorted descending
</span>
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionDesc"
focusable="false"
viewBox="0 0 24 24"
>
@@ -6744,7 +6744,7 @@ exports[`App Route /packages authenticated 1`] = `
</span>
</th>
<th
aria-sort="ascending"
aria-sort="descending"
class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
scope="col"
>
@@ -6758,11 +6758,11 @@ exports[`App Route /packages authenticated 1`] = `
<span
class="makeStyles-hiddenSortSpan-0"
>
sorted ascending
sorted descending
</span>
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionDesc"
focusable="false"
viewBox="0 0 24 24"
>
@@ -12964,22 +12964,16 @@ exports[`App Route /vehicles authenticated 1`] = `
</span>
</th>
<th
aria-sort="ascending"
class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
scope="col"
>
<span
aria-disabled="false"
class="MuiButtonBase-root MuiTableSortLabel-root MuiTableSortLabel-active"
class="MuiButtonBase-root MuiTableSortLabel-root"
role="button"
tabindex="0"
>
VIN
<span
class="makeStyles-hiddenSortSpan-0"
>
sorted ascending
</span>
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
@@ -13085,19 +13079,25 @@ exports[`App Route /vehicles authenticated 1`] = `
</span>
</th>
<th
aria-sort="descending"
class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
scope="col"
>
<span
aria-disabled="false"
class="MuiButtonBase-root MuiTableSortLabel-root"
class="MuiButtonBase-root MuiTableSortLabel-root MuiTableSortLabel-active"
role="button"
tabindex="0"
>
Updated
<span
class="makeStyles-hiddenSortSpan-0"
>
sorted descending
</span>
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionDesc"
focusable="false"
viewBox="0 0 24 24"
>

2
src/components/BulkActions/actions/Cancel.jsx
View File

@@ -14,7 +14,7 @@ export default forwardRef(({
useImperativeHandle(ref, () => ({
async submit() {
return new Promise((resolve, reject) => {
const taskRunner = new TaskRunner(5, ids.length);
const taskRunner = new TaskRunner(30, ids.length);
let errorCount = 0;
const task = (id, index) => {

2
src/components/BulkActions/actions/Diagnostic.jsx
View File

@@ -18,7 +18,7 @@ const commands = [
async function getECUsByVINs(vins, token) {
return new Promise((resolve, reject) => {
const taskRunner = new TaskRunner(10, vins.length);
const taskRunner = new TaskRunner(30, vins.length);
const task = (vin) => {
return async () => api.getECUs({ vin, unique: true }, token)

2
src/components/BulkActions/actions/Redeploy.jsx
View File

@@ -14,7 +14,7 @@ export default forwardRef(({
useImperativeHandle(ref, () => ({
async submit() {
return new Promise((resolve, reject) => {
const taskRunner = new TaskRunner(5, ids.length);
const taskRunner = new TaskRunner(30, ids.length);
let errorCount = 0;
const task = (id, index) => {

2
src/components/BulkActions/actions/SendSMS.jsx
View File

@@ -23,7 +23,7 @@ export default forwardRef(({
useImperativeHandle(ref, () => ({
async submit() {
return new Promise((resolve) => {
const taskRunner = new TaskRunner(5, ids.length);
const taskRunner = new TaskRunner(30, ids.length);
ids.forEach((vin) => {
taskRunner.push(async () => {

2
src/components/BulkActions/actions/UpdateConfig.jsx
View File

@@ -20,7 +20,7 @@ export default forwardRef(({
useImperativeHandle(ref, () => ({
async submit() {
return new Promise((resolve, reject) => {
const taskRunner = new TaskRunner(5, ids.length);
const taskRunner = new TaskRunner(30, ids.length);
let errorCount = 0;
const task = (vin, index) => {

18
src/components/Cars/List/__snapshots__/index.test.jsx.snap
View File

@@ -173,22 +173,16 @@ exports[`VehicleTable Render 1`] = `
</span>
</th>
<th
aria-sort="ascending"
class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
scope="col"
>
<span
aria-disabled="false"
class="MuiButtonBase-root MuiTableSortLabel-root MuiTableSortLabel-active"
class="MuiButtonBase-root MuiTableSortLabel-root"
role="button"
tabindex="0"
>
VIN
<span
class="makeStyles-hiddenSortSpan-0"
>
sorted ascending
</span>
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
@@ -294,19 +288,25 @@ exports[`VehicleTable Render 1`] = `
</span>
</th>
<th
aria-sort="descending"
class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
scope="col"
>
<span
aria-disabled="false"
class="MuiButtonBase-root MuiTableSortLabel-root"
class="MuiButtonBase-root MuiTableSortLabel-root MuiTableSortLabel-active"
role="button"
tabindex="0"
>
Updated
<span
class="makeStyles-hiddenSortSpan-0"
>
sorted descending
</span>
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionDesc"
focusable="false"
viewBox="0 0 24 24"
>

6
src/components/Contexts/ManifestsContext.jsx
View File

@@ -83,10 +83,10 @@ export const ManifestsProvider = ({ children }) => {
const migrateManifest = async (package_id, token) => {
let result;
try{
try {
setBusy(true)
result = await api.migrateManifest(package_id, token)
if(result.error)
if (result.error)
throw new Error(`failed to migrate manifest. ${result.message}`);
} finally {
setBusy(false)
@@ -116,7 +116,7 @@ export const ManifestsProvider = ({ children }) => {
const validateManifestUpdate = (data) => {
if (data == null) throw new Error("No manifest data");
if (data.name == null || data.name.length>255) throw new Error("Invalid manifest name");
if (data.name == null || data.name.length > 255) throw new Error("Invalid manifest name");
if (data.type == null || !["forced", "standard"].includes(data.type)) {
throw new Error("Invalid manifest type");

4
src/components/Controls/CarSelectionTable/index.jsx
View File

@@ -63,8 +63,8 @@ const CarSelectionTable = (props) => {
const [pageSize, setPageSize] = useLocalStorage(PAGE_SIZE, 10);
const [pageIndex, setPageIndex] = useState(0);
const [orderBy, setOrderBy] = useState("vin");
const [order, setOrder] = useState("asc");
const [orderBy, setOrderBy] = useState("updated_at");
const [order, setOrder] = useState("desc");
const { getVehicles, vehicles, totalVehicles } = useVehicleContext();
const { setMessage } = useStatusContext();

9
src/components/Controls/DropDownList/index.jsx
View File

@@ -1,10 +1,11 @@
import { FormControl, InputLabel, Select } from "@material-ui/core";
export const DropDownList = ({data, label, value, labelField, valueField, onChange, classes, ...others}) => {
export const DropDownList = ({ data, label, value, labelField, valueField, onChange, classes, fullWidth, ...others }) => {
return (
<FormControl
variant="outlined"
margin="normal"
fullWidth={fullWidth}
>
<InputLabel className={classes.whiteBackground}>
{label}
@@ -16,9 +17,9 @@ export const DropDownList = ({data, label, value, labelField, valueField, onChan
onChange={onChange}
{...others}
>
{data && data.map((item, index) => (
<option key={index} value={item[valueField || "value"]}>{item[labelField || "label"]}</option>
))}
{data && data.map((item, index) => (
<option key={index} value={item[valueField || "value"]}>{item[labelField || "label"]}</option>
))}
</Select>
</FormControl>
);

2
src/components/Controls/IssueSelectionTable/index.jsx
View File

@@ -64,7 +64,7 @@ const IssueSelectionTable = (props) => {
const [pageSize, setPageSize] = useLocalStorage(PAGE_SIZE, 10);
const [pageIndex, setPageIndex] = useState(0);
const [orderBy, setOrderBy] = useState("created_at");
const [order, setOrder] = useState("asc");
const [order, setOrder] = useState("desc");
const { deleteIssue, getIssues, issues, totalIssues = 0 } = useIssueContext();
const { groups, providers } = useUserContext();
const { setMessage } = useStatusContext();

44
src/components/Controls/NumberField/NumberField.jsx Normal file
View File

@@ -0,0 +1,44 @@
import {
Box,
FormControl,
FormHelperText,
Input,
InputLabel,
} from "@material-ui/core";
const PREFIX = "number-field";
function kebab(str) {
return str.replaceAll(" ", "-").toLowerCase();
}
export function NumberField({
name,
description,
value = 0,
setValue = () => { },
...rest
}) {
const inputId = `${PREFIX}-${kebab(name)}`;
const describeId = `${PREFIX}-${kebab(name)}-describe`;
const handleChange = (event) => {
setValue(event.target.value);
}
return (
<Box sx={{ my: 2 }}>
<FormControl fullWidth>
<InputLabel htmlFor={inputId}>{name}</InputLabel>
<Input
id={inputId}
aria-describedby={describeId}
type="number"
value={value}
onChange={handleChange}
{...rest}
/>
<FormHelperText id={describeId}>{description}</FormHelperText>
</FormControl>
</Box>
);
}

55
src/components/Controls/NumberField/NumberField.test.jsx Normal file
View File

@@ -0,0 +1,55 @@
import React from "react";
import { fireEvent, render } from "@testing-library/react";
import { NumberField } from "./index";
describe("NumberField", () => {
it("renders with form label and aria describe", () => {
const { getByText } = render(
<NumberField
name="My First Field"
description="Some helper text"
/>
);
const labelEl = getByText("My First Field");
const describeEl = getByText("Some helper text");
expect(labelEl.htmlFor).toEqual("number-field-my-first-field");
expect(describeEl.id).toEqual("number-field-my-first-field-describe");
});
it("input is of type number", () => {
const { getByLabelText } = render(
<NumberField
name="My First Field"
description="Some helper text"
/>
);
const inputEl = getByLabelText("My First Field", { selector: "input" });
expect(inputEl.type).toEqual("number");
});
it("updates parent state", () => {
let mockState = 0;
const mockSetState = jest.fn((value) => mockState = value);
const { getByLabelText } = render(
<NumberField
name="My First Field"
description="Enter a number"
value={mockState}
setValue={mockSetState}
/>
);
const inputEl = getByLabelText("My First Field", { selector: "input" });
fireEvent.change(inputEl, { target: { value: "1" } });
expect(mockState).toEqual("1");
expect(mockSetState.mock.calls.length).toEqual(1);
});
})

1
src/components/Controls/NumberField/index.jsx Normal file
View File

@@ -0,0 +1 @@
export * from "./NumberField";

3
src/components/Controls/SendDiagnosticCommand/index.jsx
View File

@@ -18,6 +18,7 @@ const commands = [
{ displayname: "Set CAN Network State", val: "can_network" },
{ displayname: "Set Remote Ignition", val: "remote_ignition" },
{ displayname: "Send Wake Up SMS", val: "sms" },
{ displayname: "Update SecOC keys", val: "write_secoc_key" },
{ displayname: "Read ECU versions", val: "read_ecu_versions" },
]
@@ -106,6 +107,8 @@ const SendDiagnosticCommand = ({ vin, token, classes }) => {
}
} else if (currentCommand === "read_ecu_versions") {
await sendDiagnosticCommand([vin], { command: currentCommand, ecu_name: currentECU }, token);
} else if (currentCommand === "write_secoc_key") {
await sendDiagnosticCommand([vin], { command: currentCommand }, token);
}
setMessage(`Sent diagnostic command to ${vin}`);
} catch (error) {

18
src/components/Fleets/Status/Vehicles/Add/__snapshots__/index.test.jsx.snap
View File

@@ -119,22 +119,16 @@ exports[`FleetVehicleAdd Render 1`] = `
</span>
</th>
<th
aria-sort="ascending"
class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
scope="col"
>
<span
aria-disabled="false"
class="MuiButtonBase-root MuiTableSortLabel-root MuiTableSortLabel-active"
class="MuiButtonBase-root MuiTableSortLabel-root"
role="button"
tabindex="0"
>
VIN
<span
class="makeStyles-hiddenSortSpan-0"
>
sorted ascending
</span>
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
@@ -240,19 +234,25 @@ exports[`FleetVehicleAdd Render 1`] = `
</span>
</th>
<th
aria-sort="descending"
class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
scope="col"
>
<span
aria-disabled="false"
class="MuiButtonBase-root MuiTableSortLabel-root"
class="MuiButtonBase-root MuiTableSortLabel-root MuiTableSortLabel-active"
role="button"
tabindex="0"
>
Updated
<span
class="makeStyles-hiddenSortSpan-0"
>
sorted descending
</span>
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionDesc"
focusable="false"
viewBox="0 0 24 24"
>

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

@@ -12,7 +12,7 @@ import {
} from "@material-ui/core";
import AddCircleIcon from "@material-ui/icons/AddCircle";
import clsx from "clsx";
import React, { useEffect, useState } from "react";
import React, { useEffect, useState, useRef } from "react";
import { Link } from "react-router-dom";
import { logger } from "../../../../../services/monitoring";
@@ -70,6 +70,7 @@ const MainForm = ({ name }) => {
const [order, setOrder] = useState("desc");
const [search, setSearch] = useState("");
const [selected, setSelected] = useState([]);
const componentMounted = useRef(true);
const classes = useStyles();
const { setMessage } = useStatusContext();
const {
@@ -103,7 +104,9 @@ const MainForm = ({ name }) => {
},
token
);
watchFleetVehicles.start({ token });
if (componentMounted.current) {
watchFleetVehicles.start({ token });
}
} catch (e) {
setMessage(e.message);
logger.warn(e.stack);
@@ -111,6 +114,7 @@ const MainForm = ({ name }) => {
}
})();
return () => {
componentMounted.current = false;
watchFleetVehicles.end();
}
// eslint-disable-next-line react-hooks/exhaustive-deps

230
src/components/Manifest/Deploy/Configure.jsx Normal file
View File

@@ -0,0 +1,230 @@
import { useEffect, useState } from "react";
import {
Box,
FormControl,
IconButton,
Input,
InputLabel,
FormHelperText,
Modal,
TextField,
Typography,
Button,
} from "@material-ui/core";
import CloseIcon from '@mui/icons-material/Close';
import SendIcon from "@material-ui/icons/Send";
import { SELECT_VERSION } from "../../Contexts/CarUpdatesContext";
import { useManifestsContext } from "../../Contexts/ManifestsContext";
import { useStatusContext } from "../../Contexts/StatusContext";
import { useUserContext } from "../../Contexts/UserContext";
import { DropDownList } from "../../Controls/DropDownList";
const style = {
position: 'absolute',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
width: 400,
bgcolor: 'background.paper',
boxShadow: 24,
borderRadius: 8,
p: 4,
};
/**
* Checks several required fields
* @param {Manifest} manifest
* @returns []bool representing each valid field
*/
const validateManifestFields = (manifest = {}) => [
manifest.sums && manifest.sums !== SELECT_VERSION,
manifest.max_attempts > 0,
manifest.update_duration > 0,
];
/**
* Returns true if manifests have different values
* @param {Manifest} a
* @param {Manifest} b
* @returns bool
*/
const diffManifestFields = (a = {}, b = {}) => (
a.release_notes !== b.release_notes ||
a.max_attempts !== b.max_attempts ||
a.update_duration !== b.update_duration ||
a.sums !== b.sums
);
export default function Configure({
manifest = {},
classes,
versions = [SELECT_VERSION],
disabled = true,
submit = () => { },
}) {
const { updateManifest } = useManifestsContext();
const {
token: {
idToken: { jwtToken: token },
},
} = useUserContext();
const { setMessage } = useStatusContext();
const [open, setOpen] = useState(false);
const [localManifest, setLocalManifest] = useState(structuredClone(manifest));
const [satisfiesRequiredFields, setSatisfiesRequiredFields] = useState(validateManifestFields(localManifest));
const needsConfiguration = satisfiesRequiredFields.some(valid => !valid);
const handleOpen = () => {
if (needsConfiguration) {
setOpen(true);
} else {
onSubmit(); // skip openning modal, if fully configured
}
}
const handleClose = () => setOpen(false);
const handleManifestField = (field, value) => {
if (!field || !value) {
return;
}
setLocalManifest((manifest) => {
manifest[field] = value;
return structuredClone(manifest);
});
}
const onSubmit = async () => {
handleClose();
if (diffManifestFields(manifest, localManifest)) {
try {
localManifest.update_duration = parseInt(localManifest.update_duration);
localManifest.max_attempts = parseInt(localManifest.max_attempts);
const result = await updateManifest(manifest.id, localManifest, token);
if (!result || result.error) {
return;
}
setMessage(`Updated manifest ${manifest.id}`);
} catch (err) {
setMessage(`Failed to update manifest ${manifest.id}`);
}
}
submit();
}
useEffect(() => {
setSatisfiesRequiredFields(validateManifestFields(localManifest));
}, [localManifest, setSatisfiesRequiredFields])
return (
<>
<IconButton onClick={handleOpen} disabled={disabled}>
<SendIcon />
</IconButton>
<Modal
open={open}
onClose={handleClose}
aria-labelledby="modal-modal-title"
aria-describedby="modal-modal-description"
>
<Box sx={style}>
<IconButton
color="action"
onClick={handleClose}
edge={false}
className={classes.closeModal}
>
<CloseIcon />
</IconButton>
<Typography id="modal-modal-title" variant="h6" component="h2">
Complete Manifest
</Typography>
<Typography id="modal-modal-description">
{manifest.name ? (<i>{manifest.name}</i>) : `This manifest`} is incomplete, and cannot be deployed without all required fields filled out.
</Typography>
<br />
<DropDownList
label="Sums Version"
labelField="version"
valueField="version"
value={localManifest.sums}
data={versions}
classes={classes}
onChange={(e) => handleManifestField("sums", e.target.value)}
error={!satisfiesRequiredFields[0]}
fullWidth
/>
<ConfigureInput
name="Max Attempts"
description="How many times should the car try and install the mainfest?"
value={localManifest.max_attempts}
setValue={(value) => handleManifestField("max_attempts", value)}
error={!satisfiesRequiredFields[1]}
/>
<ConfigureInput
name="Update Duration"
description="How long should the car try installing the manifest for?"
value={localManifest.update_duration}
setValue={(value) => handleManifestField("update_duration", value)}
error={!satisfiesRequiredFields[2]}
/>
<TextField
label="Release Notes"
value={localManifest.release_notes}
onChange={(value) => handleManifestField("release_notes", value)}
fullWidth
/>
<Button
variant="contained"
className={classes.marginTop}
disabled={needsConfiguration}
onClick={onSubmit}
>
Update and Send
</Button>
</Box>
</Modal>
</>
);
}
function kebab(str) {
return str.replaceAll(" ", "-").toLowerCase();
}
function ConfigureInput({
name,
description,
value = 0,
setValue = () => { },
error,
}) {
const inputId = `deploy-configure-${kebab(name)}`;
const descriptionId = `deploy-configure-${kebab(name)}-explain`;
const handleChange = (event) => {
setValue(event.target.value);
}
return (
<Box sx={{ my: 2 }}>
<FormControl fullWidth>
<InputLabel htmlFor={inputId}>{name}</InputLabel>
<Input
id={inputId}
aria-describedby={descriptionId}
type="number"
value={value}
onChange={handleChange}
error={error}
/>
<FormHelperText id={descriptionId}>{description}</FormHelperText>
</FormControl>
</Box>
);
}

192
src/components/Manifest/Deploy/index.jsx
View File

@@ -1,13 +1,11 @@
import { Button, Checkbox, FormControlLabel, Grid, MenuItem, Switch, Typography } from "@material-ui/core";
import clsx from "clsx";
import SendIcon from "@material-ui/icons/Send";
import { Checkbox, FormControlLabel, Grid, MenuItem, Switch, Typography, Box } from "@material-ui/core";
import React, { useEffect, useState } from "react";
import { Redirect, useParams } from "react-router";
import { logger } from "../../../services/monitoring";
import { LocalDateTimeString } from "../../../utils/dates";
import { Permissions } from "../../../utils/roles";
import { CarUpdatesProvider, SELECT_VERSION, useCarUpdatesContext } from "../../Contexts/CarUpdatesContext";
import { CarUpdatesProvider, useCarUpdatesContext } from "../../Contexts/CarUpdatesContext";
import { FleetProvider } from "../../Contexts/FleetContext";
import { ManifestsProvider, useManifestsContext } from "../../Contexts/ManifestsContext";
import { useStatusContext } from "../../Contexts/StatusContext";
@@ -15,11 +13,11 @@ import { useUserContext } from "../../Contexts/UserContext";
import { VehicleProvider } from "../../Contexts/VehicleContext";
import CarSelectionTable from "../../Controls/CarSelectionTable";
import OptionsDropdown from "../../Controls/OptionsDropdown";
import { DropDownList } from "../../Controls/DropDownList";
import FleetSelectionTable from "../../Controls/FleetSelectionTable";
import { RoleWrap } from "../../Controls/RoleWrap";
import SearchField from "../../Controls/SearchField";
import useStyles from "../../useStyles";
import Configure from "./Configure";
const CAR_UPDATE = false;
const FLEET_UPDATE = true;
@@ -28,7 +26,7 @@ const MainForm = () => {
const [updateType, setUpdateType] = useState(CAR_UPDATE);
const { manifest_id } = useParams();
const { getManifests, manifests, busy } = useManifestsContext();
const { deployCarUpdates, deployFleetUpdates, getSUMSVersions, versions, updateSUMSVersion } = useCarUpdatesContext();
const { deployCarUpdates, deployFleetUpdates, getSUMSVersions, versions } = useCarUpdatesContext();
const {
groups,
providers,
@@ -37,15 +35,11 @@ const MainForm = () => {
},
} = useUserContext();
const { setMessage, setTitle, setSitePath } = useStatusContext();
const [manifestName, setManifestName] = useState("");
const [version, setVersion] = useState("");
const [sumsVersion, setSUMSersion] = useState("");
const [createDate, setCreateDate] = useState("");
const [manifest, setManifest] = useState({});
const [selected, setSelected] = useState([]);
const [search, setSearch] = useState("");
const [online, setOnline] = useState(false);
const [onlineHMI, setOnlineHMI] = useState(false);
const [softwareVersion, setSoftwareVersion] = useState(SELECT_VERSION);
const [redirect, setRedirect] = useState("");
const classes = useStyles();
@@ -86,15 +80,11 @@ const MainForm = () => {
}
};
const onSubmit = async (event) => {
const onSubmit = async () => {
try {
event.preventDefault();
const data = {
manifest_id: parseInt(manifest_id),
}
if (sumsVersion.length === 0) {
await updateSUMSVersion(manifest_id, softwareVersion, token);
}
if (updateType === CAR_UPDATE) {
data.vins = selected;
@@ -104,7 +94,7 @@ const MainForm = () => {
await deployFleetUpdates(data, token);
}
setMessage(
`Deployed ${manifestName} ${version} to ${selected.length} cars`
`Deployed ${manifest.name} ${manifest.version} to ${selected.length} cars`
);
setRedirect(`/package-status/${manifest_id}`);
} catch (e) {
@@ -113,65 +103,77 @@ const MainForm = () => {
}
};
const getData = async () => {
try {
await getManifests({ id: parseInt(manifest_id) }, token);
await getSUMSVersions(token);
} catch (e) {
setMessage(e.message);
logger.warn(e.stack);
useEffect(() => {
const control = new AbortController();
const fetchData = async () => {
try {
await getManifests({
id: parseInt(manifest_id),
signal: control.signal,
}, token);
await getSUMSVersions(token);
} catch (e) {
setMessage(e.message);
logger.warn(e.stack);
}
}
fetchData();
return () => {
control.abort();
}
};
const changeVersion = (e) => {
setSoftwareVersion(e.target.value);
}
useEffect(() => {
getData();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [token]);
}, [manifest_id, token]);
useEffect(() => {
const title = `Deploy ${manifestName} ${version}`;
setTitle(title);
setSitePath([
{
label: "Deployments",
link: "/packages",
},
{
label: title,
},
]);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [manifestName, version]);
useEffect(() => {
if (!manifests || manifests.length === 0) return;
const data = manifests[0];
setManifestName(data.name);
setVersion(data.version);
setSUMSersion(data.sums || "");
setCreateDate(LocalDateTimeString(data.created));
if (manifests && manifests.length !== 0) {
setManifest(manifests[0]);
}
}, [manifests]);
useEffect(() => {
if (manifest) {
const title = `Deploy ${manifest.name} ${manifest.version}`;
setTitle(title);
setSitePath([
{
label: "Deployments",
link: "/packages",
},
{
label: title,
},
]);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [manifest]);
if (redirect.length > 0) {
return <Redirect to={redirect} />;
}
if (!manifest && !manifest?.name) {
return (
<div>Loading...</div>
);
}
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={2}>
<form className={classes.form} noValidate>
<Typography variant="body2">Created {LocalDateTimeString(manifest.created)}.</Typography>
<Grid container
className={classes.root}
spacing={2}
columns={{ xs: 4, sm: 6, md: 12 }}
>
<Grid item xs={2}>
<div
className={classes.labelInline}
>{`${selected.length} Selected`}</div>
</Grid>
<Grid item md={2} className={classes.textCenterAlign}>
<Grid item xs={2}>
<RoleWrap
groups={groups}
providers={providers}
@@ -184,46 +186,38 @@ const MainForm = () => {
/>} label="Car(default) or Fleet" />
</RoleWrap>
</Grid>
<Grid item md={2} className={classes.textCenterAlign}>
<SearchField classes={classes} onSearch={handleSearch} />
<Grid item xs={4} sm={6}>
<Box sx={{ display: "flex", width: "100%" }}>
<SearchField classes={classes} onSearch={handleSearch} />
<OptionsDropdown listId="filter-menu">
<MenuItem>
<FormControlLabel
control={<Checkbox checked={online} onChange={handleOnline} />}
label="Only online"
/>
</MenuItem>
<MenuItem>
<FormControlLabel
control={
<Checkbox checked={onlineHMI} onChange={handleOnlineHMI} />
}
label="Only online HMI"
/>
</MenuItem>
</OptionsDropdown>
</Box>
</Grid>
<Grid item md={2} className={clsx(classes.textJustifyAlign, classes.actionsBar)}>
<OptionsDropdown listId="filter-menu">
<MenuItem>
<FormControlLabel
control={<Checkbox checked={online} onChange={handleOnline} />}
label="Only online"
/>
</MenuItem>
<MenuItem>
<FormControlLabel
control={
<Checkbox checked={onlineHMI} onChange={handleOnlineHMI} />
}
label="Only online HMI"
/>
</MenuItem>
</OptionsDropdown>
</Grid>
<Grid item md={4} container justifyContent="flex-end">
{sumsVersion.length === 0 &&
<DropDownList
label="Software Version"
labelField="version"
valueField="version"
value={softwareVersion}
data={versions}
classes={classes}
onChange={changeVersion} />
}
<Button
type="submit"
disabled={busy || selected.length === 0 || (sumsVersion.length === 0 && softwareVersion === SELECT_VERSION)}
color="primary"
onClick={onSubmit}
>
<SendIcon />
</Button>
<Grid item xs="auto">
<Configure
manifest={manifest}
classes={classes}
versions={versions}
disabled={busy || selected.length === 0}
submit={onSubmit}
key={manifest.name} // to trigger re-render of child on prop change
/>
</Grid>
</Grid>
{updateType === CAR_UPDATE ?

2
src/components/Manifest/List/index.jsx
View File

@@ -112,7 +112,7 @@ const MainForm = () => {
const [pageSize, setPageSize] = useLocalStorage(PAGE_SIZE, 10);
const [pageIndex, setPageIndex] = useState(0);
const [orderBy, setOrderBy] = useState("id");
const [order, setOrder] = useState("asc");
const [order, setOrder] = useState("desc");
const [search, setSearch] = useLocalStorage("DEPLOYMENT_SEARCH", "");
const [active, setActive] = useLocalStorage("DEPLOYMENT_TAB_TOGGLE", "software");

2
src/components/Manifest/Status/index.jsx
View File

@@ -63,7 +63,7 @@ const MainForm = () => {
const [pageSize, setPageSize] = useLocalStorage(PAGE_SIZE, 10);
const [pageIndex, setPageIndex] = useState(0);
const [orderBy, setOrderBy] = useState("id");
const [order, setOrder] = useState("asc");
const [order, setOrder] = useState("desc");
const [ids, setIds] = useState([]);
const { getManifests, manifests } = useManifestsContext();
const {

99
src/components/Manifest/Update/__snapshots__/index.test.jsx.snap
View File

@@ -112,6 +112,43 @@ exports[`Manifest Details Component Render 1`] = `
</fieldset>
</div>
</div>
<div
class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
>
<label
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined MuiFormLabel-filled"
data-shrink="true"
for="release_notes"
id="release_notes-label"
>
Release Notes
</label>
<div
class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
>
<input
aria-invalid="false"
class="MuiInputBase-input MuiOutlinedInput-input"
id="release_notes"
maxlength="255"
name="release_notes"
type="text"
value="https://releasenotes.com"
/>
<fieldset
aria-hidden="true"
class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
>
<legend
class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
>
<span>
Release Notes
</span>
</legend>
</fieldset>
</div>
</div>
<div
class="MuiFormControl-root MuiFormControl-marginNormal"
>
@@ -334,6 +371,68 @@ exports[`Manifest Details Component Render 1`] = `
</fieldset>
</div>
</div>
<div
class="MuiBox-root MuiBox-root-0"
>
<div
class="MuiFormControl-root MuiFormControl-fullWidth"
>
<label
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiFormLabel-filled"
data-shrink="true"
for="number-field-update-duration"
>
Update Duration
</label>
<div
class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-formControl MuiInput-formControl"
>
<input
aria-describedby="number-field-update-duration-describe"
aria-invalid="false"
class="MuiInputBase-input MuiInput-input"
id="number-field-update-duration"
type="number"
value="0"
/>
</div>
<p
class="MuiFormHelperText-root MuiFormHelperText-filled"
id="number-field-update-duration-describe"
/>
</div>
</div>
<div
class="MuiBox-root MuiBox-root-0"
>
<div
class="MuiFormControl-root MuiFormControl-fullWidth"
>
<label
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiFormLabel-filled"
data-shrink="true"
for="number-field-max-attempts"
>
Max Attempts
</label>
<div
class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-formControl MuiInput-formControl"
>
<input
aria-describedby="number-field-max-attempts-describe"
aria-invalid="false"
class="MuiInputBase-input MuiInput-input"
id="number-field-max-attempts"
type="number"
value="0"
/>
</div>
<p
class="MuiFormHelperText-root MuiFormHelperText-filled"
id="number-field-max-attempts-describe"
/>
</div>
</div>
<button
aria-label="send command"
class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-0 MuiButton-containedPrimary MuiButton-fullWidth"

77
src/components/Manifest/Update/index.jsx
View File

@@ -10,6 +10,7 @@ import { DropDownList } from "../../Controls/DropDownList";
import { RoleWrap } from "../../Controls/RoleWrap";
import { Permissions } from "../../../utils/roles";
import useStyles from "../../useStyles";
import { NumberField } from "../../Controls/NumberField";
const manifestTypes = [
{ value: "standard", label: "Standard" },
@@ -17,13 +18,13 @@ const manifestTypes = [
];
const activeStates = [
{value: true, label: "Active" },
{value: false, label: "Archived" },
{ value: true, label: "Active" },
{ value: false, label: "Archived" },
];
const booleanStates = [
{value: true, label: "True" },
{value: false, label: "False" },
{ value: true, label: "True" },
{ value: false, label: "False" },
];
const emptyManifest = {
@@ -51,15 +52,22 @@ const MainForm = () => {
const { setMessage, setTitle, setSitePath } = useStatusContext();
const [name, setName] = useState("");
const [releaseNotes, setReleaseNotes] = useState("");
const [type, setType] = useState("");
const [active, setActive] = useState(true); // So !active = archived
const [rollback, setRollback] = useState(true);
const [env, setEnv] = useState("current");
const [updateDuration, setUpdateDuration] = useState(0);
const [maxAttempts, setMaxAttempts] = useState(0);
const changeName = (e) => {
setName(e.target.value);
}
const changeReleaseNotes = (e) => {
setReleaseNotes(e.target.value);
}
const changeType = (e) => {
setType(e.target.value);
};
@@ -76,10 +84,33 @@ const MainForm = () => {
setEnv(e.target.value)
}
const changeUpdateDuration = (value) => {
if (value < 0) {
return;
}
setUpdateDuration(value);
}
const changeMaxAttempts = (value) => {
if (value < 0) {
return;
}
setMaxAttempts(value);
}
const onSubmit = async (e) => {
e.preventDefault();
try {
const result = await updateManifest(manifest_id, { name, type, active, rollback, env }, token);
const result = await updateManifest(manifest_id, {
name,
release_notes: releaseNotes,
type,
active,
rollback,
env,
update_duration: parseInt(updateDuration),
max_attempts: parseInt(maxAttempts),
}, token);
if (!result || result.error) return;
setMessage(`Updated manifest ${manifest_id}`);
@@ -92,11 +123,11 @@ const MainForm = () => {
const manifestMigrate = async (e) => {
e.preventDefault();
try{
try {
const result = await migrateManifest(manifest_id, token)
if (!result || result.error) return;
setMessage(`Manifest Migrated ${manifest_id}`)
} catch(e) {
} catch (e) {
setMessage(`Failed to update manifest ${manifest_id}`)
}
}
@@ -110,10 +141,13 @@ const MainForm = () => {
} else {
setManifest(result);
setName(result.name);
setReleaseNotes(result.release_notes);
setType(result.type);
setActive(result.active);
setRollback(result.rollback);
setEnv(result.env ?? "current");
setUpdateDuration(result.update_duration);
setMaxAttempts(result.max_attempts);
}
} catch (e) {
setMessage(e.message);
@@ -176,12 +210,35 @@ const MainForm = () => {
fullWidth
onChange={changeName}
/>
<TextField
id="release_notes"
name="release_notes"
label="Release Notes"
variant="outlined"
margin="normal"
inputProps={{
maxLength: "255",
}}
value={releaseNotes}
fullWidth
onChange={changeReleaseNotes}
/>
<DropDownList label="Type" data={manifestTypes} classes={classes} onChange={changeType} value={type} />
<DropDownList label="Active" data={activeStates} classes={classes} onChange={changeActive} value={active}/>
<DropDownList label="Rollback" data={booleanStates} classes={classes} onChange={changeRollback} value={rollback}/>
<DropDownList label="Active" data={activeStates} classes={classes} onChange={changeActive} value={active} />
<DropDownList label="Rollback" data={booleanStates} classes={classes} onChange={changeRollback} value={rollback} />
{
ENVS.length > 1 && <DropDownList label="ECC Keys" data={ENVS} classes={classes} onChange={changeEnv} value={env}/>
ENVS.length > 1 && <DropDownList label="ECC Keys" data={ENVS} classes={classes} onChange={changeEnv} value={env} />
}
<NumberField
name="Update Duration"
value={updateDuration}
setValue={changeUpdateDuration}
/>
<NumberField
name="Max Attempts"
value={maxAttempts}
setValue={changeMaxAttempts}
/>
<Button
type="submit"
aria-label="send command"

8
src/components/useStyles.jsx
View File

@@ -348,10 +348,18 @@ const useStyles = makeStyles((theme) => ({
formGridItem: {
flexGrow: 1,
},
marginTop: {
marginTop: theme.spacing(2),
},
marginX: {
marginTop: theme.spacing(2),
marginBottom: theme.spacing(2),
},
closeModal: {
position: "absolute",
top: "5px",
right: "5px",
},
}));
export default useStyles;