CEC-5715 - Show which ECUs need to be updated for next flashpack number

src/components/Cars/Status/CarUpdatesTab.jsx

@@ -6,6 +6,7 @@ import { useUserContext } from "../../Contexts/UserContext";
 import { VehicleProvider } from "../../Contexts/VehicleContext";
 import CarUpdatesTable from "../../Controls/CarUpdatesTable";
 import CarVersionLogTable from "../../Controls/CarVersionLogTable";
+import FlashpackInfoTable from "../../Controls/FlashpackInfoTable";
 import useStyles from "../../useStyles";
 
 const MainForm = ({ vin }) => {
@@ -22,6 +23,8 @@ const MainForm = ({vin}) => {
       <CarUpdatesTable vin={vin} token={token} classes={classes} />
       <Typography variant="h6" className={classes.labelInline}>Version Log</Typography>
       <CarVersionLogTable vin={vin} token={token} classes={classes} />
+      <Typography variant="h6" className={classes.labelInline}>Flashpack Version Progress</Typography>
+      <FlashpackInfoTable vin={vin} token={token} classes={classes} />
     </div>
   );
 };

src/components/Cars/Status/__snapshots__/CarUpdatesTab.test.jsx.snap

@@ -463,6 +463,30 @@ exports[`CarUpdatesTab Render 1`] = `
               </tfoot>
             </table>
           </div>
+          <h6
+            class="MuiTypography-root makeStyles-labelInline-0 MuiTypography-h6"
+          >
+            Flashpack Version Progress
+          </h6>
+          <div
+            class="makeStyles-paper-0 makeStyles-tableSize-0"
+          >
+            <div
+              class="MuiGrid-root makeStyles-root-0 MuiGrid-container MuiGrid-spacing-xs-2"
+            >
+              <div
+                class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-12"
+              >
+                <p>
+                  From Flashpack Version 
+                  (none yet)
+                   to Next Flashpack Version 
+                  (none yet)
+                </p>
+              </div>
+            </div>
+            
+          </div>
         </div>
       </div>
     </div>

src/components/Contexts/VehicleContext.jsx

@@ -372,9 +372,23 @@ export const VehicleProvider = ({ children }) => {
     } finally {
       setBusy(false);
     }
-
   };
 
+  const getCarFlashpackVersionInfo = async (vin, token) => {
+    try {
+      setBusy(true);
+
+      const result = await api.getCarFlashpackVersionInfo(vin, token);
+      if (result.error) {
+        throw new Error(`Get car flashpack version info error. ${result.message}`);
+      }
+
+      return result;
+    } finally {
+      setBusy(false);
+    }
+  }
+
   return (
     <VehicleContext.Provider
       value={{
@@ -412,6 +426,7 @@ export const VehicleProvider = ({ children }) => {
         getFlashpackECUMappings,
         addFlashpackVersion,
         deleteFlashpackVersion,
+        getCarFlashpackVersionInfo,
       }}
     >
       {children}

src/components/Controls/FlashpackInfoTable/index.jsx

@@ -0,0 +1,124 @@
+import {
+  Grid,
+  Table,
+  TableBody,
+  TableCell,
+  TableFooter,
+  TablePagination,
+  TableRow
+} from "@material-ui/core";
+import clsx from "clsx";
+import React, { useEffect, useState } from "react";
+
+import { logger } from "../../../services/monitoring";
+import { useStatusContext } from "../../Contexts/StatusContext";
+import { useVehicleContext } from "../../Contexts/VehicleContext";
+import TableHeaderSortable from "../../Table/HeaderSortable";
+import { useLocalStorage } from "../../useLocalStorage";
+
+const tableColumns = [
+  {
+    id: "car_ecu_name",
+    label: "ECU",
+  },
+  {
+    id: "car_ecu_version",
+    label: "ECU Supplier Software Version Needed for Next Flashpack Version",
+  },
+];
+
+const PAGE_SIZE = "ECU_VERSIONS_NEEDED_TABLE_PAGE_SIZE";
+
+const FlashpackInfoTable = ({ vin, token, classes }) => {
+  const { setMessage } = useStatusContext();
+  const [pageSize, setPageSize] = useLocalStorage(PAGE_SIZE, 10);
+  const [pageIndex, setPageIndex] = useState(0);
+  const [ecuVersions, setECUVersions] = useState([]);
+  const [totalECUVersions, setTotalECUVersions] = useState(0);
+  const [flashpackNumber, setFlashpackNumber] = useState("");
+  const [nextFlashpackNumber, setNextFlashpackNumber] = useState("");
+  const { getCarFlashpackVersionInfo } = useVehicleContext();
+
+  useEffect(() => {
+    loadCarFlashpackVersionInfo();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [vin, token, pageIndex, pageSize]);
+
+  const loadCarFlashpackVersionInfo = async () => {
+    try {
+      if (!vin || !token) return;
+      await getCarFlashpackVersionInfo(vin, token)
+        .then((result) => {
+          setECUVersions(result.data.ecu_versions ? result.data.ecu_versions.slice(pageIndex * pageSize, (pageIndex + 1) * pageSize) : []);
+          setTotalECUVersions(result.data.ecu_versions ? result.data.ecu_versions.length : 0)
+          setFlashpackNumber(result.data.flashpack);
+          setNextFlashpackNumber(result.data.next_flashpack);
+        });
+    } catch (e) {
+      setMessage(e.message);
+      logger.warn(e.stack);
+    }
+  };
+
+  const handleChangePageIndex = (event, newIndex) => {
+    setPageIndex(newIndex);
+    loadCarFlashpackVersionInfo();
+  };
+
+  const handleChangePageSize = (event) => {
+    setPageSize(parseInt(event.target.value, 10));
+    setPageIndex(0);
+    loadCarFlashpackVersionInfo();
+  };
+
+  return (
+    <div className={clsx(classes.paper, classes.tableSize)}>
+      <Grid container className={classes.root} spacing={2}>
+        <Grid item md={12} className={classes.textCenterAlign}>
+          <p>
+            From Flashpack Version {flashpackNumber ? flashpackNumber : "(none yet)"} to Next Flashpack Version {nextFlashpackNumber ? nextFlashpackNumber : "(none yet)"}
+          </p>
+        </Grid>
+      </Grid>
+      {nextFlashpackNumber && (<Table>
+        <TableHeaderSortable
+          classes={classes}
+          orderBy={"car_ecu_name"}
+          order={"asc"}
+          columnData={tableColumns}
+          onSortRequest={() => { return null }}
+        />
+        <TableBody>
+          {ecuVersions && ecuVersions.map((row, i) => (
+            <TableRow key={`row${i}`}>
+              <TableCell align="center">{row.car_ecu_name}</TableCell>
+              <TableCell align="center">{row.car_ecu_version}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+        <TableFooter>
+          <TableRow>
+            {!ecuVersions || ecuVersions.length === 0 ? (
+              <TableCell colSpan={8} align="center">No ECU Versions to Update for Next Flashpack Version</TableCell>
+            ) : (
+              <TablePagination
+                rowsPerPageOptions={[5, 10, 25, 100]}
+                colSpan={4}
+                count={totalECUVersions}
+                rowsPerPage={pageSize}
+                page={pageIndex}
+                SelectProps={{
+                  inputProps: { "aria-label": "rows per page" },
+                  native: true,
+                }}
+                onPageChange={handleChangePageIndex}
+                onRowsPerPageChange={handleChangePageSize}
+              />)}
+          </TableRow>
+        </TableFooter>
+      </Table>)}
+    </div>
+  );
+};
+
+export default FlashpackInfoTable;

src/services/vehiclesAPI.js

@@ -306,6 +306,17 @@ const vehiclesAPI = {
     }).then(fetchRespHandler)
       .catch(errorHandler)
   },
+
+  getCarFlashpackVersionInfo: async (vin, token) => {
+    return fetch(`${API_ENDPOINT}/flashpack_version_info/${vin}`, {
+      method: "GET",
+      headers: Object.assign(
+        { "Content-Type": "application/json" },
+        getAuthHeaderOptions(token)
+      ),
+    }).then(fetchRespHandler)
+      .catch(errorHandler)
+  },
 };
 
 export default vehiclesAPI;