Add the logic which will call disk image conversion from disk image route

virtweb_frontend/src/dialogs/ConvertDiskImageDialog.tsx

@@ -0,0 +1,106 @@
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+} from "@mui/material";
+import { DiskImage, DiskImageApi, DiskImageFormat } from "../api/DiskImageApi";
+import React from "react";
+import { FileDiskImageWidget } from "../widgets/FileDiskImageWidget";
+import { FileInput } from "../widgets/forms/FileInput";
+import { TextInput } from "../widgets/forms/TextInput";
+import { ServerApi } from "../api/ServerApi";
+import { SelectInput } from "../widgets/forms/SelectInput";
+import { useLoadingMessage } from "../hooks/providers/LoadingMessageProvider";
+import { useSnackbar } from "../hooks/providers/SnackbarProvider";
+import { useAlert } from "../hooks/providers/AlertDialogProvider";
+import { useConfirm } from "../hooks/providers/ConfirmDialogProvider";
+
+export function ConvertDiskImageDialog(p: {
+  image: DiskImage;
+  onCancel: () => void;
+  onFinished: () => void;
+}): React.ReactElement {
+  const alert = useAlert();
+  const snackbar = useSnackbar();
+  const loadingMessage = useLoadingMessage();
+
+  const [format, setFormat] = React.useState<DiskImageFormat>({
+    format: "QCow2",
+  });
+
+  const [filename, setFilename] = React.useState(p.image.file_name + ".qcow2");
+
+  const handleFormatChange = async (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 === "Raw") setFilename(`${p.image.file_name}.raw`);
+    if (value === "CompressedRaw") setFilename(`${p.image.file_name}.raw.gz`);
+  };
+
+  const handleSubmit = async () => {
+    try {
+      loadingMessage.show("Converting image...");
+
+      // Perform the conversion
+      await DiskImageApi.Convert(p.image, filename, format);
+
+      p.onFinished();
+
+      snackbar("Conversion successful!");
+    } catch (e) {
+      console.error("Failed to convert image!", e);
+      alert(`Failed to convert image! ${e}`);
+    } finally {
+      loadingMessage.hide();
+    }
+  };
+
+  return (
+    <Dialog open onClose={p.onCancel}>
+      <DialogTitle>Convert disk image</DialogTitle>
+
+      <DialogContent>
+        <DialogContentText>
+          Select the destination format for this image:
+        </DialogContentText>
+        <FileDiskImageWidget image={p.image} />
+
+        {/* New image format */}
+        <SelectInput
+          editable
+          label="Target format"
+          value={format.format}
+          onValueChange={handleFormatChange}
+          options={[
+            { value: "QCow2" },
+            { value: "Raw" },
+            { value: "CompressedRaw" },
+            { value: "CompressedQCow2" },
+          ]}
+        />
+
+        {/* New image name */}
+        <TextInput
+          editable
+          label="New image name"
+          value={filename}
+          onValueChange={(s) => setFilename(s ?? "")}
+          size={ServerApi.Config.constraints.disk_image_name_size}
+          helperText="The image name shall contain the proper file extension"
+        />
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={p.onCancel}>Cancel</Button>
+        <Button onClick={handleSubmit} autoFocus>
+          Convert image
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}