Can delete an OTA update

central_frontend/src/api/OTAApi.ts

@@ -40,8 +40,18 @@ export class OTAAPI {
   /**
    * Get the link to download an OTA update
    */
-  static DownloadOTAUpdateURL(platform: string, version: string): string {
-    return APIClient.backendURL() + `/ota/${platform}/${version}`;
+  static DownloadOTAUpdateURL(update: OTAUpdate): string {
+    return APIClient.backendURL() + `/ota/${update.platform}/${update.version}`;
+  }
+
+  /**
+   * Delete an update
+   */
+  static async DeleteUpdate(update: OTAUpdate): Promise<void> {
+    await APIClient.exec({
+      method: "DELETE",
+      uri: `/ota/${update.platform}/${update.version}`,
+    });
   }
 
   /**

central_frontend/src/routes/OTARoute.tsx

@@ -1,3 +1,4 @@
+import DeleteIcon from "@mui/icons-material/Delete";
 import DownloadIcon from "@mui/icons-material/Download";
 import FileUploadIcon from "@mui/icons-material/FileUpload";
 import {
@@ -18,6 +19,10 @@ import { UploadUpdateDialog } from "../dialogs/UploadUpdateDialog";
 import { AsyncWidget } from "../widgets/AsyncWidget";
 import { RouterLink } from "../widgets/RouterLink";
 import { SolarEnergyRouteContainer } from "../widgets/SolarEnergyRouteContainer";
+import { useConfirm } from "../hooks/context_providers/ConfirmDialogProvider";
+import { useAlert } from "../hooks/context_providers/AlertDialogProvider";
+import { useLoadingMessage } from "../hooks/context_providers/LoadingMessageProvider";
+import { useSnackbar } from "../hooks/context_providers/SnackbarProvider";
 
 export function OTARoute(): React.ReactElement {
   const [list, setList] = React.useState<string[] | undefined>();
@@ -84,13 +89,45 @@ function _OTARoute(p: { platforms: Array<string> }): React.ReactElement {
         ready={!!list}
         errMsg="Failed to load the list of OTA updates!"
         load={load}
-        build={() => <_OTAList list={list!} />}
+        build={() => <_OTAList list={list!} onReload={reload} />}
       />
     </SolarEnergyRouteContainer>
   );
 }
 
-function _OTAList(p: { list: OTAUpdate[] }): React.ReactElement {
+function _OTAList(p: {
+  list: OTAUpdate[];
+  onReload: () => void;
+}): React.ReactElement {
+  const alert = useAlert();
+  const confirm = useConfirm();
+  const loadingMessage = useLoadingMessage();
+  const snackbar = useSnackbar();
+
+  const deleteUpdate = async (update: OTAUpdate) => {
+    if (
+      !(await confirm(
+        `Do you really want to delete the update for platform ${update.platform} version ${update.version}?`
+      ))
+    )
+      return;
+
+    try {
+      loadingMessage.show("Deleting update...");
+
+      await OTAAPI.DeleteUpdate(update);
+
+      snackbar("The update was successfully deleted!");
+
+      p.onReload();
+    } catch (e) {
+      console.error("Failed to delete update!", e);
+      alert(`Failed to delete the update! ${e}`);
+    } finally {
+      loadingMessage.hide();
+    }
+  };
+
   return (
     <TableContainer component={Paper}>
       <Table sx={{ minWidth: 650 }} aria-label="simple table">
@@ -110,14 +147,17 @@ function _OTAList(p: { list: OTAUpdate[] }): React.ReactElement {
               <TableCell align="center">{filesize(row.file_size)}</TableCell>
               <TableCell align="center">
                 <Tooltip title="Download a copy of the firmware">
-                  <RouterLink
-                    to={OTAAPI.DownloadOTAUpdateURL(row.platform, row.version)}
-                  >
+                  <RouterLink to={OTAAPI.DownloadOTAUpdateURL(row)}>
                     <IconButton>
                       <DownloadIcon />
                     </IconButton>
                   </RouterLink>
                 </Tooltip>
+                <Tooltip title="Delete firmware update">
+                  <IconButton onClick={() => deleteUpdate(row)}>
+                    <DeleteIcon />
+                  </IconButton>
+                </Tooltip>
               </TableCell>
             </TableRow>
           ))}