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

CEC-2601 (#204)

Browse Source
This commit is contained in:
John Wu
2022-09-27 10:29:09 -07:00
committed by GitHub
parent 39ccee54be
commit b622e42286
8 changed files with 140 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
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"

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"

28
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([]);
@@ -61,14 +59,14 @@ export const CarUpdatesProvider = ({ children }) => {
setBusy(true);
validateDeployFleetUpdates(data);
result = await api.createFleetUpdates(data, token);
if (result.error)
if (result.error)
throw new Error(`Deploy fleet updates error. ${result.message}`);
} finally {
setBusy(false);
}
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,

29
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";
@@ -18,7 +20,7 @@ import {
import { useStatusContext } from "../../Contexts/StatusContext";
import useStyles from "../../useStyles";
import { logger } from "../../../services/monitoring";
import {useLocalStorage} from "../../useLocalStorage";
import { useLocalStorage } from "../../useLocalStorage";
const tableColumns = [
{
@@ -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}

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

@@ -68,7 +68,7 @@ const MainForm = () => {
const [orderBy, setOrderBy] = useState("id");
const [order, setOrder] = useState("asc");
const [search, setSearch] = useState("");
const [showDeleteModal, setShowDeleteModal] = useState(false)
const [showDeleteModal, setShowDeleteModal] = useState(false);
const { getManifests, deleteManifest, manifests, totalManifests } =
useManifestsContext();
const { setMessage, setTitle, setSitePath } = useStatusContext();
@@ -181,12 +181,17 @@ 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)} />
<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>
);
}

26
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 {
@@ -27,9 +29,9 @@ import useStyles from "../../useStyles";
import { LocalDateTimeString } from "../../../utils/dates";
import { logger } from "../../../services/monitoring";
import ManifestDetails from "../Details";
import {useLocalStorage} from "../../useLocalStorage";
import { useLocalStorage } from "../../useLocalStorage";
const PAGE_SIZE="MANIFEST_STATUS_PAGE_SIZE";
const PAGE_SIZE = "MANIFEST_STATUS_PAGE_SIZE";
const MainForm = () => {
const { manifest_id } = useParams();
@@ -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;

35
src/services/updatesAPI.js
View File

@@ -8,17 +8,18 @@ import {
const API_ENDPOINT = process.env.REACT_APP_UPLOAD_SERVICE_URL;
const createDeployUpdatesClosure = (suffix) => {
return async (data, token) => fetch(`${API_ENDPOINT}/${suffix}`, {
method: "POST",
headers: Object.assign(
{ "Content-Type": "application/json" },
getAuthHeaderOptions(token)
),
body: JSON.stringify(data),
})
.then(fetchRespHandler)
.catch(errorHandler)
}
return async (data, token) =>
fetch(`${API_ENDPOINT}/${suffix}`, {
method: "POST",
headers: Object.assign(
{ "Content-Type": "application/json" },
getAuthHeaderOptions(token)
),
body: JSON.stringify(data),
})
.then(fetchRespHandler)
.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;