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

Merge branch 'release/0.0.3'

Browse Source
This commit is contained in:
jwu-fisker
2022-09-28 09:01:19 -07:00
parent 56043dc375
commit a1ac3888fa
31 changed files with 959 additions and 437 deletions
Download Patch File Download Diff File Expand all files Collapse all files

658
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

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

@@ -2434,6 +2434,10 @@ exports[`App Route /package-status authenticated 1`] = `
>
Updated
</th>
<th
class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
scope="col"
/>
</tr>
</thead>
<tbody
@@ -2472,6 +2476,26 @@ exports[`App Route /package-status authenticated 1`] = `
>
7/12/2021 6:22:13 PM
</td>
<td
class="MuiTableCell-root MuiTableCell-body"
>
<a
class=""
href="/package-status/1"
title="Send cancel for 1G1FP87S3GN100062"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"
/>
</svg>
</a>
</td>
</tr>
</tbody>
<tfoot
@@ -2482,7 +2506,7 @@ exports[`App Route /package-status authenticated 1`] = `
>
<td
class="MuiTableCell-root MuiTableCell-footer MuiTablePagination-root"
colspan="5"
colspan="6"
>
<div
class="MuiToolbar-root MuiToolbar-regular MuiTablePagination-toolbar MuiToolbar-gutters"
@@ -3287,6 +3311,7 @@ exports[`App Route /packages authenticated 1`] = `
/>
</svg>
</a>
<div>
<a
class=""
href="/packages"
@@ -3304,6 +3329,8 @@ exports[`App Route /packages authenticated 1`] = `
/>
</svg>
</a>
<div />
</div>
</td>
</tr>
</tbody>
@@ -7024,6 +7051,7 @@ exports[`App Route /vehicle-status authenticated 1`] = `
</a>
</div>
</div>
<div />
</div>
</div>
</div>

44
src/components/CANFilter/Table/__snapshots__/index.test.jsx.snap
View File

@@ -149,6 +149,29 @@ exports[`CANFiltersTable 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"
>
Fleet
<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"
@@ -173,6 +196,13 @@ exports[`CANFiltersTable Render 1`] = `
>
1000
</td>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
>
<a
href="/fleet/undefined"
/>
</td>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
>
@@ -226,6 +256,13 @@ exports[`CANFiltersTable Render 1`] = `
>
2000
</td>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
>
<a
href="/fleet/undefined"
/>
</td>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
>
@@ -279,6 +316,13 @@ exports[`CANFiltersTable Render 1`] = `
>
0
</td>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
>
<a
href="/fleet/undefined"
/>
</td>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
>

7
src/components/CANFilter/Table/index.jsx
View File

@@ -39,6 +39,10 @@ const tableColumns = [
id: "interval",
label: "Interval (ms)"
},
{
id: "fleet",
label: "Fleet"
},
{
id: "",
label: "Actions"
@@ -178,6 +182,9 @@ const MainForm = ({ vin }) => {
<TableRow key={row.can_id}>
<TableCell align="center">{row.can_id}</TableCell>
<TableCell align="center">{row.interval}</TableCell>
<TableCell align="center">
<Link to={`/fleet/${row.fleet}`}>{row.fleet}</Link>
</TableCell>
<TableCell align="center">{Actions(row)}</TableCell>
</TableRow>
))}

12
src/components/Cars/Status/Details/__snapshots__/index.test.jsx.snap
View File

@@ -28,6 +28,7 @@ exports[`VehicleDetailsTab Render 1`] = `
VIN
</b>
:
TESTVIN1234567890
</p>
<p>
<b>
@@ -84,13 +85,13 @@ exports[`VehicleDetailsTab Render 1`] = `
>
<a
class=""
href="/vehicle-update?vin=undefined"
href="/vehicle-update?vin=TESTVIN1234567890"
style="margin: 5px;"
title="Update \\"undefined\\""
title="Update \\"TESTVIN1234567890\\""
>
<svg
aria-hidden="true"
aria-label="Update \\"undefined\\""
aria-label="Update \\"TESTVIN1234567890\\""
class="MuiSvgIcon-root"
focusable="false"
viewBox="0 0 24 24"
@@ -103,11 +104,11 @@ exports[`VehicleDetailsTab Render 1`] = `
<a
class=""
href="/"
title="Delete \\"undefined\\""
title="Delete \\"TESTVIN1234567890\\""
>
<svg
aria-hidden="true"
aria-label="Delete \\"undefined\\""
aria-label="Delete \\"TESTVIN1234567890\\""
class="MuiSvgIcon-root"
focusable="false"
viewBox="0 0 24 24"
@@ -119,6 +120,7 @@ exports[`VehicleDetailsTab Render 1`] = `
</a>
</div>
</div>
<div />
</div>
</div>
</div>

5
src/components/Cars/Status/Details/index.jsx
View File

@@ -14,12 +14,14 @@ import { useStatusContext } from "../../../Contexts/StatusContext";
import useStyles from "../../../useStyles";
import { logger } from "../../../../services/monitoring";
import { useVehicleContext, VehicleProvider } from "../../../Contexts/VehicleContext";
import DeleteConfirmation from "../../../DeleteConfirmation";
const MainForm = ({ vin }) => {
const classes = useStyles();
const { setMessage } = useStatusContext();
const { vehicle, getVehicle, deleteVehicle } = useVehicleContext();
const [redirect, setRedirect] = useState(null);
const [showDeleteModal, setShowDeleteModal] = useState(false)
const { token: { idToken: { jwtToken: token } } } = useUserContext();
useEffect(() => {
@@ -76,12 +78,13 @@ const MainForm = ({ vin }) => {
</Link>
</Tooltip>
<Tooltip key={`delete-${vin}`} title={`Delete "${vin}"`}>
<Link to="#" onClick={onDelete}>
<Link to="#" onClick={() => setShowDeleteModal(true)}>
<DeleteIcon aria-label={`Delete "${vin}"`} />
</Link>
</Tooltip>
</Grid>
</Grid>
<DeleteConfirmation message={vin} open={showDeleteModal} close={()=> setShowDeleteModal(false)} deleteFunction={onDelete}/>
</div >
);
};

8
src/components/Cars/Status/Details/index.test.jsx
View File

@@ -4,6 +4,7 @@ jest.mock("../../../Contexts/UserContext");
import { render, waitFor } from "@testing-library/react";
import { BrowserRouter } from "react-router-dom";
import routeData from "react-router";
import { VehicleProvider } from "../../../Contexts/VehicleContext";
import { StatusProvider } from "../../../Contexts/StatusContext";
@@ -18,7 +19,7 @@ const renderVehicleDetailsTab = async () => {
<StatusProvider>
<UserProvider>
<BrowserRouter>
<MainForm />
<MainForm vin="TESTVIN1234567890"/>
</BrowserRouter>
</UserProvider>
</StatusProvider>
@@ -35,6 +36,11 @@ describe("VehicleDetailsTab", () => {
addSnapshotSerializer(expect);
});
beforeEach(() => {
// Does not work if placed in beforeAll
jest.spyOn(routeData, 'useParams').mockReturnValue({ vin: "TESTVIN1234567890" })
})
it("Render", async () => {
setToken(TEST_AUTH_OBJECT);
const container = await renderVehicleDetailsTab();

44
src/components/Cars/Status/__snapshots__/CANFiltersTab.test.jsx.snap
View File

@@ -148,6 +148,29 @@ exports[`CANFiltersTab 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"
>
Fleet
<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"
@@ -172,6 +195,13 @@ exports[`CANFiltersTab Render 1`] = `
>
1000
</td>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
>
<a
href="/fleet/undefined"
/>
</td>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
>
@@ -225,6 +255,13 @@ exports[`CANFiltersTab Render 1`] = `
>
2000
</td>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
>
<a
href="/fleet/undefined"
/>
</td>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
>
@@ -278,6 +315,13 @@ exports[`CANFiltersTab Render 1`] = `
>
0
</td>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
>
<a
href="/fleet/undefined"
/>
</td>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
>

6
src/components/Cars/Status/__snapshots__/CarUpdatesTab.test.jsx.snap
View File

@@ -149,6 +149,10 @@ exports[`CarUpdatesTab Render 1`] = `
</svg>
</span>
</th>
<th
class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
scope="col"
/>
</tr>
</thead>
<tbody
@@ -162,7 +166,7 @@ exports[`CarUpdatesTab Render 1`] = `
>
<td
class="MuiTableCell-root MuiTableCell-footer MuiTablePagination-root"
colspan="5"
colspan="6"
>
<div
class="MuiToolbar-root MuiToolbar-regular MuiTablePagination-toolbar MuiToolbar-gutters"

1
src/components/Cars/Status/__snapshots__/DetailsTab.test.jsx.snap
View File

@@ -128,6 +128,7 @@ exports[`DetailsTab Render 1`] = `
</a>
</div>
</div>
<div />
</div>
</div>
</div>

12
src/components/Cars/Status/__snapshots__/index.test.jsx.snap
View File

@@ -175,6 +175,7 @@ exports[`CarStatus Render 1`] = `
VIN
</b>
:
TESTVIN1234567890
</p>
</div>
<div
@@ -182,13 +183,13 @@ exports[`CarStatus Render 1`] = `
>
<a
class=""
href="/vehicle-update?vin=undefined"
href="/vehicle-update?vin=TESTVIN1234567890"
style="margin: 5px;"
title="Update \\"undefined\\""
title="Update \\"TESTVIN1234567890\\""
>
<svg
aria-hidden="true"
aria-label="Update \\"undefined\\""
aria-label="Update \\"TESTVIN1234567890\\""
class="MuiSvgIcon-root"
focusable="false"
viewBox="0 0 24 24"
@@ -201,11 +202,11 @@ exports[`CarStatus Render 1`] = `
<a
class=""
href="/"
title="Delete \\"undefined\\""
title="Delete \\"TESTVIN1234567890\\""
>
<svg
aria-hidden="true"
aria-label="Delete \\"undefined\\""
aria-label="Delete \\"TESTVIN1234567890\\""
class="MuiSvgIcon-root"
focusable="false"
viewBox="0 0 24 24"
@@ -217,6 +218,7 @@ exports[`CarStatus Render 1`] = `
</a>
</div>
</div>
<div />
</div>
</div>
</div>

6
src/components/Cars/Status/index.test.jsx
View File

@@ -7,6 +7,7 @@ jest.mock("@material-ui/core/utils/unstable_useId", () =>
import { render, waitFor } from "@testing-library/react";
import { BrowserRouter } from "react-router-dom";
import routeData from "react-router";
import { CANFiltersProvider } from "../../Contexts/CANFiltersContext";
import { StatusProvider } from "../../Contexts/StatusContext";
@@ -38,6 +39,11 @@ describe("CarStatus", () => {
addSnapshotSerializer(expect);
});
beforeEach(() => {
// Does not work if placed in beforeAll
jest.spyOn(routeData, 'useParams').mockReturnValue({ vin: "TESTVIN1234567890" })
})
it("Render", async () => {
setToken(TEST_AUTH_OBJECT);
const container = await renderCarStatus();

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

@@ -6,7 +6,6 @@ import { validateStatusMessage } from "../../utils/statusMessage";
const FINAL_UPDATE_STATES = ["package_install_complete"];
const CarUpdatesContext = React.createContext();
const validateDeployClosure = (data, propertyName, errPfx) => {
if (data === null) {
throw new Error("No car update data");
@@ -20,17 +19,16 @@ const validateDeployClosure = (data, propertyName, errPfx) => {
if (!value || value.length === 0) {
throw new Error(`${errPfx} are required`);
}
}
};
const validateDeployCarUpdates = (data) => {
return validateDeployClosure(data, 'vins', 'Cars')
return validateDeployClosure(data, "vins", "Cars");
};
const validateDeployFleetUpdates = (data) => {
return validateDeployClosure(data, 'fleet_names', 'Fleets')
return validateDeployClosure(data, "fleet_names", "Fleets");
};
export const CarUpdatesProvider = ({ children }) => {
const [busy, setBusy] = useState(false);
const [carUpdates, setCarUpdates] = useState([]);
@@ -68,7 +66,7 @@ export const CarUpdatesProvider = ({ children }) => {
}
return result;
}
};
const getCarUpdates = async (search, token) => {
let result;
@@ -224,12 +222,28 @@ export const CarUpdatesProvider = ({ children }) => {
return result;
};
const cancelUpdate = async (id, token) => {
let result;
try {
setBusy(true);
result = await api.cancelCarUpdate(id, token);
if (result.error)
throw new Error(`Cancel car update error. ${result.message}`);
} finally {
setBusy(false);
}
return result;
};
return (
<CarUpdatesContext.Provider
value={{
busy,
carUpdates,
totalCarUpdates,
cancelUpdate,
deployCarUpdates,
deployFleetUpdates,
getCarUpdates,

27
src/components/Controls/CarUpdatesTable/index.jsx
View File

@@ -6,8 +6,10 @@ import {
TableFooter,
TablePagination,
TableRow,
Tooltip,
} from "@material-ui/core";
import { Link } from "react-router-dom";
import CancelIcon from "@material-ui/icons/Cancel";
import { LocalDateTimeString } from "../../../utils/dates";
import TableHeaderSortable from "../../Table/HeaderSortable";
@@ -41,6 +43,10 @@ const tableColumns = [
id: "updated_at",
label: "Updated",
},
{
id: "",
label: "",
},
];
const PAGE_SIZE = "CAR_UPDATES_TABLE_PAGE_SIZE";
@@ -51,7 +57,8 @@ const MainForm = ({ vin, token }) => {
const [pageIndex, setPageIndex] = useState(0);
const [orderBy, setOrderBy] = useState("id");
const [order, setOrder] = useState("desc");
const { getCarUpdates, carUpdates, totalCarUpdates } = useCarUpdatesContext();
const { cancelUpdate, getCarUpdates, carUpdates, totalCarUpdates } =
useCarUpdatesContext();
const { setMessage } = useStatusContext();
useEffect(() => {
@@ -107,6 +114,15 @@ const MainForm = ({ vin, token }) => {
return "None";
};
const sendCancel = async (row) => {
try {
await cancelUpdate(row.id, token);
setMessage(`Sent cancel for ${updateName(row)}`);
} catch (e) {
setMessage(e.message);
}
};
return (
<Table>
<TableHeaderSortable
@@ -132,6 +148,13 @@ const MainForm = ({ vin, token }) => {
<TableCell align="center">
{LocalDateTimeString(row.updated)}
</TableCell>
<TableCell>
<Tooltip key={row.vin} title={`Send cancel for ${row.vin}`}>
<Link to="#" onClick={() => sendCancel(row)}>
<CancelIcon />
</Link>
</Tooltip>
</TableCell>
</TableRow>
))}
</TableBody>
@@ -139,7 +162,7 @@ const MainForm = ({ vin, token }) => {
<TableRow>
<TablePagination
rowsPerPageOptions={[5, 10, 25, 100]}
colSpan={5}
colSpan={6}
count={totalCarUpdates}
rowsPerPage={pageSize}
page={pageIndex}

9
src/components/DeleteConfirmation/__snapshots__/index.test.jsx.snap Normal file
View File

@@ -0,0 +1,9 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Delete Confirmation Modal Should render 1`] = `
<div
aria-hidden="true"
>
<div />
</div>
`;

36
src/components/DeleteConfirmation/index.jsx Normal file
View File

@@ -0,0 +1,36 @@
import React from "react";
import PropTypes from "prop-types";
import {Dialog, DialogTitle, DialogContentText, Button, DialogActions, DialogContent} from '@material-ui/core';
const DeleteConfirmation = (props) => {
return (
<div>
<Dialog open={props.open}
onClose={props.close}>
<DialogTitle id="alert-dialog-title">
{"Delete Resource?"}
</DialogTitle>
<DialogContent>
<DialogContentText id="alert-dialog-description">
{"Are you sure you want to delete: " + props.message}
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={props.close}>Cancel</Button>
<Button variant="contained" color="secondary" onClick={() => { props.close(); props.deleteFunction()}} autoFocus>
Delete
</Button>
</DialogActions>
</Dialog>
</div>
)
}
DeleteConfirmation.propTypes={
open: PropTypes.bool.isRequired, // Boolean that determines if the modal should be open
close: PropTypes.func.isRequired, // Function that sets the open state to false i.e. () => setOpen(false)
message: PropTypes.any.isRequired, // What the user will see if being confirmed to be deleted
deleteFunction: PropTypes.func.isRequired, // Function that runs when user clicks delete
}
export default DeleteConfirmation;

20
src/components/DeleteConfirmation/index.test.jsx Normal file
View File

@@ -0,0 +1,20 @@
jest.mock("../Contexts/UserContext");
import React from "react";
import { render, cleanup } from "@testing-library/react";
import DeleteConfirmation from "./index";
import addSnapshotSerializer from "../../utils/snapshot";
describe("Delete Confirmation Modal", () => {
beforeAll(() => {
addSnapshotSerializer(expect);
});
it("Should render", () => {
const { container } = render(
<DeleteConfirmation open={true} close={()=>{}} message="Test Message" deleteFunction={()=>{}}/>
);
expect(container).toMatchSnapshot();
cleanup();
});
});

12
src/components/Fleets/Status/Details/__snapshots__/index.test.jsx.snap
View File

@@ -28,6 +28,7 @@ exports[`FleetDetailsTab Render 1`] = `
Name
</b>
:
Test Fleet
</p>
<p>
<b>
@@ -91,13 +92,13 @@ exports[`FleetDetailsTab Render 1`] = `
>
<a
class=""
href="/fleet-update?name=undefined"
href="/fleet-update?name=Test Fleet"
style="margin: 5px;"
title="Update \\"undefined\\""
title="Update \\"Test Fleet\\""
>
<svg
aria-hidden="true"
aria-label="Update \\"undefined\\""
aria-label="Update \\"Test Fleet\\""
class="MuiSvgIcon-root"
focusable="false"
viewBox="0 0 24 24"
@@ -110,11 +111,11 @@ exports[`FleetDetailsTab Render 1`] = `
<a
class=""
href="/"
title="Delete \\"undefined\\""
title="Delete \\"Test Fleet\\""
>
<svg
aria-hidden="true"
aria-label="Delete \\"undefined\\""
aria-label="Delete \\"Test Fleet\\""
class="MuiSvgIcon-root"
focusable="false"
viewBox="0 0 24 24"
@@ -126,6 +127,7 @@ exports[`FleetDetailsTab Render 1`] = `
</a>
</div>
</div>
<div />
</div>
</div>
</div>

5
src/components/Fleets/Status/Details/index.jsx
View File

@@ -14,12 +14,14 @@ import { useStatusContext } from "../../../Contexts/StatusContext";
import { FleetProvider, useFleetContext } from "../../../Contexts/FleetContext"
import useStyles from "../../../useStyles";
import { logger } from "../../../../services/monitoring";
import DeleteConfirmation from "../../../DeleteConfirmation";
const MainForm = ({ name }) => {
const classes = useStyles();
const { setMessage } = useStatusContext();
const { fleet, getFleet, deleteFleet } = useFleetContext();
const [redirect, setRedirect] = useState(null);
const [showDeleteModal, setShowDeleteModal] = useState(false)
const { token: { idToken: { jwtToken: token } } } = useUserContext();
useEffect(() => {
@@ -77,12 +79,13 @@ const MainForm = ({ name }) => {
</Link>
</Tooltip>
<Tooltip key={`delete-${name}`} title={`Delete "${name}"`}>
<Link to="#" onClick={onDelete}>
<Link to="#" onClick={() => setShowDeleteModal(true)}>
<DeleteIcon aria-label={`Delete "${name}"`} />
</Link>
</Tooltip>
</Grid>
</Grid>
<DeleteConfirmation message={name} open={showDeleteModal} close={()=> setShowDeleteModal(false)} deleteFunction={onDelete}/>
</div >
);
};

8
src/components/Fleets/Status/Details/index.test.jsx
View File

@@ -4,6 +4,7 @@ jest.mock("../../../Contexts/UserContext");
import { render, waitFor } from "@testing-library/react";
import { BrowserRouter } from "react-router-dom";
import routeData from "react-router";
import { FleetProvider } from "../../../Contexts/FleetContext";
import { StatusProvider } from "../../../Contexts/StatusContext";
@@ -18,7 +19,7 @@ const renderFleetDetailsTab = async () => {
<StatusProvider>
<UserProvider>
<BrowserRouter>
<MainForm />
<MainForm name="Test Fleet"/>
</BrowserRouter>
</UserProvider>
</StatusProvider>
@@ -35,6 +36,11 @@ describe("FleetDetailsTab", () => {
addSnapshotSerializer(expect);
});
beforeEach(() => {
// Does not work if placed in beforeAll
jest.spyOn(routeData, 'useParams').mockReturnValue({ name: "Test Fleet" })
})
it("Render", async () => {
setToken(TEST_AUTH_OBJECT);
const container = await renderFleetDetailsTab();

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

@@ -153,6 +153,7 @@ exports[`FleetVehiclesTable Render 1`] = `
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
>
<div>
<a
class=""
href="/"
@@ -170,6 +171,8 @@ exports[`FleetVehiclesTable Render 1`] = `
/>
</svg>
</a>
<div />
</div>
</td>
</tr>
<tr
@@ -187,6 +190,7 @@ exports[`FleetVehiclesTable Render 1`] = `
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
>
<div>
<a
class=""
href="/"
@@ -204,6 +208,8 @@ exports[`FleetVehiclesTable Render 1`] = `
/>
</svg>
</a>
<div />
</div>
</td>
</tr>
<tr
@@ -221,6 +227,7 @@ exports[`FleetVehiclesTable Render 1`] = `
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
>
<div>
<a
class=""
href="/"
@@ -238,6 +245,8 @@ exports[`FleetVehiclesTable Render 1`] = `
/>
</svg>
</a>
<div />
</div>
</td>
</tr>
</tbody>

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

@@ -1,5 +1,5 @@
import React, { useEffect, useState } from "react";
import { Link } from 'react-router-dom';
import { Link } from "react-router-dom";
import {
Grid,
Table,
@@ -15,24 +15,28 @@ import DeleteIcon from "@material-ui/icons/Delete";
import clsx from "clsx";
import TableHeaderSortable from "../../../../Table/HeaderSortable";
import { useUserContext } from "../../../../Contexts/UserContext"
import { useUserContext } from "../../../../Contexts/UserContext";
import { useStatusContext } from "../../../../Contexts/StatusContext";
import { FleetProvider, useFleetContext } from "../../../../Contexts/FleetContext"
import {
FleetProvider,
useFleetContext,
} from "../../../../Contexts/FleetContext";
import useStyles from "../../../../useStyles";
import SearchField from "../../../../Controls/SearchField";
import { logger } from "../../../../../services/monitoring";
import { Roles, hasRole } from "../../../../../utils/roles";
import { useLocalStorage } from "../../../../useLocalStorage";
import DeleteConfirmation from "../../../../DeleteConfirmation";
const tableColumns = [
{
id: "vin",
label: "VIN"
label: "VIN",
},
{
id: "",
label: "Actions"
}
label: "Actions",
},
];
const PAGE_SIZE = "FLEET_STATUS_VEHICLES_TABLE_PAGE_SIZE";
@@ -43,10 +47,21 @@ const MainForm = ({ name }) => {
const [orderBy, setOrderBy] = useState("id");
const [order, setOrder] = useState("desc");
const [search, setSearch] = useState("");
const [showDeleteModal, setShowDeleteModal] = useState(false);
const classes = useStyles();
const { setMessage } = useStatusContext();
const { fleetVehicles, totalFleetVehicles, getFleetVehicles, deleteFleetVehicle } = useFleetContext();
const { token: { idToken: { jwtToken: token } }, groups } = useUserContext();
const {
fleetVehicles,
totalFleetVehicles,
getFleetVehicles,
deleteFleetVehicle,
} = useFleetContext();
const {
token: {
idToken: { jwtToken: token },
},
groups,
} = useUserContext();
const handleSearch = (query) => {
setSearch(query);
@@ -103,7 +118,7 @@ const MainForm = ({ name }) => {
const onDelete = async (vin) => {
try {
await deleteFleetVehicle(name, { vin: vin }, token);
setMessage(`Deleted ${vin}`)
setMessage(`Deleted ${vin}`);
} catch (e) {
setMessage(e.message);
logger.warn(e.stack);
@@ -116,8 +131,8 @@ const MainForm = ({ name }) => {
actions.push({
tip: `Delete "${vin}"`,
id: vin,
icon: <DeleteIcon aria-label={`Delete ${vin}`} />
})
icon: <DeleteIcon aria-label={`Delete ${vin}`} />,
});
}
if (actions.length === 0) return ["No actions"];
@@ -132,11 +147,19 @@ const MainForm = ({ name }) => {
);
} else {
return (
<div>
<Tooltip key={`delete-${action.id}`} title={action.tip}>
<Link to="#" onClick={() => onDelete(action.id)}>
{action.icon}
</Link>
</Tooltip>
<DeleteConfirmation
message={action.id}
open={showDeleteModal}
close={() => setShowDeleteModal(false)}
deleteFunction={() => onDelete(action.id)}
/>
</div>
);
}
});
@@ -146,7 +169,10 @@ const MainForm = ({ name }) => {
<div className={clsx(classes.paper, classes.tableSize)}>
<Grid container className={classes.root} spacing={2}>
<Grid item md={4} className={classes.textJustifyAlign}>
<Link to={`/fleet/${name}/vehicle-add`} className={classes.labelInline}>
<Link
to={`/fleet/${name}/vehicle-add`}
className={classes.labelInline}
>
<AddCircleIcon fontSize="large" />
</Link>
</Grid>
@@ -163,7 +189,7 @@ const MainForm = ({ name }) => {
onSortRequest={handleSort}
/>
<TableBody>
{fleetVehicles.map(vin => (
{fleetVehicles.map((vin) => (
<TableRow key={vin}>
<TableCell align="center">
<Link to={`/vehicle-status/${vin}`}>{vin}</Link>

1
src/components/Fleets/Status/__snapshots__/DetailsTab.test.jsx.snap
View File

@@ -135,6 +135,7 @@ exports[`DetailsTab Render 1`] = `
</a>
</div>
</div>
<div />
</div>
</div>
</div>

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

@@ -152,6 +152,7 @@ exports[`VehiclesTab Render 1`] = `
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
>
<div>
<a
class=""
href="/"
@@ -169,6 +170,8 @@ exports[`VehiclesTab Render 1`] = `
/>
</svg>
</a>
<div />
</div>
</td>
</tr>
<tr
@@ -186,6 +189,7 @@ exports[`VehiclesTab Render 1`] = `
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
>
<div>
<a
class=""
href="/"
@@ -203,6 +207,8 @@ exports[`VehiclesTab Render 1`] = `
/>
</svg>
</a>
<div />
</div>
</td>
</tr>
<tr
@@ -220,6 +226,7 @@ exports[`VehiclesTab Render 1`] = `
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
>
<div>
<a
class=""
href="/"
@@ -237,6 +244,8 @@ exports[`VehiclesTab Render 1`] = `
/>
</svg>
</a>
<div />
</div>
</td>
</tr>
</tbody>

12
src/components/Fleets/Status/__snapshots__/index.test.jsx.snap
View File

@@ -124,6 +124,7 @@ exports[`FleetStatus Render 1`] = `
Name
</b>
:
Fleet Name
</p>
<p>
<b>
@@ -187,13 +188,13 @@ exports[`FleetStatus Render 1`] = `
>
<a
class=""
href="/fleet-update?name=undefined"
href="/fleet-update?name=Fleet Name"
style="margin: 5px;"
title="Update \\"undefined\\""
title="Update \\"Fleet Name\\""
>
<svg
aria-hidden="true"
aria-label="Update \\"undefined\\""
aria-label="Update \\"Fleet Name\\""
class="MuiSvgIcon-root"
focusable="false"
viewBox="0 0 24 24"
@@ -206,11 +207,11 @@ exports[`FleetStatus Render 1`] = `
<a
class=""
href="/"
title="Delete \\"undefined\\""
title="Delete \\"Fleet Name\\""
>
<svg
aria-hidden="true"
aria-label="Delete \\"undefined\\""
aria-label="Delete \\"Fleet Name\\""
class="MuiSvgIcon-root"
focusable="false"
viewBox="0 0 24 24"
@@ -222,6 +223,7 @@ exports[`FleetStatus Render 1`] = `
</a>
</div>
</div>
<div />
</div>
</div>
</div>

6
src/components/Fleets/Status/index.test.jsx
View File

@@ -7,6 +7,7 @@ jest.mock("@material-ui/core/utils/unstable_useId", () =>
import { render, waitFor } from "@testing-library/react";
import { BrowserRouter } from "react-router-dom";
import routeData from "react-router";
import { FleetProvider } from "../../Contexts/FleetContext";
import { StatusProvider } from "../../Contexts/StatusContext";
@@ -38,6 +39,11 @@ describe("FleetStatus", () => {
addSnapshotSerializer(expect);
});
beforeEach(() => {
// Does not work if placed in beforeAll
jest.spyOn(routeData, 'useParams').mockReturnValue({ name: "Fleet Name" })
})
it("Render", async () => {
setToken(TEST_AUTH_OBJECT);
const container = await renderCarStatus();

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

@@ -30,6 +30,7 @@ import ECUList from "../../Controls/ECUList";
import { Roles, hasRole } from "../../../utils/roles";
import { useLocalStorage } from "../../useLocalStorage";
import { TYPE_MANIFEST_SOFTWARE } from "../../../utils/manifest_types";
import DeleteConfirmation from "../../DeleteConfirmation";
const tableColumns = [
{
@@ -67,6 +68,7 @@ const MainForm = () => {
const [orderBy, setOrderBy] = useState("id");
const [order, setOrder] = useState("asc");
const [search, setSearch] = useState("");
const [showDeleteModal, setShowDeleteModal] = useState(false);
const { getManifests, deleteManifest, manifests, totalManifests } =
useManifestsContext();
const { setMessage, setTitle, setSitePath } = useStatusContext();
@@ -178,11 +180,19 @@ const MainForm = () => {
);
} else {
return (
<div>
<Tooltip key={`delete-${action.id}`} title={action.tip}>
<Link to="#" onClick={() => onDelete(action.id)}>
{action.icon}
</Link>
</Tooltip>
<DeleteConfirmation
message={action.id}
open={showDeleteModal}
close={() => setShowDeleteModal(false)}
deleteFunction={() => onDelete(action.id)}
/>
</div>
);
}
});

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

@@ -10,7 +10,9 @@ import {
TableHead,
TablePagination,
TableRow,
Tooltip,
} from "@material-ui/core";
import CancelIcon from "@material-ui/icons/Cancel";
import clsx from "clsx";
import {
@@ -38,6 +40,7 @@ const MainForm = () => {
const [pageIndex, setPageIndex] = useState(0);
const { getManifests, manifests } = useManifestsContext();
const {
cancelUpdate,
getCarUpdates,
carUpdates,
totalCarUpdates,
@@ -127,6 +130,15 @@ const MainForm = () => {
setPageIndex(0);
};
const sendCancel = async ({ id, vin }) => {
try {
await cancelUpdate(id, token);
setMessage(`Sent cancel for ${vin}`);
} catch (e) {
setMessage(e.message);
}
};
return (
<div className={clsx(classes.paper, classes.tableSize)}>
<Table>
@@ -137,6 +149,7 @@ const MainForm = () => {
<TableCell align="center">Status</TableCell>
<TableCell align="center">Created</TableCell>
<TableCell align="center">Updated</TableCell>
<TableCell align="center"></TableCell>
</TableRow>
</TableHead>
<TableBody>
@@ -158,6 +171,13 @@ const MainForm = () => {
<TableCell align="center">
{LocalDateTimeString(row.updated)}
</TableCell>
<TableCell>
<Tooltip key={row.vin} title={`Send cancel for ${row.vin}`}>
<Link to="#" onClick={() => sendCancel(row)}>
<CancelIcon />
</Link>
</Tooltip>
</TableCell>
</TableRow>
))}
</TableBody>
@@ -165,7 +185,7 @@ const MainForm = () => {
<TableRow>
<TablePagination
rowsPerPageOptions={[5, 10, 25, 100]}
colSpan={5}
colSpan={6}
count={totalCarUpdates}
rowsPerPage={pageSize}
page={pageIndex}

4
src/services/__mocks__/updatesAPI.js
View File

@@ -22,6 +22,10 @@ const updatesAPI = {
getCarUpdateProgress: async (carupdateids, token) => {
return { statuses: [] };
},
cancelCarUpdate: async (id, token) => {
return { message: "OK" };
},
};
export default updatesAPI;

19
src/services/updatesAPI.js
View File

@@ -8,7 +8,8 @@ import {
const API_ENDPOINT = process.env.REACT_APP_UPLOAD_SERVICE_URL;
const createDeployUpdatesClosure = (suffix) => {
return async (data, token) => fetch(`${API_ENDPOINT}/${suffix}`, {
return async (data, token) =>
fetch(`${API_ENDPOINT}/${suffix}`, {
method: "POST",
headers: Object.assign(
{ "Content-Type": "application/json" },
@@ -17,8 +18,8 @@ const createDeployUpdatesClosure = (suffix) => {
body: JSON.stringify(data),
})
.then(fetchRespHandler)
.catch(errorHandler)
}
.catch(errorHandler);
};
const updatesAPI = {
createFleetUpdates: createDeployUpdatesClosure("fleetupdate"),
@@ -76,6 +77,18 @@ const updatesAPI = {
.then(fetchRespHandler)
.catch(errorHandler);
},
cancelCarUpdate: async (id, token) => {
return fetch(`${API_ENDPOINT}/carupdate/${id}/cancel`, {
method: "POST",
headers: Object.assign(
{ "Content-Type": "application/json" },
getAuthHeaderOptions(token)
),
})
.then(fetchRespHandler)
.catch(errorHandler);
},
};
export default updatesAPI;