CEC-1182 fleet filter forms (#131)

* forms for fleet can filters

* unit tests for fleet filters

* removing warnings

* updating regex

src/components/CANFilter/Table/index.jsx

@@ -11,8 +11,8 @@ import {
   Tooltip,
 } 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 EditIcon from '@material-ui/icons/Edit';
 import clsx from "clsx";
 
 import {
@@ -104,6 +104,7 @@ const MainForm = ({ vin }) => {
   const onDelete = async (can_id) => {
     try {
       await deleteFilter(vin, can_id, token);
+      setMessage(`Deleted ${can_id}`)
     } catch (e) {
       setMessage(e.message);
       logger.warn(e.stack);

src/components/Contexts/FleetContext.jsx

@@ -12,6 +12,9 @@ export const FleetProvider = ({ children }) => {
   const [fleetVehicles, setFleetVehicles] = useState([]);
   const [totalFleetVehicles, setTotalFleetVehicles] = useState(0);
 
+  const [fleetCANFilters, setFleetCANFilters] = useState([]);
+  const [totalFleetCANFilters, setTotalFleetCANFilters] = useState(0);
+
   const addFleet = async (fleet, token) => {
     try {
       setBusy(true);
@@ -60,7 +63,7 @@ export const FleetProvider = ({ children }) => {
     } finally {
       setBusy(false);
     }
-  }
+  };
 
   const deleteFleet = async (name, token) => {
     try {
@@ -79,7 +82,7 @@ export const FleetProvider = ({ children }) => {
     } finally {
       setBusy(false);
     }
-  }
+  };
 
   const getFleetVehicles = async (name, search, token) => {
     try {
@@ -99,7 +102,7 @@ export const FleetProvider = ({ children }) => {
     } finally {
       setBusy(false);
     }
-  }
+  };
 
   const addFleetVehicle = async (name, vehicle, token) => {
     try {
@@ -116,7 +119,7 @@ export const FleetProvider = ({ children }) => {
     } finally {
       setBusy(false);
     }
-  }
+  };
 
   const deleteFleetVehicle = async (name, vehicle, token) => {
     try {
@@ -136,8 +139,83 @@ export const FleetProvider = ({ children }) => {
     } finally {
       setBusy(false);
     }
+  };
+
+  const getFleetCANFilters = async (name, search, token) => {
+    try {
+      setBusy(true);
+
+      const result = await api.getFleetCANFilters(name, search, token);
+      if (result.error) {
+        setFleetCANFilters([])
+        throw new Error(`Get fleet filters error. ${result.message}`);
       }
 
+      setFleetCANFilters(result.data)
+      if (result.total) {
+        setTotalFleetCANFilters(result.total);
+      }
+      return result;
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const addFleetCANFilter = async (name, filter, token) => {
+    try {
+      setBusy(true);
+
+      validateFleetName(name);
+      validateFilter(filter);
+
+      const result = await api.addFleetCANFilter(name, filter, token);
+      if (result.error) {
+        throw new Error(`Add fleet CAN filter error. ${result.message}`);
+      }
+      return result;
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  const updateFleetCANFilter = async (name, can_id, filter, token) => {
+    try {
+      setBusy(true);
+
+      validateFleetName(name);
+      validateCANID(can_id);
+      validateFilter(filter);
+
+      const result = await api.updateFleetCANFilter(name, can_id, filter, token);
+      if (result.error) {
+        throw new Error(`Update fleet CAN filter error. ${result.message}`);
+      }
+      return result;
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  const deleteFleetCANFilter = async (name, can_id, token) => {
+    try {
+      setBusy(true);
+
+      validateFleetName(name);
+      validateCANID(can_id);
+
+      const result = await api.deleteFleetCANFilter(name, can_id, token);
+      if (result.error) {
+        throw new Error(`Delete fleet vehicle error. ${result.message}`);
+      }
+
+      const index = fleetCANFilters.findIndex(element => element.can_id === can_id);
+      if (index >= 0) fleetCANFilters.splice(index, 1);
+      return result;
+    } finally {
+      setBusy(false);
+    }
+  };
+
   return (
     <FleetContext.Provider
       value={{
@@ -154,7 +232,14 @@ export const FleetProvider = ({ children }) => {
         totalFleetVehicles,
         getFleetVehicles,
         addFleetVehicle,
-        deleteFleetVehicle
+        deleteFleetVehicle,
+
+        fleetCANFilters,
+        totalFleetCANFilters,
+        getFleetCANFilters,
+        addFleetCANFilter,
+        updateFleetCANFilter,
+        deleteFleetCANFilter
       }}
     >
       {children}
@@ -171,7 +256,7 @@ const validateFleet = (fleet) => {
 }
 
 const validateFleetName = (name) => {
-  if (name == null || !/^[0-9A-Za-z-]+$/.test(name)) {
+  if (name == null || !/^[\w-]+$/.test(name)) {
     throw new Error("Invalid name");
   }
 }
@@ -182,4 +267,22 @@ const validateVIN = (vin) => {
   }
 }
 
+const validateFilter = (filter) => {
+  if (filter == null) {
+    throw new Error("No CAN filter data");
+  }
+
+  validateCANID(filter.can_id)
+
+  if (filter.interval == null || !/^\d+$/.test(filter.interval)) {
+    throw new Error("Invalid interval");
+  }
+}
+
+const validateCANID = (can_id) => {
+  if (can_id == null || !/^\d+(-\d+)?$/.test(can_id)) {
+    throw new Error("Invalid CAN ID");
+  }
+}
+
 export const useFleetContext = () => useContext(FleetContext);

src/components/Contexts/FleetContext.test.jsx

@@ -20,6 +20,11 @@ const checkFleetVehicleResults = (error, busy, vehicles) => {
   expect(screen.getByTestId("fleet-vehicles").innerHTML).toEqual(vehicles);
 }
 
+const checkFleetCANFilterResults = (error, busy, filters) => {
+  checkBaseResults(error, busy);
+  expect(screen.getByTestId("fleet-filters").innerHTML).toEqual(filters);
+}
+
 const checkBaseResults = (error, busy) => {
   expect(screen.getByTestId("error").innerHTML).toEqual(error);
   expect(screen.getByTestId("busy").innerHTML).toEqual(busy);
@@ -457,6 +462,187 @@ describe("FleetContext", () => {
       checkBaseResults("", "false");
     });
   });
+
+  describe("getFleetCANFilters", () => {
+    beforeEach(() => {
+      const TestComp = () => {
+        const { busy, error, fleetCANFilters, getFleetCANFilters } = useFleetContext();
+
+        return (
+          <>
+            <div data-testid="error">{error}</div>
+            <div data-testid="busy">{busy.toString()}</div>
+            <div data-testid="fleet-filters">{JSON.stringify(fleetCANFilters)}</div>
+            <button
+              data-testid="getFleetCANFilters"
+              onClick={() => getFleetCANFilters("US-TEST")}
+            />
+          </>
+        );
+      };
+      render(
+        <FleetProvider>
+          <TestComp />
+        </FleetProvider>
+      );
+    });
+
+    afterEach(() => {
+      cleanup();
+    });
+
+    it("initial state", () => {
+      checkFleetCANFilterResults("", "false", "[]");
+    });
+
+    it("getFleetCANFilters", async () => {
+      fireEvent.click(screen.getByTestId("getFleetCANFilters"));
+      await waitFor(() =>
+        expect(screen.getByTestId("fleet-filters").innerHTML).not.toBe("[]")
+      );
+      checkFleetCANFilterResults("", "false", JSON.stringify(expectedFleetCANFiltersData));
+    });
+  });
+
+  describe("addFleetCANFilter", () => {
+    beforeEach(async () => {
+      const TestComp = () => {
+        const { busy, addFleetCANFilter } = useFleetContext();
+        const { message, setMessage } = useStatusContext();
+        const add = async (name, filter) => {
+          try {
+            await addFleetCANFilter(name, filter);
+          } catch (e) {
+            setMessage(e.message);
+          }
+        };
+
+        return (
+          <>
+            <div data-testid="error">{message}</div>
+            <div data-testid="busy">{busy.toString()}</div>
+            <button data-testid="addFleetCANFilterNull" onClick={() => add(null)} />
+            <button data-testid="addFleetCANFilterNoName" onClick={() => add({})} />
+            <button
+              data-testid="addFleetCANFilter"
+              onClick={() =>
+                add("US-TEST", { can_id: "111", interval: 222 })
+              }
+            />
+          </>
+        );
+      };
+      render(
+        <StatusProvider>
+          <FleetProvider>
+            <TestComp />
+          </FleetProvider>
+        </StatusProvider>
+      );
+    });
+
+    afterEach(() => {
+      cleanup();
+    });
+
+    it("initial state", () => {
+      checkBaseResults("", "false");
+    });
+
+    it("addFleetCANFilterNull", async () => {
+      fireEvent.click(screen.getByTestId("addFleetCANFilterNull"));
+      await waitFor(() =>
+        expect(screen.getByTestId("busy").innerHTML).toEqual("false")
+      );
+      checkBaseResults("Invalid name", "false");
+    });
+
+    it("addFleetCANFilterNoName", async () => {
+      fireEvent.click(screen.getByTestId("addFleetCANFilterNoName"));
+      await waitFor(() =>
+        expect(screen.getByTestId("busy").innerHTML).toEqual("false")
+      );
+      checkBaseResults("Invalid name", "false");
+    });
+
+    it("addFleetCANFilter", async () => {
+      fireEvent.click(screen.getByTestId("addFleetCANFilter"));
+      await waitFor(() =>
+        expect(screen.getByTestId("busy").innerHTML).toEqual("false")
+      );
+      checkBaseResults("", "false");
+    });
+  });
+
+  describe("deleteFleetCANFilter", () => {
+    beforeEach(async () => {
+      const TestComp = () => {
+        const { busy, deleteFleetCANFilter } = useFleetContext();
+        const { message, setMessage } = useStatusContext();
+        const deleteFF = async (name, can_id) => {
+          try {
+            await deleteFleetCANFilter(name, can_id);
+          } catch (e) {
+            setMessage(e.message);
+          }
+        };
+
+        return (
+          <>
+            <div data-testid="error">{message}</div>
+            <div data-testid="busy">{busy.toString()}</div>
+            <button data-testid="deleteFleetCANFilterNull" onClick={() => deleteFF("US-WEST", null)} />
+            <button data-testid="deleteFleetCANFilterInvalid" onClick={() => deleteFF("US-WEST", "INVALID")} />
+            <button
+              data-testid="deleteFleetCANFilter"
+              onClick={() =>
+                deleteFF("US-WEST", "123-456")
+              }
+            />
+          </>
+        );
+      };
+      render(
+        <StatusProvider>
+          <FleetProvider>
+            <TestComp />
+          </FleetProvider>
+        </StatusProvider>
+      );
+    });
+
+    afterEach(() => {
+      cleanup();
+    });
+
+    it("initial state", () => {
+      checkBaseResults("", "false");
+    });
+
+    it("deleteFleetCANFilterNull", async () => {
+      fireEvent.click(screen.getByTestId("deleteFleetCANFilterNull"));
+      await waitFor(() =>
+        expect(screen.getByTestId("busy").innerHTML).toEqual("false")
+      );
+      checkBaseResults("Invalid CAN ID", "false");
+    });
+
+    it("deleteFleetCANFilterNonexistent", async () => {
+      fireEvent.click(screen.getByTestId("deleteFleetCANFilterInvalid"));
+      await waitFor(() =>
+        expect(screen.getByTestId("busy").innerHTML).toEqual("false")
+      );
+      checkBaseResults("Invalid CAN ID", "false");
+    });
+
+    it("deleteFleetCANFilter", async () => {
+      fireEvent.click(screen.getByTestId("deleteFleetCANFilter"));
+      await waitFor(() =>
+        expect(screen.getByTestId("busy").innerHTML).toEqual("false")
+      );
+      checkBaseResults("", "false");
+    });
+  });
 });
 
 const expectedFleetsData = [
@@ -480,4 +666,19 @@ const expectedFleetsData = [
   },
 ];
 
-const expectedFleetVehiclesData = ["USWESTVIN12345678", "USWESTVIN12345679", "USWESTVIN12345670"]
+const expectedFleetVehiclesData = ["USWESTVIN12345678", "USWESTVIN12345679", "USWESTVIN12345670"];
+
+const expectedFleetCANFiltersData = [
+  {
+    can_id: "123-456",
+    interval: 789
+  },
+  {
+    can_id: "1",
+    interval: 1000
+  },
+  {
+    can_id: "1000",
+    interval: 1
+  }
+];

src/components/Contexts/__mocks__/FleetContext.jsx

@@ -22,6 +22,21 @@ let fleets = [
 let totalFleets = 3;
 let fleetVehicles = ["USWESTVIN12345678", "USWESTVIN12345679", "USWESTVIN12345670"];
 let totalFleetVehicles = 3;
+let fleetCANFilters = [
+  {
+    can_id: "123-456",
+    interval: 789
+  },
+  {
+    can_id: "1",
+    interval: 1000
+  },
+  {
+    can_id: "1000",
+    interval: 1
+  }
+]
+let totalFleetCANFilters = 3;
 
 export const FleetProvider = ({ children }) => {
   return <div data-testid="mocked-fleetprovider">{children}</div>;
@@ -41,5 +56,12 @@ export const useFleetContext = () => ({
   totalFleetVehicles,
   getFleetVehicles: jest.fn(),
   addFleetVehicle: jest.fn(),
-  deleteFleetVehicle: jest.fn()
+  deleteFleetVehicle: jest.fn(),
+
+  fleetCANFilters,
+  totalFleetCANFilters,
+  getFleetCANFilters: jest.fn(),
+  addFleetCANFilter: jest.fn(),
+  updateFleetCANFilter: jest.fn(),
+  deleteFleetCANFilter: jest.fn(),
 });

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

@@ -0,0 +1,176 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FleetCANFilterAdd 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"
+          >
+            <form
+              action="{onSubmit}"
+              class="makeStyles-form-5"
+              novalidate=""
+            >
+              <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="name"
+                  id="name-label"
+                >
+                  Fleet Name
+                  <span
+                    aria-hidden="true"
+                    class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
+                  >
+                     
+                    *
+                  </span>
+                </label>
+                <div
+                  class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
+                >
+                  <input
+                    aria-invalid="false"
+                    class="MuiInputBase-input MuiOutlinedInput-input"
+                    id="name"
+                    maxlength="255"
+                    name="name"
+                    readonly=""
+                    required=""
+                    type="text"
+                    value=""
+                  />
+                  <fieldset
+                    aria-hidden="true"
+                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                  >
+                    <legend
+                      class="PrivateNotchedOutline-legendLabelled-66"
+                    >
+                      <span>
+                        Fleet Name
+                         *
+                      </span>
+                    </legend>
+                  </fieldset>
+                </div>
+              </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="canId"
+                  id="canId-label"
+                >
+                  CAN ID
+                  <span
+                    aria-hidden="true"
+                    class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
+                  >
+                     
+                    *
+                  </span>
+                </label>
+                <div
+                  class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
+                >
+                  <input
+                    aria-invalid="false"
+                    class="MuiInputBase-input MuiOutlinedInput-input"
+                    id="canId"
+                    maxlength="255"
+                    name="canId"
+                    required=""
+                    type="text"
+                    value=""
+                  />
+                  <fieldset
+                    aria-hidden="true"
+                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                  >
+                    <legend
+                      class="PrivateNotchedOutline-legendLabelled-66"
+                    >
+                      <span>
+                        CAN ID
+                         *
+                      </span>
+                    </legend>
+                  </fieldset>
+                </div>
+              </div>
+              <div
+                class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
+              >
+                <label
+                  class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined"
+                  data-shrink="false"
+                  for="interval"
+                  id="interval-label"
+                >
+                  Interval
+                </label>
+                <div
+                  class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
+                >
+                  <input
+                    aria-invalid="false"
+                    class="MuiInputBase-input MuiOutlinedInput-input"
+                    id="interval"
+                    maxlength="255"
+                    name="interval"
+                    type="text"
+                    value=""
+                  />
+                  <fieldset
+                    aria-hidden="true"
+                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                  >
+                    <legend
+                      class="PrivateNotchedOutline-legendLabelled-66"
+                    >
+                      <span>
+                        Interval
+                      </span>
+                    </legend>
+                  </fieldset>
+                </div>
+              </div>
+              <button
+                class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-6 MuiButton-containedPrimary MuiButton-fullWidth"
+                tabindex="0"
+                type="submit"
+              >
+                <span
+                  class="MuiButton-label"
+                >
+                  Submit
+                </span>
+                <span
+                  class="MuiTouchRipple-root"
+                />
+              </button>
+            </form>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

src/components/Fleets/Status/CANFilters/Add/index.jsx

@@ -0,0 +1,127 @@
+import React, { useEffect, useRef, useState } from "react";
+import { Redirect, useParams } from "react-router";
+import { Button, TextField } from "@material-ui/core";
+
+import { useUserContext } from "../../../../Contexts/UserContext";
+import { useStatusContext } from "../../../../Contexts/StatusContext";
+import { useFleetContext, FleetProvider } from "../../../../Contexts/FleetContext";
+import useStyles from "../../../../useStyles";
+import { logger } from "../../../../../services/monitoring";
+
+
+const MainForm = () => {
+  const { name } = useParams();
+  const { setMessage, setTitle, setSitePath } = useStatusContext();
+  const { addFleetCANFilter, busy } = useFleetContext();
+  const { token: { idToken: { jwtToken: token } } } = useUserContext();
+  const classes = useStyles();
+  const canIdEl = useRef(null);
+  const intervalEl = useRef(null);
+  const [redirect, setRedirect] = useState(null);
+
+  useEffect(() => {
+    const title = "Add CAN Filter"
+    setTitle(title);
+    setSitePath([
+      {
+        label: `Fleets`,
+        link: "/fleets",
+      },
+      {
+        label: `${name}`,
+        link: `/fleet/${name}`
+      },
+      {
+        label: title
+      },
+    ]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const onSubmit = async (event) => {
+    try {
+      event.preventDefault();
+      const formData = {
+        can_id: canIdEl.current.value,
+        interval: parseInt(intervalEl.current.value)
+      };
+      const result = await addFleetCANFilter(name, formData, token);
+      if (!result || result.error) return;
+
+      setMessage(`Added CAN filter ${result.can_id}`);
+      setRedirect(`/fleet/${name}#filters`);
+    } catch (e) {
+      setMessage(e.message);
+      logger.warn(e.stack);
+    }
+  };
+
+  if (redirect && redirect.length > 0) {
+    return <Redirect to={redirect} />;
+  }
+
+  return (
+    <div className={classes.paper}>
+      <form className={classes.form} noValidate action="{onSubmit}">
+        <TextField
+          id="name"
+          name="name"
+          label="Fleet Name"
+          variant="outlined"
+          margin="normal"
+          inputProps={{
+            maxLength: "255",
+            readOnly: true,
+          }}
+          value={name}
+          required
+          fullWidth
+        />
+        <TextField
+          id="canId"
+          name="canId"
+          label="CAN ID"
+          variant="outlined"
+          margin="normal"
+          inputProps={{
+            maxLength: "255",
+          }}
+          required
+          fullWidth
+          inputRef={canIdEl}
+        />
+        <TextField
+          id="interval"
+          name="interval"
+          label="Interval"
+          variant="outlined"
+          margin="normal"
+          inputProps={{
+            maxLength: "255",
+          }}
+          fullWidth
+          inputRef={intervalEl}
+        />
+        <Button
+          type="submit"
+          disabled={busy}
+          fullWidth
+          variant="contained"
+          color="primary"
+          className={classes.submit}
+          onClick={onSubmit}
+        >
+          {busy ? "Submitting..." : "Submit"}
+        </Button>
+      </form>
+    </div>
+  );
+};
+
+const FleetAddCANFilterForm = (props) => (
+  <FleetProvider>
+    <MainForm {...props} />
+  </FleetProvider>
+);
+
+export default FleetAddCANFilterForm;

src/components/Fleets/Status/CANFilters/Add/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 renderFleetCANFilterAdd = async () => {
+  const { container } = render(
+    <FleetProvider>
+      <StatusProvider>
+        <UserProvider>
+          <BrowserRouter>
+            <MainForm />
+          </BrowserRouter>
+        </UserProvider>
+      </StatusProvider>
+    </FleetProvider>
+  );
+  await waitFor(() => { });
+  return container;
+};
+
+describe("FleetCANFilterAdd", () => {
+  it("Render", async () => {
+    setToken(TEST_AUTH_OBJECT);
+    const container = await renderFleetCANFilterAdd();
+    expect(container).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,403 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FleetCANFiltersTable 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-textJustifyAlign-49 MuiGrid-item MuiGrid-grid-md-4"
+              >
+                <a
+                  class="makeStyles-labelInline-9"
+                  href="/fleet/undefined/filter-add"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeLarge"
+                    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"
+                    />
+                  </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"
+                    >
+                      CAN ID
+                      <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"
+                    >
+                      Interval (ms)
+                      <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"
+                  >
+                    123-456
+                  </td>
+                  <td
+                    class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                  >
+                    789
+                  </td>
+                  <td
+                    class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                  >
+                    <a
+                      class=""
+                      href="/fleet/undefined/filter-update?name=undefined&can_id=123-456&interval=789"
+                      style="margin: 5px;"
+                      title="Update \\"123-456\\""
+                    >
+                      <svg
+                        aria-hidden="true"
+                        aria-label="Update 123-456"
+                        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"
+                >
+                  <td
+                    class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                  >
+                    1
+                  </td>
+                  <td
+                    class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                  >
+                    1000
+                  </td>
+                  <td
+                    class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                  >
+                    <a
+                      class=""
+                      href="/fleet/undefined/filter-update?name=undefined&can_id=1&interval=1000"
+                      style="margin: 5px;"
+                      title="Update \\"1\\""
+                    >
+                      <svg
+                        aria-hidden="true"
+                        aria-label="Update 1"
+                        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"
+                >
+                  <td
+                    class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                  >
+                    1000
+                  </td>
+                  <td
+                    class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                  >
+                    1
+                  </td>
+                  <td
+                    class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                  >
+                    <a
+                      class=""
+                      href="/fleet/undefined/filter-update?name=undefined&can_id=1000&interval=1"
+                      style="margin: 5px;"
+                      title="Update \\"1000\\""
+                    >
+                      <svg
+                        aria-hidden="true"
+                        aria-label="Update 1000"
+                        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
+                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>
+    </div>
+  </div>
+</div>
+`;

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

@@ -0,0 +1,205 @@
+import React, { useEffect, useState } from "react";
+import { Link } from 'react-router-dom';
+import {
+  Grid,
+  Table,
+  TableBody,
+  TableCell,
+  TableFooter,
+  TablePagination,
+  TableRow,
+  Tooltip,
+} from "@material-ui/core";
+import AddCircleIcon from "@material-ui/icons/AddCircle";
+import DeleteIcon from "@material-ui/icons/Delete";
+import EditIcon from '@material-ui/icons/Edit';
+import clsx from "clsx";
+
+import TableHeaderSortable from "../../../../Table/HeaderSortable";
+import { useUserContext } from "../../../../Contexts/UserContext"
+import { useStatusContext } from "../../../../Contexts/StatusContext";
+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: "can_id",
+    label: "CAN ID"
+  },
+  {
+    id: "interval",
+    label: "Interval (ms)"
+  },
+  {
+    id: "",
+    label: "Actions"
+  }
+];
+
+const MainForm = ({ name }) => {
+  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 } = useStatusContext();
+  const { fleetCANFilters, totalFleetCANFilters, getFleetCANFilters, deleteFleetCANFilter } = useFleetContext();
+  const { token: { idToken: { jwtToken: token } }, groups } = useUserContext();
+
+  useEffect(() => {
+    (async () => {
+      try {
+        if (!name || !token) return;
+        await getFleetCANFilters(
+          name,
+          {
+            limit: pageSize,
+            offset: pageSize * pageIndex,
+            order: `${orderBy} ${order}`,
+          },
+          token
+        );
+      } catch (e) {
+        setMessage(e.message);
+        logger.warn(e.stack);
+      }
+    })();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [token, pageIndex, pageSize, orderBy, order]);
+
+  const handleChangePageIndex = (event, newIndex) => {
+    setPageIndex(newIndex);
+  };
+
+  const handleChangePageSize = (event) => {
+    setPageSize(parseInt(event.target.value, 10));
+    setPageIndex(0);
+  };
+
+  const handleSort = (event, property) => {
+    try {
+      if (property === orderBy) {
+        if (order === "asc") {
+          setOrder("desc");
+        } else {
+          setOrder("asc");
+        }
+      } else {
+        setOrderBy(property);
+        setOrder("asc");
+      }
+    } catch (e) {
+      logger.warn(e.stack);
+    }
+  };
+
+  const onDelete = async (can_id) => {
+    try {
+      await deleteFleetCANFilter(name, can_id, token);
+      setMessage(`Deleted ${can_id}`)
+    } catch (e) {
+      setMessage(e.message);
+      logger.warn(e.stack);
+    }
+  };
+
+  const Actions = (row) => {
+    let actions = [];
+    if (hasRole([Roles.CREATE], groups)) {
+      actions.push({
+        tip: `Update "${row.can_id}"`,
+        link: `/fleet/${name}/filter-update?name=${name}&can_id=${row.can_id}&interval=${row.interval}`,
+        icon: <EditIcon aria-label={`Update ${row.can_id}`} />
+      });
+    }
+    if (hasRole([Roles.DELETE], groups)) {
+      actions.push({
+        tip: `Delete "${row.can_id}"`,
+        id: row.can_id,
+        icon: <DeleteIcon aria-label={`Delete ${row.can_id}`} />
+      })
+    }
+    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}>
+        <Grid item md={4} className={classes.textJustifyAlign}>
+          <Link to={`/fleet/${name}/filter-add`} className={classes.labelInline}>
+            <AddCircleIcon fontSize="large" />
+          </Link>
+        </Grid>
+        <Grid item md={8} align="right" className={classes.textCenterAlign}>
+          <SearchField classes={classes} />
+        </Grid>
+      </Grid>
+      <Table>
+        <TableHeaderSortable
+          classes={classes}
+          orderBy={orderBy}
+          order={order}
+          columnData={tableColumns}
+          onSortRequest={handleSort}
+        />
+        <TableBody>
+          {fleetCANFilters.map(row => (
+            <TableRow key={row.can_id}>
+              <TableCell align="center">{row.can_id}</TableCell>
+              <TableCell align="center">{row.interval}</TableCell>
+              <TableCell align="center">{Actions(row)}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+        <TableFooter>
+          <TableRow>
+            <TablePagination
+              rowsPerPageOptions={[5, 10, 25, 100]}
+              colSpan={8}
+              count={totalFleetCANFilters}
+              rowsPerPage={pageSize}
+              page={pageIndex}
+              SelectProps={{
+                inputProps: { "aria-label": "rows per page" },
+                native: true,
+              }}
+              onPageChange={handleChangePageIndex}
+              onRowsPerPageChange={handleChangePageSize}
+            />
+          </TableRow>
+        </TableFooter>
+      </Table>
+    </div >
+  );
+};
+
+const FleetCANFiltersTable = (props) => (
+  <FleetProvider>
+    <MainForm {...props} />
+  </FleetProvider>
+);
+
+export default FleetCANFiltersTable;

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

@@ -0,0 +1,39 @@
+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 { 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 renderFleetCANFiltersTable = async () => {
+  const { container } = render(
+    <FleetProvider>
+      <StatusProvider>
+        <UserProvider>
+          <BrowserRouter>
+            <MainForm />
+          </BrowserRouter>
+        </UserProvider>
+      </StatusProvider>
+    </FleetProvider>
+  );
+  await waitFor(() => { });
+  return container;
+};
+
+describe("FleetCANFiltersTable", () => {
+  it("Render", async () => {
+    setToken(TEST_AUTH_OBJECT);
+    const container = await renderFleetCANFiltersTable();
+    expect(container).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,186 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FleetCANFilterUpdate 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"
+          >
+            <form
+              action="{onSubmit}"
+              class="makeStyles-form-5"
+              novalidate=""
+            >
+              <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="name"
+                  id="name-label"
+                >
+                  Fleet Name
+                  <span
+                    aria-hidden="true"
+                    class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
+                  >
+                     
+                    *
+                  </span>
+                </label>
+                <div
+                  class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
+                >
+                  <input
+                    aria-invalid="false"
+                    class="MuiInputBase-input MuiOutlinedInput-input"
+                    id="name"
+                    maxlength="255"
+                    name="name"
+                    readonly=""
+                    required=""
+                    type="text"
+                    value=""
+                  />
+                  <fieldset
+                    aria-hidden="true"
+                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                  >
+                    <legend
+                      class="PrivateNotchedOutline-legendLabelled-66"
+                    >
+                      <span>
+                        Fleet Name
+                         *
+                      </span>
+                    </legend>
+                  </fieldset>
+                </div>
+              </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="canId"
+                  id="canId-label"
+                >
+                  CAN ID
+                  <span
+                    aria-hidden="true"
+                    class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
+                  >
+                     
+                    *
+                  </span>
+                </label>
+                <div
+                  class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
+                >
+                  <input
+                    aria-invalid="false"
+                    class="MuiInputBase-input MuiOutlinedInput-input"
+                    id="canId"
+                    maxlength="255"
+                    name="canId"
+                    readonly=""
+                    required=""
+                    type="text"
+                    value=""
+                  />
+                  <fieldset
+                    aria-hidden="true"
+                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                  >
+                    <legend
+                      class="PrivateNotchedOutline-legendLabelled-66"
+                    >
+                      <span>
+                        CAN ID
+                         *
+                      </span>
+                    </legend>
+                  </fieldset>
+                </div>
+              </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="interval"
+                  id="interval-label"
+                >
+                  Interval
+                  <span
+                    aria-hidden="true"
+                    class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
+                  >
+                     
+                    *
+                  </span>
+                </label>
+                <div
+                  class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
+                >
+                  <input
+                    aria-invalid="false"
+                    class="MuiInputBase-input MuiOutlinedInput-input"
+                    id="interval"
+                    maxlength="255"
+                    name="interval"
+                    required=""
+                    type="text"
+                    value=""
+                  />
+                  <fieldset
+                    aria-hidden="true"
+                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                  >
+                    <legend
+                      class="PrivateNotchedOutline-legendLabelled-66"
+                    >
+                      <span>
+                        Interval
+                         *
+                      </span>
+                    </legend>
+                  </fieldset>
+                </div>
+              </div>
+              <button
+                class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-6 MuiButton-containedPrimary MuiButton-fullWidth"
+                tabindex="0"
+                type="submit"
+              >
+                <span
+                  class="MuiButton-label"
+                >
+                  Submit
+                </span>
+                <span
+                  class="MuiTouchRipple-root"
+                />
+              </button>
+            </form>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

src/components/Fleets/Status/CANFilters/Update/index.jsx

@@ -0,0 +1,133 @@
+import React, { useEffect, useRef, useState } from "react";
+import { Redirect, useParams } from "react-router";
+import { useLocation } from "react-router-dom";
+import { Button, TextField } from "@material-ui/core";
+
+import { useUserContext } from "../../../../Contexts/UserContext";
+import { useStatusContext } from "../../../../Contexts/StatusContext";
+import { useFleetContext, FleetProvider } from "../../../../Contexts/FleetContext";
+import useStyles from "../../../../useStyles";
+import { logger } from "../../../../../services/monitoring";
+
+
+const MainForm = () => {
+  const { name } = useParams();
+  const { setMessage, setTitle, setSitePath } = useStatusContext();
+  const { updateFleetCANFilter, busy } = useFleetContext();
+  const { token: { idToken: { jwtToken: token } } } = useUserContext();
+  const classes = useStyles();
+  const intervalEl = useRef(null);
+  const [redirect, setRedirect] = useState(null);
+  const queries = new URLSearchParams(useLocation().search);
+  const canID = queries.get("can_id") ?? "";
+  const interval = queries.get("interval") ?? "";
+
+  useEffect(() => {
+    const title = "Update CAN Filter"
+    setTitle(title);
+    setSitePath([
+      {
+        label: `Fleets`,
+        link: "/fleets",
+      },
+      {
+        label: `${name}`,
+        link: `/fleet/${name}`,
+      },
+      {
+        label: title
+      },
+    ]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const onSubmit = async (event) => {
+    try {
+      event.preventDefault();
+      const formData = {
+        can_id: canID,
+        interval: parseInt(intervalEl.current.value)
+      };
+      const result = await updateFleetCANFilter(name, canID, formData, token);
+      if (!result || result.error) return;
+
+      setMessage(`Updated CAN filter ${result.can_id}`);
+      setRedirect(`/fleet/${name}#filters`);
+    } catch (e) {
+      setMessage(e.message);
+      logger.warn(e.stack);
+    }
+  };
+
+  if (redirect && redirect.length > 0) {
+    return <Redirect to={redirect} />;
+  }
+
+  return (
+    <div className={classes.paper}>
+      <form className={classes.form} noValidate action="{onSubmit}">
+        <TextField
+          id="name"
+          name="name"
+          label="Fleet Name"
+          variant="outlined"
+          margin="normal"
+          inputProps={{
+            maxLength: "255",
+            readOnly: true,
+          }}
+          value={name}
+          required
+          fullWidth
+        />
+        <TextField
+          id="canId"
+          name="canId"
+          label="CAN ID"
+          variant="outlined"
+          margin="normal"
+          inputProps={{
+            maxLength: "255",
+            readOnly: true,
+          }}
+          value={canID}
+          required
+          fullWidth
+        />
+        <TextField
+          id="interval"
+          name="interval"
+          label="Interval"
+          variant="outlined"
+          margin="normal"
+          inputProps={{
+            maxLength: "255",
+          }}
+          defaultValue={interval}
+          required
+          fullWidth
+          inputRef={intervalEl}
+        />
+        <Button
+          type="submit"
+          disabled={busy}
+          fullWidth
+          variant="contained"
+          color="primary"
+          className={classes.submit}
+          onClick={onSubmit}
+        >
+          {busy ? "Submitting..." : "Submit"}
+        </Button>
+      </form>
+    </div>
+  );
+};
+
+const FleetCANFilterUpdateForm = (props) => (
+  <FleetProvider>
+    <MainForm {...props} />
+  </FleetProvider>
+);
+
+export default FleetCANFilterUpdateForm;

src/components/Fleets/Status/CANFilters/Update/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 renderFleetCANFilterUpdate = async () => {
+  const { container } = render(
+    <FleetProvider>
+      <StatusProvider>
+        <UserProvider>
+          <BrowserRouter>
+            <MainForm />
+          </BrowserRouter>
+        </UserProvider>
+      </StatusProvider>
+    </FleetProvider>
+  );
+  await waitFor(() => { });
+  return container;
+};
+
+describe("FleetCANFilterUpdate", () => {
+  it("Render", async () => {
+    setToken(TEST_AUTH_OBJECT);
+    const container = await renderFleetCANFilterUpdate();
+    expect(container).toMatchSnapshot();
+  });
+});

src/components/Fleets/Status/CANFiltersTab.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 FleetCANFiltersTable from "./CANFilters/Table";
+import useStyles from "../../useStyles";
+
+const FleetCANFiltersTab = () => {
+  const { name } = useParams();
+  const classes = useStyles();
+
+  return (
+    <div className={clsx(classes.paper, classes.tableSize)}>
+      <Typography variant="h6">CAN Filters</Typography>
+      <FleetCANFiltersTable name={name} classes={classes} />
+    </div >
+  );
+};
+
+export default FleetCANFiltersTab;

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

@@ -0,0 +1,31 @@
+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 { BrowserRouter } from "react-router-dom";
+
+import { setToken } from "../../Contexts/UserContext";
+import { TEST_AUTH_OBJECT } from "../../../utils/testing";
+import CANFiltersTab from "./CANFiltersTab"
+
+const renderCANFitlersTab = async () => {
+  const { container } = render(
+    <BrowserRouter>
+      <CANFiltersTab name="US-TEST" />
+    </BrowserRouter>
+  );
+  await waitFor(() => { });
+  return container;
+};
+
+describe("CANFiltersTab", () => {
+  it("Render", async () => {
+    setToken(TEST_AUTH_OBJECT);
+    const container = await renderCANFitlersTab();
+    expect(container).toMatchSnapshot();
+  });
+});

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

@@ -3,13 +3,16 @@
 exports[`FleetVehicleAdd Render 1`] = `
 <div>
   <div
-    data-testid="mocked-canfiltersprovider"
+    data-testid="mocked-fleetprovider"
   >
     <div
       data-testid="mocked-statusprovider"
     >
       <div
         data-testid="mocked-userprovider"
+      >
+        <div
+          data-testid="mocked-fleetprovider"
         >
           <div
             class="makeStyles-paper-3"
@@ -83,7 +86,7 @@ exports[`FleetVehicleAdd Render 1`] = `
           </div>
         </div>
       </div>
-    f
+    </div>
   </div>
 </div>
 `;

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

@@ -1,27 +1,27 @@
-jest.mock("../../../../Contexts/CANFiltersContext");
+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 { CANFiltersProvider } from "../../../../Contexts/CANFiltersContext";
+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 renderCANFiltersAdd = async () => {
+const renderFleetVehicleAdd = async () => {
   const { container } = render(
-    <CANFiltersProvider>
+    <FleetProvider>
       <StatusProvider>
         <UserProvider>
           <BrowserRouter>
             <MainForm />
           </BrowserRouter>
         </UserProvider>
-      </StatusProvider>f
+      </StatusProvider>
-    </CANFiltersProvider>
+    </FleetProvider>
   );
   await waitFor(() => { });
   return container;
@@ -30,7 +30,7 @@ const renderCANFiltersAdd = async () => {
 describe("FleetVehicleAdd", () => {
   it("Render", async () => {
     setToken(TEST_AUTH_OBJECT);
-    const container = await renderCANFiltersAdd();
+    const container = await renderFleetVehicleAdd();
     expect(container).toMatchSnapshot();
   });
 });

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

@@ -47,7 +47,7 @@ const MainForm = ({ name }) => {
   useEffect(() => {
     (async () => {
       try {
-        if (!token) return;
+        if (!name || !token) return;
         await getFleetVehicles(
           name,
           {

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

@@ -14,7 +14,7 @@ import { UserProvider, setToken } from "../../../../Contexts/UserContext";
 import { TEST_AUTH_OBJECT } from "../../../../../utils/testing";
 import MainForm from "./index"
 
-const renderFleetTable = async () => {
+const renderFleetVehiclesTable = async () => {
   const { container } = render(
     <FleetProvider>
       <StatusProvider>
@@ -33,7 +33,7 @@ const renderFleetTable = async () => {
 describe("FleetVehiclesTable", () => {
   it("Render", async () => {
     setToken(TEST_AUTH_OBJECT);
-    const container = await renderFleetTable();
+    const container = await renderFleetVehiclesTable();
     expect(container).toMatchSnapshot();
   });
 });

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

@@ -0,0 +1,400 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CANFiltersTab Render 1`] = `
+<div>
+  <div
+    class="makeStyles-paper-3 makeStyles-tableSize-55"
+  >
+    <h6
+      class="MuiTypography-root MuiTypography-h6"
+    >
+      CAN Filters
+    </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-textJustifyAlign-49 MuiGrid-item MuiGrid-grid-md-4"
+          >
+            <a
+              class="makeStyles-labelInline-9"
+              href="/fleet/undefined/filter-add"
+            >
+              <svg
+                aria-hidden="true"
+                class="MuiSvgIcon-root MuiSvgIcon-fontSizeLarge"
+                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"
+                />
+              </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"
+                >
+                  CAN ID
+                  <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"
+                >
+                  Interval (ms)
+                  <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"
+              >
+                123-456
+              </td>
+              <td
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+              >
+                789
+              </td>
+              <td
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+              >
+                <a
+                  class=""
+                  href="/fleet/undefined/filter-update?name=undefined&can_id=123-456&interval=789"
+                  style="margin: 5px;"
+                  title="Update \\"123-456\\""
+                >
+                  <svg
+                    aria-hidden="true"
+                    aria-label="Update 123-456"
+                    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"
+            >
+              <td
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+              >
+                1
+              </td>
+              <td
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+              >
+                1000
+              </td>
+              <td
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+              >
+                <a
+                  class=""
+                  href="/fleet/undefined/filter-update?name=undefined&can_id=1&interval=1000"
+                  style="margin: 5px;"
+                  title="Update \\"1\\""
+                >
+                  <svg
+                    aria-hidden="true"
+                    aria-label="Update 1"
+                    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"
+            >
+              <td
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+              >
+                1000
+              </td>
+              <td
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+              >
+                1
+              </td>
+              <td
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+              >
+                <a
+                  class=""
+                  href="/fleet/undefined/filter-update?name=undefined&can_id=1000&interval=1"
+                  style="margin: 5px;"
+                  title="Update \\"1000\\""
+                >
+                  <svg
+                    aria-hidden="true"
+                    aria-label="Update 1000"
+                    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
+            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>
+</div>
+`;

src/components/Fleets/Status/index.jsx

@@ -5,12 +5,13 @@ import clsx from "clsx";
 import { Box, Tab, Tabs } from "@material-ui/core";
 
 import FleetVehiclesTab from "./VehiclesTab";
+import FleetCANFiltersTab from "./CANFiltersTab";
 import TabPanel from "../../Controls/TabPanel";
 import { useStatusContext } from "../../Contexts/StatusContext";
 import useStyles from "../../useStyles";
 
 const tabHashes = [
-  "updates",
+  "vehicles",
   "filters"
 ]
 
@@ -60,7 +61,7 @@ const FleetStatus = () => {
       </TabPanel>
 
       <TabPanel value={tabIndex} index={1}>
-        {/* <CANFiltersTab /> */}
+        <FleetCANFiltersTab />
       </TabPanel>
     </div >
   );

src/components/Routes/SiteRoutes.jsx

@@ -16,8 +16,10 @@ const Datascope = React.lazy(() => import("../Datascope/Home"));
 const FleetsList = React.lazy(() => import("../Fleets/Table"));
 const FleetStatus = React.lazy(() => import("../Fleets/Status"));
 const FleetAddForm = React.lazy(() => import("../Fleets/Add"));
-const FleetUpdateForm = React.lazy(() => import("../Fleets/Update"))
+const FleetUpdateForm = React.lazy(() => import("../Fleets/Update"));
-const FleetAddVehicleForm = React.lazy(() => import("../Fleets/Status/Vehicles/Add"))
+const FleetAddVehicleForm = React.lazy(() => import("../Fleets/Status/Vehicles/Add"));
+const FleetAddCANFilterForm = React.lazy(() => import("../Fleets/Status/CANFilters/Add"));
+const FleetUpdateCANFilterForm = React.lazy(() => import("../Fleets/Status/CANFilters/Update"));
 const Home = React.lazy(() => import("../Home"));
 const Manifests = React.lazy(() => import("../Manifest/List"));
 const ManifestDeploy = React.lazy(() => import("../Manifest/Deploy"));
@@ -88,6 +90,22 @@ const SiteRoutes = () => {
           groups={groups}
           roles={[Roles.READ, Roles.CREATE]}
         />
+        <AuthRoute
+          path="/fleet/:name/filter-add"
+          render={() => <FleetAddCANFilterForm />}
+          type={TYPES.PROTECTED}
+          token={token}
+          groups={groups}
+          roles={[Roles.READ, Roles.CREATE]}
+        />
+        <AuthRoute
+          path="/fleet/:name/filter-update"
+          render={() => <FleetUpdateCANFilterForm />}
+          type={TYPES.PROTECTED}
+          token={token}
+          groups={groups}
+          roles={[Roles.READ, Roles.CREATE]}
+        />
         <AuthRoute
           path="/fleet/:name"
           render={() => <FleetStatus />}

src/services/__mocks__/fleetsAPI.js

@@ -21,6 +21,21 @@ const fleets = [
 
 const vehicles = ["USWESTVIN12345678", "USWESTVIN12345679", "USWESTVIN12345670"];
 
+const filters = [
+  {
+    can_id: "123-456",
+    interval: 789
+  },
+  {
+    can_id: "1",
+    interval: 1000
+  },
+  {
+    can_id: "1000",
+    interval: 1
+  }
+]
+
 const fleetsAPI = {
   addFleet: async (fleet, token) => {
     fleets.push(fleet);
@@ -50,7 +65,25 @@ const fleetsAPI = {
   deleteFleetVehicle: async (name, vehicle, token) => {
     const index = vehicles.findIndex(element => element === vehicle.vin);
     if (index >= 0) vehicles.splice(index, 1);
-    return vehicle;
+    return vehicle.vin;
+  },
+
+  getFleetCANFilters: async (name, search, token) => {
+    return { data: filters };
+  },
+  addFleetCANFilter: async (name, filter, token) => {
+    filters.push(filter);
+    return filter;
+  },
+  updateFleetCANFilter: async (name, can_id, filter, token) => {
+    const index = filters.findIndex(element => element.can_id === can_id);
+    if (index >= 0) filters[index] = filter;
+    return filter;
+  },
+  deleteFleetCANFilter: async (name, can_id, token) => {
+    const index = filters.findIndex(element => element.can_id === can_id);
+    if (index >= 0) vehicles.splice(index, 1);
+    return can_id;
   }
 };
 

src/services/fleetsAPI.js

@@ -72,6 +72,44 @@ const fleetsAPI = {
         getAuthHeaderOptions(token)
       )
     }).then(fetchRespHandler),
+
+  getFleetCANFilters: async (name, search, token) =>
+    fetch(addQueryParams(`${API_ENDPOINT}/fleet/${name}/filters`, search), {
+      method: "GET",
+      headers: Object.assign(
+        { "Content-Type": "application/json" },
+        getAuthHeaderOptions(token)
+      )
+    }).then(fetchRespHandler),
+
+  addFleetCANFilter: async (name, filter, token) =>
+    fetch(`${API_ENDPOINT}/fleet/${name}/filter`, {
+      method: "POST",
+      headers: Object.assign(
+        { "Content-Type": "application/json" },
+        getAuthHeaderOptions(token)
+      ),
+      body: JSON.stringify(filter)
+    }).then(fetchRespHandler),
+
+  updateFleetCANFilter: async (name, can_id, filter, token) =>
+    fetch(`${API_ENDPOINT}/fleet/${name}/filter/${can_id}`, {
+      method: "PUT",
+      headers: Object.assign(
+        { "Content-Type": "application/json" },
+        getAuthHeaderOptions(token)
+      ),
+      body: JSON.stringify(filter)
+    }).then(fetchRespHandler),
+
+  deleteFleetCANFilter: async (name, can_id, token) =>
+    fetch(`${API_ENDPOINT}/fleet/${name}/filter/${can_id}`, {
+      method: "DELETE",
+      headers: Object.assign(
+        { "Content-Type": "application/json" },
+        getAuthHeaderOptions(token)
+      )
+    }).then(fetchRespHandler),
 };
 
 export default fleetsAPI;