CEC-2144, CEC-2338 Add deploy by fleets and fix fleets table (#192)

* Add fix for fleets search

* Decompose fleets table

* Add deploy by fleets

* Add snapshots

src/components/Manifest/Deploy/index.jsx

@@ -1,35 +1,37 @@
-import React, { useEffect, useState } from "react";
-import { useParams, Redirect } from "react-router";
-import { Button, Grid, Typography } from "@material-ui/core";
+import React, {useEffect, useState} from "react";
+import {Redirect, useParams} from "react-router";
+import {Button, FormControlLabel, Grid, Switch, Typography} from "@material-ui/core";
 import clsx from "clsx";
 
-import {
-  ManifestsProvider,
-  useManifestsContext,
-} from "../../Contexts/ManifestsContext";
-import {
-  CarUpdatesProvider,
-  useCarUpdatesContext,
-} from "../../Contexts/CarUpdatesContext";
-import { VehicleProvider } from "../../Contexts/VehicleContext";
-import { useUserContext } from "../../Contexts/UserContext";
-import { useStatusContext } from "../../Contexts/StatusContext";
+import {ManifestsProvider, useManifestsContext,} from "../../Contexts/ManifestsContext";
+import {CarUpdatesProvider, useCarUpdatesContext,} from "../../Contexts/CarUpdatesContext";
+import {VehicleProvider} from "../../Contexts/VehicleContext";
+import {useUserContext} from "../../Contexts/UserContext";
+import {useStatusContext} from "../../Contexts/StatusContext";
 import useStyles from "../../useStyles";
 import SearchField from "../../Controls/SearchField";
 import CarSelectionTable from "../../Controls/CarSelectionTable";
-import { logger } from "../../../services/monitoring";
-import { LocalDateTimeString } from "../../../utils/dates";
+import {logger} from "../../../services/monitoring";
+import {LocalDateTimeString} from "../../../utils/dates";
+import FleetSelectionTable from "../../Controls/FleetSelectionTable";
+import {FleetProvider} from "../../Contexts/FleetContext";
+
+
+const CAR_UPDATE = false;
+const FLEET_UPDATE = true;
 
 const MainForm = () => {
-  const { manifest_id } = useParams();
-  const { getManifests, manifests, busy } = useManifestsContext();
-  const { deployCarUpdates } = useCarUpdatesContext();
+  const [updateType, setUpdateType] = useState(CAR_UPDATE);
+
+  const {manifest_id} = useParams();
+  const {getManifests, manifests, busy} = useManifestsContext();
+  const {deployCarUpdates, deployFleetUpdates} = useCarUpdatesContext();
   const {
     token: {
-      idToken: { jwtToken: token },
+      idToken: {jwtToken: token},
     },
   } = useUserContext();
-  const { setMessage, setTitle, setSitePath } = useStatusContext();
+  const {setMessage, setTitle, setSitePath} = useStatusContext();
   const [manifestName, setManifestName] = useState("");
   const [version, setVersion] = useState("");
   const [createDate, setCreateDate] = useState("");
@@ -38,6 +40,11 @@ const MainForm = () => {
   const [redirect, setRedirect] = useState("");
   const classes = useStyles();
 
+  const handleChange = (_) => {
+    setSelected([]);
+    setUpdateType(updateType === CAR_UPDATE ? FLEET_UPDATE : CAR_UPDATE);
+  }
+
   const handleSearch = (query) => {
     setSelected([]);
     setSearch(query);
@@ -54,7 +61,7 @@ const MainForm = () => {
         newSelected = [...selected];
         newSelected.push(key);
       } else {
-        newSelected = selected.filter((vin) => vin !== key);
+        newSelected = selected.filter((vinOrName) => vinOrName !== key);
       }
       setSelected(newSelected);
     } catch (e) {
@@ -67,9 +74,14 @@ const MainForm = () => {
       event.preventDefault();
       const data = {
         manifest_id: parseInt(manifest_id),
-        vins: selected,
-      };
-      await deployCarUpdates(data, token);
+      }
+      if (updateType === CAR_UPDATE) {
+        data.vins = selected;
+        await deployCarUpdates(data, token);
+      } else {
+        data.fleet_names = selected;
+        await deployFleetUpdates(data, token);
+      }
       setMessage(
         `Deployed ${manifestName} ${version} to ${selected.length} cars`
       );
@@ -82,7 +94,7 @@ const MainForm = () => {
 
   const getData = async () => {
     try {
-      getManifests({ id: parseInt(manifest_id) }, token);
+      getManifests({id: parseInt(manifest_id)}, token);
     } catch (e) {
       setMessage(e.message);
       logger.warn(e.stack);
@@ -119,7 +131,7 @@ const MainForm = () => {
   }, [manifests]);
 
   if (redirect.length > 0) {
-    return <Redirect to={redirect} />;
+    return <Redirect to={redirect}/>;
   }
 
   return (
@@ -127,13 +139,21 @@ const MainForm = () => {
       <form className={classes.form} noValidate action="{onSubmit}">
         <Typography variant="body2">Created {createDate}.</Typography>
         <Grid container className={classes.root} spacing={2}>
-          <Grid item md={4}>
+          <Grid item md={2}>
             <div
               className={classes.labelInline}
             >{`${selected.length} Selected`}</div>
           </Grid>
+          <Grid item md={2} className={classes.textCenterAlign}>
+            <FormControlLabel control={<Switch
+              checked={updateType === CAR_UPDATE}
+              onChange={handleChange}
+              inputProps={{'aria-label': 'controlled'}}
+            />} label="Car(default) or Fleet"/>
+
+          </Grid>
           <Grid item md={4} className={classes.textCenterAlign}>
-            <SearchField classes={classes} onSearch={handleSearch} />
+            <SearchField classes={classes} onSearch={handleSearch}/>
           </Grid>
           <Grid item md={4} className={classes.textRightAlign}>
             <Button
@@ -148,28 +168,39 @@ const MainForm = () => {
             </Button>
           </Grid>
         </Grid>
-        <CarSelectionTable
-          classes={classes}
-          token={token}
-          multiSelect={true}
-          search={{ search }}
-          selected={selected}
-          onSelect={handleSelect}
-          onSelectAll={handleSelectAll}
-        />
+        {updateType === CAR_UPDATE ?
+          <VehicleProvider>
+            <CarSelectionTable
+              classes={classes}
+              token={token}
+              multiSelect={true}
+              search={{search}}
+              selected={selected}
+              onSelect={handleSelect}
+              onSelectAll={handleSelectAll}
+            /></VehicleProvider> :
+          <FleetProvider>
+            <FleetSelectionTable
+              classes={classes}
+              token={token}
+              multiSelect={true}
+              search={{search}}
+              selected={selected}
+              onSelect={handleSelect}
+              onSelectAll={handleSelectAll}/>
+          </FleetProvider>
+        }
       </form>
     </div>
   );
 };
 
 const ManifestDeployForm = () => (
-  <VehicleProvider>
-    <ManifestsProvider>
-      <CarUpdatesProvider>
-        <MainForm />
-      </CarUpdatesProvider>
-    </ManifestsProvider>
-  </VehicleProvider>
+  <ManifestsProvider>
+    <CarUpdatesProvider>
+      <MainForm/>
+    </CarUpdatesProvider>
+  </ManifestsProvider>
 );
 
 export default ManifestDeployForm;