CEC-3898 Update ecu table (#297)

* CEC-3898 Update ecu table * smells * smells * smells * smells * Fix test * Clean up Car status tests
2023-03-20 16:04:27 -07:00
parent a9b040f345
commit 70255d40e4
12 changed files with 298 additions and 60 deletions
--- a/src/components/Cars/Status/CANFiltersTab.jsx
+++ b/src/components/Cars/Status/CANFiltersTab.jsx
@@ -1,13 +1,11 @@
-import React from "react";
-import { useParams } from "react-router";
-import clsx from "clsx";
 import { Typography } from "@material-ui/core";
+import clsx from "clsx";
+import React from "react";

 import CANFiltersTable from "../../CANFilter/Table";
 import useStyles from "../../useStyles";

-const CANFiltersTab = () => {
-  const { vin } = useParams();
+const CANFiltersTab = ({vin}) => {
  const classes = useStyles();

  return (
--- a/src/components/Cars/Status/CANFiltersTab.test.jsx
+++ b/src/components/Cars/Status/CANFiltersTab.test.jsx
@@ -8,10 +8,10 @@ jest.mock("@material-ui/core/utils/unstable_useId", () =>
 import { render, waitFor } from "@testing-library/react";
 import { BrowserRouter } from "react-router-dom";

-import { setToken } from "../../Contexts/UserContext";
-import { TEST_AUTH_OBJECT_FISKER } from "../../../utils/testing";
-import CANFiltersTab from "./CANFiltersTab";
 import addSnapshotSerializer from "../../../utils/snapshot";
+import { TEST_AUTH_OBJECT_FISKER } from "../../../utils/testing";
+import { setToken } from "../../Contexts/UserContext";
+import CANFiltersTab from "./CANFiltersTab";

 const renderCANFiltersTab = async () => {
  const { container } = render(
--- a/src/components/Cars/Status/CANSignalsTab.jsx
+++ b/src/components/Cars/Status/CANSignalsTab.jsx
@@ -1,11 +1,11 @@
-import React from "react";
-import clsx from "clsx";
 import { Typography } from "@material-ui/core";
+import clsx from "clsx";
+import React from "react";

-import useStyles from "../../useStyles";
 import { useUserContext } from "../../Contexts/UserContext";
-import CANSignals from "../CANSignals";
 import { VehicleProvider } from "../../Contexts/VehicleContext";
+import useStyles from "../../useStyles";
+import CANSignals from "../CANSignals";

 const Main = (props) => {
  const {
--- a/src/components/Cars/Status/CANSignalsTab.test.jsx
+++ b/src/components/Cars/Status/CANSignalsTab.test.jsx
@@ -9,14 +9,14 @@ jest.mock("@material-ui/core/utils/unstable_useId", () =>

 import { render, waitFor } from "@testing-library/react";
 import { BrowserRouter } from "react-router-dom";
-import CANSignalsTab from "./CANSignalsTab";
-import {setToken} from "../../Contexts/UserContext";
 import { TEST_AUTH_OBJECT_FISKER } from "../../../utils/testing";
+import { setToken } from "../../Contexts/UserContext";
+import CANSignalsTab from "./CANSignalsTab";

 const renderCANSignalsTab = async () => {
  const { container } = render(
    <BrowserRouter>
-      <CANSignalsTab vin="TESTVIN1234567890" token="token"/>
+      <CANSignalsTab vin="TESTVIN1234567890" />
    </BrowserRouter>
  );
  await waitFor(() => {
--- a/src/components/Cars/Status/CarUpdatesTab.jsx
+++ b/src/components/Cars/Status/CarUpdatesTab.jsx
@@ -1,7 +1,6 @@
 import { Typography } from "@material-ui/core";
 import clsx from "clsx";
 import React from "react";
-import { useParams } from "react-router";

 import { useUserContext } from "../../Contexts/UserContext";
 import { VehicleProvider } from "../../Contexts/VehicleContext";
@@ -9,8 +8,7 @@ import CarUpdatesTable from "../../Controls/CarUpdatesTable";
 import CarVersionLogTable from "../../Controls/CarVersionLogTable";
 import useStyles from "../../useStyles";

-const MainForm = () => {
-  const { vin } = useParams();
+const MainForm = ({vin}) => {
  const classes = useStyles();
  const {
    token: {
@@ -28,9 +26,9 @@ const MainForm = () => {
  );
 };

-const CarUpdatesTab = () => (
+const CarUpdatesTab = ({vin}) => (
  <VehicleProvider>
-    <MainForm />
+    <MainForm vin={vin} />
  </VehicleProvider>
 );

--- a/src/components/Cars/Status/DetailsTab.jsx
+++ b/src/components/Cars/Status/DetailsTab.jsx
@@ -1,13 +1,11 @@
-import React from "react";
-import { useParams } from "react-router";
-import clsx from "clsx";
 import { Typography } from "@material-ui/core";
+import clsx from "clsx";
+import React from "react";

-import CarDetails from "./Details";
 import useStyles from "../../useStyles";
+import CarDetails from "./Details";

-const CarDetailsTab = () => {
-  const { vin } = useParams();
+const CarDetailsTab = ({vin}) => {
  const classes = useStyles();

  return (
--- a/src/components/Cars/Status/ECUsTab.jsx
+++ b/src/components/Cars/Status/ECUsTab.jsx
@@ -1,15 +1,13 @@
 import { Typography } from "@material-ui/core";
 import clsx from "clsx";
 import React from "react";
-import { useParams } from "react-router";

 import { useUserContext } from "../../Contexts/UserContext";
 import { VehicleProvider } from "../../Contexts/VehicleContext";
 import CarECUsTable from "../../Controls/CarECUsTable";
 import useStyles from "../../useStyles";

-const MainForm = () => {
-  const { vin } = useParams();
+const MainForm = ({ vin }) => {
  const classes = useStyles();
  const {
    token: {
@@ -27,9 +25,9 @@ const MainForm = () => {
  );
 };

-const CarUpdatesTab = () => (
+const CarUpdatesTab = ({vin}) => (
  <VehicleProvider>
-    <MainForm />
+    <MainForm vin={vin}/>
  </VehicleProvider>
 );

--- a/src/components/Cars/Status/snapshots/CANFiltersTab.test.jsx.snap
+++ b/src/components/Cars/Status/snapshots/CANFiltersTab.test.jsx.snap
@@ -24,7 +24,7 @@ exports[`CANFiltersTab Render 1`] = `
          >
            <a
              class="makeStyles-labelInline-0"
-              href="/filter-add?vin=undefined"
+              href="/filter-add?vin=TESTVIN1234567890"
            >
              <svg
                aria-hidden="true"
@@ -233,7 +233,7 @@ exports[`CANFiltersTab Render 1`] = `
              >
                <a
                  class=""
-                  href="/filter-update?vin=undefined&can_id=123&interval=1000"
+                  href="/filter-update?vin=TESTVIN1234567890&can_id=123&interval=1000"
                  style="margin: 5px;"
                  title="Update \\"123\\""
                >
@@ -279,7 +279,7 @@ exports[`CANFiltersTab Render 1`] = `
              >
                <a
                  class=""
-                  href="/filter-update?vin=undefined&can_id=456-789&interval=2000"
+                  href="/filter-update?vin=TESTVIN1234567890&can_id=456-789&interval=2000"
                  style="margin: 5px;"
                  title="Update \\"456-789\\""
                >
@@ -325,7 +325,7 @@ exports[`CANFiltersTab Render 1`] = `
              >
                <a
                  class=""
-                  href="/filter-update?vin=undefined&can_id=1&interval=0"
+                  href="/filter-update?vin=TESTVIN1234567890&can_id=1&interval=0"
                  style="margin: 5px;"
                  title="Update \\"1\\""
                >
--- a/src/components/Cars/Status/snapshots/CarUpdatesTab.test.jsx.snap
+++ b/src/components/Cars/Status/snapshots/CarUpdatesTab.test.jsx.snap
@@ -298,7 +298,46 @@ exports[`CarUpdatesTab Render 1`] = `
              </thead>
              <tbody
                class="MuiTableBody-root"
-              />
+              >
+                <tr
+                  class="MuiTableRow-root"
+                >
+                  <td
+                    class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                  >
+                    TREX
+                  </td>
+                  <td
+                    class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                  >
+                    0.9.56
+                  </td>
+                  <td
+                    class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                  >
+                    1/13/2023 2:11:33 AM
+                  </td>
+                </tr>
+                <tr
+                  class="MuiTableRow-root"
+                >
+                  <td
+                    class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                  >
+                    DBC
+                  </td>
+                  <td
+                    class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                  >
+                    386c18977a1be3cda60c953e5902c680dbe82b89523f2527e80cd9db863db991
+                  </td>
+                  <td
+                    class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                  >
+                    1/13/2023 2:11:33 AM
+                  </td>
+                </tr>
+              </tbody>
              <tfoot
                class="MuiTableFooter-root"
              >
@@ -366,7 +405,7 @@ exports[`CarUpdatesTab Render 1`] = `
                      <p
                        class="MuiTypography-root MuiTablePagination-caption MuiTypography-body2 MuiTypography-colorInherit"
                      >
-                        0-0 of 0
+                        1-2 of 2
                      </p>
                      <div
                        class="MuiTablePagination-actions"
--- a/src/components/Cars/Status/snapshots/ECUsTab.test.jsx.snap
+++ b/src/components/Cars/Status/snapshots/ECUsTab.test.jsx.snap
@@ -103,6 +103,98 @@ exports[`ECUsTab Render 1`] = `
                    </svg>
                  </span>
                </th>
+                <th
+                  class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
+                  scope="col"
+                >
+                  <span
+                    aria-disabled="false"
+                    class="MuiButtonBase-root MuiTableSortLabel-root"
+                    role="button"
+                    tabindex="0"
+                  >
+                    Vendor
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
+                      focusable="false"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
+                      />
+                    </svg>
+                  </span>
+                </th>
+                <th
+                  class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
+                  scope="col"
+                >
+                  <span
+                    aria-disabled="false"
+                    class="MuiButtonBase-root MuiTableSortLabel-root"
+                    role="button"
+                    tabindex="0"
+                  >
+                    Supplier Version
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
+                      focusable="false"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
+                      />
+                    </svg>
+                  </span>
+                </th>
+                <th
+                  class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
+                  scope="col"
+                >
+                  <span
+                    aria-disabled="false"
+                    class="MuiButtonBase-root MuiTableSortLabel-root"
+                    role="button"
+                    tabindex="0"
+                  >
+                    Serial
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
+                      focusable="false"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
+                      />
+                    </svg>
+                  </span>
+                </th>
+                <th
+                  class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
+                  scope="col"
+                >
+                  <span
+                    aria-disabled="false"
+                    class="MuiButtonBase-root MuiTableSortLabel-root"
+                    role="button"
+                    tabindex="0"
+                  >
+                    Boot Loader
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
+                      focusable="false"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
+                      />
+                    </svg>
+                  </span>
+                </th>
                <th
                  class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
                  scope="col"
@@ -136,7 +228,7 @@ exports[`ECUsTab Render 1`] = `
                    role="button"
                    tabindex="0"
                  >
-                    Created
+                    Fingerprint
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
@@ -176,7 +268,106 @@ exports[`ECUsTab Render 1`] = `
            </thead>
            <tbody
              class="MuiTableBody-root"
+            >
+              <tr
+                class="MuiTableRow-root"
+              >
+                <td
+                  class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                >
+                  ECUA
+                </td>
+                <td
+                  class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                >
+                  SWVERSION
+                </td>
+                <td
+                  class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                >
+                  HWVERSION
+                </td>
+                <td
+                  class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                >
+                  VENDOR
+                </td>
+                <td
+                  class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                >
+                  SUPPLIER_SW_VERSION
+                </td>
+                <td
+                  class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                >
+                  SERIAL_NUMBER
+                </td>
+                <td
+                  class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                >
+                  BOOT_LOADER
+                </td>
+                <td
+                  class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                >
+                  CONFIG
+                </td>
+                <td
+                  class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                >
+                  FINGERPRINT
+                </td>
+                <td
+                  class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                >
+                  7/14/2021 8:09:40 PM
+                </td>
+              </tr>
+              <tr
+                class="MuiTableRow-root"
+              >
+                <td
+                  class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                >
+                  ECUB
+                </td>
+                <td
+                  class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                >
+                  SWVERSION
+                </td>
+                <td
+                  class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                >
+                  HWVERSION
+                </td>
+                <td
+                  class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
                />
+                <td
+                  class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                />
+                <td
+                  class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                />
+                <td
+                  class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                />
+                <td
+                  class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                >
+                  CONFIG
+                </td>
+                <td
+                  class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                />
+                <td
+                  class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                >
+                  7/14/2021 8:09:40 PM
+                </td>
+              </tr>
+            </tbody>
            <tfoot
              class="MuiTableFooter-root"
            >
@@ -244,7 +435,7 @@ exports[`ECUsTab Render 1`] = `
                    <p
                      class="MuiTypography-root MuiTablePagination-caption MuiTypography-body2 MuiTypography-colorInherit"
                    >
-                      0-0 of 0
+                      1-2 of 2
                    </p>
                    <div
                      class="MuiTablePagination-actions"
--- a/src/components/Controls/CarECUsTable/index.jsx
+++ b/src/components/Controls/CarECUsTable/index.jsx
@@ -1,20 +1,20 @@
-import React, { useEffect, useState } from "react";
 import {
  Table,
  TableBody,
  TableCell,
  TableFooter,
  TablePagination,
-  TableRow,
+  TableRow
 } from "@material-ui/core";
 import clsx from "clsx";
+import React, { useEffect, useState } from "react";

-import { LocalDateTimeString } from "../../../utils/dates";
-import TableHeaderSortable from "../../Table/HeaderSortable";
-import { useVehicleContext } from "../../Contexts/VehicleContext";
-import { useStatusContext } from "../../Contexts/StatusContext";
 import { logger } from "../../../services/monitoring";
-import {useLocalStorage} from "../../useLocalStorage";
+import { LocalDateTimeString } from "../../../utils/dates";
+import { useStatusContext } from "../../Contexts/StatusContext";
+import { useVehicleContext } from "../../Contexts/VehicleContext";
+import TableHeaderSortable from "../../Table/HeaderSortable";
+import { useLocalStorage } from "../../useLocalStorage";

 const tableColumns = [
  {
@@ -29,13 +29,29 @@ const tableColumns = [
    id: "hw_version",
    label: "HW Version",
  },
+  {
+    id: "vendor",
+    label: "Vendor",
+  },
+  {
+    id: "supplier_sw_version",
+    label: "Supplier Version",
+  },
+  {
+    id: "serial_number",
+    label: "Serial",
+  },
+  {
+    id: "boot_loader_version",
+    label: "Boot Loader",
+  },
  {
    id: "config",
    label: "Config",
  },
  {
-    id: "created_at",
-    label: "Created",
+    id: "fingerprint",
+    label: "Fingerprint",
  },
  {
    id: "updated_at",
@@ -117,16 +133,11 @@ const CarECUsTable = ({ vin, token, classes }) => {
        <TableBody>
          {ecus.map((row, i) => (
            <TableRow key={row.ecu + i}>
-              <TableCell align="center">{row.ecu}</TableCell>
-              <TableCell align="center">{row.sw_version}</TableCell>
-              <TableCell align="center">{row.hw_version}</TableCell>
-              <TableCell align="center">{row.config}</TableCell>
-              <TableCell align="center">
-                {LocalDateTimeString(row.created)}
-              </TableCell>
-              <TableCell align="center">
-                {LocalDateTimeString(row.updated)}
-              </TableCell>
+              {tableColumns.map((column, j) => {
+                const key = `${row.ecu + i}${column.id}`
+                if (column.id === "updated_at") return (<TableCell key={key} align="center">{LocalDateTimeString(row.updated)}</TableCell>);
+                return (<TableCell key={key} align="center">{row[column.id]}</TableCell>);
+              })}
            </TableRow>
          ))}
        </TableBody>
--- a/src/services/mocks/vehiclesAPI.js
+++ b/src/services/mocks/vehiclesAPI.js
@@ -33,11 +33,16 @@ const data = [

 const ecusData = [
  {
-    config: "CONFIG",
    created: "2021-07-14T20:09:40.98187Z",
    ecu: "ECUA",
    hw_version: "HWVERSION",
    sw_version: "SWVERSION",
+    vendor: "VENDOR",
+    supplier_sw_version: "SUPPLIER_SW_VERSION",
+    serial_number: "SERIAL_NUMBER",
+    boot_loader_version: "BOOT_LOADER",
+    config: "CONFIG",
+    fingerprint: "FINGERPRINT",
    updated: "2021-07-14T20:09:40.98187Z",
  },
  {