CEC-5542 - Indicate how many fleet vehicles are what flashpack versions

src/components/BulkActions/actions/UpdateFlashpackNumbers.jsx

@@ -20,7 +20,7 @@ export default forwardRef(({
           if (data.error) {
             setMessage(`${data.error}: ${data.message}`);
           } else if (selectAll) {
-            setMessage(`Updating flashpack number all VINs in ${fleet}`);
+            setMessage(`Updating flashpack numbers for all VINs in fleet: ${fleet}`);
           } else if (ids.length === 1) {
             setMessage(`Updating flashpack number for ${ids[0]}`);
           } else {

src/components/Contexts/FleetContext.jsx

@@ -26,6 +26,8 @@ export const FleetProvider = ({ children }) => {
   const [fleetCANFilters, setFleetCANFilters] = useState([]);
   const [totalFleetCANFilters, setTotalFleetCANFilters] = useState(0);
 
+  const [fleetFlashpackInfo, setFleetFlashpackInfo] = useState([]);
+
   const addFleet = async (f, token) => {
     try {
       setBusy(true);
@@ -351,6 +353,25 @@ export const FleetProvider = ({ children }) => {
     }
   };
 
+  const getFleetFlashpackInfo = async (name, token) => {
+    try {
+      setBusy(true);
+
+      validateFleetName(name);
+
+      const result = await api.getFlashpackVersionInfoFleet(name, token);
+      if (result.error) {
+        throw new Error(`Get flashpack version fleet into error. ${result.message}`);
+      }
+
+      setFleetFlashpackInfo(result);
+
+      return result;
+    } finally {
+      setBusy(false);
+    }
+  }
+
   useEffect(() => {
     setCarUpdateIds(() => fleetVehicles
       .filter((vehicle) => vehicle.car_update_status && vehicle.car_update_status !== "installed")
@@ -384,7 +405,10 @@ export const FleetProvider = ({ children }) => {
         getFleetCANFilters,
         addFleetCANFilter,
         updateFleetCANFilter,
-        deleteFleetCANFilter
+        deleteFleetCANFilter,
+
+        fleetFlashpackInfo,
+        getFleetFlashpackInfo,
       }}
     >
       {children}

src/components/Fleets/Status/Details/__snapshots__/index.test.jsx.snap

@@ -198,6 +198,27 @@ exports[`FleetDetailsTab Render 1`] = `
                 </div>
               </div>
             </div>
+            <div
+              class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-12"
+            >
+              <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>
+                      <b>
+                        Flashpack Information
+                      </b>
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
             <div />
           </div>
         </div>

src/components/Fleets/Status/Details/index.jsx

@@ -3,6 +3,11 @@ import { Redirect } from "react-router";
 import { Link } from 'react-router-dom';
 import {
   Grid,
+  Table,
+  TableBody,
+  TableCell,
+  TableFooter,
+  TableRow,
   Tooltip,
 } from "@material-ui/core";
 import EditIcon from "@material-ui/icons/Edit"
@@ -16,11 +21,23 @@ import useStyles from "../../../useStyles";
 import { logger } from "../../../../services/monitoring";
 import DeleteConfirmation from "../../../DeleteConfirmation";
 import BulkActions from "../../../BulkActions";
+import TableHeaderSortable from "../../../Table/HeaderSortable";
+
+const tableColumns = [
+  {
+    id: "flashpack",
+    label: "Flashpack",
+  },
+  {
+    id: "vehicles",
+    label: "# of Vehicles in Fleet",
+  },
+];
 
 const MainForm = ({ name }) => {
   const classes = useStyles();
   const { setMessage } = useStatusContext();
-  const { fleet, getFleet, deleteFleet } = useFleetContext();
+  const { fleet, getFleet, deleteFleet, fleetFlashpackInfo, getFleetFlashpackInfo } = useFleetContext();
   const [redirect, setRedirect] = useState(null);
   const [showDeleteModal, setShowDeleteModal] = useState(false)
   const { token: { idToken: { jwtToken: token } } } = useUserContext();
@@ -32,6 +49,7 @@ const MainForm = ({ name }) => {
       try {
         if (!name || !token) return;
         await getFleet(name, token);
+        await getFleetFlashpackInfo(name, token);
       } catch (e) {
         setMessage(e.message);
         logger.warn(e.stack);
@@ -104,6 +122,43 @@ const MainForm = ({ name }) => {
           <BulkActions ids={fleet.vehicles} actions={["addTags", "updateConfig", "sms"]} />
         </Grid>
       </Grid>
+      <Grid item md={12} className={classes.textCenterAlign}>
+        <div className={clsx(classes.paper, classes.tableSize)}>
+          <Grid container className={classes.root} spacing={2}>
+            <Grid item md={12} className={classes.textCenterAlign}>
+              <p>
+                <b>Flashpack Information</b>
+              </p>
+            </Grid>
+          </Grid>
+          {fleetFlashpackInfo && (<Table size="small" >
+            <TableHeaderSortable
+              classes={classes}
+              orderBy={"flashpack"}
+              order={"asc"}
+              columnData={tableColumns}
+              onSortRequest={() => { return null }}
+            />
+            <TableBody>
+              {
+                fleetFlashpackInfo.data && Object.entries(fleetFlashpackInfo.data).map(([flashpack, occurrences]) => (
+                  <TableRow key={`${flashpack}-${occurrences.toString()}`}>
+                    <TableCell align="center">{flashpack}</TableCell>
+                    <TableCell align="center">{occurrences.toString()}</TableCell>
+                  </TableRow>
+                ))
+              }
+            </TableBody>
+            <TableFooter>
+              <TableRow>
+                {!fleetFlashpackInfo || fleetFlashpackInfo.length === 0 ? (
+                  <TableCell colSpan={8} align="center">No flashpack info for fleet</TableCell>
+                ) : <></>}
+              </TableRow>
+            </TableFooter>
+          </Table>)}
+        </div>
+      </Grid>
       <DeleteConfirmation message={name} open={showDeleteModal} close={() => setShowDeleteModal(false)} deleteFunction={onDelete} />
     </div >
   );

src/components/Fleets/Status/__snapshots__/DetailsTab.test.jsx.snap

@@ -206,6 +206,27 @@ exports[`DetailsTab Render 1`] = `
                   </div>
                 </div>
               </div>
+              <div
+                class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-12"
+              >
+                <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>
+                        <b>
+                          Flashpack Information
+                        </b>
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </div>
               <div />
             </div>
           </div>

src/components/Fleets/Status/__snapshots__/index.test.jsx.snap

@@ -295,6 +295,27 @@ exports[`FleetStatus Render 1`] = `
                         </div>
                       </div>
                     </div>
+                    <div
+                      class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-12"
+                    >
+                      <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>
+                              <b>
+                                Flashpack Information
+                              </b>
+                            </p>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
                     <div />
                   </div>
                 </div>

src/services/fleetsAPI.js

@@ -143,6 +143,17 @@ const fleetsAPI = {
     })
       .then(fetchRespHandler)
       .catch(errorHandler),
+
+  getFlashpackVersionInfoFleet: async (name, token) =>
+    fetch(`${API_ENDPOINT}/flashpack_version_info_fleet/${name}`, {
+      method: "GET",
+      headers: Object.assign(
+        { "Content-Type": "application/json" },
+        getAuthHeaderOptions(token)
+      ),
+    })
+      .then(fetchRespHandler)
+      .catch(errorHandler),
 };
 
 export default fleetsAPI;