CEC-2601 (#204)

src/components/App/__snapshots__/App.test.js.snap

@@ -2434,6 +2434,10 @@ exports[`App Route /package-status authenticated 1`] = `
                       >
                         Updated
                       </th>
+                      <th
+                        class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
+                        scope="col"
+                      />
                     </tr>
                   </thead>
                   <tbody
@@ -2472,6 +2476,26 @@ exports[`App Route /package-status authenticated 1`] = `
                       >
                         7/12/2021 6:22:13 PM
                       </td>
+                      <td
+                        class="MuiTableCell-root MuiTableCell-body"
+                      >
+                        <a
+                          class=""
+                          href="/package-status/1"
+                          title="Send cancel for 1G1FP87S3GN100062"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root"
+                            focusable="false"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"
+                            />
+                          </svg>
+                        </a>
+                      </td>
                     </tr>
                   </tbody>
                   <tfoot
@@ -2482,7 +2506,7 @@ exports[`App Route /package-status authenticated 1`] = `
                     >
                       <td
                         class="MuiTableCell-root MuiTableCell-footer MuiTablePagination-root"
-                        colspan="5"
+                        colspan="6"
                       >
                         <div
                           class="MuiToolbar-root MuiToolbar-regular MuiTablePagination-toolbar MuiToolbar-gutters"

src/components/Cars/Status/__snapshots__/CarUpdatesTab.test.jsx.snap

@@ -149,6 +149,10 @@ exports[`CarUpdatesTab Render 1`] = `
                     </svg>
                   </span>
                 </th>
+                <th
+                  class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
+                  scope="col"
+                />
               </tr>
             </thead>
             <tbody
@@ -162,7 +166,7 @@ exports[`CarUpdatesTab Render 1`] = `
               >
                 <td
                   class="MuiTableCell-root MuiTableCell-footer MuiTablePagination-root"
-                  colspan="5"
+                  colspan="6"
                 >
                   <div
                     class="MuiToolbar-root MuiToolbar-regular MuiTablePagination-toolbar MuiToolbar-gutters"

src/components/Contexts/CarUpdatesContext.jsx

@@ -6,7 +6,6 @@ import { validateStatusMessage } from "../../utils/statusMessage";
 const FINAL_UPDATE_STATES = ["package_install_complete"];
 const CarUpdatesContext = React.createContext();
 
-
 const validateDeployClosure = (data, propertyName, errPfx) => {
   if (data === null) {
     throw new Error("No car update data");
@@ -20,17 +19,16 @@ const validateDeployClosure = (data, propertyName, errPfx) => {
   if (!value || value.length === 0) {
     throw new Error(`${errPfx} are required`);
   }
-}
+};
 
 const validateDeployCarUpdates = (data) => {
-  return validateDeployClosure(data, 'vins', 'Cars')
+  return validateDeployClosure(data, "vins", "Cars");
 };
 
 const validateDeployFleetUpdates = (data) => {
-  return validateDeployClosure(data, 'fleet_names', 'Fleets')
+  return validateDeployClosure(data, "fleet_names", "Fleets");
 };
 
-
 export const CarUpdatesProvider = ({ children }) => {
   const [busy, setBusy] = useState(false);
   const [carUpdates, setCarUpdates] = useState([]);
@@ -61,14 +59,14 @@ export const CarUpdatesProvider = ({ children }) => {
       setBusy(true);
       validateDeployFleetUpdates(data);
       result = await api.createFleetUpdates(data, token);
-      if  (result.error)
+      if (result.error)
         throw new Error(`Deploy fleet updates error. ${result.message}`);
     } finally {
       setBusy(false);
     }
 
     return result;
-  }
+  };
 
   const getCarUpdates = async (search, token) => {
     let result;
@@ -224,12 +222,28 @@ export const CarUpdatesProvider = ({ children }) => {
     return result;
   };
 
+  const cancelUpdate = async (id, token) => {
+    let result;
+
+    try {
+      setBusy(true);
+      result = await api.cancelCarUpdate(id, token);
+      if (result.error)
+        throw new Error(`Cancel car update error. ${result.message}`);
+    } finally {
+      setBusy(false);
+    }
+
+    return result;
+  };
+
   return (
     <CarUpdatesContext.Provider
       value={{
         busy,
         carUpdates,
         totalCarUpdates,
+        cancelUpdate,
         deployCarUpdates,
         deployFleetUpdates,
         getCarUpdates,

src/components/Controls/CarUpdatesTable/index.jsx

@@ -6,8 +6,10 @@ import {
   TableFooter,
   TablePagination,
   TableRow,
+  Tooltip,
 } from "@material-ui/core";
 import { Link } from "react-router-dom";
+import CancelIcon from "@material-ui/icons/Cancel";
 
 import { LocalDateTimeString } from "../../../utils/dates";
 import TableHeaderSortable from "../../Table/HeaderSortable";
@@ -18,7 +20,7 @@ import {
 import { useStatusContext } from "../../Contexts/StatusContext";
 import useStyles from "../../useStyles";
 import { logger } from "../../../services/monitoring";
-import {useLocalStorage} from "../../useLocalStorage";
+import { useLocalStorage } from "../../useLocalStorage";
 
 const tableColumns = [
   {
@@ -41,6 +43,10 @@ const tableColumns = [
     id: "updated_at",
     label: "Updated",
   },
+  {
+    id: "",
+    label: "",
+  },
 ];
 
 const PAGE_SIZE = "CAR_UPDATES_TABLE_PAGE_SIZE";
@@ -51,7 +57,8 @@ const MainForm = ({ vin, token }) => {
   const [pageIndex, setPageIndex] = useState(0);
   const [orderBy, setOrderBy] = useState("id");
   const [order, setOrder] = useState("desc");
-  const { getCarUpdates, carUpdates, totalCarUpdates } = useCarUpdatesContext();
+  const { cancelUpdate, getCarUpdates, carUpdates, totalCarUpdates } =
+    useCarUpdatesContext();
   const { setMessage } = useStatusContext();
 
   useEffect(() => {
@@ -107,6 +114,15 @@ const MainForm = ({ vin, token }) => {
     return "None";
   };
 
+  const sendCancel = async (row) => {
+    try {
+      await cancelUpdate(row.id, token);
+      setMessage(`Sent cancel for ${updateName(row)}`);
+    } catch (e) {
+      setMessage(e.message);
+    }
+  };
+
   return (
     <Table>
       <TableHeaderSortable
@@ -132,6 +148,13 @@ const MainForm = ({ vin, token }) => {
             <TableCell align="center">
               {LocalDateTimeString(row.updated)}
             </TableCell>
+            <TableCell>
+              <Tooltip key={row.vin} title={`Send cancel for ${row.vin}`}>
+                <Link to="#" onClick={() => sendCancel(row)}>
+                  <CancelIcon />
+                </Link>
+              </Tooltip>
+            </TableCell>
           </TableRow>
         ))}
       </TableBody>
@@ -139,7 +162,7 @@ const MainForm = ({ vin, token }) => {
         <TableRow>
           <TablePagination
             rowsPerPageOptions={[5, 10, 25, 100]}
-            colSpan={5}
+            colSpan={6}
             count={totalCarUpdates}
             rowsPerPage={pageSize}
             page={pageIndex}

src/components/Manifest/List/index.jsx

@@ -68,7 +68,7 @@ const MainForm = () => {
   const [orderBy, setOrderBy] = useState("id");
   const [order, setOrder] = useState("asc");
   const [search, setSearch] = useState("");
-  const [showDeleteModal, setShowDeleteModal] = useState(false)
+  const [showDeleteModal, setShowDeleteModal] = useState(false);
   const { getManifests, deleteManifest, manifests, totalManifests } =
     useManifestsContext();
   const { setMessage, setTitle, setSitePath } = useStatusContext();
@@ -181,12 +181,17 @@ const MainForm = () => {
       } else {
         return (
           <div>
-          <Tooltip key={`delete-${action.id}`} title={action.tip}>
+            <Tooltip key={`delete-${action.id}`} title={action.tip}>
-            <Link to="#" onClick={() => onDelete(action.id)}>
+              <Link to="#" onClick={() => onDelete(action.id)}>
-              {action.icon}
+                {action.icon}
-            </Link>
+              </Link>
-          </Tooltip>
+            </Tooltip>
-          <DeleteConfirmation message={action.id} open={showDeleteModal} close={() => setShowDeleteModal(false)} deleteFunction={() => onDelete(action.id)} />
+            <DeleteConfirmation
+              message={action.id}
+              open={showDeleteModal}
+              close={() => setShowDeleteModal(false)}
+              deleteFunction={() => onDelete(action.id)}
+            />
           </div>
         );
       }

src/components/Manifest/Status/index.jsx

@@ -10,7 +10,9 @@ import {
   TableHead,
   TablePagination,
   TableRow,
+  Tooltip,
 } from "@material-ui/core";
+import CancelIcon from "@material-ui/icons/Cancel";
 import clsx from "clsx";
 
 import {
@@ -27,9 +29,9 @@ import useStyles from "../../useStyles";
 import { LocalDateTimeString } from "../../../utils/dates";
 import { logger } from "../../../services/monitoring";
 import ManifestDetails from "../Details";
-import {useLocalStorage} from "../../useLocalStorage";
+import { useLocalStorage } from "../../useLocalStorage";
 
-const PAGE_SIZE="MANIFEST_STATUS_PAGE_SIZE";
+const PAGE_SIZE = "MANIFEST_STATUS_PAGE_SIZE";
 
 const MainForm = () => {
   const { manifest_id } = useParams();
@@ -38,6 +40,7 @@ const MainForm = () => {
   const [pageIndex, setPageIndex] = useState(0);
   const { getManifests, manifests } = useManifestsContext();
   const {
+    cancelUpdate,
     getCarUpdates,
     carUpdates,
     totalCarUpdates,
@@ -127,6 +130,15 @@ const MainForm = () => {
     setPageIndex(0);
   };
 
+  const sendCancel = async ({ id, vin }) => {
+    try {
+      await cancelUpdate(id, token);
+      setMessage(`Sent cancel for ${vin}`);
+    } catch (e) {
+      setMessage(e.message);
+    }
+  };
+
   return (
     <div className={clsx(classes.paper, classes.tableSize)}>
       <Table>
@@ -137,6 +149,7 @@ const MainForm = () => {
             <TableCell align="center">Status</TableCell>
             <TableCell align="center">Created</TableCell>
             <TableCell align="center">Updated</TableCell>
+            <TableCell align="center"></TableCell>
           </TableRow>
         </TableHead>
         <TableBody>
@@ -158,6 +171,13 @@ const MainForm = () => {
               <TableCell align="center">
                 {LocalDateTimeString(row.updated)}
               </TableCell>
+              <TableCell>
+                <Tooltip key={row.vin} title={`Send cancel for ${row.vin}`}>
+                  <Link to="#" onClick={() => sendCancel(row)}>
+                    <CancelIcon />
+                  </Link>
+                </Tooltip>
+              </TableCell>
             </TableRow>
           ))}
         </TableBody>
@@ -165,7 +185,7 @@ const MainForm = () => {
           <TableRow>
             <TablePagination
               rowsPerPageOptions={[5, 10, 25, 100]}
-              colSpan={5}
+              colSpan={6}
               count={totalCarUpdates}
               rowsPerPage={pageSize}
               page={pageIndex}

src/services/__mocks__/updatesAPI.js

@@ -22,6 +22,10 @@ const updatesAPI = {
   getCarUpdateProgress: async (carupdateids, token) => {
     return { statuses: [] };
   },
+
+  cancelCarUpdate: async (id, token) => {
+    return { message: "OK" };
+  },
 };
 
 export default updatesAPI;

src/services/updatesAPI.js

@@ -8,17 +8,18 @@ import {
 const API_ENDPOINT = process.env.REACT_APP_UPLOAD_SERVICE_URL;
 
 const createDeployUpdatesClosure = (suffix) => {
-  return async (data, token) =>   fetch(`${API_ENDPOINT}/${suffix}`, {
+  return async (data, token) =>
-    method: "POST",
+    fetch(`${API_ENDPOINT}/${suffix}`, {
-    headers: Object.assign(
+      method: "POST",
-      { "Content-Type": "application/json" },
+      headers: Object.assign(
-      getAuthHeaderOptions(token)
+        { "Content-Type": "application/json" },
-    ),
+        getAuthHeaderOptions(token)
-    body: JSON.stringify(data),
+      ),
-  })
+      body: JSON.stringify(data),
-    .then(fetchRespHandler)
+    })
-    .catch(errorHandler)
+      .then(fetchRespHandler)
-}
+      .catch(errorHandler);
+};
 
 const updatesAPI = {
   createFleetUpdates: createDeployUpdatesClosure("fleetupdate"),
@@ -76,6 +77,18 @@ const updatesAPI = {
       .then(fetchRespHandler)
       .catch(errorHandler);
   },
+
+  cancelCarUpdate: async (id, token) => {
+    return fetch(`${API_ENDPOINT}/carupdate/${id}/cancel`, {
+      method: "POST",
+      headers: Object.assign(
+        { "Content-Type": "application/json" },
+        getAuthHeaderOptions(token)
+      ),
+    })
+      .then(fetchRespHandler)
+      .catch(errorHandler);
+  },
 };
 
 export default updatesAPI;