CEC-1256/CEC-1330 data logger for vehicles/fleets and details tabs for vehicles/fleets (#136)

* forms for fleet can filters

* unit tests for fleet filters

* removing warnings

* updating regex

* added fleet details page

* fleet pages

* smoothed out bugs

* fleets done

* working update, delete vehicles

* finished mocks, still need snapshots and context tests

* contexts done

* snapshot tests

* updating code smells

* smells

src/components/Fleets/Update/index.jsx

@@ -1,7 +1,16 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { Redirect } from "react-router";
 import { useLocation } from "react-router-dom";
-import { Button, TextField } from "@material-ui/core";
+import {
+  Button,
+  Checkbox,
+  FormControlLabel,
+  FormGroup,
+  FormLabel,
+  Radio,
+  RadioGroup,
+  TextField
+} from "@material-ui/core";
 
 import useStyles from "../../useStyles";
 import {
@@ -15,18 +24,19 @@ import { logger } from "../../../services/monitoring";
 
 const MainForm = () => {
   const queries = new URLSearchParams(useLocation().search);
-  const name = queries.get("name") ?? ""
-  const canbusEnabled = queries.get("canbus_enabled") ?? ""
-  const logLevel = queries.get("log_level") ?? ""
+  const name = queries.get("name") ?? "";
 
-  const { updateFleet, busy } = useFleetContext();
+  const { fleet, getFleet, updateFleet, busy } = useFleetContext();
   const { token: { idToken: { jwtToken: token } } } = useUserContext();
   const { setMessage, setTitle, setSitePath } = useStatusContext();
   const [redirect, setRedirect] = useState(null);
   const classes = useStyles();
 
-  const canbusEnabledEl = useRef(null);
-  const logLevelEl = useRef(null);
+  const [selectedLogLevel, setSelectedLogLevel] = useState("info");
+  const [canbusEnabled, setCANBusEnabled] = useState(true);
+  const [dataLoggerEnabled, setDataLoggerEnabled] = useState(false);
+  const [maxMemBufferSize, setMaxMemBufferSize] = useState(0);
+  const [maxDiskBufferSize, setMaxDiskBufferSize] = useState(0);
 
   useEffect(() => {
     setTitle("Update Fleet");
@@ -42,20 +52,69 @@ const MainForm = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  useEffect(() => {
+    (async () => {
+      try {
+        if (!name || !token) return;
+        await getFleet(name, token);
+      } catch (e) {
+        setMessage(e.message);
+        logger.warn(e.stack);
+      }
+    })();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [token]);
+
+  useEffect(() => {
+    setSelectedLogLevel(fleet.log_level ?? selectedLogLevel);
+
+    if (fleet.canbus) {
+      setCANBusEnabled(fleet.canbus.enabled ?? canbusEnabled);
+      setDataLoggerEnabled(fleet.canbus.data_logger_enabled ?? dataLoggerEnabled);
+      setMaxMemBufferSize(fleet.canbus.max_mem_buffer_size ?? maxMemBufferSize);
+      setMaxDiskBufferSize(fleet.canbus.max_disk_buffer_size ?? maxDiskBufferSize);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [fleet]);
+
+  const onLogLevelChange = (event) => {
+    setSelectedLogLevel(event.target.value);
+  }
+
+  const onCANBusChange = (event) => {
+    setCANBusEnabled(event.target.checked);
+  }
+
+  const onDataLoggerChange = (event) => {
+    setDataLoggerEnabled(event.target.checked);
+  }
+
+  const onMaxMemBufferSizeChange = (event) => {
+    setMaxMemBufferSize(event.target.value);
+  }
+
+  const onMaxDiskBufferSizeChange = (event) => {
+    setMaxDiskBufferSize(event.target.value);
+  }
+
   const onSubmit = async (event) => {
     try {
       event.preventDefault();
       const formData = {
         name: name,
-        canbus: { enabled: canbusEnabledEl.current.value === "true" },
-        log_level: logLevelEl.current.value
+        log_level: selectedLogLevel,
+        canbus: {
+          enabled: canbusEnabled,
+          data_logger_enabled: canbusEnabled ? dataLoggerEnabled : false,
+          max_mem_buffer_size: canbusEnabled ? parseInt(maxMemBufferSize) : 0,
+          max_disk_buffer_size: canbusEnabled && dataLoggerEnabled ? parseInt(maxDiskBufferSize) : 0
+        }
       };
-      console.log(formData);
       const result = await updateFleet(name, formData, token);
       if (!result || result.error) return;
 
       setMessage(`Updated ${result.name}`);
-      setRedirect("/fleets");
+      setRedirect(`/fleet/${result.name}`);
     } catch (e) {
       setMessage(e.message);
       logger.warn(e.stack);
@@ -79,37 +138,74 @@ const MainForm = () => {
             maxLength: "255",
             readOnly: true,
           }}
+          disabled
           value={name}
           required
           fullWidth
         />
+        <FormLabel id="demo-row-radio-buttons-group-label">Log Level</FormLabel>
+        <RadioGroup
+          row
+          aria-labelledby="demo-row-radio-buttons-group-label"
+          name="log-level-group"
+          value={selectedLogLevel}
+          onChange={onLogLevelChange}
+          margin="normal"
+        >
+          <FormControlLabel value="trace" control={<Radio />} label="Trace" />
+          <FormControlLabel value="debug" control={<Radio />} label="Debug" />
+          <FormControlLabel value="info" control={<Radio />} label="Info" />
+          <FormControlLabel value="warn" control={<Radio />} label="Warn" />
+          <FormControlLabel value="error" control={<Radio />} label="Error" />
+          <FormControlLabel value="critical" control={<Radio />} label="Critical" />
+        </RadioGroup>
+        <FormLabel id="demo-row-radio-buttons-group-label">CAN Bus</FormLabel>
+        <FormGroup>
+          <FormControlLabel control={
+            <Checkbox
+              checked={canbusEnabled}
+              onChange={onCANBusChange}
+            />
+          } label="CAN Bus Enabled" />
+          <TextField
+            id="max_mem_buffer_size"
+            name="max_mem_buffer_size"
+            label='Max Memory Buffer Size (0 uses default size)'
+            value={maxMemBufferSize}
+            onChange={onMaxMemBufferSizeChange}
+            variant="outlined"
+            margin="normal"
+            inputProps={{
+              maxLength: "12",
+            }}
+            type="number"
+            disabled={!canbusEnabled}
+            required
+            fullWidth
+          />
+          <FormControlLabel control={
+            <Checkbox
+              checked={dataLoggerEnabled}
+              onChange={onDataLoggerChange}
+              disabled={!canbusEnabled}
+            />
+          } label="Data Logger Enabled" />
+        </FormGroup>
         <TextField
-          id="canbus"
-          name="canbus"
-          label="CANBus Enabled"
-          defaultValue={canbusEnabled}
+          id="max_disk_buffer_size"
+          name="max_disk_buffer_size"
+          label='Max Disk Buffer Size (0 uses default size)'
+          value={maxDiskBufferSize}
+          onChange={onMaxDiskBufferSizeChange}
           variant="outlined"
           margin="normal"
           inputProps={{
-            maxLength: "255",
+            maxLength: "12",
           }}
+          type="number"
+          disabled={!dataLoggerEnabled}
           required
           fullWidth
-          inputRef={canbusEnabledEl}
-        />
-        <TextField
-          id="log-level"
-          name="log-level"
-          label='Log Level (e.g. "debug", "info", "warn", "error", etc.)'
-          defaultValue={logLevel}
-          variant="outlined"
-          margin="normal"
-          inputProps={{
-            maxLength: "255",
-          }}
-          required
-          fullWidth
-          inputRef={logLevelEl}
         />
         <Button
           type="submit"