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/Add/__snapshots__/index.test.jsx.snap

@@ -68,62 +68,467 @@ exports[`FleetAddForm Render 1`] = `
                   </fieldset>
                 </div>
               </div>
+              <label
+                class="MuiFormLabel-root"
+                id="demo-row-radio-buttons-group-label"
+              >
+                Log Level
+              </label>
               <div
-                class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
+                aria-labelledby="demo-row-radio-buttons-group-label"
+                class="MuiFormGroup-root MuiFormGroup-row"
+                margin="normal"
+                role="radiogroup"
               >
                 <label
-                  class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined MuiFormLabel-filled Mui-required Mui-required"
-                  data-shrink="true"
-                  for="canbus"
-                  id="canbus-label"
+                  class="MuiFormControlLabel-root"
                 >
-                  CANBus Enabled
                   <span
-                    aria-hidden="true"
-                    class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
+                    aria-disabled="false"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
-                     
-                    *
+                    <span
+                      class="MuiIconButton-label"
+                    >
+                      <input
+                        class="PrivateSwitchBase-input-71"
+                        name="log-level-group"
+                        type="radio"
+                        value="trace"
+                      />
+                      <div
+                        class="PrivateRadioButtonIcon-root-72"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root"
+                          focusable="false"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+                          />
+                        </svg>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
+                          focusable="false"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
+                          />
+                        </svg>
+                      </div>
+                    </span>
+                    <span
+                      class="MuiTouchRipple-root"
+                    />
+                  </span>
+                  <span
+                    class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
+                  >
+                    Trace
+                  </span>
+                </label>
+                <label
+                  class="MuiFormControlLabel-root"
+                >
+                  <span
+                    aria-disabled="false"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                  >
+                    <span
+                      class="MuiIconButton-label"
+                    >
+                      <input
+                        class="PrivateSwitchBase-input-71"
+                        name="log-level-group"
+                        type="radio"
+                        value="debug"
+                      />
+                      <div
+                        class="PrivateRadioButtonIcon-root-72"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root"
+                          focusable="false"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+                          />
+                        </svg>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
+                          focusable="false"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
+                          />
+                        </svg>
+                      </div>
+                    </span>
+                    <span
+                      class="MuiTouchRipple-root"
+                    />
+                  </span>
+                  <span
+                    class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
+                  >
+                    Debug
+                  </span>
+                </label>
+                <label
+                  class="MuiFormControlLabel-root"
+                >
+                  <span
+                    aria-disabled="false"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary PrivateSwitchBase-checked-69 Mui-checked MuiIconButton-colorSecondary"
+                  >
+                    <span
+                      class="MuiIconButton-label"
+                    >
+                      <input
+                        checked=""
+                        class="PrivateSwitchBase-input-71"
+                        name="log-level-group"
+                        type="radio"
+                        value="info"
+                      />
+                      <div
+                        class="PrivateRadioButtonIcon-root-72 PrivateRadioButtonIcon-checked-74"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root"
+                          focusable="false"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+                          />
+                        </svg>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
+                          focusable="false"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
+                          />
+                        </svg>
+                      </div>
+                    </span>
+                    <span
+                      class="MuiTouchRipple-root"
+                    />
+                  </span>
+                  <span
+                    class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
+                  >
+                    Info
+                  </span>
+                </label>
+                <label
+                  class="MuiFormControlLabel-root"
+                >
+                  <span
+                    aria-disabled="false"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                  >
+                    <span
+                      class="MuiIconButton-label"
+                    >
+                      <input
+                        class="PrivateSwitchBase-input-71"
+                        name="log-level-group"
+                        type="radio"
+                        value="warn"
+                      />
+                      <div
+                        class="PrivateRadioButtonIcon-root-72"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root"
+                          focusable="false"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+                          />
+                        </svg>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
+                          focusable="false"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
+                          />
+                        </svg>
+                      </div>
+                    </span>
+                    <span
+                      class="MuiTouchRipple-root"
+                    />
+                  </span>
+                  <span
+                    class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
+                  >
+                    Warn
+                  </span>
+                </label>
+                <label
+                  class="MuiFormControlLabel-root"
+                >
+                  <span
+                    aria-disabled="false"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                  >
+                    <span
+                      class="MuiIconButton-label"
+                    >
+                      <input
+                        class="PrivateSwitchBase-input-71"
+                        name="log-level-group"
+                        type="radio"
+                        value="error"
+                      />
+                      <div
+                        class="PrivateRadioButtonIcon-root-72"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root"
+                          focusable="false"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+                          />
+                        </svg>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
+                          focusable="false"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
+                          />
+                        </svg>
+                      </div>
+                    </span>
+                    <span
+                      class="MuiTouchRipple-root"
+                    />
+                  </span>
+                  <span
+                    class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
+                  >
+                    Error
+                  </span>
+                </label>
+                <label
+                  class="MuiFormControlLabel-root"
+                >
+                  <span
+                    aria-disabled="false"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                  >
+                    <span
+                      class="MuiIconButton-label"
+                    >
+                      <input
+                        class="PrivateSwitchBase-input-71"
+                        name="log-level-group"
+                        type="radio"
+                        value="critical"
+                      />
+                      <div
+                        class="PrivateRadioButtonIcon-root-72"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root"
+                          focusable="false"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+                          />
+                        </svg>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
+                          focusable="false"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
+                          />
+                        </svg>
+                      </div>
+                    </span>
+                    <span
+                      class="MuiTouchRipple-root"
+                    />
+                  </span>
+                  <span
+                    class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
+                  >
+                    Critical
+                  </span>
+                </label>
+              </div>
+              <label
+                class="MuiFormLabel-root"
+                id="demo-row-radio-buttons-group-label"
+              >
+                CAN Bus
+              </label>
+              <div
+                class="MuiFormGroup-root"
+              >
+                <label
+                  class="MuiFormControlLabel-root"
+                >
+                  <span
+                    aria-disabled="false"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-69 Mui-checked MuiIconButton-colorSecondary"
+                  >
+                    <span
+                      class="MuiIconButton-label"
+                    >
+                      <input
+                        checked=""
+                        class="PrivateSwitchBase-input-71"
+                        data-indeterminate="false"
+                        type="checkbox"
+                        value=""
+                      />
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root"
+                        focusable="false"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
+                        />
+                      </svg>
+                    </span>
+                    <span
+                      class="MuiTouchRipple-root"
+                    />
+                  </span>
+                  <span
+                    class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
+                  >
+                    CAN Bus Enabled
                   </span>
                 </label>
                 <div
-                  class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
+                  class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
                 >
-                  <input
-                    aria-invalid="false"
-                    class="MuiInputBase-input MuiOutlinedInput-input"
-                    id="canbus"
-                    maxlength="255"
-                    name="canbus"
-                    required=""
-                    type="text"
-                    value="true"
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                  <label
+                    class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined MuiFormLabel-filled Mui-required Mui-required"
+                    data-shrink="true"
+                    for="max_mem_buffer_size"
+                    id="max_mem_buffer_size-label"
                   >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
+                    Max Memory Buffer Size (0 uses default size)
+                    <span
+                      aria-hidden="true"
+                      class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
                     >
-                      <span>
-                        CANBus Enabled
-                         *
-                      </span>
-                    </legend>
-                  </fieldset>
+                       
+                      *
+                    </span>
+                  </label>
+                  <div
+                    class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
+                  >
+                    <input
+                      aria-invalid="false"
+                      class="MuiInputBase-input MuiOutlinedInput-input"
+                      id="max_mem_buffer_size"
+                      maxlength="12"
+                      name="max_mem_buffer_size"
+                      required=""
+                      type="number"
+                      value="0"
+                    />
+                    <fieldset
+                      aria-hidden="true"
+                      class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                    >
+                      <legend
+                        class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
+                      >
+                        <span>
+                          Max Memory Buffer Size (0 uses default size)
+                           *
+                        </span>
+                      </legend>
+                    </fieldset>
+                  </div>
                 </div>
+                <label
+                  class="MuiFormControlLabel-root"
+                >
+                  <span
+                    aria-disabled="false"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
+                  >
+                    <span
+                      class="MuiIconButton-label"
+                    >
+                      <input
+                        class="PrivateSwitchBase-input-71"
+                        data-indeterminate="false"
+                        type="checkbox"
+                        value=""
+                      />
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root"
+                        focusable="false"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
+                        />
+                      </svg>
+                    </span>
+                    <span
+                      class="MuiTouchRipple-root"
+                    />
+                  </span>
+                  <span
+                    class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
+                  >
+                    Data Logger Enabled
+                  </span>
+                </label>
               </div>
               <div
                 class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
               >
                 <label
-                  class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined MuiFormLabel-filled Mui-required Mui-required"
+                  class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined Mui-disabled Mui-disabled MuiFormLabel-filled Mui-required Mui-required"
                   data-shrink="true"
-                  for="log-level"
-                  id="log-level-label"
+                  for="max_disk_buffer_size"
+                  id="max_disk_buffer_size-label"
                 >
-                  Log Level (e.g. "trace", "debug", "info", "warn", "error", "critical")
+                  Max Disk Buffer Size (0 uses default size)
                   <span
                     aria-hidden="true"
                     class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
@@ -133,17 +538,18 @@ exports[`FleetAddForm Render 1`] = `
                   </span>
                 </label>
                 <div
-                  class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
+                  class="MuiInputBase-root MuiOutlinedInput-root Mui-disabled Mui-disabled MuiInputBase-fullWidth MuiInputBase-formControl"
                 >
                   <input
                     aria-invalid="false"
-                    class="MuiInputBase-input MuiOutlinedInput-input"
-                    id="log-level"
-                    maxlength="255"
-                    name="log-level"
+                    class="MuiInputBase-input MuiOutlinedInput-input Mui-disabled Mui-disabled"
+                    disabled=""
+                    id="max_disk_buffer_size"
+                    maxlength="12"
+                    name="max_disk_buffer_size"
                     required=""
-                    type="text"
-                    value="error"
+                    type="number"
+                    value="0"
                   />
                   <fieldset
                     aria-hidden="true"
@@ -153,7 +559,7 @@ exports[`FleetAddForm Render 1`] = `
                       class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
                     >
                       <span>
-                        Log Level (e.g. "trace", "debug", "info", "warn", "error", "critical")
+                        Max Disk Buffer Size (0 uses default size)
                          *
                       </span>
                     </legend>

src/components/Fleets/Add/index.jsx

@@ -1,6 +1,15 @@
 import React, { useEffect, useRef, useState } from "react";
 import { Redirect } from "react-router";
-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 {
@@ -20,11 +29,15 @@ const MainForm = () => {
     },
   } = useUserContext();
   const classes = useStyles();
-  const nameEl = useRef(null);
-  const canbusEnabledEl = useRef(null);
-  const logLevelEl = useRef(null);
   const [redirect, setRedirect] = useState(null);
 
+  const nameEl = 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("Add Fleet");
     setSitePath([
@@ -39,16 +52,42 @@ const MainForm = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  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: nameEl.current.value,
-        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
+        }
       };
       const result = await addFleet(formData, token);
+      if (!result || result.error) return;
 
       setMessage(`Added ${result.name}`);
       setRedirect(`/fleets`);
@@ -78,33 +117,69 @@ const MainForm = () => {
           fullWidth
           inputRef={nameEl}
         />
+        <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="true"
+          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. "trace", "debug", "info", "warn", "error", "critical")'
-          defaultValue="error"
-          variant="outlined"
-          margin="normal"
-          inputProps={{
-            maxLength: "255",
-          }}
-          required
-          fullWidth
-          inputRef={logLevelEl}
         />
         <Button
           type="submit"

src/components/Fleets/Add/index.test.jsx

@@ -23,7 +23,7 @@ const renderFleetAdd = async () => {
       </StatusProvider>
     </FleetProvider>
   );
-  await waitFor(() => { });
+  await waitFor(() => { /* render */ });
   return container;
 };
 

src/components/Fleets/Status/CANFiltersTab.test.jsx

@@ -18,7 +18,7 @@ const renderCANFitlersTab = async () => {
       <CANFiltersTab name="US-TEST" />
     </BrowserRouter>
   );
-  await waitFor(() => { });
+  await waitFor(() => { /* render */ });
   return container;
 };
 

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

@@ -0,0 +1,135 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FleetDetailsTab Render 1`] = `
+<div>
+  <div
+    data-testid="mocked-fleetprovider"
+  >
+    <div
+      data-testid="mocked-statusprovider"
+    >
+      <div
+        data-testid="mocked-userprovider"
+      >
+        <div
+          data-testid="mocked-fleetprovider"
+        >
+          <div
+            class="makeStyles-paper-3 makeStyles-tableSize-55"
+          >
+            <div
+              class="MuiGrid-root makeStyles-root-14 MuiGrid-container MuiGrid-spacing-xs-2"
+            >
+              <div
+                class="MuiGrid-root makeStyles-textCenterAlign-50 MuiGrid-item MuiGrid-grid-md-12"
+              >
+                <p>
+                  <b>
+                    Name
+                  </b>
+                  : 
+                </p>
+                <p>
+                  <b>
+                    Vehicles
+                  </b>
+                  : 
+                  3
+                </p>
+                <p>
+                  <b>
+                    Log Level
+                  </b>
+                  : 
+                  info
+                </p>
+              </div>
+              <div
+                class="MuiGrid-root makeStyles-textCenterAlign-50 MuiGrid-item MuiGrid-grid-md-12"
+              >
+                <b>
+                  CANBus
+                </b>
+                <p>
+                  <b>
+                    Enabled
+                  </b>
+                  : 
+                  true
+                </p>
+                <p>
+                  <b>
+                    Max Memory Buffer Size
+                  </b>
+                  : 
+                  1
+                </p>
+                <p>
+                  <b>
+                    Enabled
+                  </b>
+                  : 
+                  true
+                </p>
+                <p>
+                  <b>
+                    Max Disk Buffer Size
+                  </b>
+                  : 
+                  2
+                </p>
+                <p>
+                  <b>
+                    Filters
+                  </b>
+                  : 
+                  0
+                </p>
+              </div>
+              <div
+                class="MuiGrid-root makeStyles-textCenterAlign-50 MuiGrid-item MuiGrid-grid-md-12"
+              >
+                <a
+                  class=""
+                  href="/fleet-update?name=undefined"
+                  style="margin: 5px;"
+                  title="Update \\"undefined\\""
+                >
+                  <svg
+                    aria-hidden="true"
+                    aria-label="Update \\"undefined\\""
+                    class="MuiSvgIcon-root"
+                    focusable="false"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
+                    />
+                  </svg>
+                </a>
+                <a
+                  class=""
+                  href="/"
+                  title="Delete \\"undefined\\""
+                >
+                  <svg
+                    aria-hidden="true"
+                    aria-label="Delete \\"undefined\\""
+                    class="MuiSvgIcon-root"
+                    focusable="false"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                    />
+                  </svg>
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

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

@@ -0,0 +1,96 @@
+import React, { useEffect, useState } from "react";
+import { Redirect } from "react-router";
+import { Link } from 'react-router-dom';
+import {
+  Grid,
+  Tooltip,
+} from "@material-ui/core";
+import EditIcon from "@material-ui/icons/Edit"
+import DeleteIcon from "@material-ui/icons/Delete";
+import clsx from "clsx";
+
+import { useUserContext } from "../../../Contexts/UserContext"
+import { useStatusContext } from "../../../Contexts/StatusContext";
+import { FleetProvider, useFleetContext } from "../../../Contexts/FleetContext"
+import useStyles from "../../../useStyles";
+import { logger } from "../../../../services/monitoring";
+
+const MainForm = ({ name }) => {
+  const classes = useStyles();
+  const { setMessage } = useStatusContext();
+  const { fleet, getFleet, deleteFleet } = useFleetContext();
+  const [redirect, setRedirect] = useState(null);
+  const { token: { idToken: { jwtToken: token } } } = useUserContext();
+
+  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]);
+
+  const onDelete = async () => {
+    try {
+      await deleteFleet(name, token);
+      setMessage(`Deleted ${name}`)
+      setRedirect(`/fleets`);
+    } catch (e) {
+      setMessage(e.message);
+      logger.warn(e.stack);
+    }
+  };
+
+  if (redirect && redirect.length > 0) {
+    return <Redirect to={redirect} />;
+  }
+
+  return (
+    <div className={clsx(classes.paper, classes.tableSize)}>
+      <Grid container className={classes.root} spacing={2}>
+        <Grid item md={12} className={classes.textCenterAlign}>
+          <p><b>Name</b>: {name}</p>
+          <p><b>Vehicles</b>: {fleet.vehicles ? fleet.vehicles.length : 0}</p>
+          {fleet.log_level != null && (
+            <p><b>Log Level</b>: {fleet.log_level}</p>
+          )}
+        </Grid>
+        {fleet.canbus && (
+          <Grid item md={12} className={classes.textCenterAlign}>
+            <b>CANBus</b>
+            <p><b>Enabled</b>: {fleet.canbus.enabled.toString()}</p>
+            <p><b>Max Memory Buffer Size</b>: {fleet.canbus.max_mem_buffer_size ?? "Default"}</p>
+            <p><b>Enabled</b>: {fleet.canbus.data_logger_enabled.toString()}</p>
+            <p><b>Max Disk Buffer Size</b>: {fleet.canbus.max_disk_buffer_size ?? "Default"}</p>
+            <p><b>Filters</b>: {fleet.canbus.filters ? fleet.canbus.filters.length() : 0}</p>
+          </Grid>
+        )}
+        <Grid item md={12} className={classes.textCenterAlign}>
+          <Tooltip key={`update-${name}`} title={`Update "${name}"`}>
+            <Link to={`/fleet-update?name=${name}`} style={{ margin: 5 }}>
+              <EditIcon aria-label={`Update "${name}"`} />
+            </Link>
+          </Tooltip>
+          <Tooltip key={`delete-${name}`} title={`Delete "${name}"`}>
+            <Link to="#" onClick={onDelete}>
+              <DeleteIcon aria-label={`Delete "${name}"`} />
+            </Link>
+          </Tooltip>
+        </Grid>
+      </Grid>
+    </div >
+  );
+};
+
+const FleetDetails = (props) => (
+  <FleetProvider>
+    <MainForm {...props} />
+  </FleetProvider>
+);
+
+export default FleetDetails;

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

@@ -0,0 +1,36 @@
+jest.mock("../../../Contexts/FleetContext");
+jest.mock("../../../Contexts/StatusContext");
+jest.mock("../../../Contexts/UserContext");
+
+import { render, waitFor } from "@testing-library/react";
+import { BrowserRouter } from "react-router-dom";
+
+import { FleetProvider } from "../../../Contexts/FleetContext";
+import { StatusProvider } from "../../../Contexts/StatusContext";
+import { UserProvider, setToken } from "../../../Contexts/UserContext";
+import { TEST_AUTH_OBJECT } from "../../../../utils/testing";
+import MainForm from "./index"
+
+const renderFleetDetailsTab = async () => {
+  const { container } = render(
+    <FleetProvider>
+      <StatusProvider>
+        <UserProvider>
+          <BrowserRouter>
+            <MainForm />
+          </BrowserRouter>
+        </UserProvider>
+      </StatusProvider>
+    </FleetProvider>
+  );
+  await waitFor(() => { /* render */ });
+  return container;
+};
+
+describe("FleetDetailsTab", () => {
+  it("Render", async () => {
+    setToken(TEST_AUTH_OBJECT);
+    const container = await renderFleetDetailsTab();
+    expect(container).toMatchSnapshot();
+  });
+});

src/components/Fleets/Status/DetailsTab.jsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { useParams } from "react-router";
+import clsx from "clsx";
+import { Typography } from "@material-ui/core";
+
+import FleetDetails from "./Details";
+import useStyles from "../../useStyles";
+
+const FleetDetailsTab = () => {
+  const { name } = useParams();
+  const classes = useStyles();
+
+  return (
+    <div className={clsx(classes.paper, classes.tableSize)}>
+      <Typography variant="h6">Fleet Details</Typography>
+      <FleetDetails name={name} classes={classes} />
+    </div >
+  );
+};
+
+export default FleetDetailsTab;

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

@@ -0,0 +1,41 @@
+jest.mock("../../Contexts/FleetContext");
+jest.mock("../../Contexts/StatusContext");
+jest.mock("../../Contexts/UserContext");
+jest.mock('@material-ui/core/utils/unstable_useId', () =>
+  jest.fn().mockReturnValue('mui-test-id'),
+);
+
+import { render, waitFor } from "@testing-library/react";
+import { MemoryRouter, Route } from "react-router-dom";
+
+import { FleetProvider } from "../../Contexts/FleetContext";
+import { StatusProvider } from "../../Contexts/StatusContext";
+import { UserProvider, setToken } from "../../Contexts/UserContext";
+import { TEST_AUTH_OBJECT } from "../../../utils/testing";
+import MainForm from "./DetailsTab"
+
+const renderDetailsTab = async () => {
+  const { container } = render(
+    <FleetProvider>
+      <StatusProvider>
+        <UserProvider>
+          <MemoryRouter initialEntries={['/testroute/US-TEST']}>
+            <Route path="/testroute/:name">
+              <MainForm name="US-TEST" />
+            </Route>
+          </MemoryRouter >
+        </UserProvider>
+      </StatusProvider>
+    </FleetProvider>
+  );
+  await waitFor(() => { /* render */ });
+  return container;
+};
+
+describe("DetailsTab", () => {
+  it("Render", async () => {
+    setToken(TEST_AUTH_OBJECT);
+    const container = await renderDetailsTab();
+    expect(container).toMatchSnapshot();
+  });
+});

src/components/Fleets/Status/Vehicles/Add/index.test.jsx

@@ -23,7 +23,7 @@ const renderFleetVehicleAdd = async () => {
       </StatusProvider>
     </FleetProvider>
   );
-  await waitFor(() => { });
+  await waitFor(() => { /* render */ });
   return container;
 };
 

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

@@ -26,7 +26,7 @@ const renderFleetVehiclesTable = async () => {
       </StatusProvider>
     </FleetProvider>
   );
-  await waitFor(() => { });
+  await waitFor(() => { /* render */ });
   return container;
 };
 

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

@@ -18,7 +18,7 @@ const renderVehiclesTab = async () => {
       <VehiclesTab name="US-TEST" />
     </BrowserRouter>
   );
-  await waitFor(() => { });
+  await waitFor(() => { /* render */ });
   return container;
 };
 

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

@@ -0,0 +1,145 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DetailsTab Render 1`] = `
+<div>
+  <div
+    data-testid="mocked-fleetprovider"
+  >
+    <div
+      data-testid="mocked-statusprovider"
+    >
+      <div
+        data-testid="mocked-userprovider"
+      >
+        <div
+          class="makeStyles-paper-3 makeStyles-tableSize-55"
+        >
+          <h6
+            class="MuiTypography-root MuiTypography-h6"
+          >
+            Fleet Details
+          </h6>
+          <div
+            data-testid="mocked-fleetprovider"
+          >
+            <div
+              class="makeStyles-paper-3 makeStyles-tableSize-55"
+            >
+              <div
+                class="MuiGrid-root makeStyles-root-14 MuiGrid-container MuiGrid-spacing-xs-2"
+              >
+                <div
+                  class="MuiGrid-root makeStyles-textCenterAlign-50 MuiGrid-item MuiGrid-grid-md-12"
+                >
+                  <p>
+                    <b>
+                      Name
+                    </b>
+                    : 
+                    US-TEST
+                  </p>
+                  <p>
+                    <b>
+                      Vehicles
+                    </b>
+                    : 
+                    3
+                  </p>
+                  <p>
+                    <b>
+                      Log Level
+                    </b>
+                    : 
+                    info
+                  </p>
+                </div>
+                <div
+                  class="MuiGrid-root makeStyles-textCenterAlign-50 MuiGrid-item MuiGrid-grid-md-12"
+                >
+                  <b>
+                    CANBus
+                  </b>
+                  <p>
+                    <b>
+                      Enabled
+                    </b>
+                    : 
+                    true
+                  </p>
+                  <p>
+                    <b>
+                      Max Memory Buffer Size
+                    </b>
+                    : 
+                    1
+                  </p>
+                  <p>
+                    <b>
+                      Enabled
+                    </b>
+                    : 
+                    true
+                  </p>
+                  <p>
+                    <b>
+                      Max Disk Buffer Size
+                    </b>
+                    : 
+                    2
+                  </p>
+                  <p>
+                    <b>
+                      Filters
+                    </b>
+                    : 
+                    0
+                  </p>
+                </div>
+                <div
+                  class="MuiGrid-root makeStyles-textCenterAlign-50 MuiGrid-item MuiGrid-grid-md-12"
+                >
+                  <a
+                    class=""
+                    href="/fleet-update?name=US-TEST"
+                    style="margin: 5px;"
+                    title="Update \\"US-TEST\\""
+                  >
+                    <svg
+                      aria-hidden="true"
+                      aria-label="Update \\"US-TEST\\""
+                      class="MuiSvgIcon-root"
+                      focusable="false"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
+                      />
+                    </svg>
+                  </a>
+                  <a
+                    class=""
+                    href="/testroute/US-TEST"
+                    title="Delete \\"US-TEST\\""
+                  >
+                    <svg
+                      aria-hidden="true"
+                      aria-label="Delete \\"US-TEST\\""
+                      class="MuiSvgIcon-root"
+                      focusable="false"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                      />
+                    </svg>
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

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

@@ -41,7 +41,7 @@ exports[`FleetStatus Render 1`] = `
                     <span
                       class="MuiTab-wrapper"
                     >
-                      Vehicles
+                      Details
                     </span>
                     <span
                       class="MuiTouchRipple-root"
@@ -55,6 +55,24 @@ exports[`FleetStatus Render 1`] = `
                     role="tab"
                     tabindex="-1"
                     type="button"
+                  >
+                    <span
+                      class="MuiTab-wrapper"
+                    >
+                      Vehicles
+                    </span>
+                    <span
+                      class="MuiTouchRipple-root"
+                    />
+                  </button>
+                  <button
+                    aria-controls="tabpanel-2"
+                    aria-selected="false"
+                    class="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit"
+                    id="tab-2"
+                    role="tab"
+                    tabindex="-1"
+                    type="button"
                   >
                     <span
                       class="MuiTab-wrapper"
@@ -87,7 +105,7 @@ exports[`FleetStatus Render 1`] = `
                 <h6
                   class="MuiTypography-root MuiTypography-h6"
                 >
-                  Vehicles
+                  Fleet Details
                 </h6>
                 <div
                   data-testid="mocked-fleetprovider"
@@ -99,302 +117,111 @@ exports[`FleetStatus Render 1`] = `
                       class="MuiGrid-root makeStyles-root-14 MuiGrid-container MuiGrid-spacing-xs-2"
                     >
                       <div
-                        class="MuiGrid-root makeStyles-textJustifyAlign-49 MuiGrid-item MuiGrid-grid-md-4"
+                        class="MuiGrid-root makeStyles-textCenterAlign-50 MuiGrid-item MuiGrid-grid-md-12"
+                      >
+                        <p>
+                          <b>
+                            Name
+                          </b>
+                          : 
+                        </p>
+                        <p>
+                          <b>
+                            Vehicles
+                          </b>
+                          : 
+                          3
+                        </p>
+                        <p>
+                          <b>
+                            Log Level
+                          </b>
+                          : 
+                          info
+                        </p>
+                      </div>
+                      <div
+                        class="MuiGrid-root makeStyles-textCenterAlign-50 MuiGrid-item MuiGrid-grid-md-12"
+                      >
+                        <b>
+                          CANBus
+                        </b>
+                        <p>
+                          <b>
+                            Enabled
+                          </b>
+                          : 
+                          true
+                        </p>
+                        <p>
+                          <b>
+                            Max Memory Buffer Size
+                          </b>
+                          : 
+                          1
+                        </p>
+                        <p>
+                          <b>
+                            Enabled
+                          </b>
+                          : 
+                          true
+                        </p>
+                        <p>
+                          <b>
+                            Max Disk Buffer Size
+                          </b>
+                          : 
+                          2
+                        </p>
+                        <p>
+                          <b>
+                            Filters
+                          </b>
+                          : 
+                          0
+                        </p>
+                      </div>
+                      <div
+                        class="MuiGrid-root makeStyles-textCenterAlign-50 MuiGrid-item MuiGrid-grid-md-12"
                       >
                         <a
-                          class="makeStyles-labelInline-9"
-                          href="/fleet/undefined/vehicle-add"
+                          class=""
+                          href="/fleet-update?name=undefined"
+                          style="margin: 5px;"
+                          title="Update \\"undefined\\""
                         >
                           <svg
                             aria-hidden="true"
-                            class="MuiSvgIcon-root MuiSvgIcon-fontSizeLarge"
+                            aria-label="Update \\"undefined\\""
+                            class="MuiSvgIcon-root"
                             focusable="false"
                             viewBox="0 0 24 24"
                           >
                             <path
-                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"
+                              d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
+                            />
+                          </svg>
+                        </a>
+                        <a
+                          class=""
+                          href="/"
+                          title="Delete \\"undefined\\""
+                        >
+                          <svg
+                            aria-hidden="true"
+                            aria-label="Delete \\"undefined\\""
+                            class="MuiSvgIcon-root"
+                            focusable="false"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                             />
                           </svg>
                         </a>
                       </div>
-                      <div
-                        align="right"
-                        class="MuiGrid-root makeStyles-textCenterAlign-50 MuiGrid-item MuiGrid-grid-md-8"
-                      >
-                        <div
-                          class="MuiFormControl-root makeStyles-margin-28 makeStyles-fullWidth-52"
-                        >
-                          <label
-                            class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated"
-                            data-shrink="false"
-                            for="search"
-                          >
-                            Search
-                          </label>
-                          <div
-                            class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-formControl MuiInput-formControl MuiInputBase-adornedEnd"
-                          >
-                            <input
-                              aria-invalid="false"
-                              class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd"
-                              id="search"
-                              type="text"
-                              value=""
-                            />
-                            <div
-                              class="MuiInputAdornment-root MuiInputAdornment-positionEnd"
-                            >
-                              <button
-                                aria-label="search"
-                                class="MuiButtonBase-root MuiIconButton-root"
-                                tabindex="0"
-                                type="button"
-                              >
-                                <span
-                                  class="MuiIconButton-label"
-                                >
-                                  <svg
-                                    aria-hidden="true"
-                                    class="MuiSvgIcon-root"
-                                    focusable="false"
-                                    viewBox="0 0 24 24"
-                                  >
-                                    <path
-                                      d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
-                                    />
-                                  </svg>
-                                </span>
-                                <span
-                                  class="MuiTouchRipple-root"
-                                />
-                              </button>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
                     </div>
-                    <table
-                      class="MuiTable-root"
-                    >
-                      <thead
-                        class="MuiTableHead-root"
-                      >
-                        <tr
-                          class="MuiTableRow-root MuiTableRow-head"
-                        >
-                          <th
-                            class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
-                            scope="col"
-                          >
-                            <span
-                              aria-disabled="false"
-                              class="MuiButtonBase-root MuiTableSortLabel-root"
-                              role="button"
-                              tabindex="0"
-                            >
-                              VIN
-                              <svg
-                                aria-hidden="true"
-                                class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
-                                focusable="false"
-                                viewBox="0 0 24 24"
-                              >
-                                <path
-                                  d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
-                                />
-                              </svg>
-                            </span>
-                          </th>
-                          <th
-                            class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
-                            scope="col"
-                          >
-                            Actions
-                          </th>
-                        </tr>
-                      </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"
-                      >
-                        <tr
-                          class="MuiTableRow-root MuiTableRow-footer"
-                        >
-                          <td
-                            class="MuiTableCell-root MuiTableCell-footer MuiTablePagination-root"
-                            colspan="8"
-                          >
-                            <div
-                              class="MuiToolbar-root MuiToolbar-regular MuiTablePagination-toolbar MuiToolbar-gutters"
-                            >
-                              <div
-                                class="MuiTablePagination-spacer"
-                              />
-                              <p
-                                class="MuiTypography-root MuiTablePagination-caption MuiTypography-body2 MuiTypography-colorInherit"
-                              >
-                                Rows per page:
-                              </p>
-                              <div
-                                class="MuiInputBase-root MuiTablePagination-input MuiTablePagination-selectRoot"
-                              >
-                                <select
-                                  aria-label="rows per page"
-                                  class="MuiSelect-root MuiSelect-select MuiTablePagination-select MuiInputBase-input"
-                                >
-                                  <option
-                                    class="MuiTablePagination-menuItem"
-                                    value="5"
-                                  >
-                                    5
-                                  </option>
-                                  <option
-                                    class="MuiTablePagination-menuItem"
-                                    value="10"
-                                  >
-                                    10
-                                  </option>
-                                  <option
-                                    class="MuiTablePagination-menuItem"
-                                    value="25"
-                                  >
-                                    25
-                                  </option>
-                                  <option
-                                    class="MuiTablePagination-menuItem"
-                                    value="100"
-                                  >
-                                    100
-                                  </option>
-                                </select>
-                                <svg
-                                  aria-hidden="true"
-                                  class="MuiSvgIcon-root MuiSelect-icon MuiTablePagination-selectIcon"
-                                  focusable="false"
-                                  viewBox="0 0 24 24"
-                                >
-                                  <path
-                                    d="M7 10l5 5 5-5z"
-                                  />
-                                </svg>
-                              </div>
-                              <p
-                                class="MuiTypography-root MuiTablePagination-caption MuiTypography-body2 MuiTypography-colorInherit"
-                              >
-                                1-3 of 3
-                              </p>
-                              <div
-                                class="MuiTablePagination-actions"
-                              >
-                                <button
-                                  aria-label="Previous page"
-                                  class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit Mui-disabled Mui-disabled"
-                                  disabled=""
-                                  tabindex="-1"
-                                  title="Previous page"
-                                  type="button"
-                                >
-                                  <span
-                                    class="MuiIconButton-label"
-                                  >
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <path
-                                        d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"
-                                      />
-                                    </svg>
-                                  </span>
-                                </button>
-                                <button
-                                  aria-label="Next page"
-                                  class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit Mui-disabled Mui-disabled"
-                                  disabled=""
-                                  tabindex="-1"
-                                  title="Next page"
-                                  type="button"
-                                >
-                                  <span
-                                    class="MuiIconButton-label"
-                                  >
-                                    <svg
-                                      aria-hidden="true"
-                                      class="MuiSvgIcon-root"
-                                      focusable="false"
-                                      viewBox="0 0 24 24"
-                                    >
-                                      <path
-                                        d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"
-                                      />
-                                    </svg>
-                                  </span>
-                                </button>
-                              </div>
-                            </div>
-                          </td>
-                        </tr>
-                      </tfoot>
-                    </table>
                   </div>
                 </div>
               </div>
@@ -406,6 +233,12 @@ exports[`FleetStatus Render 1`] = `
             id="tabpanel-1"
             role="tabpanel"
           />
+          <div
+            aria-labelledby="tab-2"
+            hidden=""
+            id="tabpanel-2"
+            role="tabpanel"
+          />
         </div>
       </div>
     </div>

src/components/Fleets/Status/index.jsx

@@ -4,6 +4,7 @@ import { useLocation } from "react-router-dom";
 import clsx from "clsx";
 import { Box, Tab, Tabs } from "@material-ui/core";
 
+import FleetDetailsTab from "./DetailsTab";
 import FleetVehiclesTab from "./VehiclesTab";
 import FleetCANFiltersTab from "./CANFiltersTab";
 import TabPanel from "../../Controls/TabPanel";
@@ -11,6 +12,7 @@ import { useStatusContext } from "../../Contexts/StatusContext";
 import useStyles from "../../useStyles";
 
 const tabHashes = [
+  "details",
   "vehicles",
   "filters"
 ]
@@ -43,7 +45,7 @@ const FleetStatus = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [name]);
 
-  const handleTabChange = (event, newIndex) => {
+  const handleTabChange = (_event, newIndex) => {
     setTabIndex(newIndex);
   };
 
@@ -51,16 +53,21 @@ const FleetStatus = () => {
     <div className={clsx(classes.paper, classes.tableSize)}>
       <Box className={classes.tableToolbar} sx={{ borderBottom: 1, borderColor: 'divider' }}>
         <Tabs value={tabIndex} onChange={handleTabChange} aria-label="car tabs" indicatorColor="secondary">
-          <Tab label="Vehicles" {...tabProps(0)} />
-          <Tab label="CAN Filters" {...tabProps(1)} />
+          <Tab label="Details" {...tabProps(0)} />
+          <Tab label="Vehicles" {...tabProps(1)} />
+          <Tab label="CAN Filters" {...tabProps(2)} />
         </Tabs>
       </Box>
 
       <TabPanel value={tabIndex} index={0}>
-        <FleetVehiclesTab />
+        <FleetDetailsTab />
       </TabPanel>
 
       <TabPanel value={tabIndex} index={1}>
+        <FleetVehiclesTab />
+      </TabPanel >
+
+      <TabPanel value={tabIndex} index={2}>
         <FleetCANFiltersTab />
       </TabPanel>
     </div >

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

@@ -26,7 +26,7 @@ const renderCarStatus = async () => {
       </StatusProvider>
     </FleetProvider>
   );
-  await waitFor(() => { });
+  await waitFor(() => { /* render */ });
   return container;
 };
 

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

@@ -140,7 +140,7 @@ exports[`FleetTable Render 1`] = `
                       role="button"
                       tabindex="0"
                     >
-                      CANBus Enabled
+                      Log Level
                       <svg
                         aria-hidden="true"
                         class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
@@ -163,7 +163,30 @@ exports[`FleetTable Render 1`] = `
                       role="button"
                       tabindex="0"
                     >
-                      Log Level
+                      CAN Bus Enabled
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
+                        focusable="false"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
+                        />
+                      </svg>
+                    </span>
+                  </th>
+                  <th
+                    class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
+                    scope="col"
+                  >
+                    <span
+                      aria-disabled="false"
+                      class="MuiButtonBase-root MuiTableSortLabel-root"
+                      role="button"
+                      tabindex="0"
+                    >
+                      Data Logger Enabled
                       <svg
                         aria-hidden="true"
                         class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
@@ -222,12 +245,6 @@ exports[`FleetTable Render 1`] = `
                       </svg>
                     </span>
                   </th>
-                  <th
-                    class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
-                    scope="col"
-                  >
-                    Actions
-                  </th>
                 </tr>
               </thead>
               <tbody
@@ -245,6 +262,11 @@ exports[`FleetTable Render 1`] = `
                       US-WEST
                     </a>
                   </td>
+                  <td
+                    class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                  >
+                    info
+                  </td>
                   <td
                     class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
                   >
@@ -253,7 +275,7 @@ exports[`FleetTable Render 1`] = `
                   <td
                     class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
                   >
-                    info
+                    true
                   </td>
                   <td
                     class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
@@ -265,28 +287,6 @@ exports[`FleetTable Render 1`] = `
                   >
                     0
                   </td>
-                  <td
-                    class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
-                  >
-                    <a
-                      class=""
-                      href="/fleet-update?name=US-WEST&canbus_enabled=true&log_level=info"
-                      style="margin: 5px;"
-                      title="Update \\"US-WEST\\""
-                    >
-                      <svg
-                        aria-hidden="true"
-                        aria-label="Update US-WEST"
-                        class="MuiSvgIcon-root"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
-                        />
-                      </svg>
-                    </a>
-                  </td>
                 </tr>
                 <tr
                   class="MuiTableRow-root"
@@ -300,6 +300,11 @@ exports[`FleetTable Render 1`] = `
                       US-CENTRAL
                     </a>
                   </td>
+                  <td
+                    class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                  >
+                    warn
+                  </td>
                   <td
                     class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
                   >
@@ -308,7 +313,7 @@ exports[`FleetTable Render 1`] = `
                   <td
                     class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
                   >
-                    warn
+                    false
                   </td>
                   <td
                     class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
@@ -320,28 +325,6 @@ exports[`FleetTable Render 1`] = `
                   >
                     0
                   </td>
-                  <td
-                    class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
-                  >
-                    <a
-                      class=""
-                      href="/fleet-update?name=US-CENTRAL&canbus_enabled=false&log_level=warn"
-                      style="margin: 5px;"
-                      title="Update \\"US-CENTRAL\\""
-                    >
-                      <svg
-                        aria-hidden="true"
-                        aria-label="Update US-CENTRAL"
-                        class="MuiSvgIcon-root"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
-                        />
-                      </svg>
-                    </a>
-                  </td>
                 </tr>
                 <tr
                   class="MuiTableRow-root"
@@ -355,6 +338,11 @@ exports[`FleetTable Render 1`] = `
                       US-EAST
                     </a>
                   </td>
+                  <td
+                    class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                  >
+                    error
+                  </td>
                   <td
                     class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
                   >
@@ -363,7 +351,7 @@ exports[`FleetTable Render 1`] = `
                   <td
                     class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
                   >
-                    error
+                    false
                   </td>
                   <td
                     class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
@@ -375,28 +363,6 @@ exports[`FleetTable Render 1`] = `
                   >
                     0
                   </td>
-                  <td
-                    class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
-                  >
-                    <a
-                      class=""
-                      href="/fleet-update?name=US-EAST&canbus_enabled=true&log_level=error"
-                      style="margin: 5px;"
-                      title="Update \\"US-EAST\\""
-                    >
-                      <svg
-                        aria-hidden="true"
-                        aria-label="Update US-EAST"
-                        class="MuiSvgIcon-root"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
-                        />
-                      </svg>
-                    </a>
-                  </td>
                 </tr>
               </tbody>
               <tfoot

src/components/Fleets/Table/index.jsx

@@ -7,12 +7,9 @@ import {
   TableCell,
   TableFooter,
   TablePagination,
-  TableRow,
-  Tooltip,
+  TableRow
 } from "@material-ui/core";
 import AddCircleIcon from "@material-ui/icons/AddCircle";
-import EditIcon from '@material-ui/icons/Edit';
-import DeleteIcon from "@material-ui/icons/Delete";
 import clsx from "clsx";
 
 import TableHeaderSortable from "../../Table/HeaderSortable";
@@ -24,21 +21,24 @@ import { FleetProvider, useFleetContext } from "../../Contexts/FleetContext"
 import useStyles from "../../useStyles";
 import SearchField from "../../Controls/SearchField";
 import { logger } from "../../../services/monitoring";
-import { Roles, hasRole } from "../../../utils/roles";
 
 const tableColumns = [
   {
     id: "name",
     label: "Name"
   },
-  {
-    id: "canbus_enabled",
-    label: "CANBus Enabled"
-  },
   {
     id: "log_level",
     label: "Log Level"
   },
+  {
+    id: "canbus_enabled",
+    label: "CAN Bus Enabled"
+  },
+  {
+    id: "data_logger_enabled",
+    label: "Data Logger Enabled"
+  },
   {
     id: "num_vehicles",
     label: "Vehicles"
@@ -46,22 +46,18 @@ const tableColumns = [
   {
     id: "num_filters",
     label: "Filters"
-  },
-  {
-    id: "",
-    label: "Actions"
   }
 ];
 
-const MainForm = ({ vin }) => {
+const MainForm = () => {
   const [pageSize, setPageSize] = useState(10);
   const [pageIndex, setPageIndex] = useState(0);
   const [orderBy, setOrderBy] = useState("id");
   const [order, setOrder] = useState("desc");
   const classes = useStyles();
   const { setMessage, setSitePath, setTitle } = useStatusContext();
-  const { fleets, totalFleets, getFleets, deleteFleet } = useFleetContext();
-  const { token: { idToken: { jwtToken: token } }, groups } = useUserContext();
+  const { fleets, totalFleets, getFleets } = useFleetContext();
+  const { token: { idToken: { jwtToken: token } } } = useUserContext();
 
   useEffect(() => {
     setTitle("Fleets");
@@ -89,7 +85,7 @@ const MainForm = ({ vin }) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [token, pageIndex, pageSize, orderBy, order]);
 
-  const handleChangePageIndex = (event, newIndex) => {
+  const handleChangePageIndex = (_event, newIndex) => {
     setPageIndex(newIndex);
   };
 
@@ -98,7 +94,7 @@ const MainForm = ({ vin }) => {
     setPageIndex(0);
   };
 
-  const handleSort = (event, property) => {
+  const handleSort = (_event, property) => {
     try {
       if (property === orderBy) {
         if (order === "asc") {
@@ -115,55 +111,6 @@ const MainForm = ({ vin }) => {
     }
   };
 
-  const onDelete = async (name) => {
-    try {
-      await deleteFleet(name, token);
-      setMessage(`Deleted ${name}`)
-    } catch (e) {
-      setMessage(e.message);
-      logger.warn(e.stack);
-    }
-  };
-
-  const Actions = (row) => {
-    let actions = [];
-    if (hasRole([Roles.CREATE], groups)) {
-      actions.push({
-        tip: `Update "${row.name}"`,
-        link: `/fleet-update?name=${row.name}&canbus_enabled=${row.canbus.enabled.toString()}&log_level=${row.log_level}`,
-        icon: <EditIcon aria-label={`Update ${row.name}`} />
-      });
-    }
-    if (hasRole([Roles.DELETE], groups)) {
-      actions.push({
-        tip: `Delete "${row.name}"`,
-        id: row.name,
-        icon: <DeleteIcon aria-label={`Delete ${row.name}`} />
-      })
-    }
-    if (actions.length === 0) return ["No actions"];
-
-    return actions.map((action) => {
-      if (action.link != null) {
-        return (
-          <Tooltip key={action.link} title={action.tip}>
-            <Link to={action.link} style={{ margin: 5 }}>
-              {action.icon}
-            </Link>
-          </Tooltip>
-        );
-      } else {
-        return (
-          <Tooltip key={`delete-${action.id}`} title={action.tip}>
-            <Link to="#" onClick={() => onDelete(action.id)}>
-              {action.icon}
-            </Link>
-          </Tooltip>
-        );
-      }
-    });
-  };
-
   return (
     <div className={clsx(classes.paper, classes.tableSize)}>
       <Grid container className={classes.root} spacing={2}>
@@ -191,11 +138,11 @@ const MainForm = ({ vin }) => {
               <TableCell align="center">
                 <Link to={`/fleet/${row.name}`}>{row.name}</Link>
               </TableCell>
-              <TableCell align="center">{row.canbus.enabled ? "true" : "false"}</TableCell>
               <TableCell align="center">{row.log_level}</TableCell>
+              <TableCell align="center">{row.canbus.enabled ? "true" : "false"}</TableCell>
+              <TableCell align="center">{row.canbus.data_logger_enabled ? "true" : "false"}</TableCell>
               <TableCell align="center">{!row.vehicles ? 0 : row.vehicles.length}</TableCell>
               <TableCell align="center">{!row.canbus.filters ? 0 : row.canbus.filters.length}</TableCell>
-              <TableCell align="center">{Actions(row)}</TableCell>
             </TableRow>
           ))}
         </TableBody>

src/components/Fleets/Table/index.test.jsx

@@ -26,7 +26,7 @@ const renderFleetTable = async () => {
       </StatusProvider>
     </FleetProvider>
   );
-  await waitFor(() => { });
+  await waitFor(() => { /* render */ });
   return container;
 };
 

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

@@ -26,7 +26,7 @@ exports[`FleetUpdate Render 1`] = `
                 class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
               >
                 <label
-                  class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined Mui-required Mui-required"
+                  class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined Mui-disabled Mui-disabled Mui-required Mui-required"
                   data-shrink="false"
                   for="name"
                   id="name-label"
@@ -41,11 +41,12 @@ exports[`FleetUpdate Render 1`] = `
                   </span>
                 </label>
                 <div
-                  class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
+                  class="MuiInputBase-root MuiOutlinedInput-root Mui-disabled Mui-disabled MuiInputBase-fullWidth MuiInputBase-formControl"
                 >
                   <input
                     aria-invalid="false"
-                    class="MuiInputBase-input MuiOutlinedInput-input"
+                    class="MuiInputBase-input MuiOutlinedInput-input Mui-disabled Mui-disabled"
+                    disabled=""
                     id="name"
                     maxlength="255"
                     name="name"
@@ -69,62 +70,467 @@ exports[`FleetUpdate Render 1`] = `
                   </fieldset>
                 </div>
               </div>
+              <label
+                class="MuiFormLabel-root"
+                id="demo-row-radio-buttons-group-label"
+              >
+                Log Level
+              </label>
               <div
-                class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
+                aria-labelledby="demo-row-radio-buttons-group-label"
+                class="MuiFormGroup-root MuiFormGroup-row"
+                margin="normal"
+                role="radiogroup"
               >
                 <label
-                  class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined Mui-required Mui-required"
-                  data-shrink="false"
-                  for="canbus"
-                  id="canbus-label"
+                  class="MuiFormControlLabel-root"
                 >
-                  CANBus Enabled
                   <span
-                    aria-hidden="true"
-                    class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
+                    aria-disabled="false"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
-                     
-                    *
+                    <span
+                      class="MuiIconButton-label"
+                    >
+                      <input
+                        class="PrivateSwitchBase-input-71"
+                        name="log-level-group"
+                        type="radio"
+                        value="trace"
+                      />
+                      <div
+                        class="PrivateRadioButtonIcon-root-72"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root"
+                          focusable="false"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+                          />
+                        </svg>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
+                          focusable="false"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
+                          />
+                        </svg>
+                      </div>
+                    </span>
+                    <span
+                      class="MuiTouchRipple-root"
+                    />
+                  </span>
+                  <span
+                    class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
+                  >
+                    Trace
+                  </span>
+                </label>
+                <label
+                  class="MuiFormControlLabel-root"
+                >
+                  <span
+                    aria-disabled="false"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                  >
+                    <span
+                      class="MuiIconButton-label"
+                    >
+                      <input
+                        class="PrivateSwitchBase-input-71"
+                        name="log-level-group"
+                        type="radio"
+                        value="debug"
+                      />
+                      <div
+                        class="PrivateRadioButtonIcon-root-72"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root"
+                          focusable="false"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+                          />
+                        </svg>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
+                          focusable="false"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
+                          />
+                        </svg>
+                      </div>
+                    </span>
+                    <span
+                      class="MuiTouchRipple-root"
+                    />
+                  </span>
+                  <span
+                    class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
+                  >
+                    Debug
+                  </span>
+                </label>
+                <label
+                  class="MuiFormControlLabel-root"
+                >
+                  <span
+                    aria-disabled="false"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary PrivateSwitchBase-checked-69 Mui-checked MuiIconButton-colorSecondary"
+                  >
+                    <span
+                      class="MuiIconButton-label"
+                    >
+                      <input
+                        checked=""
+                        class="PrivateSwitchBase-input-71"
+                        name="log-level-group"
+                        type="radio"
+                        value="info"
+                      />
+                      <div
+                        class="PrivateRadioButtonIcon-root-72 PrivateRadioButtonIcon-checked-74"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root"
+                          focusable="false"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+                          />
+                        </svg>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
+                          focusable="false"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
+                          />
+                        </svg>
+                      </div>
+                    </span>
+                    <span
+                      class="MuiTouchRipple-root"
+                    />
+                  </span>
+                  <span
+                    class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
+                  >
+                    Info
+                  </span>
+                </label>
+                <label
+                  class="MuiFormControlLabel-root"
+                >
+                  <span
+                    aria-disabled="false"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                  >
+                    <span
+                      class="MuiIconButton-label"
+                    >
+                      <input
+                        class="PrivateSwitchBase-input-71"
+                        name="log-level-group"
+                        type="radio"
+                        value="warn"
+                      />
+                      <div
+                        class="PrivateRadioButtonIcon-root-72"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root"
+                          focusable="false"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+                          />
+                        </svg>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
+                          focusable="false"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
+                          />
+                        </svg>
+                      </div>
+                    </span>
+                    <span
+                      class="MuiTouchRipple-root"
+                    />
+                  </span>
+                  <span
+                    class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
+                  >
+                    Warn
+                  </span>
+                </label>
+                <label
+                  class="MuiFormControlLabel-root"
+                >
+                  <span
+                    aria-disabled="false"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                  >
+                    <span
+                      class="MuiIconButton-label"
+                    >
+                      <input
+                        class="PrivateSwitchBase-input-71"
+                        name="log-level-group"
+                        type="radio"
+                        value="error"
+                      />
+                      <div
+                        class="PrivateRadioButtonIcon-root-72"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root"
+                          focusable="false"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+                          />
+                        </svg>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
+                          focusable="false"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
+                          />
+                        </svg>
+                      </div>
+                    </span>
+                    <span
+                      class="MuiTouchRipple-root"
+                    />
+                  </span>
+                  <span
+                    class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
+                  >
+                    Error
+                  </span>
+                </label>
+                <label
+                  class="MuiFormControlLabel-root"
+                >
+                  <span
+                    aria-disabled="false"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                  >
+                    <span
+                      class="MuiIconButton-label"
+                    >
+                      <input
+                        class="PrivateSwitchBase-input-71"
+                        name="log-level-group"
+                        type="radio"
+                        value="critical"
+                      />
+                      <div
+                        class="PrivateRadioButtonIcon-root-72"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root"
+                          focusable="false"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+                          />
+                        </svg>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
+                          focusable="false"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
+                          />
+                        </svg>
+                      </div>
+                    </span>
+                    <span
+                      class="MuiTouchRipple-root"
+                    />
+                  </span>
+                  <span
+                    class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
+                  >
+                    Critical
+                  </span>
+                </label>
+              </div>
+              <label
+                class="MuiFormLabel-root"
+                id="demo-row-radio-buttons-group-label"
+              >
+                CAN Bus
+              </label>
+              <div
+                class="MuiFormGroup-root"
+              >
+                <label
+                  class="MuiFormControlLabel-root"
+                >
+                  <span
+                    aria-disabled="false"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-69 Mui-checked MuiIconButton-colorSecondary"
+                  >
+                    <span
+                      class="MuiIconButton-label"
+                    >
+                      <input
+                        checked=""
+                        class="PrivateSwitchBase-input-71"
+                        data-indeterminate="false"
+                        type="checkbox"
+                        value=""
+                      />
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root"
+                        focusable="false"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
+                        />
+                      </svg>
+                    </span>
+                    <span
+                      class="MuiTouchRipple-root"
+                    />
+                  </span>
+                  <span
+                    class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
+                  >
+                    CAN Bus Enabled
                   </span>
                 </label>
                 <div
-                  class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
+                  class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
                 >
-                  <input
-                    aria-invalid="false"
-                    class="MuiInputBase-input MuiOutlinedInput-input"
-                    id="canbus"
-                    maxlength="255"
-                    name="canbus"
-                    required=""
-                    type="text"
-                    value=""
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                  <label
+                    class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined MuiFormLabel-filled Mui-required Mui-required"
+                    data-shrink="true"
+                    for="max_mem_buffer_size"
+                    id="max_mem_buffer_size-label"
                   >
-                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-66"
+                    Max Memory Buffer Size (0 uses default size)
+                    <span
+                      aria-hidden="true"
+                      class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
                     >
-                      <span>
-                        CANBus Enabled
-                         *
-                      </span>
-                    </legend>
-                  </fieldset>
+                       
+                      *
+                    </span>
+                  </label>
+                  <div
+                    class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
+                  >
+                    <input
+                      aria-invalid="false"
+                      class="MuiInputBase-input MuiOutlinedInput-input"
+                      id="max_mem_buffer_size"
+                      maxlength="12"
+                      name="max_mem_buffer_size"
+                      required=""
+                      type="number"
+                      value="1"
+                    />
+                    <fieldset
+                      aria-hidden="true"
+                      class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                    >
+                      <legend
+                        class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
+                      >
+                        <span>
+                          Max Memory Buffer Size (0 uses default size)
+                           *
+                        </span>
+                      </legend>
+                    </fieldset>
+                  </div>
                 </div>
+                <label
+                  class="MuiFormControlLabel-root"
+                >
+                  <span
+                    aria-disabled="false"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-69 Mui-checked MuiIconButton-colorSecondary"
+                  >
+                    <span
+                      class="MuiIconButton-label"
+                    >
+                      <input
+                        class="PrivateSwitchBase-input-71"
+                        data-indeterminate="false"
+                        type="checkbox"
+                        value=""
+                      />
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root"
+                        focusable="false"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
+                        />
+                      </svg>
+                    </span>
+                    <span
+                      class="MuiTouchRipple-root"
+                    />
+                  </span>
+                  <span
+                    class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
+                  >
+                    Data Logger Enabled
+                  </span>
+                </label>
               </div>
               <div
                 class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
               >
                 <label
-                  class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined Mui-required Mui-required"
-                  data-shrink="false"
-                  for="log-level"
-                  id="log-level-label"
+                  class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined MuiFormLabel-filled Mui-required Mui-required"
+                  data-shrink="true"
+                  for="max_disk_buffer_size"
+                  id="max_disk_buffer_size-label"
                 >
-                  Log Level (e.g. "debug", "info", "warn", "error", etc.)
+                  Max Disk Buffer Size (0 uses default size)
                   <span
                     aria-hidden="true"
                     class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
@@ -139,22 +545,22 @@ exports[`FleetUpdate Render 1`] = `
                   <input
                     aria-invalid="false"
                     class="MuiInputBase-input MuiOutlinedInput-input"
-                    id="log-level"
-                    maxlength="255"
-                    name="log-level"
+                    id="max_disk_buffer_size"
+                    maxlength="12"
+                    name="max_disk_buffer_size"
                     required=""
-                    type="text"
-                    value=""
+                    type="number"
+                    value="2"
                   />
                   <fieldset
                     aria-hidden="true"
                     class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-66"
+                      class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
                     >
                       <span>
-                        Log Level (e.g. "debug", "info", "warn", "error", etc.)
+                        Max Disk Buffer Size (0 uses default size)
                          *
                       </span>
                     </legend>

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"

src/components/Fleets/Update/index.test.jsx

@@ -23,7 +23,7 @@ const renderFleetUpdate = async () => {
       </StatusProvider>
     </FleetProvider>
   );
-  await waitFor(() => { });
+  await waitFor(() => { /* render */ });
   return container;
 };