CEC-247, CEC-261 Manifest and ECU display (#65)

* CEC-261 Add ECU list control

* CEC-261 Update vehicle service mock

* CEC-247 Manifest screens

* Fix test

* Remove dynamic dates from mocks

* Remove timezone from mock dates

* Fix test for date string timezone difference

src/components/App/App.test.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");
+  });
 });

src/components/Cars/CarSelectionTable/index.jsx

@@ -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>

src/components/Cars/List/index.jsx

@@ -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>

src/components/Contexts/CarUpdatesContext.jsx

@@ -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);

src/components/Contexts/ManifestsContext.jsx

@@ -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);

src/components/Contexts/UpdatesContext.test.jsx

@@ -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);

src/components/Contexts/VehicleContext.test.jsx

@@ -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,
+  },
 ];

src/components/Contexts/__mocks__/CarUpdatesContext.jsx

@@ -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(),
+});

src/components/Contexts/__mocks__/ManifestsContext.jsx

@@ -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(),
+});

src/components/Contexts/__mocks__/UpdatesContext.jsx

@@ -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;

src/components/Controls/ECUList/index.jsx

@@ -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;

src/components/Layouts/SideMenu.jsx

@@ -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",

src/components/Layouts/__snapshots__/SideMenu.test.jsx.snap

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

src/components/Manifest/Deploy/index.jsx

@@ -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;

src/components/Manifest/List/index.jsx

@@ -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;

src/components/Manifest/Status/index.jsx

@@ -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;

src/components/Routes/SiteRoutes.jsx

@@ -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>

src/components/UpdatePackages/List/index.jsx

@@ -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)}