Can remove disks files from UI

virtweb_frontend/src/api/VMApi.ts

@@ -27,6 +27,7 @@ export interface VMDisk {
 
   // application attribute
   new?: boolean;
+  deleteType?: "keepfile" | "deletefile";
 }
 
 interface VMInfoInterface {
@@ -137,6 +138,12 @@ export class VMApi {
    * Update the information about a single VM
    */
   static async UpdateSingle(vm: VMInfo): Promise<VMInfo> {
+    // Process disks list, looking for removal
+    vm.disks = vm.disks.filter((d) => d.deleteType !== "keepfile");
+    vm.disks.forEach((d) => {
+      if (d.deleteType === "deletefile") d.delete = true;
+    });
+
     const data = (
       await APIClient.exec({
         uri: `/vm/${vm.uuid!}`,

virtweb_frontend/src/widgets/forms/VMDisksList.tsx

@@ -1,18 +1,23 @@
+import { mdiHarddisk } from "@mdi/js";
+import Icon from "@mdi/react";
+import CheckCircleIcon from "@mui/icons-material/CheckCircle";
+import DeleteIcon from "@mui/icons-material/Delete";
 import {
   Avatar,
   Button,
+  IconButton,
   ListItem,
   ListItemAvatar,
   ListItemText,
   Paper,
+  Tooltip,
 } from "@mui/material";
-import { VMDisk, VMInfo } from "../../api/VMApi";
 import { filesize } from "filesize";
-import Icon from "@mdi/react";
-import { mdiHarddisk } from "@mdi/js";
-import { TextInput } from "./TextInput";
 import { ServerApi } from "../../api/ServerApi";
+import { VMDisk, VMInfo } from "../../api/VMApi";
+import { useConfirm } from "../../hooks/providers/ConfirmDialogProvider";
 import { SelectInput } from "./SelectInput";
+import { TextInput } from "./TextInput";
 
 export function VMDisksList(p: {
   vm: VMInfo;
@@ -39,6 +44,10 @@ export function VMDisksList(p: {
           editable={p.editable}
           disk={d}
           onChange={p.onChange}
+          removeFromList={() => {
+            p.vm.disks.splice(num, 1);
+            p.onChange?.();
+          }}
         />
       ))}
 
@@ -51,22 +60,74 @@ function DiskInfo(p: {
   editable: boolean;
   disk: VMDisk;
   onChange?: () => void;
+  removeFromList: () => void;
 }): React.ReactElement {
+  const confirm = useConfirm();
+  const deleteDisk = async () => {
+    if (p.disk.deleteType) {
+      p.disk.deleteType = undefined;
+      p.onChange?.();
+      return;
+    }
+
+    const keepFile = await confirm(
+      `You asked to delete the disk ${p.disk.name}. Do you want to keep the block file or not ? `,
+      "Delete disk",
+      "Keep the file",
+      "Delete the file"
+    );
+
+    if (!(await confirm("Do you really want to delete this disk?"))) return;
+
+    p.disk.deleteType = keepFile ? "keepfile" : "deletefile";
+    p.onChange?.();
+  };
+
   if (!p.editable || !p.disk.new)
     return (
-      <ListItem>
+      <ListItem
+        secondaryAction={
+          p.editable && (
+            <IconButton
+              edge="end"
+              aria-label="delete disk"
+              onClick={deleteDisk}
+            >
+              {p.disk.deleteType ? (
+                <Tooltip title="Cancel disk removal">
+                  <CheckCircleIcon />
+                </Tooltip>
+              ) : (
+                <Tooltip title="Remove disk">
+                  <DeleteIcon />
+                </Tooltip>
+              )}
+            </IconButton>
+          )
+        }
+      >
         <ListItemAvatar>
           <Avatar>
             <Icon path={mdiHarddisk} />
           </Avatar>
         </ListItemAvatar>
         <ListItemText
-          primary={p.disk.name}
+          primary={
+            <>
+              {p.disk.name}{" "}
+              {p.disk.deleteType && (
+                <span style={{ color: "red" }}>
+                  {p.disk.deleteType === "deletefile"
+                    ? "Remove, DELETING block file"
+                    : "Remove, keeping block file"}
+                </span>
+              )}
+            </>
+          }
           secondary={`${filesize(p.disk.size * 1000 * 1000)} - ${
             p.disk.alloc_type
           }`}
         />
-        {/* TODO delete disk if editable */}
       </ListItem>
     );
 
@@ -96,19 +157,25 @@ function DiskInfo(p: {
         type="number"
       />
 
-      <SelectInput
-        editable={true}
-        label="File allocation type"
-        options={[
-          { label: "Sparse allocation", value: "Sparse" },
-          { label: "Fixed allocation", value: "Fixed" },
-        ]}
-        value={p.disk.alloc_type}
-        onValueChange={(v) => {
-          p.disk.alloc_type = v as any;
-          p.onChange?.();
-        }}
-      />
+      <div style={{ display: "flex", justifyContent: "space-between" }}>
+        <SelectInput
+          editable={true}
+          label="File allocation type"
+          options={[
+            { label: "Sparse allocation", value: "Sparse" },
+            { label: "Fixed allocation", value: "Fixed" },
+          ]}
+          value={p.disk.alloc_type}
+          onValueChange={(v) => {
+            p.disk.alloc_type = v as any;
+            p.onChange?.();
+          }}
+        />
+
+        <IconButton onClick={p.removeFromList}>
+          <DeleteIcon />
+        </IconButton>
+      </div>
     </Paper>
   );
 }