CEC-2587 Add edge_mask field (#217)

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

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