CEC-4595 - show online status of cars in fleet (#374)

* CEC-4595 - show online status of cars in fleet

* fix mocking

src/components/Contexts/FleetContext.jsx

@@ -1,5 +1,6 @@
 import React, { useContext, useState } from "react";
 import api from "../../services/fleetsAPI";
+import vehiclesAPI from "../../services/vehiclesAPI";
 import { validateCANID, validateFilter, validateVIN } from "../../utils/validationSupplier";
 
 const FleetContext = React.createContext();
@@ -112,7 +113,22 @@ export const FleetProvider = ({ children }) => {
         throw new Error(`Get fleet vehicles error. ${result.message}`);
       }
 
-      setFleetVehicles(result.data)
+      const connectionsResult = await vehiclesAPI.getConnections(result.data, token)
+      if (result.error) {
+        setFleetVehicles([])
+        throw new Error(`Get vehicles connections error. ${result.message}`);
+      }
+
+      var cars = []
+      result.data.forEach((vin) => {
+        cars.push({
+          vin: vin,
+          connected: connectionsResult[vin] || false,
+          connectedHMI: connectionsResult[`2:${vin}`] || false
+        })
+      })
+
+      setFleetVehicles(cars)
       if (result.total) {
         setTotalFleetVehicles(result.total);
       }

src/components/Contexts/FleetContext.test.jsx

@@ -1,4 +1,5 @@
 jest.mock("../../services/fleetsAPI");
+jest.mock("../../services/vehiclesAPI");
 
 import {
   render,
@@ -800,9 +801,21 @@ const expectedFleetsData = [
 ];
 
 const expectedFleetVehiclesData = [
-  "USWESTVIN12345678",
+  {
-  "USWESTVIN12345679",
+    vin: "USWESTVIN12345678",
-  "USWESTVIN12345670",
+    connected: true,
+    connectedHMI: false,
+  },
+  {
+    vin: "USWESTVIN12345679",
+    connected: true,
+    connectedHMI: false,
+  },
+  {
+    vin: "USWESTVIN12345670",
+    connected: true,
+    connectedHMI: false,
+  },
 ];
 
 const expectedFleetCANFiltersData = [

src/components/Contexts/__mocks__/FleetContext.jsx

@@ -62,7 +62,26 @@ export const useFleetContext = () => ({
 
   fleetVehicles,
   totalFleetVehicles,
-  getFleetVehicles: jest.fn(),
+  getFleetVehicles: jest.fn().mockImplementation((name, search, _token) => {
+    const result = [
+      {
+        vin: "USWESTVIN12345678",
+        connected: false,
+        connectedHMI: false
+      },
+      {
+        vin: "USWESTVIN12345679",
+        connected: true,
+        connectedHMI: true
+      },
+      {
+        vin: "USWESTVIN12345670",
+        connected: false,
+        connectedHMI: false
+      },
+    ];
+    return Promise.resolve(result);
+  }),
   addFleetVehicles: jest.fn(),
   deleteFleetVehicle: jest.fn(),
 

src/components/Contexts/__mocks__/VehicleContext.jsx

@@ -112,10 +112,14 @@ export const useVehicleContext = () => ({
   addVehicle: jest.fn(),
   getConnections: jest
     .fn().mockImplementation((vins, _token) => {
-      const result = {};
+      const result = {
-      vins.forEach((vin) => {
+        "USWESTVIN12345678": true,
-        result[vin] = true;
+        "2:USWESTVIN12345678": false,
-      });
+        "USWESTVIN12345679": true,
+        "2:USWESTVIN12345679": false,
+        "USWESTVIN12345670": true,
+        "2:USWESTVIN12345670": false,
+      };
       return Promise.resolve(result);
     }),
   getECUs: jest.fn(() => {

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

@@ -137,62 +137,7 @@ exports[`FleetVehiclesTable Render 1`] = `
               </thead>
               <tbody
                 class="MuiTableBody-root"
-              >
+              />
-                <tr
-                  class="MuiTableRow-root"
-                >
-                  <td
-                    class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
-                  >
-                    <a
-                      href="/vehicle-status/USWESTVIN12345678"
-                    >
-                      USWESTVIN12345678
-                    </a>
-                  </td>
-                  <td
-                    class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
-                  >
-                    No actions
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root"
-                >
-                  <td
-                    class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
-                  >
-                    <a
-                      href="/vehicle-status/USWESTVIN12345679"
-                    >
-                      USWESTVIN12345679
-                    </a>
-                  </td>
-                  <td
-                    class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
-                  >
-                    No actions
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root"
-                >
-                  <td
-                    class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
-                  >
-                    <a
-                      href="/vehicle-status/USWESTVIN12345670"
-                    >
-                      USWESTVIN12345670
-                    </a>
-                  </td>
-                  <td
-                    class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
-                  >
-                    No actions
-                  </td>
-                </tr>
-              </tbody>
               <tfoot
                 class="MuiTableFooter-root"
               >

src/components/Fleets/Status/Vehicles/Table/index.jsx

@@ -26,6 +26,7 @@ import SearchField from "../../../../Controls/SearchField";
 import DeleteConfirmation from "../../../../DeleteConfirmation";
 import TableHeaderSortable from "../../../../Table/HeaderSortable";
 import { useLocalStorage } from "../../../../useLocalStorage";
+import ConnectedIcon from "../../../../Controls/ConnectedIcon";
 import useStyles from "../../../../useStyles";
 
 const tableColumns = [
@@ -190,13 +191,22 @@ const MainForm = ({ name }) => {
           onSortRequest={handleSort}
         />
         <TableBody>
-          {fleetVehicles.map((vin) => (
+          {fleetVehicles && fleetVehicles.map((car) => (
-            <TableRow key={vin}>
+            (car.vin && <TableRow key={"row" + car.vin}>
-              <TableCell align="center">
+              <TableCell key={"cell" + car.vin} align="center">
-                <Link to={`/vehicle-status/${vin}`}>{vin}</Link>
+                {(car.connected || car.connectedHMI) &&
+                  <ConnectedIcon
+                    key={"icon" + car.vin}
+                    connected={car.connected}
+                    connectedHMI={car.connectedHMI}
+                    style={{ marginRight: 3 }}
+                  />
+                }
+                <Link key={"link" + car.vin} to={`/vehicle-status/${car.vin}`}>{car.vin}</Link>
               </TableCell>
-              <TableCell align="center">{Actions(vin)}</TableCell>
+              <TableCell key={"cell2" + car.vin} align="center">{Actions(car.vin)}</TableCell>
             </TableRow>
+            )
           ))}
         </TableBody>
         <TableFooter>

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

@@ -136,62 +136,7 @@ exports[`VehiclesTab Render 1`] = `
           </thead>
           <tbody
             class="MuiTableBody-root"
-          >
+          />
-            <tr
-              class="MuiTableRow-root"
-            >
-              <td
-                class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
-              >
-                <a
-                  href="/vehicle-status/USWESTVIN12345678"
-                >
-                  USWESTVIN12345678
-                </a>
-              </td>
-              <td
-                class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
-              >
-                No actions
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root"
-            >
-              <td
-                class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
-              >
-                <a
-                  href="/vehicle-status/USWESTVIN12345679"
-                >
-                  USWESTVIN12345679
-                </a>
-              </td>
-              <td
-                class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
-              >
-                No actions
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root"
-            >
-              <td
-                class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
-              >
-                <a
-                  href="/vehicle-status/USWESTVIN12345670"
-                >
-                  USWESTVIN12345670
-                </a>
-              </td>
-              <td
-                class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
-              >
-                No actions
-              </td>
-            </tr>
-          </tbody>
           <tfoot
             class="MuiTableFooter-root"
           >

src/services/__mocks__/vehiclesAPI.js

@@ -112,6 +112,7 @@ const vehiclesAPI = {
 
     vins.forEach((vin) => {
       result[vin] = true;
+      result["2:" + vin] = false;
     });
 
     return result;