CEC-5292: add battery info to fleet vehicles (#474)

* CEC-5292: add battery info to fleet vehicles

* add permission requirement

* set new message

* responsive

* fix missing status

* update snapshots

* update snapshots

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

@@ -30,6 +30,7 @@ import TableHeaderSortable from "../../../../Table/HeaderSortable";
 import { useLocalStorage } from "../../../../useLocalStorage";
 import ConnectedIcon from "../../../../Controls/ConnectedIcon";
 import BulkActions from "../../../../BulkActions";
+import Battery from "../../../../Battery";
 import useStyles from "../../../../useStyles";
 
 const tableColumns = [
@@ -49,6 +50,18 @@ const tableColumns = [
     id: "car_update_status",
     label: "Car Update Status",
   },
+  {
+    id: "battery",
+    label: "Battery",
+  },
+  {
+    id: "voltage",
+    label: "Voltage",
+  },
+  {
+    id: "park", // TODO: Update to 'gear' when we confirm each possible state
+    label: "Park",
+  },
   {
     id: "",
     label: "Actions",
@@ -257,13 +270,22 @@ const MainForm = ({ name }) => {
                   </Link>
                 </Tooltip>
               </TableCell>
-              <TableCell key={"cell4" + car.car_update_status}>
+              <TableCell key={"cell4" + car.vin}>
                 {car.car_update_status}
                 {car.car_update_progress > -1 && (
                   <LinearProgress variant="determinate" value={car.car_update_progress} />
                 )}
               </TableCell>
-              <TableCell key={"cell5" + car.vin} align="center">{Actions(car.vin)}</TableCell>
+              <TableCell key={"cell5" + car.vin}>
+                <Battery percent={car.charge} charge={car.charge_type} />
+              </TableCell>
+              <TableCell key={"cell6" + car.vin}>
+                {car.voltage > 0 && `${car.voltage}V`}
+              </TableCell>
+              <TableCell key={"cell7" + car.vin}>
+                {car.park ? "Yes" : "No"}
+              </TableCell>
+              <TableCell key={"cell8" + car.vin} align="center">{Actions(car.vin)}</TableCell>
             </TableRow>
             )
           })}
@@ -272,7 +294,7 @@ const MainForm = ({ name }) => {
           <TableRow>
             <TablePagination
               rowsPerPageOptions={[5, 10, 25, 100]}
-              colSpan={8}
+              colSpan={9}
               count={totalFleetVehicles}
               rowsPerPage={pageSize}
               page={pageIndex}