Merge branch 'development' into main

package-lock.json

@@ -1275,9 +1275,9 @@
       "integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg=="
     },
     "@datadog/browser-core": {
-      "version": "2.17.0",
+      "version": "2.18.0",
-      "resolved": "https://registry.npmjs.org/@datadog/browser-core/-/browser-core-2.17.0.tgz",
+      "resolved": "https://registry.npmjs.org/@datadog/browser-core/-/browser-core-2.18.0.tgz",
-      "integrity": "sha512-jGIiVIzxdfQ+FnuFY+tC/j4gBFmK74xW/NIVqHIdN/hbGqA0oXOYs3Qof39ILLhXM5+zxa44RYFY6r/9JaxMIg==",
+      "integrity": "sha512-1RvxLK8TiuAaDrwkrlOg7wM+7FilJtNbC30h5BxoGChWEBB7QsgeYGnliQ60byZUCzhbvARVzHHNZTxUiP+fPQ==",
       "requires": {
         "tslib": "^1.10.0"
       },
@@ -1290,11 +1290,11 @@
       }
     },
     "@datadog/browser-logs": {
-      "version": "2.17.0",
+      "version": "2.18.0",
-      "resolved": "https://registry.npmjs.org/@datadog/browser-logs/-/browser-logs-2.17.0.tgz",
+      "resolved": "https://registry.npmjs.org/@datadog/browser-logs/-/browser-logs-2.18.0.tgz",
-      "integrity": "sha512-2S6ryflc28EErDJ+SgWo2OdkvWQ5KA5uqzzvbcnEBeFQpAV5ukAIfElHLiQrwSF4J6NkfLFA3tLt6KPGZE5F2w==",
+      "integrity": "sha512-bDT5YkPNHGZmjADXtsVtwSyL+/J7MA4k2mBcHzutXK7/tKrIRiKH6ygHiBRryNHfD7/Q79tZqJzi32kSZy3AAA==",
       "requires": {
-        "@datadog/browser-core": "2.17.0",
+        "@datadog/browser-core": "2.18.0",
         "tslib": "^1.10.0"
       },
       "dependencies": {
@@ -1776,9 +1776,9 @@
       }
     },
     "@material-ui/core": {
-      "version": "4.12.1",
+      "version": "4.12.3",
-      "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.12.1.tgz",
+      "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.12.3.tgz",
-      "integrity": "sha512-C6hYsjkWCTfBx9FaqxhCZCITBagh7fyCKFtHyvO3tTOcBw6NJaktdhNZ2n82jQdQdgfFvg6OOxi7OOzsAdAcBQ==",
+      "integrity": "sha512-sdpgI/PL56QVsEJldwEe4FFaFTLUqN+rd7sSZiRCdx2E/C7z5yK0y/khAWVBH24tXwto7I1hCzNWfJGZIYJKnw==",
       "requires": {
         "@babel/runtime": "^7.4.4",
         "@material-ui/styles": "^4.11.4",
@@ -2305,9 +2305,9 @@
       "integrity": "sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug=="
     },
     "@types/react": {
-      "version": "17.0.14",
+      "version": "17.0.15",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.14.tgz",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.15.tgz",
-      "integrity": "sha512-0WwKHUbWuQWOce61UexYuWTGuGY/8JvtUe/dtQ6lR4sZ3UiylHotJeWpf3ArP9+DSGUoLY3wbU59VyMrJps5VQ==",
+      "integrity": "sha512-uTKHDK9STXFHLaKv6IMnwp52fm0hwU+N89w/p9grdUqcFA6WuqDyPhaWopbNyE1k/VhgzmHl8pu1L4wITtmlLw==",
       "requires": {
         "@types/prop-types": "*",
         "@types/scheduler": "*",
@@ -12164,9 +12164,9 @@
       "integrity": "sha512-NAnt2iGDXohE5LI7uBnLnqvLQMtzhkiAOLXTmv+qnF9Ky7xAPcX8Up/xWIhxvLVGJvuLiNc4xQLtuqDRzb4fSA=="
     },
     "react-leaflet": {
-      "version": "3.2.0",
+      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/react-leaflet/-/react-leaflet-3.2.0.tgz",
+      "resolved": "https://registry.npmjs.org/react-leaflet/-/react-leaflet-3.2.1.tgz",
-      "integrity": "sha512-eHVqoRGjW8T9GxLt7jyTKP3BDQ7XQ5AD+tc/zkbaABn1dbmREDy8GojNcYjZQa3QFLQoOLQMcUC1PTtzytZpUA==",
+      "integrity": "sha512-3iS1fpOO+uaRpbuq68Euw9kgaoM9oIGBiDfeFtVb/C9PWBQvXdrv1n946Z8GrbQEhrT+hM9ND6NLLF9fGxTGRw==",
       "requires": {
         "@react-leaflet/core": "^1.1.0"
       }

package.json

@@ -3,9 +3,9 @@
   "version": "0.1.1",
   "private": true,
   "dependencies": {
-    "@datadog/browser-logs": "^2.17.0",
+    "@datadog/browser-logs": "^2.18.0",
     "@datadog/browser-rum": "^2.17.0",
-    "@material-ui/core": "^4.12.1",
+    "@material-ui/core": "^4.12.3",
     "@material-ui/icons": "^4.11.2",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^11.2.7",
@@ -16,7 +16,7 @@
     "material-ui-dropzone": "^3.5.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-leaflet": "^3.2.0",
+    "react-leaflet": "^3.2.1",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
     "web-vitals": "^0.2.4"

src/components/App/App.test.js

@@ -64,18 +64,10 @@ describe("App", () => {
     await check("/home", "span.MuiButton-label", "Sign In");
   });
 
-  it("Route /package-upload unauthenticated", async () => {
-    await check("/package-upload", "span.MuiButton-label", "Sign In");
-  });
-
   it("Route /vehicle-add unauthenticated", async () => {
     await check("/vehicle-add", "span.MuiButton-label", "Sign In");
   });
 
-  it("Route /updates unauthenticated", async () => {
-    await check("/updates", "span.MuiButton-label", "Sign In");
-  });
-
   it("Route /carupdate-deploy unauthenticated", async () => {
     await check("/carupdate-deploy/1", "span.MuiButton-label", "Sign In");
   });
@@ -92,24 +84,28 @@ describe("App", () => {
     await check("/vehicle-status/FISKER123", "span.MuiButton-label", "Sign In");
   });
 
-  it("Route /vehicles-command unauthenticated", async () => {
+  it("Route /datascope unauthenticated", async () => {
-    await check("/vehicles-command", "span.MuiButton-label", "Sign In");
+    await check("/datascope", "span.MuiButton-label", "Sign In");
   });
 
-  it("Route /dashboard unauthenticated", async () => {
+  it("Route /datascope/battery unauthenticated", async () => {
-    await check("/dashboard", "span.MuiButton-label", "Sign In");
+    await check("/datascope/battery", "span.MuiButton-label", "Sign In");
   });
 
-  it("Route /manifests unauthenticated", async () => {
+  it("Route /packages unauthenticated", async () => {
-    await check("/manifests", "span.MuiButton-label", "Sign In");
+    await check("/packages", "span.MuiButton-label", "Sign In");
   });
 
-  it("Route /manifest-status unauthenticated", async () => {
+  it("Route /package-status unauthenticated", async () => {
-    await check("/manifest-status/1", "span.MuiButton-label", "Sign In");
+    await check("/package-status/1", "span.MuiButton-label", "Sign In");
   });
 
-  it("Route /manifest-deploy unauthenticated", async () => {
+  it("Route /package-deploy unauthenticated", async () => {
-    await check("/manifest-deploy/1", "span.MuiButton-label", "Sign In");
+    await check("/package-deploy/1", "span.MuiButton-label", "Sign In");
+  });
+
+  it("Route /package-create unauthenticated", async () => {
+    await check("/package-create", "span.MuiButton-label", "Sign In");
   });
 
   it("Route / authenticated", async () => {
@@ -122,21 +118,11 @@ describe("App", () => {
     await sleepAndCheck("/home", "h1", "Welcome John!");
   });
 
-  it("Route /package-upload authenticated", async () => {
-    setToken(TEST_AUTH_OBJECT);
-    await check("/package-upload", "h6", "Create Update Package");
-  });
-
   it("Route /vehicle-add authenticated", async () => {
     setToken(TEST_AUTH_OBJECT);
     await check("/vehicle-add", "h6", "Add Vehicle");
   });
 
-  it("Route /updates authenticated", async () => {
-    setToken(TEST_AUTH_OBJECT);
-    await check("/updates", "h6", "Deploy Packages");
-  });
-
   it("Route /carupdate-status authenticated", async () => {
     setToken(TEST_AUTH_OBJECT);
     await check("/carupdate-status/1", "h6", "Package Package 1.0");
@@ -152,11 +138,6 @@ describe("App", () => {
     await check("/vehicle-status/FISKER123", "h6", "Vehicle FISKER123 Details");
   });
 
-  it("Route /vehicles-command authenticated", async () => {
-    setToken(TEST_AUTH_OBJECT);
-    await check("/vehicles-command", "h6", "Send Command");
-  });
-
   it("Route /page-not-found unauthenticated", async () => {
     await check("/page-not-found", "h1", "Page Not Found");
   });
@@ -171,23 +152,33 @@ describe("App", () => {
     await check("/carupdate-deploy/1", "h6", "Deploy Package 1.0");
   });
 
-  it("Route /dashboard authenticated", async () => {
+  it("Route /datascope authenticated", async () => {
     setToken(TEST_AUTH_OBJECT);
-    await check("/dashboard", "h6", "Dashboard");
+    await check("/datascope", "h6", "Datascope");
   });
 
-  it("Route /manifests authenticated", async () => {
+  it("Route /datascope/battery authenticated", async () => {
     setToken(TEST_AUTH_OBJECT);
-    await check("/manifests", "h6", "Deploy Manifest");
+    await check("/datascope/battery", "h6", "Battery");
   });
 
-  it("Route /manifest-status authenticated", async () => {
+  it("Route /packages authenticated", async () => {
     setToken(TEST_AUTH_OBJECT);
-    await check("/manifest-status/1", "h6", "Manifest Test Manifest 1.0");
+    await check("/packages", "h6", "Deployments");
   });
 
-  it("Route /manifest-deploy authenticated", async () => {
+  it("Route /package-status authenticated", async () => {
     setToken(TEST_AUTH_OBJECT);
-    await check("/manifest-deploy/1", "h6", "Deploy Test Manifest 1.0");
+    await check("/package-status/1", "h6", "Manifest Test Manifest 1.0");
+  });
+
+  it("Route /package-deploy authenticated", async () => {
+    setToken(TEST_AUTH_OBJECT);
+    await check("/package-deploy/1", "h6", "Deploy Test Manifest 1.0");
+  });
+
+  it("Route /package-create authenticated", async () => {
+    setToken(TEST_AUTH_OBJECT);
+    await check("/package-create", "h6", "Create Deployments");
   });
 });

src/components/Cars/Add/index.jsx

@@ -12,7 +12,7 @@ import { logger } from "../../../services/monitoring";
 
 const MainForm = () => {
   const { addVehicle, busy } = useVehicleContext();
-  const { setMessage, setTitle } = useStatusContext();
+  const { setMessage, setTitle, setSitePath } = useStatusContext();
   const {
     token: {
       idToken: { jwtToken: token },
@@ -26,6 +26,15 @@ const MainForm = () => {
 
   useEffect(() => {
     setTitle("Add Vehicle");
+    setSitePath([
+      {
+        label: "Vehicles",
+        link: "/vehicles",
+      },
+      {
+        label: "Add Vehicle",
+      },
+    ]);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   const onSubmit = async (event) => {

src/components/Cars/List/index.jsx

@@ -1,189 +0,0 @@
-import React, { useEffect, useState } from "react";
-import { Link } from "react-router-dom";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableFooter,
-  TablePagination,
-  TableRow,
-  Toolbar,
-} from "@material-ui/core";
-
-import {
-  useVehicleContext,
-  VehicleProvider,
-} from "../../Contexts/VehicleContext";
-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 ConnectedIcon from "../../Controls/ConnectedIcon";
-import ECUList from "../../Controls/ECUList";
-
-const tableColumns = [
-  {
-    id: "vin",
-    label: "VIN",
-  },
-  {
-    id: "model",
-    label: "Model",
-  },
-  {
-    id: "year",
-    label: "Year",
-  },
-  {
-    id: "trim",
-    label: "Trim",
-  },
-  {
-    id: "created_at",
-    label: "Created",
-  },
-  {
-    id: "updated_at",
-    label: "Updated",
-  },
-];
-
-const MainForm = () => {
-  const classes = useStyles();
-  const [pageSize, setPageSize] = useState(10);
-  const [pageIndex, setPageIndex] = useState(0);
-  const [orderBy, setOrderBy] = useState("vin");
-  const [order, setOrder] = useState("asc");
-  const [search, setSearch] = useState("");
-  const { getVehicles, vehicles, totalVehicles } = useVehicleContext();
-  const { setMessage, setTitle } = useStatusContext();
-  const {
-    token: {
-      idToken: { jwtToken: token },
-    },
-  } = useUserContext();
-
-  const sortHandler = (event, property) => {
-    if (property === orderBy) {
-      if (order === "asc") {
-        setOrder("desc");
-      } else {
-        setOrder("asc");
-      }
-    } else {
-      setOrderBy(property);
-      setOrder("asc");
-    }
-  };
-
-  useEffect(() => {
-    setTitle("Vehicles");
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  useEffect(() => {
-    (async () => {
-      try {
-        await getVehicles(
-          {
-            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);
-  };
-
-  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>
-          {vehicles.map((row) => (
-            <TableRow key={row.vin}>
-              <TableCell align="center">
-                <ConnectedIcon
-                  connected={row.connected}
-                  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>
-              <TableCell align="center">{row.trim || ""}</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={6}
-              count={totalVehicles}
-              rowsPerPage={pageSize}
-              page={pageIndex}
-              SelectProps={{
-                inputProps: { "aria-label": "rows per page" },
-                native: true,
-              }}
-              onPageChange={handleChangePageIndex}
-              onRowsPerPageChange={handleChangePageSize}
-            />
-          </TableRow>
-        </TableFooter>
-      </Table>
-    </div>
-  );
-};
-
-const VehiclesList = () => (
-  <VehicleProvider>
-    <MainForm />
-  </VehicleProvider>
-);
-
-export default VehiclesList;

src/components/Cars/SendCommandBulk/index.jsx

@@ -1,5 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { Grid } from "@material-ui/core";
+import AddCircleIcon from "@material-ui/icons/AddCircle";
+import { Link } from "react-router-dom";
 
 import { VehicleProvider } from "../../Contexts/VehicleContext";
 import { useUserContext } from "../../Contexts/UserContext";
@@ -14,7 +16,7 @@ const MainForm = () => {
   const classes = useStyles();
   const [selected, setSelected] = useState([]);
   const [search, setSearch] = useState("");
-  const { setTitle } = useStatusContext();
+  const { setTitle, setSitePath } = useStatusContext();
   const {
     token: {
       idToken: { jwtToken: token },
@@ -46,7 +48,8 @@ const MainForm = () => {
   };
 
   useEffect(() => {
-    setTitle("Send Command");
+    setTitle("Vehicles");
+    setSitePath([]);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
@@ -54,6 +57,9 @@ const MainForm = () => {
     <div className={classes.paper} style={{ height: 700, width: "100%" }}>
       <Grid container className={classes.root} spacing={2}>
         <Grid item md={6}>
+          <Link to="/vehicle-add" className={classes.labelInline}>
+            <AddCircleIcon fontSize="large" />
+          </Link>
           <SearchField classes={classes} onSearch={handleSearch} />
           <div
             className={classes.labelInline}

src/components/Cars/Status/index.jsx

@@ -52,7 +52,7 @@ const MainForm = () => {
   const [orderBy, setOrderBy] = useState("id");
   const [order, setOrder] = useState("desc");
   const { getCarUpdates, carUpdates, totalCarUpdates } = useUpdatesContext();
-  const { setMessage, setTitle } = useStatusContext();
+  const { setMessage, setTitle, setSitePath } = useStatusContext();
   const {
     token: {
       idToken: { jwtToken: token },
@@ -60,7 +60,17 @@ const MainForm = () => {
   } = useUserContext();
 
   useEffect(() => {
-    setTitle(`Vehicle ${vin} Details`);
+    const title = `Vehicle ${vin} Details`;
+    setTitle(title);
+    setSitePath([
+      {
+        label: "Vehicles",
+        link: "/vehicles",
+      },
+      {
+        label: title,
+      },
+    ]);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [vin]);
 
@@ -110,6 +120,14 @@ const MainForm = () => {
     }
   };
 
+  const updateName = (row) => {
+    if (row.updatepackage)
+      return `${row.updatepackage.package_name} ${row.updatepackage.version}`;
+    if (row.updatemanifest)
+      return `${row.updatemanifest.name} ${row.updatemanifest.version}`;
+    return "None";
+  };
+
   return (
     <div className={classes.paper} style={{ height: 700, width: "100%" }}>
       <Table>
@@ -124,7 +142,7 @@ const MainForm = () => {
           {carUpdates.map((row) => (
             <TableRow key={row.id}>
               <TableCell align="center">{row.id}</TableCell>
-              <TableCell align="center">{`${row.updatepackage.package_name} ${row.updatepackage.version}`}</TableCell>
+              <TableCell align="center">{updateName(row)}</TableCell>
               <TableCell align="center">{row.status}</TableCell>
               <TableCell align="center">
                 {LocalDateTimeString(row.created)}

src/components/Contexts/CarUpdatesContext.jsx

@@ -76,15 +76,17 @@ export const CarUpdatesProvider = ({ children }) => {
   };
 
   const applyProgressStatus = (item, status) => {
-    if (status.msg === "DONE") {
+    if (status.msg === "package_download_complete") {
       delete item.progress;
       item.status = "downloaded";
-    } else if (status.msg === "downloading" && status.total > 0) {
+    } else if (status.msg === "downloading" && status.package_total > 0) {
-      let progress = Math.floor((100 * status.bytes) / status.total);
+      let progress = Math.floor(
+        (100 * status.package_current) / status.package_total
+      );
       if (progress > 99) progress = 0;
       item.progress = progress;
       item.status = `downloading ${progress}%`;
-    } else if (status.error > 0) {
+    } else if (status.error > 0 || status.msg === "download_error") {
       item.status = "download error";
     } else {
       item.status = "downloading";

src/components/Contexts/ManifestsContext.jsx

@@ -1,11 +1,17 @@
 import React, { useContext, useState } from "react";
 
 import api from "../../services/manifests";
+import { uploadFile, getCancelToken } from "../../services/uploadFile";
 
 const ManifestsContext = React.createContext();
 
 export const ManifestsProvider = ({ children }) => {
   const [busy, setBusy] = useState(false);
+  const [uploadProgress, setUploadProgress] = useState(0);
+  const [uploadStatus, setUploadStatus] = useState(null);
+  const [cancelUploadToken, setCancelUploadToken] = useState(null);
+  const [uploadFileIndex, setUploadFileIndex] = useState(0);
+  const [uploadedFiles, setUploadedFiles] = useState([]);
   const [manifests, setManifests] = useState([]);
   const [totalManifests, setTotalManifests] = useState(0);
 
@@ -48,14 +54,164 @@ export const ManifestsProvider = ({ children }) => {
     return result;
   };
 
+  const validateManifest = (data, accessToken) => {
+    const fileKeys = {};
+
+    if (!accessToken || accessToken.length === 0) {
+      throw new Error("Access token required");
+    }
+
+    if (!data) {
+      throw new Error("Missing manifest data");
+    }
+
+    if (!data.name || data.name.length === 0) {
+      throw new Error("Package name required");
+    }
+
+    if (!data.version || data.version.length === 0) {
+      throw new Error("Package version required");
+    }
+
+    if (!data.description || data.description.length === 0) {
+      throw new Error("Package description required");
+    }
+
+    if (!data.releasenotes || data.releasenotes.length === 0) {
+      throw new Error("Package release notes link required");
+    }
+
+    if (!data.files || data.files.length === 0) {
+      throw new Error("Package files required");
+    }
+
+    data.files.forEach((file) => validateFile(file, fileKeys));
+  };
+
+  const validateFile = (file, keys) => {
+    if (!file) {
+      throw new Error("File data required");
+    }
+
+    if (!file.filename || file.filename.length === 0) {
+      throw new Error("Filename required");
+    }
+
+    if (!file.name || file.name.length === 0) {
+      throw new Error(`${file.filename} ECU name required`);
+    }
+
+    if (!file.update_version || file.update_version.length === 0) {
+      throw new Error(`${file.filename} version required`);
+    }
+
+    if (!file.part_number || file.part_number.length === 0) {
+      throw new Error(`${file.filename} part number required`);
+    }
+
+    const key = `${file.name}, ${file.update_version}, ${file.filename}`;
+    if (!keys[key]) {
+      keys[key] = true;
+    } else {
+      throw new Error(`${key} already exists`);
+    }
+  };
+
+  const checkExistingManifest = async (data, token) => {
+    const check = {
+      name: data.name,
+      version: data.version,
+    };
+    const { data: result } = await api.getManifests(check, token);
+    if (result.length > 0)
+      throw new Error(`Update ${data.name} ${data.version} already exists`);
+  };
+
+  const createManifest = async (data, token) => {
+    let result;
+
+    try {
+      setBusy(true);
+      validateManifest(data, token);
+      setUploadedFiles(data.files);
+
+      await checkExistingManifest(data, token);
+      if (result !== null) result = await api.createManifest(data, token);
+      if (result.error)
+        throw new Error(`Create manifest error. ${result.message}`);
+
+      for (let i = 0, len = data.files.length; i < len; i++) {
+        setUploadFileIndex(i);
+        const resp = await uploadECUFile(result.id, data.files[i], token);
+        if (resp.error)
+          throw new Error(`Upload manifest file error. ${resp.error}`);
+      }
+    } finally {
+      setBusy(false);
+      setUploadFileIndex(0);
+      setUploadedFiles([]);
+    }
+
+    return result;
+  };
+
+  const cancelUpload = () => {
+    if (cancelUploadToken) cancelUploadToken.cancel();
+    setBusy(false);
+    setUploadStatus("Upload cancelled");
+    setCancelUploadToken(null);
+    setUploadProgress(0);
+  };
+
+  const uploadECUFile = async (manifest_id, data, accessToken) => {
+    try {
+      Object.assign(data, { manifest_id });
+
+      const filename = data.file.name;
+      const cancel = getCancelToken();
+
+      setBusy(true);
+      setUploadProgress(0);
+      setUploadStatus(`Uploading ${filename}`);
+      setCancelUploadToken(cancel);
+
+      const result = await uploadFile(
+        data,
+        accessToken,
+        setUploadProgress,
+        cancel.token
+      );
+      if (result.message) {
+        throw new Error(`${result.error}. ${result.message}`);
+      }
+      setUploadStatus(`Uploaded ${filename}`);
+      setCancelUploadToken(null);
+      setUploadProgress(100);
+
+      return result;
+    } catch (e) {
+      setBusy(false);
+      setUploadStatus(`Error occured: ${e.message}`);
+      setUploadProgress(-1);
+
+      return { error: e.message };
+    }
+  };
+
   return (
     <ManifestsContext.Provider
       value={{
         busy,
+        uploadProgress,
+        uploadStatus,
+        uploadFileIndex,
+        uploadedFiles,
         manifests,
         totalManifests,
         getManifests,
         deleteManifest,
+        createManifest,
+        cancelUpload,
       }}
     >
       {children}

src/components/Contexts/StatusContext.jsx

@@ -5,14 +5,17 @@ const StatusContext = React.createContext();
 export const StatusProvider = ({ children }) => {
   const [message, setMessage] = useState(null);
   const [title, setTitle] = useState("");
+  const [sitePath, setSitePath] = useState([]);
 
   return (
     <StatusContext.Provider
       value={{
         message,
-        setMessage,
         title,
+        sitePath,
+        setMessage,
         setTitle,
+        setSitePath,
       }}
     >
       {children}

src/components/Controls/ECUDropDown/index.jsx

@@ -0,0 +1,121 @@
+import React from "react";
+import { Select } from "@material-ui/core";
+
+const ECUDropDown = (props) => {
+  const changeHandler = (e) => {
+    if (!props.changeHandler) return;
+    props.changeHandler(e);
+  };
+
+  return (
+    <Select
+      id={props.id}
+      native
+      variant="outlined"
+      value={props.value}
+      onChange={changeHandler}
+    >
+      {ECUs.map((item, index) => (
+        <option key={index} value={item[0]}>
+          {item[1]}
+        </option>
+      ))}
+    </Select>
+  );
+};
+
+export default ECUDropDown;
+
+const ECUs = [
+  ["AGS", "Active Grille Shutter"],
+  ["ADB", "Adaptive Driving Beam"],
+  ["ADAS", "Advanced Driver Assist System"],
+  ["ACU", "Airbag Control Unit"],
+  ["ACP", "Airconditioning Control Panel"],
+  ["AMP", "Amplifier"],
+  ["AP_FL", "Anti-Pinch Front Left"],
+  ["AP_FR", "Anti-Pinch Front Right"],
+  ["AP_RL", "Anti-Pinch Rear Left"],
+  ["AP_RR", "Anti-Pinch Rear Right"],
+  ["AL", "Atmosphere Lamp"],
+  ["BCS", "Battery HV Current Sensor"],
+  ["BMS", "Battery Management System"],
+  ["BMU", "Battery Management Unit"],
+  ["BCM", "Body Control Module"],
+  ["CDS", "Center Display Screen"],
+  ["CCU", "Charging Control Unit"],
+  ["CIM", "Column Integrated Module"],
+  ["CVM", "Coolant Valve Module"],
+  ["CFM", "Cooling Fan Module"],
+  ["CMRR_FL", "Corner Mid Range Radar Front Left"],
+  ["CMRR_FR", "Corner Mid Range Radar Front Right"],
+  ["CMRR_RL", "Corner Mid Range Radar Rear Left"],
+  ["CMRR_RR", "Corner Mid Range Radar Rear Right"],
+  ["DVRC", "Digital Video Recorder Camera"],
+  ["DC-CHM", "Direct Current Charge Machine"],
+  ["DMC", "Driver Monitor Camera"],
+  ["DSMC", "Driver Seat Memory Controller"],
+  ["DWSG", "Driver Window Switch Group"],
+  ["EPS", "Electric Power Steering"],
+  ["EAS", "Electrical Air Compressor System"],
+  ["ECC", "Electrical Climate Controller"],
+  ["EWP_B", "Electrical Water Pump Battery"],
+  ["EWP_FD", "Electrical Water Pump Front Drive"],
+  ["EWP_H", "Electrical Water Pump Heat"],
+  ["EWP_RD", "Electrical Water Pump Rear Drive"],
+  ["EWM", "Electrical Wiper Motor"],
+  ["EXV_B", "Electronic Expansion Value Battery"],
+  ["EXV_HP", "Electronic Expansion Valve HPC"],
+  ["ESP", "Electronic Stability Program"],
+  ["FDHA_FL", "Flush Door Handle Actuator Front Left"],
+  ["FDHA_FR", "Flush Door Handle Actuator Front Right"],
+  ["FDHA_RL", "Flush Door Handle Actuator Rear Left"],
+  ["FDHA_RR", "Flush Door Handle Actuator Rear Right"],
+  ["Lumber", "Four-Way Lumber"],
+  ["FBM_L", "Front Beam Module Left"],
+  ["FBM_R", "Front Beam Module Right"],
+  ["FVC", "Front Video Camera"],
+  ["GW", "Gateway"],
+  ["HUD", "Head-Up Display"],
+  ["IDS", "Instrument Display Screen"],
+  ["ICC", "Integrated Cockpit Controller"],
+  ["IBS", "Intelligent Battery Sensor"],
+  ["iBooster", "Intelligent Booster"],
+  ["KS", "Kick Sensor"],
+  ["LSC", "Left Side Camera"],
+  ["MRR", "Mid Range Radar"],
+  ["MCU_F", "Motor Control Unit Front"],
+  ["MCU_R", "Motor Control Unit Rear"],
+  ["MDV", "Motorized Deco-Vent"],
+  ["MFS", "Multifunction Steering"],
+  ["MIS", "Multimedia Interactive Switch"],
+  ["MPC", "Multipurpose Camera"],
+  ["OMC", "Occupant Monitor Camera"],
+  ["OHC", "Overhead Console"],
+  ["PAS", "Parking Assistant System"],
+  ["PCU", "Parking Control Unit"],
+  ["PMS", "Particulate Matter Sensor"],
+  ["PSM", "Passenger Seat Module"],
+  ["PEPS", "Passive Entry And Passive Start"],
+  ["PKC", "Phone Key Controller"],
+  ["PKC_ANT_L", "Phone Key Controller Antenna Left"],
+  ["PKC_ANT_R", "Phone Key Controller Antenna Right"],
+  ["PWC", "Phone Wireless Charging"],
+  ["PASC", "Power Adjust Steering Column"],
+  ["PDU", "Power Distribution Unit"],
+  ["PLGM", "Power Lift Gate Module"],
+  ["RLS", "Rain Light Sensor"],
+  ["RAC", "Rear Airconditioning Control"],
+  ["RVC", "Rear View Camera"],
+  ["RSC", "Right Side Camera"],
+  ["RCM", "Roof Control Module"],
+  ["RSM", "Roof Shade Module"],
+  ["TBOX", "Telematics Box"],
+  ["TPMS", "Tire Pressure Monitoring System"],
+  ["TDS", "Touch Display Screen"],
+  ["USB Box", "USB Box"],
+  ["VCU", "Vehicle Control Unit"],
+  ["VSP", "Vehicle Sound For Pedestraion"],
+  ["WTC_B", "Water Thermal Controller Battery"],
+  ["WTC_H", "Water Thermal Controller Heat"],
+];

src/components/Controls/SiteBreadCrumbs/index.jsx

@@ -0,0 +1,34 @@
+import React from "react";
+import { Link as RouterLink } from "react-router-dom";
+import Breadcrumbs from "@material-ui/core/Breadcrumbs";
+import { Link } from "@material-ui/core";
+
+const SiteBreadcrumbs = ({ path }) => {
+  if (!path || path.length === 0) return null;
+
+  return (
+    <Breadcrumbs
+      aria-label="breadcrumb"
+      color="inherit"
+      style={{ fontSize: "10px" }}
+    >
+      {path.map((item, index, items) => {
+        if (index < items.length) {
+          return (
+            <Link
+              key={index}
+              color="inherit"
+              to={item.link || "#"}
+              component={RouterLink}
+            >
+              {item.label}
+            </Link>
+          );
+        }
+        return null;
+      })}
+    </Breadcrumbs>
+  );
+};
+
+export default SiteBreadcrumbs;

src/components/Controls/SubList/index.jsx

@@ -0,0 +1,45 @@
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableRow,
+} from "@material-ui/core";
+import React from "react";
+import SubListItem from "../SubListItem";
+
+const SubList = ({ data, options, onChange }) => {
+  const onDelete = (id) => {
+    if (!onChange) return;
+    data.some((item, index) => {
+      if (item.data_id !== id) return false;
+      data.splice(index, 1);
+      onChange(data);
+      return true;
+    });
+  };
+
+  return (
+    <Table>
+      <TableHead>
+        <TableRow>
+          {options.map((option) => (
+            <TableCell key={option.label || "none"}>{option.label}</TableCell>
+          ))}
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        {data.map((item) => (
+          <SubListItem
+            key={item.data_id}
+            data={item}
+            options={options}
+            onDelete={onDelete}
+          />
+        ))}
+      </TableBody>
+    </Table>
+  );
+};
+
+export default SubList;

src/components/Controls/SubListItem/index.jsx

@@ -0,0 +1,67 @@
+import React from "react";
+import { TableCell, TableRow, TextField } from "@material-ui/core";
+import { Link } from "react-router-dom";
+import DeleteIcon from "@material-ui/icons/Delete";
+import { useState } from "react";
+
+const DataDisplay = ({ data, option, onDelete }) => {
+  const [text, setText] = useState(data[option.field]);
+  const onChange = (e) => {
+    data[e.target.id] = e.target.value;
+    setText(e.target.value);
+  };
+  const deleteHandler = (id) => {
+    if (onDelete) onDelete(id);
+  };
+
+  if (option.readonly) {
+    return `${data[option.field]}`;
+  } else if (option.delete) {
+    return (
+      <Link
+        to="#"
+        onClick={() => {
+          deleteHandler(data.data_id);
+        }}
+      >
+        <DeleteIcon />
+      </Link>
+    );
+  } else if (option.control) {
+    return (
+      <option.control
+        id={option.field}
+        name={option.field}
+        value={text}
+        changeHandler={onChange}
+      ></option.control>
+    );
+  }
+
+  return (
+    <TextField
+      id={option.field}
+      name={option.field}
+      placeholder={option.label}
+      inputProps={option.inputProps}
+      requried={option.required}
+      fullWidth
+      onChange={onChange}
+      value={text}
+    ></TextField>
+  );
+};
+
+const SubListItem = ({ data, options, onDelete }) => {
+  return (
+    <TableRow>
+      {options.map((item) => (
+        <TableCell key={item.label} width={item.delete ? 25 : null}>
+          <DataDisplay data={data} option={item} onDelete={onDelete} />
+        </TableCell>
+      ))}
+    </TableRow>
+  );
+};
+
+export default SubListItem;

src/components/Dashboard/index.jsx

@@ -1,52 +0,0 @@
-import React, { useEffect } from "react";
-import { Button, Grid, Link } from "@material-ui/core";
-import CreateIcon from "@material-ui/icons/Create";
-
-import { useStatusContext } from "../Contexts/StatusContext";
-import useStyles from "../useStyles";
-import ResponsiveIFrame from "../Controls/ResponsiveIFrame";
-
-const Dashboard = () => {
-  const classes = useStyles();
-  const { setTitle } = useStatusContext();
-
-  useEffect(() => {
-    setTitle("Dashboard");
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  return (
-    <div className={classes.paper}>
-      <Grid container className={classes.root} spacing={2}>
-        <Grid item md={6}>
-          <ResponsiveIFrame
-            classes={classes}
-            src="https://grafana.fiskerdps.com/d-solo/jRKKo2gnz/battery?orgId=2&refresh=30s&panelId=2"
-            title="Battery Time Series"
-          />
-        </Grid>
-        <Grid item md={6}>
-          <ResponsiveIFrame
-            classes={classes}
-            src="https://grafana.fiskerdps.com/d-solo/1VTVJ_qGk/dashboard?orgId=2&refresh=30s&panelId=12"
-            title="Signals Time Series"
-          />
-        </Grid>
-      </Grid>
-      <Button
-        style={{ marginTop: 10 }}
-        aria-label="create"
-        color="primary"
-        component={Link}
-        href="https://grafana.fiskerdps.com"
-        rel="noopener"
-        target="_blank"
-      >
-        <CreateIcon fontSize="large" />
-        Create Charts
-      </Button>
-    </div>
-  );
-};
-
-export default Dashboard;

src/components/Datascope/Battery/index.jsx

@@ -0,0 +1,159 @@
+import React, { useEffect, useState } from "react";
+import {
+  FormControl,
+  Grid,
+  InputLabel,
+  MenuItem,
+  Paper,
+  Select,
+  TextField,
+} from "@material-ui/core";
+
+import { useStatusContext } from "../../Contexts/StatusContext";
+import useStyles from "../../useStyles";
+import ResponsiveIFrame from "../../Controls/ResponsiveIFrame";
+
+const Battery = () => {
+  const classes = useStyles();
+  const { setTitle, setSitePath } = useStatusContext();
+
+  useEffect(() => {
+    setTitle("Battery");
+    setSitePath([
+      {
+        label: "Datascope",
+        link: "/datascope",
+      },
+      {
+        label: "Battery",
+      },
+    ]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const [vin, setVIN] = useState("1F15K3R45N1234567");
+  const [cellNum, setCellNum] = useState(1);
+
+  const handleVINForm = (e) => {
+    if (e.target.value.length === 17) {
+      setVIN(e.target.value);
+    }
+  };
+
+  return (
+    <div className={classes.paper}>
+      <Grid container spacing={2}>
+        <Grid container item md={4} space={2}>
+          <Grid item md={12}>
+            <Paper className={classes.grafanaContainer}>
+              <form className={classes.formControl}>
+                <TextField
+                  id="vin"
+                  label="VIN"
+                  defaultValue="1F15K3R45N1234567"
+                  variant="outlined"
+                  onChange={handleVINForm}
+                  style={{ width: "100%" }}
+                />
+              </form>
+              <FormControl variant="outlined" className={classes.formControl}>
+                <InputLabel id="demo-simple-select-outlined-label">
+                  Cell
+                </InputLabel>
+                <Select
+                  labelId="demo-simple-select-outlined-label"
+                  id="demo-simple-select-outlined"
+                  value={cellNum}
+                  onChange={(e) => setCellNum(e.target.value)}
+                  label="Cell"
+                >
+                  {[...Array(112)].map((_, i) => (
+                    <MenuItem key={i + 1} value={i + 1}>
+                      {i + 1}
+                    </MenuItem>
+                  ))}
+                </Select>
+              </FormControl>
+            </Paper>
+          </Grid>
+
+          <Grid item md={12}>
+            <Paper className={classes.grafanaContainer}>
+              Cell Voltage {cellNum}
+              <ResponsiveIFrame
+                classes={classes}
+                src={`https://grafana.fiskerdps.com/d-solo/LVI-aQGnz/diagnostics?orgId=2&var-VIN=${vin}&var-Signal=BMS_CellVolt${cellNum}&panelId=2`}
+                title="Cell Voltage"
+              />
+            </Paper>
+          </Grid>
+
+          <Grid item md={12}>
+            <Paper className={classes.grafanaContainer}>
+              Cell Temperature {cellNum}
+              <ResponsiveIFrame
+                classes={classes}
+                src={`https://grafana.fiskerdps.com/d-solo/LVI-aQGnz/diagnostics?orgId=2&var-VIN=${vin}&var-Signal=BMS_CellT${cellNum}&panelId=2`}
+                title="Cell Temperature"
+              />
+            </Paper>
+          </Grid>
+
+          <Grid item md={12}>
+            <Paper className={classes.grafanaContainer}>
+              <ResponsiveIFrame
+                classes={classes}
+                src={`https://grafana.fiskerdps.com/d-solo/jRKKo2gnz/battery?orgId=2&var-VIN=${vin}&refresh=1m&panelId=4`}
+                title="Battery Temperature Time Series"
+              />
+            </Paper>
+          </Grid>
+        </Grid>
+
+        <Grid container item md={8} space={2}>
+          <Grid item md={12}>
+            <Paper className={classes.grafanaContainer}>
+              <ResponsiveIFrame
+                classes={classes}
+                src={`https://grafana.fiskerdps.com/d-solo/jRKKo2gnz/battery?orgId=2&var-VIN=${vin}&refresh=1m&panelId=6`}
+                title="Battery Capacity Time Series"
+              />
+            </Paper>
+          </Grid>
+
+          <Grid item md={12}>
+            <Paper className={classes.grafanaContainer}>
+              <ResponsiveIFrame
+                classes={classes}
+                src={`https://grafana.fiskerdps.com/d-solo/jRKKo2gnz/battery?orgId=2&var-VIN=${vin}&panelId=12`}
+                title="Battery Percent Time Series"
+              />
+            </Paper>
+          </Grid>
+
+          <Grid item md={6}>
+            <Paper className={classes.grafanaContainer}>
+              <ResponsiveIFrame
+                classes={classes}
+                src={`https://grafana.fiskerdps.com/d-solo/jRKKo2gnz/battery?orgId=2&var-VIN=${vin}&refresh=1m&panelId=2`}
+                title="12V Battery Percentage Time Series"
+              />
+            </Paper>
+          </Grid>
+
+          <Grid item md={6}>
+            <Paper className={classes.grafanaContainer}>
+              <ResponsiveIFrame
+                classes={classes}
+                src={`https://grafana.fiskerdps.com/d-solo/jRKKo2gnz/battery?orgId=2&var-VIN=${vin}&refresh=1m&panelId=9`}
+                title="12V Battery Voltage Time Series"
+              />
+            </Paper>
+          </Grid>
+        </Grid>
+      </Grid>
+    </div>
+  );
+};
+
+export default Battery;

src/components/Datascope/Home/index.jsx

@@ -0,0 +1,96 @@
+import React, { useEffect, useState } from "react";
+import { Button, Grid, Link, Paper } from "@material-ui/core";
+import CreateIcon from "@material-ui/icons/Create";
+
+import api from "../../../services/grafana";
+import { useStatusContext } from "../../Contexts/StatusContext";
+import useStyles from "../../useStyles";
+import ResponsiveIFrame from "../../Controls/ResponsiveIFrame";
+
+const Datascope = () => {
+  const classes = useStyles();
+  const { setTitle, setSitePath } = useStatusContext();
+  const REQUEST_INTERVAL = 10000;
+
+  useEffect(() => {
+    setTitle("Datascope");
+    setSitePath([]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const [carsCount, setCarsCount] = useState(0);
+  useEffect(() => {
+    api
+      .getCarsCount()
+      .then((result) => setCarsCount(result))
+      .catch((error) => console.log(error));
+  }, []);
+
+  const [signalsCount, setSignalsCount] = useState("0");
+  useEffect(() => {
+    storeSignals();
+
+    const id = setInterval(function () {
+      storeSignals();
+    }, REQUEST_INTERVAL);
+    return () => {
+      clearInterval(id);
+    };
+  }, []);
+
+  const storeSignals = () => {
+    api
+      .getSignalsCount()
+      .then((result) => {
+        let num = result.toLocaleString();
+        setSignalsCount(num);
+      })
+      .catch((error) => console.log(error));
+  };
+
+  return (
+    <div className={classes.paper}>
+      <Grid container className={classes.root} spacing={2}>
+        <Grid item md={6}>
+          <Paper className={classes.grafanaContainer} style={{ height: 150 }}>
+            <h1 className={classes.datascopeContainerValue}>{carsCount}</h1>
+            <h2 className={classes.datascopeContainerText}>Cars</h2>
+          </Paper>
+        </Grid>
+
+        <Grid item md={6}>
+          <Paper className={classes.grafanaContainer} style={{ height: 150 }}>
+            <h1 className={classes.datascopeContainerValue}>{signalsCount}</h1>
+            <h2 className={classes.datascopeContainerText}>
+              Signals Collected
+            </h2>
+          </Paper>
+        </Grid>
+
+        <Grid item md={12}>
+          <Paper className={classes.grafanaContainer}>
+            <ResponsiveIFrame
+              classes={classes}
+              src="https://grafana.fiskerdps.com/d-solo/1VTVJ_qGk/dashboard?orgId=2&refresh=30s&panelId=12"
+              title="Signals Time Series"
+            />
+          </Paper>
+        </Grid>
+      </Grid>
+      <Button
+        style={{ marginTop: 10 }}
+        aria-label="create"
+        color="primary"
+        component={Link}
+        href="https://grafana.fiskerdps.com"
+        rel="noopener"
+        target="_blank"
+      >
+        <CreateIcon fontSize="large" />
+        Go to Grafana
+      </Button>
+    </div>
+  );
+};
+
+export default Datascope;

src/components/Home/index.jsx

@@ -4,38 +4,25 @@ import useStyles from "../useStyles";
 
 import { useUserContext } from "../Contexts/UserContext";
 import { useStatusContext } from "../Contexts/StatusContext";
-import { parsePayload } from "../../utils/jwt";
 import VehicleMap from "../VehicleMap";
-
+import { getName } from "../../utils/jwt";
-const DEFAULT_GREETING = "Welcome";
-
-const getGreeting = (token) => {
-  if (!token || !token.idToken || !token.idToken.jwtToken)
-    return DEFAULT_GREETING;
-
-  const payload = parsePayload(token.idToken.jwtToken);
-
-  if (!payload || !payload.given_name) return DEFAULT_GREETING;
-
-  return `Welcome ${payload.given_name}!`;
-};
 
 const Home = () => {
   const classes = useStyles();
   const { token } = useUserContext();
-  const greeting = getGreeting(token);
+  const { setTitle, setSitePath } = useStatusContext();
-  const { setTitle } = useStatusContext();
 
 
   useEffect(() => {
     setTitle("Home");
+    setSitePath([]);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return (
     <div className={classes.paper}>
       <Typography className={classes.homePageTitle} component="h1" variant="h5">
-        {greeting}
+        Welcome {getName(token)}!
       </Typography>
       <VehicleMap />
     </div>

src/components/Layouts/MenuDrawer.jsx

@@ -1,26 +1,26 @@
 import React from "react";
 import clsx from "clsx";
-import Drawer from "@material-ui/core/Drawer";
+import {
-import AppBar from "@material-ui/core/AppBar";
+  Container,
-import Toolbar from "@material-ui/core/Toolbar";
+  Drawer,
-import Typography from "@material-ui/core/Typography";
+  AppBar,
-import Divider from "@material-ui/core/Divider";
+  Toolbar,
+  Typography,
+  Divider,
+} from "@material-ui/core";
 
 import SideMenu from "./SideMenu";
 import useStyles from "../useStyles";
 import { useUserContext } from "../Contexts/UserContext";
 import { useStatusContext } from "../Contexts/StatusContext";
-import { Button, Container } from "@material-ui/core";
+import UserMenu from "./UserMenu";
+import SiteBreadcrumbs from "../Controls/SiteBreadCrumbs";
 import logo from "../../assets/fisker-badge.svg";
 
 export default function MenuDrawer({ children }) {
   const classes = useStyles();
-  const { title } = useStatusContext();
+  const { title, sitePath } = useStatusContext();
-  const { signOut, token } = useUserContext();
+  const { token } = useUserContext();
-
-  const onSignOut = () => {
-    document.location = signOut();
-  };
 
   return (
     <div className={classes.root}>
@@ -31,17 +31,14 @@ export default function MenuDrawer({ children }) {
         })}
       >
         <Toolbar>
+          <div>
             <Typography variant="h6" noWrap>
               {title}
             </Typography>
+            <SiteBreadcrumbs path={sitePath} className={classes.breadcrumbs} />
+          </div>
           {token !== null && (
-            <Button
+            <UserMenu color="inherit" className={classes.rightToolbar} />
-              color="inherit"
-              onClick={onSignOut}
-              className={classes.rightToolbar}
-            >
-              Sign Out
-            </Button>
           )}
         </Toolbar>
       </AppBar>

src/components/Layouts/SideMenu.jsx

@@ -4,51 +4,89 @@ import ListItemLink from "../ListItemLink";
 import ListItemExternalLink from "../ListItemExternalLink";
 import { useUserContext } from "../Contexts/UserContext";
 import { Roles, hasRole } from "../../utils/roles";
+import HomeIcon from "@material-ui/icons/Home";
+import CommuteIcon from "@material-ui/icons/Commute";
+import CloudDownloadIcon from "@material-ui/icons/CloudDownload";
+import AssessmentIcon from "@material-ui/icons/Assessment";
 
 const menuData = [
   {
     label: "Home",
     to: "/home",
+    icon: <HomeIcon />,
     roles: [],
   },
   {
-    label: "Dashboard",
+    label: "Deployments",
-    to: "/dashboard",
+    to: "/packages",
+    icon: <CloudDownloadIcon />,
     roles: [Roles.CREATE, Roles.READ],
   },
   {
-    label: "Deploy Packages",
+    label: "Vehicles",
-    to: "/updates",
-    roles: [Roles.CREATE, Roles.READ],
-  },
-  {
-    label: "Create Package",
-    to: "/package-upload",
-    roles: [Roles.CREATE],
-  },
-  {
-    label: "Deploy Manifest",
-    to: "/manifests",
-    roles: [Roles.CREATE, Roles.READ],
-  },
-  {
-    label: "View Vehicles",
     to: "/vehicles",
+    icon: <CommuteIcon />,
+    roles: [Roles.CREATE],
+  },
+  {
+    label: "Datascope",
+    to: "/datascope",
+    icon: <AssessmentIcon />,
     roles: [Roles.CREATE, Roles.READ],
+    submenus: [
+      {
+        label: "Battery",
+        to: "/datascope/battery",
       },
       {
-    label: "Add Vehicle",
+        label: "Diagnostics",
-    to: "/vehicle-add",
+        url: "https://grafana.fiskerdps.com",
-    roles: [Roles.CREATE],
+      },
+    ],
   },
-  {
-    label: "Send Command",
-    to: "/vehicles-command",
-    roles: [Roles.CREATE],
-  }
 ];
 
-export default function SideMenu() {
+const MenuItem = ({ item, children }) => {
+  return (
+    <li>
+      {item.to && (
+        <ListItemLink primary={item.label} to={item.to} icon={item.icon} />
+      )}
+      {item.url && (
+        <ListItemExternalLink
+          primary={item.label}
+          url={item.url}
+          icon={item.icon}
+        />
+      )}
+      {children}
+    </li>
+  );
+};
+
+const ExpandableSideMenuItem = ({ item }) => {
+  /*
+  const [expanded, setExpanded] = useState(true);
+  const clickHandler = (e) => {
+    setExpanded(!expanded);
+  };
+  */
+
+  return (
+    <>
+      <span>
+        <MenuItem item={item}></MenuItem>
+      </span>
+      <ul style={{ marginLeft: 50 }}>
+        {item.submenus.map((subitem, index) => (
+          <MenuItem key={`submenu-${index}`} item={subitem} />
+        ))}
+      </ul>
+    </>
+  );
+};
+
+const SideMenu = () => {
   const { groups } = useUserContext();
   const menu = menuData.reduce((result, item) => {
     if (hasRole(item.roles, groups)) {
@@ -60,14 +98,14 @@ export default function SideMenu() {
 
   return (
     <List>
-      {menu.map((item, index) => (
+      {menu.map((item, index) => {
-        <li key={index}>
+        const key = `menu-${index}`;
-          {item.to && <ListItemLink primary={item.label} to={item.to} />}
+        if (item.submenus)
-          {item.url && (
+          return <ExpandableSideMenuItem key={key} item={item} />;
-            <ListItemExternalLink primary={item.label} url={item.url} />
+        return <MenuItem key={key} item={item} />;
-          )}
+      })}
-        </li>
-      ))}
     </List>
   );
-}
+};
+
+export default SideMenu;

src/components/Layouts/UserMenu/index.jsx

@@ -0,0 +1,48 @@
+import React, { useState } from "react";
+import { Button, Fade, Menu, MenuItem } from "@material-ui/core";
+
+import { useUserContext } from "../../Contexts/UserContext";
+import { getName } from "../../../utils/jwt";
+
+const UserMenu = (props) => {
+  const { signOut, token } = useUserContext();
+  const [anchorEl, setAnchorEl] = useState(null);
+  const open = Boolean(anchorEl);
+
+  const handleClick = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  const handleSignOut = () => {
+    document.location = signOut();
+  };
+
+  return (
+    <div {...props}>
+      <Button
+        aria-controls="fade-menu"
+        aria-haspopup="true"
+        onClick={handleClick}
+        color="inherit"
+      >
+        {getName(token)}
+      </Button>
+      <Menu
+        id="fade-menu"
+        anchorEl={anchorEl}
+        keepMounted
+        open={open}
+        onClose={handleClose}
+        TransitionComponent={Fade}
+      >
+        <MenuItem onClick={handleSignOut}>Sign out</MenuItem>
+      </Menu>
+    </div>
+  );
+};
+
+export default UserMenu;

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

@@ -16,6 +16,20 @@ exports[`SideMenu Authenticated 1`] = `
           role="button"
           tabindex="0"
         >
+          <div
+            class="MuiListItemIcon-root"
+          >
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root"
+              focusable="false"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"
+              />
+            </svg>
+          </div>
           <div
             class="MuiListItemText-root"
           >
@@ -34,83 +48,31 @@ exports[`SideMenu Authenticated 1`] = `
         <a
           aria-disabled="false"
           class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
-          href="/dashboard"
+          href="/packages"
           role="button"
           tabindex="0"
         >
           <div
-            class="MuiListItemText-root"
+            class="MuiListItemIcon-root"
           >
-            <span
+            <svg
-              class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
+              aria-hidden="true"
+              class="MuiSvgIcon-root"
+              focusable="false"
+              viewBox="0 0 24 24"
             >
-              Dashboard
+              <path
-            </span>
+                d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM17 13l-5 5-5-5h3V9h4v4h3z"
-          </div>
-          <span
-            class="MuiTouchRipple-root"
               />
-        </a>
+            </svg>
-      </li>
-      <li>
-        <a
-          aria-disabled="false"
-          class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
-          href="/updates"
-          role="button"
-          tabindex="0"
-        >
-          <div
-            class="MuiListItemText-root"
-          >
-            <span
-              class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
-            >
-              Deploy Packages
-            </span>
           </div>
-          <span
-            class="MuiTouchRipple-root"
-          />
-        </a>
-      </li>
-      <li>
-        <a
-          aria-disabled="false"
-          class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
-          href="/package-upload"
-          role="button"
-          tabindex="0"
-        >
           <div
             class="MuiListItemText-root"
           >
             <span
               class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
             >
-              Create Package
+              Deployments
-            </span>
-          </div>
-          <span
-            class="MuiTouchRipple-root"
-          />
-        </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
@@ -126,13 +88,90 @@ exports[`SideMenu Authenticated 1`] = `
           role="button"
           tabindex="0"
         >
+          <div
+            class="MuiListItemIcon-root"
+          >
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root"
+              focusable="false"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M12 4H5C3.34 4 2 5.34 2 7v8c0 1.66 1.34 3 3 3l-1 1v1h1l2-2.03L9 18v-5H4V5.98L13 6v2h2V7c0-1.66-1.34-3-3-3zM5 14c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm15.57-4.34c-.14-.4-.52-.66-.97-.66h-7.19c-.46 0-.83.26-.98.66L10 13.77l.01 5.51c0 .38.31.72.69.72h.62c.38 0 .68-.38.68-.76V18h8v1.24c0 .38.31.76.69.76h.61c.38 0 .69-.34.69-.72l.01-1.37v-4.14l-1.43-4.11zm-8.16.34h7.19l1.03 3h-9.25l1.03-3zM12 16c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm8 0c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1z"
+              />
+            </svg>
+          </div>
           <div
             class="MuiListItemText-root"
           >
             <span
               class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
             >
-              View Vehicles
+              Vehicles
+            </span>
+          </div>
+          <span
+            class="MuiTouchRipple-root"
+          />
+        </a>
+      </li>
+      <span>
+        <li>
+          <a
+            aria-disabled="false"
+            class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
+            href="/datascope"
+            role="button"
+            tabindex="0"
+          >
+            <div
+              class="MuiListItemIcon-root"
+            >
+              <svg
+                aria-hidden="true"
+                class="MuiSvgIcon-root"
+                focusable="false"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM9 17H7v-7h2v7zm4 0h-2V7h2v10zm4 0h-2v-4h2v4z"
+                />
+              </svg>
+            </div>
+            <div
+              class="MuiListItemText-root"
+            >
+              <span
+                class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
+              >
+                Datascope
+              </span>
+            </div>
+            <span
+              class="MuiTouchRipple-root"
+            />
+          </a>
+        </li>
+      </span>
+      <ul
+        style="margin-left: 50px;"
+      >
+        <li>
+          <a
+            aria-disabled="false"
+            class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
+            href="/datascope/battery"
+            role="button"
+            tabindex="0"
+          >
+            <div
+              class="MuiListItemText-root"
+            >
+              <span
+                class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
+              >
+                Battery
               </span>
             </div>
             <span
@@ -143,10 +182,13 @@ exports[`SideMenu Authenticated 1`] = `
         <li>
           <a
             aria-disabled="false"
-          class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
+            class="MuiTypography-root MuiLink-root MuiLink-underlineHover MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button MuiTypography-colorPrimary"
-          href="/vehicle-add"
+            href="https://grafana.fiskerdps.com"
+            rel="noopener"
             role="button"
+            style="text-decoration: inherit;"
             tabindex="0"
+            target="_blank"
           >
             <div
               class="MuiListItemText-root"
@@ -154,29 +196,7 @@ exports[`SideMenu Authenticated 1`] = `
               <span
                 class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
               >
-              Add Vehicle
+                Diagnostics
-            </span>
-          </div>
-          <span
-            class="MuiTouchRipple-root"
-          />
-        </a>
-      </li>
-      <li>
-        <a
-          aria-disabled="false"
-          class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
-          href="/vehicles-command"
-          role="button"
-          tabindex="0"
-        >
-          <div
-            class="MuiListItemText-root"
-          >
-            <span
-              class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
-            >
-              Send Command
               </span>
             </div>
             <span
@@ -185,6 +205,7 @@ exports[`SideMenu Authenticated 1`] = `
           </a>
         </li>
       </ul>
+    </ul>
   </div>
 </div>
 `;
@@ -205,6 +226,20 @@ exports[`SideMenu Unauthenticated 1`] = `
           role="button"
           tabindex="0"
         >
+          <div
+            class="MuiListItemIcon-root"
+          >
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root"
+              focusable="false"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"
+              />
+            </svg>
+          </div>
           <div
             class="MuiListItemText-root"
           >

src/components/Manifest/Create/index.jsx

@@ -0,0 +1,262 @@
+import React, { useEffect, useRef, useState } from "react";
+import { Redirect } from "react-router";
+import {
+  Button,
+  Grid,
+  LinearProgress,
+  TextField,
+  Typography,
+} from "@material-ui/core";
+import { DropzoneArea } from "material-ui-dropzone";
+
+import { useUserContext } from "../../Contexts/UserContext";
+import { useStatusContext } from "../../Contexts/StatusContext";
+import {
+  useManifestsContext,
+  ManifestsProvider,
+} from "../../Contexts/ManifestsContext";
+import useStyles from "../../useStyles";
+import { logger } from "../../../services/monitoring";
+import ECUFilesList from "../ECUFilesList";
+
+const FileTemplate = {
+  name: "AGS",
+  part_number: "",
+  update_version: "1.0.0",
+};
+
+const UploadProgress = (props) => {
+  const { uploadProgress, uploadStatus, uploadFileIndex, uploadedFiles } =
+    useManifestsContext();
+  const [progress, setProgress] = useState(0);
+  const [completed, setCompleted] = useState(0);
+  const [total, setTotal] = useState(0);
+
+  useEffect(() => {
+    const x = uploadedFiles.reduce(
+      (current, { file }) => current + file.size,
+      0
+    );
+    setTotal(x);
+  }, [uploadedFiles]);
+
+  useEffect(() => {
+    if (uploadFileIndex === 0 || uploadFileIndex >= uploadedFiles.length)
+      return;
+    let uploaded = 0;
+    uploadedFiles.forEach(({ file }, i) => {
+      if (i < uploadFileIndex) uploaded += file.size;
+    });
+    setCompleted(uploaded);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [uploadFileIndex]);
+
+  useEffect(() => {
+    if (total === 0 || uploadFileIndex >= uploadedFiles.length) return;
+    const { file } = uploadedFiles[uploadFileIndex];
+    const uploaded = completed + file.size * uploadProgress;
+    const x = Math.min(99, Math.floor((uploaded / total) * 100));
+    setProgress(x);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [uploadProgress, completed]);
+
+  return (
+    <>
+      <Grid container>
+        <Grid xs={12}>
+          <Typography align="center">
+            {`File ${uploadFileIndex + 1} of ${
+              uploadedFiles.length
+            }. ${uploadStatus}`}
+          </Typography>
+        </Grid>
+      </Grid>
+      <Grid container alignContent="center" spacing={0}>
+        <Grid xs={11}>
+          <LinearProgress
+            variant="determinate"
+            value={progress}
+            style={{ marginTop: 16 }}
+          />
+        </Grid>
+        <Grid xs={1} alignContent="flex-end" align="right">
+          <Button onClick={props.onCancel}>Cancel</Button>
+        </Grid>
+      </Grid>
+    </>
+  );
+};
+
+const MainForm = () => {
+  const { createManifest, cancelUpload, busy } = useManifestsContext();
+  const { token } = useUserContext();
+  const { setMessage, setTitle, setSitePath } = useStatusContext();
+  const [redirect, setRedirect] = useState(null);
+  const [fileIndex, setFileIndex] = useState(0);
+  const [ecuFiles, setECUFiles] = useState([]);
+  const classes = useStyles();
+  const packagenameEl = useRef(null);
+  const versionEl = useRef(null);
+  const descEl = useRef(null);
+  const releasenotesEl = useRef(null);
+
+  const getNewFile = (file) => {
+    setFileIndex(fileIndex + 1);
+    return Object.assign(
+      { data_id: fileIndex, filename: file.name, file },
+      FileTemplate
+    );
+  };
+
+  const addFile = (file) => {
+    setECUFiles(ecuFiles.concat(getNewFile(file)));
+  };
+
+  useEffect(() => {
+    setTitle("Create Deployments");
+    setSitePath([
+      {
+        label: "Deployments",
+        link: "/packages",
+      },
+      {
+        label: "Create Deployments",
+      },
+    ]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const onSubmit = async (event) => {
+    try {
+      event.preventDefault();
+      const {
+        idToken: { jwtToken: authToken },
+      } = token;
+      const formData = {
+        name: packagenameEl.current.value,
+        version: versionEl.current.value,
+        description: descEl.current.value,
+        releasenotes: releasenotesEl.current.value,
+        files: ecuFiles,
+      };
+      const manifest = await createManifest(formData, authToken);
+
+      if (!manifest || manifest.error) return;
+
+      cancelUpload();
+      setMessage(`Package uploaded`);
+      setRedirect(`/package-deploy/${manifest.id}`);
+    } catch (e) {
+      setMessage(e.message);
+      logger.warn(e.stack);
+    }
+  };
+
+  if (redirect && redirect.length > 0) {
+    return <Redirect to={redirect} />;
+  }
+
+  return (
+    <div className={classes.paper}>
+      <form className={classes.form} noValidate action="{onSubmit}">
+        <TextField
+          id="packagename"
+          name="packagename"
+          label="Package name"
+          variant="outlined"
+          margin="normal"
+          inputProps={{
+            maxLength: "255",
+          }}
+          required
+          fullWidth
+          inputRef={packagenameEl}
+        />
+        <TextField
+          id="version"
+          name="version"
+          label="Version"
+          variant="outlined"
+          margin="normal"
+          inputProps={{
+            maxLength: "255",
+          }}
+          required
+          fullWidth
+          inputRef={versionEl}
+        />
+        <TextField
+          id="description"
+          name="description"
+          label="Description"
+          variant="outlined"
+          margin="normal"
+          inputProps={{
+            maxLength: "5120",
+          }}
+          required
+          fullWidth
+          multiline
+          rows={4}
+          placeholder="Package description"
+          inputRef={descEl}
+        />
+        <TextField
+          id="releasenotes"
+          name="releasenotes"
+          label="Release Notes URL"
+          variant="outlined"
+          margin="normal"
+          inputProps={{
+            maxLength: "1024",
+          }}
+          required
+          fullWidth
+          placeholder="Release Notes URL"
+          inputRef={releasenotesEl}
+        />
+        <Typography variant="h6">ECU Files</Typography>
+        <ECUFilesList data={ecuFiles} onChange={setECUFiles} />
+        <DropzoneArea
+          id="dropzone"
+          dropzoneText="Add Files"
+          maxFileSize={1e9}
+          filesLimit={1000}
+          showAlerts={false}
+          showPreviewsInDropzone={false}
+          onDrop={(files) => {
+            files.forEach((file) => {
+              addFile(file);
+            });
+          }}
+          onDropRejected={(files) => {
+            setMessage(`Rejected ${files[0].name} too large`);
+          }}
+        />
+        {busy ? (
+          <UploadProgress onCancel={cancelUpload} />
+        ) : (
+          <Button
+            type="submit"
+            disabled={busy}
+            fullWidth
+            variant="contained"
+            color="primary"
+            className={classes.submit}
+            onClick={onSubmit}
+          >
+            Submit
+          </Button>
+        )}
+      </form>
+    </div>
+  );
+};
+
+export default function FileUploadForm() {
+  return (
+    <ManifestsProvider>
+      <MainForm />
+    </ManifestsProvider>
+  );
+}

src/components/Manifest/Deploy/index.jsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { useParams, Redirect } from "react-router";
 import { Button, Grid, Typography } from "@material-ui/core";
+
 import {
   ManifestsProvider,
   useManifestsContext,
@@ -27,7 +28,7 @@ const MainForm = () => {
       idToken: { jwtToken: token },
     },
   } = useUserContext();
-  const { setMessage, setTitle } = useStatusContext();
+  const { setMessage, setTitle, setSitePath } = useStatusContext();
   const [manifestName, setManifestName] = useState("");
   const [version, setVersion] = useState("");
   const [createDate, setCreateDate] = useState("");
@@ -71,7 +72,7 @@ const MainForm = () => {
       setMessage(
         `Deployed ${manifestName} ${version} to ${selected.length} cars`
       );
-      setRedirect(`/manifest-status/${manifest_id}`);
+      setRedirect(`/package-status/${manifest_id}`);
     } catch (e) {
       setMessage(e.message);
       logger.warn(e.stack);
@@ -93,7 +94,17 @@ const MainForm = () => {
   }, [token]);
 
   useEffect(() => {
-    setTitle(`Deploy ${manifestName} ${version}`);
+    const title = `Deploy ${manifestName} ${version}`;
+    setTitle(title);
+    setSitePath([
+      {
+        label: "Deployments",
+        link: "/packages",
+      },
+      {
+        label: title,
+      },
+    ]);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [manifestName, version]);
 

src/components/Manifest/ECUFilesList/index.jsx

@@ -0,0 +1,39 @@
+import React from "react";
+import SubList from "../../Controls/SubList";
+import ECUDropDrop from "../../Controls/ECUDropDown";
+
+const ECUFilesList = ({ data, onChange }) => {
+  const options = [
+    {
+      label: "ID",
+      field: "data_id",
+      readonly: true,
+    },
+    {
+      label: "ECU",
+      field: "name",
+      control: ECUDropDrop,
+    },
+    {
+      label: "Part Number",
+      field: "part_number",
+    },
+    {
+      label: "Version",
+      field: "update_version",
+    },
+    {
+      label: "File",
+      field: "filename",
+      readonly: true,
+    },
+    {
+      label: "",
+      delete: true,
+    },
+  ];
+
+  return <SubList data={data} options={options} onChange={onChange} />;
+};
+
+export default ECUFilesList;

src/components/Manifest/List/index.jsx

@@ -10,6 +10,7 @@ import {
   Toolbar,
   Tooltip,
 } from "@material-ui/core";
+import AddCircleIcon from "@material-ui/icons/AddCircle";
 import SendIcon from "@material-ui/icons/Send";
 import VisibilityIcon from "@material-ui/icons/Visibility";
 import DeleteIcon from "@material-ui/icons/Delete";
@@ -64,7 +65,7 @@ const MainForm = () => {
   const [search, setSearch] = useState("");
   const { getManifests, deleteManifest, manifests, totalManifests } =
     useManifestsContext();
-  const { setMessage, setTitle } = useStatusContext();
+  const { setMessage, setTitle, setSitePath } = useStatusContext();
   const {
     token: {
       idToken: { jwtToken: token },
@@ -86,7 +87,8 @@ const MainForm = () => {
   };
 
   useEffect(() => {
-    setTitle("Deploy Manifest");
+    setTitle("Deployments");
+    setSitePath([]);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
@@ -137,7 +139,7 @@ const MainForm = () => {
     if (hasRole([Roles.CREATE, Roles.READ], groups)) {
       actions.push({
         tip: `Status "${row.name} ${row.version}"`,
-        link: `/manifest-status/${row.id}`,
+        link: `/package-status/${row.id}`,
         icon: (
           <VisibilityIcon aria-label={`Status ${row.name} ${row.version}`} />
         ),
@@ -147,7 +149,7 @@ const MainForm = () => {
       actions = actions.concat([
         {
           tip: `Deploy "${row.name} ${row.version}"`,
-          link: `/manifest-deploy/${row.id}`,
+          link: `/package-deploy/${row.id}`,
           icon: <SendIcon aria-label={`Deploy ${row.name} ${row.version}`} />,
         },
         {
@@ -184,6 +186,9 @@ const MainForm = () => {
   return (
     <div className={classes.paper} style={{ height: 700, width: "100%" }}>
       <Toolbar className={classes.tableToolbar}>
+        <Link to="/package-create" className={classes.labelInline}>
+          <AddCircleIcon fontSize="large" />
+        </Link>
         <SearchField classes={classes} onSearch={handleSearch} />
       </Toolbar>
       <Table>

src/components/Manifest/Status/index.jsx

@@ -39,7 +39,7 @@ const MainForm = () => {
     startMonitor,
     stopMonitor,
   } = useCarUpdatesContext();
-  const { setMessage, setTitle } = useStatusContext();
+  const { setMessage, setTitle, setSitePath } = useStatusContext();
   const {
     token: {
       idToken: { jwtToken: token },
@@ -60,7 +60,18 @@ const MainForm = () => {
 
   useEffect(() => {
     if (!manifests || manifests.length === 0) return;
-    setTitle(`Manifest ${manifests[0].name} ${manifests[0].version}`);
+    const title = `Manifest ${manifests[0].name} ${manifests[0].version}`;
+    setTitle(title);
+    setSitePath([
+      {
+        label: "Deployments",
+        link: "/packages",
+      },
+      {
+        label: title,
+      },
+    ]);
+
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [manifests]);
 

src/components/Routes/SiteRoutes.jsx

@@ -8,20 +8,18 @@ import { Roles } from "../../utils/roles";
 
 const SSOForm = React.lazy(() => import("../SSOForm"));
 const Home = React.lazy(() => import("../Home"));
-const FileUploadForm = React.lazy(() => import("../UpdatePackages/Create"));
 const VehicleAddForm = React.lazy(() => import("../Cars/Add"));
 const PageNotFound = React.lazy(() => import("../404"));
-const UpdatePackagesForm = React.lazy(() => import("../UpdatePackages/List"));
-const UpdatePackageEdit = React.lazy(() => import("../UpdatePackages/Edit"));
 const CarUpdatesDeploy = React.lazy(() => import("../CarUpdates/Deploy"));
 const CarUpdatesStatus = React.lazy(() => import("../CarUpdates/Status"));
 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 Datascope = React.lazy(() => import("../Datascope/Home"));
+const BatteryDatascope = React.lazy(() => import("../Datascope/Battery"));
 const Manifests = React.lazy(() => import("../Manifest/List"));
 const ManifestDeploy = React.lazy(() => import("../Manifest/Deploy"));
 const ManifestStatus = React.lazy(() => import("../Manifest/Status"));
+const ManifestCreate = React.lazy(() => import("../Manifest/Create"));
 
 const SiteRoutes = () => {
   const { token, groups } = useUserContext();
@@ -42,30 +40,6 @@ const SiteRoutes = () => {
           type={TYPES.PROTECTED}
           token={token}
         />
-        <AuthRoute
-          path="/package-upload"
-          render={() => <FileUploadForm />}
-          type={TYPES.PROTECTED}
-          token={token}
-          groups={groups}
-          roles={[Roles.CREATE]}
-        />
-        <AuthRoute
-          path="/updates"
-          render={() => <UpdatePackagesForm />}
-          type={TYPES.PROTECTED}
-          token={token}
-          groups={groups}
-          roles={[Roles.CREATE]}
-        />
-        <AuthRoute
-          path="/update/:id"
-          render={() => <UpdatePackageEdit />}
-          type={TYPES.PROTECTED}
-          token={token}
-          groups={groups}
-          roles={[Roles.CREATE]}
-        />
         <AuthRoute
           path="/carupdate-deploy/:packageid"
           render={() => <CarUpdatesDeploy />}
@@ -84,11 +58,11 @@ const SiteRoutes = () => {
         />
         <AuthRoute
           path="/vehicles"
-          render={() => <VehiclesList />}
+          render={() => <SendCommandBulk />}
           type={TYPES.PROTECTED}
           token={token}
           groups={groups}
-          roles={[Roles.READ, Roles.CREATE]}
+          roles={[Roles.CREATE]}
         />
         <AuthRoute
           path="/vehicle-add"
@@ -107,23 +81,23 @@ const SiteRoutes = () => {
           roles={[Roles.READ, Roles.CREATE]}
         />
         <AuthRoute
-          path="/vehicles-command"
+          path="/datascope/battery"
-          render={() => <SendCommandBulk />}
+          render={() => <BatteryDatascope />}
-          type={TYPES.PROTECTED}
-          token={token}
-          groups={groups}
-          roles={[Roles.CREATE]}
-        />
-        <AuthRoute
-          path="/dashboard"
-          render={() => <Dashboard />}
           type={TYPES.PROTECTED}
           token={token}
           groups={groups}
           roles={[Roles.READ, Roles.CREATE]}
         />
         <AuthRoute
-          path="/manifests"
+          path="/datascope"
+          render={() => <Datascope />}
+          type={TYPES.PROTECTED}
+          token={token}
+          groups={groups}
+          roles={[Roles.READ, Roles.CREATE]}
+        />
+        <AuthRoute
+          path="/packages"
           render={() => <Manifests />}
           type={TYPES.PROTECTED}
           token={token}
@@ -131,7 +105,7 @@ const SiteRoutes = () => {
           roles={[Roles.READ, Roles.CREATE]}
         />
         <AuthRoute
-          path="/manifest-deploy/:manifest_id"
+          path="/package-deploy/:manifest_id"
           render={() => <ManifestDeploy />}
           type={TYPES.PROTECTED}
           token={token}
@@ -139,13 +113,21 @@ const SiteRoutes = () => {
           roles={[Roles.CREATE]}
         />
         <AuthRoute
-          path="/manifest-status/:manifest_id"
+          path="/package-status/:manifest_id"
           render={() => <ManifestStatus />}
           type={TYPES.PROTECTED}
           token={token}
           groups={groups}
           roles={[Roles.READ, Roles.CREATE]}
         />
+        <AuthRoute
+          path="/package-create"
+          render={() => <ManifestCreate />}
+          type={TYPES.PROTECTED}
+          token={token}
+          groups={groups}
+          roles={[Roles.CREATE]}
+        />
         <PageNotFound />
       </Switch>
     </Suspense>

src/components/UpdatePackages/Create/Create.test.js

@@ -1,20 +0,0 @@
-jest.mock("../../Contexts/UserContext");
-jest.mock("../../Contexts/FileUploadContext");
-jest.mock("../../Contexts/VehicleContext");
-
-import { BrowserRouter } from "react-router-dom";
-import { render, cleanup, waitFor } from "@testing-library/react";
-import FileUploadForm from "./index";
-import { setToken } from "../../Contexts/UserContext";
-import { StatusProvider } from "../../Contexts/StatusContext";
-import { TEST_AUTH_OBJECT } from "../../../utils/testing"
-
-describe("File Upload Form", () => {
-  it("Should render", async () => {
-    setToken(TEST_AUTH_OBJECT);
-    const { container } = render(<StatusProvider><BrowserRouter><FileUploadForm /></BrowserRouter></StatusProvider>);
-    await waitFor(() => {});
-    expect(container).toMatchSnapshot();
-    cleanup();
-  })
-})

src/components/UpdatePackages/Create/__snapshots__/Create.test.js.snap

@@ -1,250 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`File Upload Form Should render 1`] = `
-<div>
-  <div
-    data-testid="mocked-fileuploadprovider"
-  >
-    <div
-      class="makeStyles-paper-3"
-    >
-      <form
-        action="{onSubmit}"
-        class="makeStyles-form-5"
-        novalidate=""
-      >
-        <div
-          class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
-        >
-          <label
-            class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined Mui-required Mui-required"
-            data-shrink="false"
-            for="packagename"
-            id="packagename-label"
-          >
-            Package name
-            <span
-              aria-hidden="true"
-              class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
-            >
-               
-              *
-            </span>
-          </label>
-          <div
-            class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
-          >
-            <input
-              aria-invalid="false"
-              class="MuiInputBase-input MuiOutlinedInput-input"
-              id="packagename"
-              maxlength="255"
-              name="packagename"
-              required=""
-              type="text"
-              value=""
-            />
-            <fieldset
-              aria-hidden="true"
-              class="PrivateNotchedOutline-root-39 MuiOutlinedInput-notchedOutline"
-            >
-              <legend
-                class="PrivateNotchedOutline-legendLabelled-41"
-              >
-                <span>
-                  Package name
-                   *
-                </span>
-              </legend>
-            </fieldset>
-          </div>
-        </div>
-        <div
-          class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
-        >
-          <label
-            class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined Mui-required Mui-required"
-            data-shrink="false"
-            for="version"
-            id="version-label"
-          >
-            Version
-            <span
-              aria-hidden="true"
-              class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
-            >
-               
-              *
-            </span>
-          </label>
-          <div
-            class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
-          >
-            <input
-              aria-invalid="false"
-              class="MuiInputBase-input MuiOutlinedInput-input"
-              id="version"
-              maxlength="255"
-              name="version"
-              required=""
-              type="text"
-              value=""
-            />
-            <fieldset
-              aria-hidden="true"
-              class="PrivateNotchedOutline-root-39 MuiOutlinedInput-notchedOutline"
-            >
-              <legend
-                class="PrivateNotchedOutline-legendLabelled-41"
-              >
-                <span>
-                  Version
-                   *
-                </span>
-              </legend>
-            </fieldset>
-          </div>
-        </div>
-        <div
-          class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
-        >
-          <label
-            class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined Mui-required Mui-required"
-            data-shrink="false"
-            for="description"
-            id="description-label"
-          >
-            Description
-            <span
-              aria-hidden="true"
-              class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
-            >
-               
-              *
-            </span>
-          </label>
-          <div
-            class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-multiline MuiOutlinedInput-multiline"
-          >
-            <textarea
-              aria-invalid="false"
-              class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputMultiline MuiOutlinedInput-inputMultiline"
-              id="description"
-              maxlength="5120"
-              name="description"
-              placeholder="Package description"
-              required=""
-              rows="4"
-            />
-            <fieldset
-              aria-hidden="true"
-              class="PrivateNotchedOutline-root-39 MuiOutlinedInput-notchedOutline"
-            >
-              <legend
-                class="PrivateNotchedOutline-legendLabelled-41"
-              >
-                <span>
-                  Description
-                   *
-                </span>
-              </legend>
-            </fieldset>
-          </div>
-        </div>
-        <div
-          class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
-        >
-          <label
-            class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined Mui-required Mui-required"
-            data-shrink="false"
-            for="releasenotes"
-            id="releasenotes-label"
-          >
-            Release Notes URL
-            <span
-              aria-hidden="true"
-              class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
-            >
-               
-              *
-            </span>
-          </label>
-          <div
-            class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
-          >
-            <input
-              aria-invalid="false"
-              class="MuiInputBase-input MuiOutlinedInput-input"
-              id="releasenotes"
-              maxlength="1024"
-              name="releasenotes"
-              placeholder="Release Notes URL"
-              required=""
-              type="text"
-              value=""
-            />
-            <fieldset
-              aria-hidden="true"
-              class="PrivateNotchedOutline-root-39 MuiOutlinedInput-notchedOutline"
-            >
-              <legend
-                class="PrivateNotchedOutline-legendLabelled-41"
-              >
-                <span>
-                  Release Notes URL
-                   *
-                </span>
-              </legend>
-            </fieldset>
-          </div>
-        </div>
-        <div
-          class="MuiDropzoneArea-root"
-          tabindex="0"
-        >
-          <input
-            accept=""
-            autocomplete="off"
-            style="display: none;"
-            tabindex="-1"
-            type="file"
-          />
-          <div
-            class="MuiDropzoneArea-textContainer"
-          >
-            <p
-              class="MuiTypography-root MuiDropzoneArea-text MuiTypography-h5"
-            >
-              Drag and drop a file here or click
-            </p>
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root MuiDropzoneArea-icon"
-              focusable="false"
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z"
-              />
-            </svg>
-          </div>
-        </div>
-        <button
-          class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-6 MuiButton-containedPrimary MuiButton-fullWidth"
-          tabindex="0"
-          type="submit"
-        >
-          <span
-            class="MuiButton-label"
-          >
-            Submit
-          </span>
-          <span
-            class="MuiTouchRipple-root"
-          />
-        </button>
-      </form>
-    </div>
-  </div>
-</div>
-`;

src/components/UpdatePackages/Create/index.jsx

@@ -1,171 +0,0 @@
-import React, { useEffect, useRef, useState } from "react";
-import { Redirect } from "react-router";
-import { Button, TextField } from "@material-ui/core";
-import { DropzoneArea } from "material-ui-dropzone";
-
-import { useUserContext } from "../../Contexts/UserContext";
-import { useStatusContext } from "../../Contexts/StatusContext";
-import {
-  useFileUploadContext,
-  FileUploadProvider,
-} from "../../Contexts/FileUploadContext";
-import ModalProgressBar from "../../ModalProgressBar";
-import useStyles from "../../useStyles";
-import { logger } from "../../../services/monitoring";
-
-const FileUploadZone = ({ classes, token }) => {
-  const { setFiles } = useFileUploadContext();
-  const { setMessage } = useStatusContext();
-
-  return (
-    <>
-      <DropzoneArea
-        id="dropzone"
-        showPreviews={true}
-        showPreviewsInDropzone={false}
-        useChipsForPreview
-        previewGridProps={{ container: { spacing: 1, direction: "row" } }}
-        previewChipProps={{ classes: { root: classes.previewChip } }}
-        previewText="Selected files"
-        maxFileSize={1e9}
-        filesLimit={1}
-        showAlerts={false}
-        onChange={(files) => setFiles(files)}
-        onDelete={(files) => setFiles(files)}
-        onDropRejected={(files) => {
-          setMessage(`Rejected ${files[0].name} too large`);
-        }}
-      />
-      <ModalProgressBar />
-    </>
-  );
-};
-
-const MainForm = () => {
-  const { uploading, upload, files, cancel } = useFileUploadContext();
-  const { token } = useUserContext();
-  const { setMessage, setTitle } = useStatusContext();
-  const [redirect, setRedirect] = useState(null);
-  const classes = useStyles();
-  const packagenameEl = useRef(null);
-  const versionEl = useRef(null);
-  const descEl = useRef(null);
-  const releasenotesEl = useRef(null);
-
-  useEffect(() => {
-    setTitle("Create Update Package");
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  const onSubmit = async (event) => {
-    try {
-      event.preventDefault();
-      const {
-        idToken: { jwtToken: authToken },
-      } = token;
-      const formData = {
-        packagename: packagenameEl.current.value,
-        version: versionEl.current.value,
-        description: descEl.current.value,
-        releasenotes: releasenotesEl.current.value,
-      };
-      const result = await upload(formData, authToken, files);
-
-      if (!result || result.error) return;
-
-      cancel();
-      setMessage(`Package uploaded`);
-      setRedirect(`/carupdate-deploy/${result.id}`);
-    } catch (e) {
-      setMessage(e.message);
-      logger.warn(e.stack);
-    }
-  };
-
-  if (redirect && redirect.length > 0) {
-    return <Redirect to={redirect} />;
-  }
-
-  return (
-    <div className={classes.paper}>
-      <form className={classes.form} noValidate action="{onSubmit}">
-        <TextField
-          id="packagename"
-          name="packagename"
-          label="Package name"
-          variant="outlined"
-          margin="normal"
-          inputProps={{
-            maxLength: "255",
-          }}
-          required
-          fullWidth
-          inputRef={packagenameEl}
-        />
-        <TextField
-          id="version"
-          name="version"
-          label="Version"
-          variant="outlined"
-          margin="normal"
-          inputProps={{
-            maxLength: "255",
-          }}
-          required
-          fullWidth
-          inputRef={versionEl}
-        />
-        <TextField
-          id="description"
-          name="description"
-          label="Description"
-          variant="outlined"
-          margin="normal"
-          inputProps={{
-            maxLength: "5120",
-          }}
-          required
-          fullWidth
-          multiline
-          rows={4}
-          placeholder="Package description"
-          inputRef={descEl}
-        />
-        <TextField
-          id="releasenotes"
-          name="releasenotes"
-          label="Release Notes URL"
-          variant="outlined"
-          margin="normal"
-          inputProps={{
-            maxLength: "1024",
-          }}
-          required
-          fullWidth
-          placeholder="Release Notes URL"
-          inputRef={releasenotesEl}
-        />
-        <FileUploadZone classes={classes} />
-        <Button
-          type="submit"
-          disabled={uploading}
-          fullWidth
-          variant="contained"
-          color="primary"
-          className={classes.submit}
-          onClick={onSubmit}
-        >
-          {uploading ? "Uploading..." : "Submit"}
-        </Button>
-      </form>
-    </div>
-  );
-};
-
-export default function FileUploadForm() {
-  return (
-    <FileUploadProvider>
-      <MainForm />
-    </FileUploadProvider>
-  );
-}

src/components/UpdatePackages/Edit/index.jsx

@@ -1,204 +0,0 @@
-import React, { useEffect, useState } from "react";
-import { useParams } from "react-router";
-import { Button, TextField } from "@material-ui/core";
-
-import {
-  UpdatesProvider,
-  useUpdatesContext,
-} from "../../Contexts/UpdatesContext";
-import { useUserContext } from "../../Contexts/UserContext";
-import { useStatusContext } from "../../Contexts/StatusContext";
-import useStyles from "../../useStyles";
-import { tsLocalDateTimeString } from "../../../utils/dates";
-import { logger } from "../../../services/monitoring";
-
-const MainForm = () => {
-  const { id } = useParams();
-  const { getPackages, updatePackage, packages, busy } = useUpdatesContext();
-  const {
-    token: {
-      idToken: { jwtToken: token },
-    },
-  } = useUserContext();
-  const { setMessage, setTitle } = useStatusContext();
-  const [packageName, setPackageName] = useState("");
-  const [version, setVersion] = useState("");
-  const [link, setLink] = useState("");
-  const [description, setDescription] = useState("");
-  const [releaseNotesLink, setReleaseNotesLink] = useState("");
-  const [createDate, setCreateDate] = useState("");
-  const classes = useStyles();
-  const onSubmit = async (event) => {
-    try {
-      event.preventDefault();
-      const data = {
-        id: parseInt(id),
-        package_name: packageName,
-        version,
-        link,
-        desc: description,
-        release_notes: releaseNotesLink,
-      };
-      await updatePackage(data, token);
-      setMessage(`Updated ${packageName} ${version}`);
-    } catch (e) {
-      setMessage(e.message);
-      logger.warn(e.stack);
-    }
-  };
-  const getData = async () => {
-    try {
-      getPackages({ id: parseInt(id) }, token);
-    } catch (e) {
-      setMessage(e.message);
-      logger.warn(e.stack);
-    }
-  };
-  const handleChange = (event) => {
-    const field = event.target.id;
-    const value = event.target.value;
-
-    if (field === "packagename") {
-      setPackageName(value);
-    } else if (field === "version") {
-      setVersion(value);
-    } else if (field === "link") {
-      setLink(value);
-    } else if (field === "description") {
-      setDescription(value);
-    } else if (field === "releasenotes") {
-      setReleaseNotesLink(value);
-    }
-  };
-
-  useEffect(() => {
-    setTitle(`Edit Update Package ${id}`);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  useEffect(() => {
-    getData();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [token]);
-
-  useEffect(() => {
-    if (!packages || packages.length === 0) return;
-    var data = packages[0];
-
-    setPackageName(data.package_name);
-    setVersion(data.version);
-    setLink(data.link);
-    setDescription(data.desc || "");
-    setReleaseNotesLink(data.release_notes || "");
-    setCreateDate(tsLocalDateTimeString(data.timestamp));
-  }, [packages]);
-
-  return (
-    <div className={classes.paper}>
-      <form className={classes.form} noValidate action="{onSubmit}">
-        <TextField
-          label="Create Date"
-          variant="filled"
-          margin="normal"
-          inputProps={{
-            readOnly: true,
-            maxLength: "1024",
-          }}
-          value={createDate}
-          fullWidth
-        />
-        <TextField
-          id="packagename"
-          name="packagename"
-          label="Package name"
-          variant="outlined"
-          margin="normal"
-          inputProps={{
-            maxLength: "255",
-          }}
-          value={packageName}
-          onChange={handleChange}
-          required
-          fullWidth
-        />
-        <TextField
-          id="version"
-          name="version"
-          label="Version"
-          variant="outlined"
-          margin="normal"
-          inputProps={{
-            maxLength: "255",
-          }}
-          value={version}
-          onChange={handleChange}
-          required
-          fullWidth
-        />
-        <TextField
-          id="link"
-          name="link"
-          label="Package link"
-          variant="outlined"
-          margin="normal"
-          inputProps={{
-            maxLength: "1024",
-          }}
-          value={link}
-          onChange={handleChange}
-          required
-          fullWidth
-        />
-        <TextField
-          id="description"
-          name="description"
-          label="Description"
-          variant="outlined"
-          margin="normal"
-          inputProps={{
-            maxLength: "5120",
-          }}
-          value={description}
-          onChange={handleChange}
-          fullWidth
-          multiline
-          rows={4}
-          placeholder="Package description"
-        />
-        <TextField
-          id="releasenotes"
-          name="releasenotes"
-          label="Release Notes URL"
-          variant="outlined"
-          margin="normal"
-          inputProps={{
-            maxLength: "1024",
-          }}
-          value={releaseNotesLink}
-          onChange={handleChange}
-          fullWidth
-          placeholder="Release Notes URL"
-        />
-        <Button
-          type="submit"
-          disabled={busy}
-          fullWidth
-          variant="contained"
-          color="primary"
-          className={classes.submit}
-          onClick={onSubmit}
-        >
-          {busy ? "Updating..." : "Submit"}
-        </Button>
-      </form>
-    </div>
-  );
-};
-
-const UpdatePackageEditForm = () => (
-  <UpdatesProvider>
-    <MainForm />
-  </UpdatesProvider>
-);
-
-export default UpdatePackageEditForm;

src/components/UpdatePackages/List/index.jsx

@@ -1,244 +0,0 @@
-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 useStyles from "../../useStyles";
-import {
-  UpdatesProvider,
-  useUpdatesContext,
-} from "../../Contexts/UpdatesContext";
-import { useUserContext } from "../../Contexts/UserContext";
-import { useStatusContext } from "../../Contexts/StatusContext";
-import { LocalDateTimeString } from "../../../utils/dates";
-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 = [
-  {
-    id: "id",
-    label: "ID",
-  },
-  {
-    id: "package_name",
-    label: "Name",
-  },
-  {
-    id: "version",
-    label: "Version",
-  },
-  {
-    id: "created_at",
-    label: "Created",
-  },
-  {
-    id: "",
-    label: "Actions",
-  },
-];
-
-const UpdatePackagesList = () => {
-  const classes = useStyles();
-  const [pageSize, setPageSize] = useState(10);
-  const [pageIndex, setPageIndex] = useState(0);
-  const [orderBy, setOrderBy] = useState("id");
-  const [order, setOrder] = useState("desc");
-  const [search, setSearch] = useState("");
-  const { getPackages, deletePackage, packages, totalPackages } =
-    useUpdatesContext();
-  const {
-    token: {
-      idToken: { jwtToken: token },
-    },
-    groups,
-  } = useUserContext();
-  const { setMessage, setTitle } = useStatusContext();
-
-  useEffect(() => {
-    setTitle("Deploy Packages");
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  useEffect(() => {
-    getPackages(
-      {
-        limit: pageSize,
-        offset: pageSize * pageIndex,
-        order: `${orderBy} ${order}`,
-        search,
-      },
-      token
-    );
-    // 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 handleSort = (event, property) => {
-    if (property === orderBy) {
-      if (order === "asc") {
-        setOrder("desc");
-      } else {
-        setOrder("asc");
-      }
-    } else {
-      setOrderBy(property);
-      setOrder("asc");
-    }
-  };
-
-  const handleSearch = (search) => {
-    setSearch(search);
-  };
-
-  const onDelete = async (package_id) => {
-    try {
-      await deletePackage(parseInt(package_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.package_name} ${row.version}"`,
-        link: `/carupdate-status/${row.id}`,
-        icon: (
-          <VisibilityIcon
-            aria-label={`Status ${row.package_name} ${row.version}`}
-          />
-        ),
-      });
-    }
-    if (hasRole([Roles.CREATE], groups)) {
-      actions = actions.concat([
-        {
-          tip: `Deploy "${row.package_name} ${row.version}"`,
-          link: `/carupdate-deploy/${row.id}`,
-          icon: (
-            <SendIcon
-              aria-label={`Deploy ${row.package_name} ${row.version}`}
-            />
-          ),
-        },
-        {
-          tip: `Delete "${row.package_name} ${row.version}"`,
-          id: row.id,
-          icon: (
-            <DeleteIcon
-              aria-label={`Delete ${row.package_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={handleSort}
-        />
-        <TableBody>
-          {packages.map((row) => (
-            <TableRow key={row.id}>
-              <TableCell align="center">{row.id}</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)}
-              </TableCell>
-              <TableCell align="center">{Actions(row)}</TableCell>
-            </TableRow>
-          ))}
-        </TableBody>
-        <TableFooter>
-          <TableRow>
-            <TablePagination
-              rowsPerPageOptions={[5, 10, 25, 100]}
-              colSpan={5}
-              count={totalPackages}
-              rowsPerPage={pageSize}
-              page={pageIndex}
-              SelectProps={{
-                inputProps: { "aria-label": "rows per page" },
-                native: true,
-              }}
-              onPageChange={handleChangePageIndex}
-              onRowsPerPageChange={handleChangePageSize}
-            />
-          </TableRow>
-        </TableFooter>
-      </Table>
-    </div>
-  );
-};
-
-const UpdatePackagesForm = () => (
-  <UpdatesProvider>
-    <UpdatePackagesList />
-  </UpdatesProvider>
-);
-
-export default UpdatePackagesForm;

src/components/VehicleMap/index.jsx

@@ -7,8 +7,8 @@ import { Button } from "@material-ui/core";
 import { useUserContext } from "../Contexts/UserContext";
 import { useVehicleContext, VehicleProvider } from "../Contexts/VehicleContext";
 import { VehiclePopUp } from "./popup";
-import GreenCarIcon from "../../assets/green-car.png";
+import GreenMarkerIcon from "../../assets/green-marker.png";
-import RedCarIcon from "../../assets/red-car.png";
+import GrayMarkerIcon from "../../assets/gray-marker.png";
 
 const Component = () => {
   const classes = useStyles();
@@ -51,17 +51,17 @@ const Component = () => {
   }
 
   const centerAroundMarkers = (markers) => {
-    if (markers == null) {
+    // if (markers == null) {
-      markers = []
+    //   markers = []
-    }
+    // }
-    const coord = markers.reduce((coord, marker) => {
+    // const coord = markers.reduce((coord, marker) => {
-      coord[0] += marker[0] / markers.length;
+    //   coord[0] += marker[0] / markers.length;
-      coord[1] += marker[1] / markers.length;
+    //   coord[1] += marker[1] / markers.length;
-      return coord;
+    //   return coord;
-    }, [0, 0])
+    // }, [0, 0])
 
-    setCenter(coord);
+    setCenter([37.0902, -95.7129]);
-    setZoom(4);
+    setZoom(4.5);
   }
 
   const [connections, setConnections] = useState({});
@@ -109,17 +109,15 @@ const Component = () => {
   };
 
   function getCarIcon(vin) {
-    let icon = RedCarIcon;
+    let icon = GrayMarkerIcon;
 
     if (connections[vin]) {
-      icon = GreenCarIcon;
+      icon = GreenMarkerIcon;
-    } else {
-      icon = RedCarIcon;
     }
 
     return new L.Icon({
       iconUrl: icon,
-      iconAnchor: [15, 0]
+      iconAnchor: [24, 42]
     });
   }
 

src/components/useStyles.jsx

@@ -174,7 +174,7 @@ const useStyles = makeStyles((theme) => ({
     paddingTop: "56.25%",
   },
   closeButton: {
-    position: 'absolute',
+    position: "absolute",
     right: theme.spacing(1),
     top: theme.spacing(1),
     color: theme.palette.grey[500],
@@ -198,6 +198,39 @@ const useStyles = makeStyles((theme) => ({
     },
     paddingBottom: "2vh",
   },
+  toolbarFooter: {
+    width: "100%",
+    textAlign: "right",
+  },
+  breadcrumbs: {
+    fontSize: "8px",
+  },
+  addButton: {
+    fontSize: "large",
+    position: "relative",
+    top: 100,
+    left: 100,
+  },
+  batteryGrid: {},
+  batteryForm: {
+    alignItems: "stretch",
+    flexDirection: "column",
+  },
+  grafanaContainer: {
+    alignContent: "stretch",
+    alignItems: "center",
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    padding: 15,
+    paddingBottom: 20,
+  },
+  datascopeContainerText: {
+    margin: 0,
+  },
+  datascopeContainerValue: {
+    margin: 0,
+  },
 }));
 
 export default useStyles;

src/services/__mocks__/grafana.js

@@ -0,0 +1,19 @@
+const grafanaAPI = {
+    getCarsCount: async () => fetch(`${API_ENDPOINT}/?query=SELECT%20countDistinct(vin)%20as%20count%0AFROM%20default.vehicle_data%20FORMAT%20JSON`, {
+        method: "GET",
+        headers: Object.assign({ "Content-Type": "application/json" }),
+    })
+        .then(fetchRespHandler)
+        .then(result => result.data[0].count)
+        .catch(error => console.log(error)),
+
+    getSignalsCount: async () => fetch(`${API_ENDPOINT}/?query=SELECT%20count()%20as%20count%0AFROM%20default.vehicle_signal%20FORMAT%20JSON`, {
+        method: "GET",
+        headers: Object.assign({ "Content-Type": "application/json" }),
+    })
+        .then(fetchRespHandler)
+        .then(result => result.data[0].count)
+        .catch(error => console.log(error)),
+};
+
+export default vehiclesAPI;

src/services/grafana.js

@@ -0,0 +1,6 @@
+const grafanaAPI = {
+    getCarsCount: async () => 500,
+    getSignalsCount: async () => 1234567890,
+};
+
+export default grafanaAPI;

src/services/manifests.js

@@ -18,6 +18,13 @@ const manifestsAPI = {
     })
       .then(fetchRespHandler);
   },
+
+  createManifest: async (data, token) => fetch(`${API_ENDPOINT}/manifest`, {
+      method: "POST",
+      headers: Object.assign({ "Content-Type": "application/json" }, getAuthHeaderOptions(token)),
+      body: JSON.stringify(data),      
+    })
+      .then(fetchRespHandler),
 };
 
 export default manifestsAPI;

src/services/uploadFile.js

@@ -1,13 +1,14 @@
 import axios from 'axios';
 
 const UPLOAD_ENDPOINT = process.env.REACT_APP_UPLOAD_SERVICE_URL || "https://gw-dev.fiskerdps.com/ota_update";
+const fileField = "file";
 
 export const getCancelToken = () => {
   const token = axios.CancelToken;
   return token.source();
 }
 
-export const uploadFile = (file, data, token, onProgress, cancelToken) => {
+export const uploadFile = (data, token, onProgress, cancelToken) => {
   const form = new FormData();
   let options = {
     method: "POST",
@@ -17,19 +18,23 @@ export const uploadFile = (file, data, token, onProgress, cancelToken) => {
     },
     cancelToken,
   };
+
   if (onProgress) {
     options = { 
       ...options,
       onUploadProgress: (event) => {
-        onProgress(Math.min(99, Math.floor((event.loaded / event.total) * 100)));
+        onProgress(event.loaded / event.total);
       }
     }
   }
+
   for (let key in data) {
-    form.append(key, data[key]);
+    if (key !== fileField) form.append(key, data[key]);
   }
-  form.append("file", file);
+
-  return axios.post(`${UPLOAD_ENDPOINT}/update`, form, options)
+  form.append(fileField, data[fileField]);
+
+  return axios.post(`${UPLOAD_ENDPOINT}/manifestfile`, form, options)
     .then((response) => response.data)
     .catch((error) => {
       if (typeof error.response.data === "string") {

src/utils/jwt.js

@@ -1,3 +1,5 @@
+const DEFAULT_GREETING = "Human";
+
 export const parsePayload = (token) => {
   if (!token) return null;
   const parts = token.split(".");
@@ -12,3 +14,14 @@ export const decode = (payload) => {
   }
   return atob(payload);
 };
+
+export const getName = (token) => {
+  if (!token || !token.idToken || !token.idToken.jwtToken)
+    return DEFAULT_GREETING;
+
+  const payload = parsePayload(token.idToken.jwtToken);
+
+  if (!payload || !payload.given_name) return DEFAULT_GREETING;
+
+  return payload.given_name;
+};