From 19cd5f6dd7cbe8ec8810e8ce64e2fa364628400b Mon Sep 17 00:00:00 2001
From: jwu-fisker <jwu@fiskerinc.com>
Date: Thu, 6 Oct 2022 15:11:23 -0700
Subject: [PATCH 1/4] Update stage dashboard URL

---
 .env.stg | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.env.stg b/.env.stg
index 224b2c2..46937f3 100644
--- a/.env.stg
+++ b/.env.stg
@@ -2,4 +2,4 @@ REACT_APP_AUTH_SERVICE_URL=https://stg-gw.cloud.fiskerinc.com/compute_auth
 REACT_APP_CERT_SERVICE_URL=https://stg-gw.cloud.fiskerinc.com/certificate
 REACT_APP_UPLOAD_SERVICE_URL=https://stg-gw.cloud.fiskerinc.com/ota_update
 REACT_APP_AUTH_CALLBACK_URL=https://stg-ota-admin.cloud.fiskerinc.com
-REACT_APP_SUPERSET_URL=https://stg-superset.cloud.fiskerinc.com/superset/dashboard/6/?native_filters_key=XBwRgJIvmxhqBhqlz45kuTnXc1iUY_M_ovzXCzXy5_l-AOFAXEaGLWpYIsfrEHGR
+REACT_APP_SUPERSET_URL=https://stg-superset.cloud.fiskerinc.com/superset/dashboard/11/?native_filters_key=Vsj5MqKEPxPnyCgVzFWSSI3E_KgEJxD30afm_URlamPqBi6ypNKsaQ90YhQ6Fc54

From 3d06baa2729453e86e4d0867bb253ed80d72348b Mon Sep 17 00:00:00 2001
From: arpanetus <arpanetus@protonmail.com>
Date: Tue, 11 Oct 2022 21:54:16 +0600
Subject: [PATCH 2/4] CEC-2441 Add ms suffix to interval (#218)

* fix/fleet-vehicles-search

* fix/fleet-name-update

* Add the fix
---
 .../CANFilter/Add/__snapshots__/index.test.jsx.snap           | 4 ++--
 src/components/CANFilter/Add/index.jsx                        | 2 +-
 .../CANFilter/Update/__snapshots__/index.test.jsx.snap        | 4 ++--
 src/components/CANFilter/Update/index.jsx                     | 2 +-
 .../Status/CANFilters/Add/__snapshots__/index.test.jsx.snap   | 4 ++--
 src/components/Fleets/Status/CANFilters/Add/index.jsx         | 2 +-
 .../CANFilters/Update/__snapshots__/index.test.jsx.snap       | 4 ++--
 src/components/Fleets/Status/CANFilters/Update/index.jsx      | 2 +-
 8 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/components/CANFilter/Add/__snapshots__/index.test.jsx.snap b/src/components/CANFilter/Add/__snapshots__/index.test.jsx.snap
index fff30da..2d2d5b1 100644
--- a/src/components/CANFilter/Add/__snapshots__/index.test.jsx.snap
+++ b/src/components/CANFilter/Add/__snapshots__/index.test.jsx.snap
@@ -124,7 +124,7 @@ exports[`CANFiltersAdd Render 1`] = `
                   for="interval"
                   id="interval-label"
                 >
-                  Interval
+                  Interval (ms)
                 </label>
                 <div
                   class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
@@ -146,7 +146,7 @@ exports[`CANFiltersAdd Render 1`] = `
                       class="PrivateNotchedOutline-legendLabelled-0"
                     >
                       <span>
-                        Interval
+                        Interval (ms)
                       </span>
                     </legend>
                   </fieldset>
diff --git a/src/components/CANFilter/Add/index.jsx b/src/components/CANFilter/Add/index.jsx
index 2e06d69..5408720 100644
--- a/src/components/CANFilter/Add/index.jsx
+++ b/src/components/CANFilter/Add/index.jsx
@@ -93,7 +93,7 @@ const MainForm = () => {
         <TextField
           id="interval"
           name="interval"
-          label="Interval"
+          label="Interval (ms)"
           variant="outlined"
           margin="normal"
           inputProps={{
diff --git a/src/components/CANFilter/Update/__snapshots__/index.test.jsx.snap b/src/components/CANFilter/Update/__snapshots__/index.test.jsx.snap
index f7f60a2..4f66541 100644
--- a/src/components/CANFilter/Update/__snapshots__/index.test.jsx.snap
+++ b/src/components/CANFilter/Update/__snapshots__/index.test.jsx.snap
@@ -125,7 +125,7 @@ exports[`CANFiltersUpdate Render 1`] = `
                   for="interval"
                   id="interval-label"
                 >
-                  Interval
+                  Interval (ms)
                   <span
                     aria-hidden="true"
                     class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
@@ -155,7 +155,7 @@ exports[`CANFiltersUpdate Render 1`] = `
                       class="PrivateNotchedOutline-legendLabelled-0"
                     >
                       <span>
-                        Interval
+                        Interval (ms)
                          *
                       </span>
                     </legend>
diff --git a/src/components/CANFilter/Update/index.jsx b/src/components/CANFilter/Update/index.jsx
index 52464a9..8b17515 100644
--- a/src/components/CANFilter/Update/index.jsx
+++ b/src/components/CANFilter/Update/index.jsx
@@ -95,7 +95,7 @@ const MainForm = () => {
         <TextField
           id="interval"
           name="interval"
-          label="Interval"
+          label="Interval (ms)"
           variant="outlined"
           margin="normal"
           inputProps={{
diff --git a/src/components/Fleets/Status/CANFilters/Add/__snapshots__/index.test.jsx.snap b/src/components/Fleets/Status/CANFilters/Add/__snapshots__/index.test.jsx.snap
index c6d26c2..bc32912 100644
--- a/src/components/Fleets/Status/CANFilters/Add/__snapshots__/index.test.jsx.snap
+++ b/src/components/Fleets/Status/CANFilters/Add/__snapshots__/index.test.jsx.snap
@@ -124,7 +124,7 @@ exports[`FleetCANFilterAdd Render 1`] = `
                   for="interval"
                   id="interval-label"
                 >
-                  Interval
+                  Interval (ms)
                 </label>
                 <div
                   class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
@@ -146,7 +146,7 @@ exports[`FleetCANFilterAdd Render 1`] = `
                       class="PrivateNotchedOutline-legendLabelled-0"
                     >
                       <span>
-                        Interval
+                        Interval (ms)
                       </span>
                     </legend>
                   </fieldset>
diff --git a/src/components/Fleets/Status/CANFilters/Add/index.jsx b/src/components/Fleets/Status/CANFilters/Add/index.jsx
index f9172f6..8a2b3ef 100644
--- a/src/components/Fleets/Status/CANFilters/Add/index.jsx
+++ b/src/components/Fleets/Status/CANFilters/Add/index.jsx
@@ -93,7 +93,7 @@ const MainForm = () => {
         <TextField
           id="interval"
           name="interval"
-          label="Interval"
+          label="Interval (ms)"
           variant="outlined"
           margin="normal"
           inputProps={{
diff --git a/src/components/Fleets/Status/CANFilters/Update/__snapshots__/index.test.jsx.snap b/src/components/Fleets/Status/CANFilters/Update/__snapshots__/index.test.jsx.snap
index 1fb8994..82e34d2 100644
--- a/src/components/Fleets/Status/CANFilters/Update/__snapshots__/index.test.jsx.snap
+++ b/src/components/Fleets/Status/CANFilters/Update/__snapshots__/index.test.jsx.snap
@@ -125,7 +125,7 @@ exports[`FleetCANFilterUpdate Render 1`] = `
                   for="interval"
                   id="interval-label"
                 >
-                  Interval
+                  Interval (ms)
                   <span
                     aria-hidden="true"
                     class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
@@ -155,7 +155,7 @@ exports[`FleetCANFilterUpdate Render 1`] = `
                       class="PrivateNotchedOutline-legendLabelled-0"
                     >
                       <span>
-                        Interval
+                        Interval (ms)
                          *
                       </span>
                     </legend>
diff --git a/src/components/Fleets/Status/CANFilters/Update/index.jsx b/src/components/Fleets/Status/CANFilters/Update/index.jsx
index 8722304..7e5d2d1 100644
--- a/src/components/Fleets/Status/CANFilters/Update/index.jsx
+++ b/src/components/Fleets/Status/CANFilters/Update/index.jsx
@@ -97,7 +97,7 @@ const MainForm = () => {
         <TextField
           id="interval"
           name="interval"
-          label="Interval"
+          label="Interval (ms)"
           variant="outlined"
           margin="normal"
           inputProps={{

From 131c97fa7b6eab5d65fb9ce0841060c8f29c274f Mon Sep 17 00:00:00 2001
From: arpanetus <arpanetus@protonmail.com>
Date: Fri, 14 Oct 2022 19:35:58 +0600
Subject: [PATCH 3/4] CEC-2587 Add edge_mask field (#217)

---
 .../Table/__snapshots__/index.test.jsx.snap   | 32 +++++++++++++++++++
 src/components/CANFilter/Table/index.jsx      | 10 ++++++
 src/components/CANFilter/Update/index.jsx     |  1 +
 .../__snapshots__/CANFiltersTab.test.jsx.snap | 32 +++++++++++++++++++
 .../Table/__snapshots__/index.test.jsx.snap   | 32 +++++++++++++++++++
 .../Fleets/Status/CANFilters/Table/index.jsx  |  6 ++++
 .../__snapshots__/CANFiltersTab.test.jsx.snap | 32 +++++++++++++++++++
 src/utils/strings.js                          | 13 ++++++++
 8 files changed, 158 insertions(+)
 create mode 100644 src/utils/strings.js

diff --git a/src/components/CANFilter/Table/__snapshots__/index.test.jsx.snap b/src/components/CANFilter/Table/__snapshots__/index.test.jsx.snap
index 7c01ca1..00fb3e3 100644
--- a/src/components/CANFilter/Table/__snapshots__/index.test.jsx.snap
+++ b/src/components/CANFilter/Table/__snapshots__/index.test.jsx.snap
@@ -172,6 +172,29 @@ exports[`CANFiltersTable Render 1`] = `
                       </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"
+                    >
+                      Edge mask
+                      <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"
@@ -203,6 +226,9 @@ exports[`CANFiltersTable Render 1`] = `
                       href="/fleet/undefined"
                     />
                   </td>
+                  <td
+                    class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                  />
                   <td
                     class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
                   >
@@ -263,6 +289,9 @@ exports[`CANFiltersTable Render 1`] = `
                       href="/fleet/undefined"
                     />
                   </td>
+                  <td
+                    class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                  />
                   <td
                     class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
                   >
@@ -323,6 +352,9 @@ exports[`CANFiltersTable Render 1`] = `
                       href="/fleet/undefined"
                     />
                   </td>
+                  <td
+                    class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                  />
                   <td
                     class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
                   >
diff --git a/src/components/CANFilter/Table/index.jsx b/src/components/CANFilter/Table/index.jsx
index 55d985d..9068090 100644
--- a/src/components/CANFilter/Table/index.jsx
+++ b/src/components/CANFilter/Table/index.jsx
@@ -29,6 +29,7 @@ import SearchField from "../../Controls/SearchField";
 import { logger } from "../../../services/monitoring";
 import { Roles, hasRole } from "../../../utils/roles";
 import {useLocalStorage} from "../../useLocalStorage";
+import {trimIfMoreThan} from "../../../utils/strings";
 
 const tableColumns = [
   {
@@ -43,6 +44,10 @@ const tableColumns = [
     id: "fleet",
     label: "Fleet"
   },
+  {
+    id: "edge_mask",
+    label: "Edge mask"
+  },
   {
     id: "",
     label: "Actions"
@@ -121,6 +126,10 @@ const MainForm = ({ vin }) => {
   };
 
   const Actions = (row) => {
+    if(row.fleet != null) {
+      return
+    }
+
     let actions = [];
     if (hasRole([Roles.CREATE], groups)) {
       actions.push({
@@ -187,6 +196,7 @@ const MainForm = ({ vin }) => {
               <TableCell align="center">
                 <Link to={`/fleet/${row.fleet}`}>{row.fleet}</Link>
               </TableCell>
+              <TableCell align="center">{trimIfMoreThan(row.edge_mask, 15, "...")}</TableCell>
               <TableCell align="center">{Actions(row)}</TableCell>
             </TableRow>
           ))}
diff --git a/src/components/CANFilter/Update/index.jsx b/src/components/CANFilter/Update/index.jsx
index 8b17515..5e3226b 100644
--- a/src/components/CANFilter/Update/index.jsx
+++ b/src/components/CANFilter/Update/index.jsx
@@ -24,6 +24,7 @@ const MainForm = () => {
   const vin = queries.get("vin") ?? ""
   const canID = queries.get("can_id") ?? ""
   const interval = queries.get("interval") ?? ""
+  // const edge_mask = queries.get("edge_mask") ?? ""
 
   useEffect(() => {
     setTitle("Update CAN Filter");
diff --git a/src/components/Cars/Status/__snapshots__/CANFiltersTab.test.jsx.snap b/src/components/Cars/Status/__snapshots__/CANFiltersTab.test.jsx.snap
index bf2a936..da44961 100644
--- a/src/components/Cars/Status/__snapshots__/CANFiltersTab.test.jsx.snap
+++ b/src/components/Cars/Status/__snapshots__/CANFiltersTab.test.jsx.snap
@@ -171,6 +171,29 @@ exports[`CANFiltersTab Render 1`] = `
                   </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"
+                >
+                  Edge mask
+                  <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"
@@ -202,6 +225,9 @@ exports[`CANFiltersTab Render 1`] = `
                   href="/fleet/undefined"
                 />
               </td>
+              <td
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+              />
               <td
                 class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
               >
@@ -262,6 +288,9 @@ exports[`CANFiltersTab Render 1`] = `
                   href="/fleet/undefined"
                 />
               </td>
+              <td
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+              />
               <td
                 class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
               >
@@ -322,6 +351,9 @@ exports[`CANFiltersTab Render 1`] = `
                   href="/fleet/undefined"
                 />
               </td>
+              <td
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+              />
               <td
                 class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
               >
diff --git a/src/components/Fleets/Status/CANFilters/Table/__snapshots__/index.test.jsx.snap b/src/components/Fleets/Status/CANFilters/Table/__snapshots__/index.test.jsx.snap
index 6632c33..6baadf0 100644
--- a/src/components/Fleets/Status/CANFilters/Table/__snapshots__/index.test.jsx.snap
+++ b/src/components/Fleets/Status/CANFilters/Table/__snapshots__/index.test.jsx.snap
@@ -150,6 +150,29 @@ exports[`FleetCANFiltersTable Render 1`] = `
                       </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"
+                    >
+                      Edge mask
+                      <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"
@@ -174,6 +197,9 @@ exports[`FleetCANFiltersTable Render 1`] = `
                   >
                     789
                   </td>
+                  <td
+                    class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                  />
                   <td
                     class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
                   >
@@ -227,6 +253,9 @@ exports[`FleetCANFiltersTable Render 1`] = `
                   >
                     1000
                   </td>
+                  <td
+                    class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                  />
                   <td
                     class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
                   >
@@ -280,6 +309,9 @@ exports[`FleetCANFiltersTable Render 1`] = `
                   >
                     1
                   </td>
+                  <td
+                    class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                  />
                   <td
                     class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
                   >
diff --git a/src/components/Fleets/Status/CANFilters/Table/index.jsx b/src/components/Fleets/Status/CANFilters/Table/index.jsx
index 07c51cf..e9eb631 100644
--- a/src/components/Fleets/Status/CANFilters/Table/index.jsx
+++ b/src/components/Fleets/Status/CANFilters/Table/index.jsx
@@ -24,6 +24,7 @@ import SearchField from "../../../../Controls/SearchField";
 import { logger } from "../../../../../services/monitoring";
 import { Roles, hasRole } from "../../../../../utils/roles";
 import {useLocalStorage} from "../../../../useLocalStorage";
+import {trimIfMoreThan} from "../../../../../utils/strings"
 
 const tableColumns = [
   {
@@ -34,6 +35,10 @@ const tableColumns = [
     id: "interval",
     label: "Interval (ms)"
   },
+  {
+    id: "edge_mask",
+    label: "Edge mask"
+  },
   {
     id: "",
     label: "Actions"
@@ -173,6 +178,7 @@ const MainForm = ({ name }) => {
             <TableRow key={row.can_id}>
               <TableCell align="center">{row.can_id}</TableCell>
               <TableCell align="center">{row.interval}</TableCell>
+              <TableCell align="center">{trimIfMoreThan(row.edge_mask, 15, "...")}</TableCell>
               <TableCell align="center">{Actions(row)}</TableCell>
             </TableRow>
           ))}
diff --git a/src/components/Fleets/Status/__snapshots__/CANFiltersTab.test.jsx.snap b/src/components/Fleets/Status/__snapshots__/CANFiltersTab.test.jsx.snap
index 392115a..27c2794 100644
--- a/src/components/Fleets/Status/__snapshots__/CANFiltersTab.test.jsx.snap
+++ b/src/components/Fleets/Status/__snapshots__/CANFiltersTab.test.jsx.snap
@@ -149,6 +149,29 @@ exports[`CANFiltersTab Render 1`] = `
                   </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"
+                >
+                  Edge mask
+                  <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"
@@ -173,6 +196,9 @@ exports[`CANFiltersTab Render 1`] = `
               >
                 789
               </td>
+              <td
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+              />
               <td
                 class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
               >
@@ -226,6 +252,9 @@ exports[`CANFiltersTab Render 1`] = `
               >
                 1000
               </td>
+              <td
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+              />
               <td
                 class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
               >
@@ -279,6 +308,9 @@ exports[`CANFiltersTab Render 1`] = `
               >
                 1
               </td>
+              <td
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+              />
               <td
                 class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
               >
diff --git a/src/utils/strings.js b/src/utils/strings.js
new file mode 100644
index 0000000..38df487
--- /dev/null
+++ b/src/utils/strings.js
@@ -0,0 +1,13 @@
+export function trimIfMoreThan(maybeString, maxLength = 20, sfx = "") {
+  if (typeof maybeString == "string" && maybeString !== "") {
+    let toAppSfx = sfx
+    let toTrimLnth = maxLength - toAppSfx.length
+    if (maybeString.length <= maxLength) {
+      toAppSfx = ""
+      toTrimLnth = maxLength
+    }
+    return maybeString.substring(0, toTrimLnth) + toAppSfx
+  }
+
+  return ""
+}
\ No newline at end of file

From d9b7793eb516db8220dcbba62f81ca7fb0f35688 Mon Sep 17 00:00:00 2001
From: arpanetus <arpanetus@protonmail.com>
Date: Fri, 14 Oct 2022 19:42:06 +0600
Subject: [PATCH 4/4] CEC-2640 Update online car filter to also include online
 HMIs (#220)

---
 src/components/Cars/List/index.jsx | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/components/Cars/List/index.jsx b/src/components/Cars/List/index.jsx
index 69e5d18..0dbc101 100644
--- a/src/components/Cars/List/index.jsx
+++ b/src/components/Cars/List/index.jsx
@@ -16,6 +16,7 @@ const MainForm = () => {
   const classes = useStyles();
   const [search, setSearch] = useState("");
   const [online, setOnline] = useState(false);
+  const [onlineHMI, setOnlineHMI] = useState(false);
   const { setTitle, setSitePath } = useStatusContext();
   const {
     token: {
@@ -31,6 +32,10 @@ const MainForm = () => {
     setOnline(event.target.checked);
   }
 
+  const handleOnlineHMI = (event) => {
+    setOnlineHMI(event.target.checked);
+  }
+
   useEffect(() => {
     setTitle("Vehicles");
     setSitePath([]);
@@ -58,6 +63,14 @@ const MainForm = () => {
                 />
               } label="Only online" />
             </MenuItem>
+            <MenuItem>
+              <FormControlLabel control={
+                <Checkbox
+                  checked={onlineHMI}
+                  onChange={handleOnlineHMI}
+                />
+              } label="Only online HMI" />
+            </MenuItem>
           </OptionsDropdown>
         </Grid>
         <Grid item md={2} className={classes.textRightAlign} />
@@ -66,7 +79,7 @@ const MainForm = () => {
         classes={classes}
         token={token}
         multiSelect={false}
-        search={{ search, online: online? true : null}}
+        search={{ search, online: online? true : null, online_hmi: onlineHMI? true : null }}
       />
     </div>
   );