Prepare UI for disks backups

virtweb_frontend/src/dialogs/ConvertDiskImageDialog.tsx

@@ -9,6 +9,7 @@ import {
 import React from "react";
 import { DiskImage, DiskImageApi, DiskImageFormat } from "../api/DiskImageApi";
 import { ServerApi } from "../api/ServerApi";
+import { VMApi, VMFileDisk, VMInfo } from "../api/VMApi";
 import { useAlert } from "../hooks/providers/AlertDialogProvider";
 import { useLoadingMessage } from "../hooks/providers/LoadingMessageProvider";
 import { useSnackbar } from "../hooks/providers/SnackbarProvider";
@@ -16,12 +17,17 @@ import { FileDiskImageWidget } from "../widgets/FileDiskImageWidget";
 import { CheckboxInput } from "../widgets/forms/CheckboxInput";
 import { SelectInput } from "../widgets/forms/SelectInput";
 import { TextInput } from "../widgets/forms/TextInput";
+import { VMDiskFileWidget } from "../widgets/vms/VMDiskFileWidget";
 
-export function ConvertDiskImageDialog(p: {
-  image: DiskImage;
-  onCancel: () => void;
-  onFinished: () => void;
-}): React.ReactElement {
+export function ConvertDiskImageDialog(
+  p: {
+    onCancel: () => void;
+    onFinished: () => void;
+  } & (
+    | { backup?: false; image: DiskImage }
+    | { backup: true; disk: VMFileDisk; vm: VMInfo }
+  )
+): React.ReactElement {
   const alert = useAlert();
   const snackbar = useSnackbar();
   const loadingMessage = useLoadingMessage();
@@ -30,35 +36,43 @@ export function ConvertDiskImageDialog(p: {
     format: "QCow2",
   });
 
-  const [filename, setFilename] = React.useState(p.image.file_name + ".qcow2");
+  const origFilename = p.backup ? p.disk.name : p.image.file_name;
+
+  const [filename, setFilename] = React.useState(origFilename + ".qcow2");
 
   const handleFormatChange = (value?: string) => {
     setFormat({ format: value ?? ("QCow2" as any) });
 
-    if (value === "QCow2") setFilename(`${p.image.file_name}.qcow2`);
-    if (value === "CompressedQCow2")
-      setFilename(`${p.image.file_name}.qcow2.gz`);
+    if (value === "QCow2") setFilename(`${origFilename}.qcow2`);
+    if (value === "CompressedQCow2") setFilename(`${origFilename}.qcow2.gz`);
     if (value === "Raw") {
-      setFilename(`${p.image.file_name}.raw`);
+      setFilename(`${origFilename}.raw`);
       // Check sparse checkbox by default
       setFormat({ format: "Raw", is_sparse: true });
     }
-    if (value === "CompressedRaw") setFilename(`${p.image.file_name}.raw.gz`);
+    if (value === "CompressedRaw") setFilename(`${origFilename}.raw.gz`);
   };
 
   const handleSubmit = async () => {
     try {
-      loadingMessage.show("Converting image...");
+      loadingMessage.show(
+        p.backup ? "Performing backup..." : "Converting image..."
+      );
 
-      // Perform the conversion
-      await DiskImageApi.Convert(p.image, filename, format);
+      // Perform the conversion / backup operation
+      if (p.backup) await VMApi.BackupDisk(p.vm, p.disk, filename, format);
+      else await DiskImageApi.Convert(p.image, filename, format);
 
       p.onFinished();
 
-      snackbar("Conversion successful!");
+      snackbar(p.backup ? "Backup successful!" : "Conversion successful!");
     } catch (e) {
-      console.error("Failed to convert image!", e);
-      alert(`Failed to convert image! ${e}`);
+      console.error("Failed to perform backup/conversion!", e);
+      alert(
+        p.backup
+          ? `Failed to perform backup! ${e}`
+          : `Failed to convert image! ${e}`
+      );
     } finally {
       loadingMessage.hide();
     }
@@ -66,13 +80,21 @@ export function ConvertDiskImageDialog(p: {
 
   return (
     <Dialog open onClose={p.onCancel}>
-      <DialogTitle>Convert disk image</DialogTitle>
+      <DialogTitle>
+        {p.backup ? `Backup disk ${p.disk.name}` : "Convert disk image"}
+      </DialogTitle>
 
       <DialogContent>
         <DialogContentText>
           Select the destination format for this image:
         </DialogContentText>
-        <FileDiskImageWidget image={p.image} />
+
+        {/* Show details of of the image */}
+        {p.backup ? (
+          <VMDiskFileWidget {...p} />
+        ) : (
+          <FileDiskImageWidget {...p} />
+        )}
 
         {/* New image format */}
         <SelectInput
@@ -109,13 +131,13 @@ export function ConvertDiskImageDialog(p: {
             setFilename(s ?? "");
           }}
           size={ServerApi.Config.constraints.disk_image_name_size}
-          helperText="The image name shall contain the proper file extension"
+          helperText="The image name shall contain the proper file extension for the selected target format"
         />
       </DialogContent>
       <DialogActions>
         <Button onClick={p.onCancel}>Cancel</Button>
         <Button onClick={handleSubmit} autoFocus>
-          Convert image
+          {p.backup ? "Perform backup" : "Convert image"}
         </Button>
       </DialogActions>
     </Dialog>