Can delete uploaded disk images

virtweb_frontend/src/api/DiskImageApi.ts

@@ -42,4 +42,14 @@ export class DiskImageApi {
       })
     ).data;
   }
+
+  /**
+   * Delete disk image file
+   */
+  static async Delete(file: DiskImage): Promise<void> {
+    await APIClient.exec({
+      method: "DELETE",
+      uri: `/disk_images/${file.file_name}`,
+    });
+  }
 }

virtweb_frontend/src/routes/DiskImagesRoute.tsx

@@ -14,6 +14,8 @@ import React from "react";
 import { DiskImage, DiskImageApi } from "../api/DiskImageApi";
 import { ServerApi } from "../api/ServerApi";
 import { useAlert } from "../hooks/providers/AlertDialogProvider";
+import { useConfirm } from "../hooks/providers/ConfirmDialogProvider";
+import { useLoadingMessage } from "../hooks/providers/LoadingMessageProvider";
 import { useSnackbar } from "../hooks/providers/SnackbarProvider";
 import { AsyncWidget } from "../widgets/AsyncWidget";
 import { DateWidget } from "../widgets/DateWidget";
@@ -152,6 +154,41 @@ function DiskImageList(p: {
   list: DiskImage[];
   onReload: () => void;
 }): React.ReactElement {
+  const alert = useAlert();
+  const snackbar = useSnackbar();
+  const confirm = useConfirm();
+  const loadingMessage = useLoadingMessage();
+
+  // Delete disk image
+  const deleteDiskImage = async (entry: DiskImage) => {
+    if (
+      !(await confirm(
+        `Do you really want to delete this disk image (${entry.file_name}) ?`
+      ))
+    )
+      return;
+
+    loadingMessage.show("Deleting disk image file...");
+
+    try {
+      await DiskImageApi.Delete(entry);
+      snackbar("The disk image has been successfully deleted!");
+      p.onReload();
+    } catch (e) {
+      console.error(e);
+      alert(`Failed to delete disk image!\n${e}`);
+    }
+
+    loadingMessage.hide();
+  };
+
+  if (p.list.length === 0)
+    return (
+      <Typography variant="body1" style={{ textAlign: "center" }}>
+        No disk image uploaded for now.
+      </Typography>
+    );
+
   const columns: GridColDef<(typeof p.list)[number]>[] = [
     { field: "file_name", headerName: "File name", flex: 3 },
     {
@@ -187,8 +224,8 @@ function DiskImageList(p: {
                 <DownloadIcon />
               </IconButton>
             </Tooltip>
-            <Tooltip title="Delete file">
-              <IconButton onClick={() => deleteIso(params.row)}>
+            <Tooltip title="Delete disk image">
+              <IconButton onClick={() => deleteDiskImage(params.row)}>
                 <DeleteIcon />
               </IconButton>
             </Tooltip>