Merge branch 'release/0.0.3'

.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

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>

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={{

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"
                   >

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>
           ))}

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>

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");
@@ -95,7 +96,7 @@ const MainForm = () => {
         <TextField
           id="interval"
           name="interval"
-          label="Interval"
+          label="Interval (ms)"
           variant="outlined"
           margin="normal"
           inputProps={{

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>
   );

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"
               >

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>

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={{

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"
                   >

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>
           ))}

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>

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={{

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"
               >

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 ""
+}