Add support for QCow2 file format in web ui

virtweb_frontend/src/widgets/forms/VMDisksList.tsx

@@ -14,7 +14,7 @@ import {
 } from "@mui/material";
 import { filesize } from "filesize";
 import { ServerApi } from "../../api/ServerApi";
-import { VMDisk, VMInfo } from "../../api/VMApi";
+import { VMFileDisk, VMInfo } from "../../api/VMApi";
 import { useConfirm } from "../../hooks/providers/ConfirmDialogProvider";
 import { SelectInput } from "./SelectInput";
 import { TextInput } from "./TextInput";
@@ -25,11 +25,11 @@ export function VMDisksList(p: {
   editable: boolean;
 }): React.ReactElement {
   const addNewDisk = () => {
-    p.vm.disks.push({
-      alloc_type: "Sparse",
+    p.vm.file_disks.push({
+      format: "QCow2",
       size: 10000,
       delete: false,
-      name: `disk${p.vm.disks.length}`,
+      name: `disk${p.vm.file_disks.length}`,
       new: true,
     });
     p.onChange?.();
@@ -38,7 +38,7 @@ export function VMDisksList(p: {
   return (
     <>
       {/* disks list */}
-      {p.vm.disks.map((d, num) => (
+      {p.vm.file_disks.map((d, num) => (
         <DiskInfo
           // eslint-disable-next-line react-x/no-array-index-key
           key={num}
@@ -46,7 +46,7 @@ export function VMDisksList(p: {
           disk={d}
           onChange={p.onChange}
           removeFromList={() => {
-            p.vm.disks.splice(num, 1);
+            p.vm.file_disks.splice(num, 1);
             p.onChange?.();
           }}
         />
@@ -59,7 +59,7 @@ export function VMDisksList(p: {
 
 function DiskInfo(p: {
   editable: boolean;
-  disk: VMDisk;
+  disk: VMFileDisk;
   onChange?: () => void;
   removeFromList: () => void;
 }): React.ReactElement {
@@ -126,25 +126,30 @@ function DiskInfo(p: {
             </>
           }
           secondary={`${filesize(p.disk.size * 1000 * 1000)} - ${
-            p.disk.alloc_type
-          }`}
+            p.disk.format
+          }${p.disk.format == "Raw" ? " - " + p.disk.alloc_type : ""}`}
         />
       </ListItem>
     );
 
   return (
     <Paper elevation={3} style={{ margin: "10px", padding: "10px" }}>
-      <TextInput
-        editable={true}
-        label="Disk name"
-        size={ServerApi.Config.constraints.disk_name_size}
-        checkValue={(v) => /^[a-zA-Z0-9]+$/.test(v)}
-        value={p.disk.name}
-        onValueChange={(v) => {
-          p.disk.name = v ?? "";
-          p.onChange?.();
-        }}
-      />
+      <div style={{ display: "flex", justifyContent: "space-between" }}>
+        <TextInput
+          editable={true}
+          label="Disk name"
+          size={ServerApi.Config.constraints.disk_name_size}
+          checkValue={(v) => /^[a-zA-Z0-9]+$/.test(v)}
+          value={p.disk.name}
+          onValueChange={(v) => {
+            p.disk.name = v ?? "";
+            p.onChange?.();
+          }}
+        />
+        <IconButton onClick={p.removeFromList}>
+          <DeleteIcon />
+        </IconButton>
+      </div>
 
       <TextInput
         editable={true}
@@ -158,7 +163,21 @@ function DiskInfo(p: {
         type="number"
       />
 
-      <div style={{ display: "flex", justifyContent: "space-between" }}>
+      <SelectInput
+        editable={true}
+        label="Disk format"
+        options={[
+          { label: "Raw file", value: "Raw" },
+          { label: "QCow2", value: "QCow2" },
+        ]}
+        value={p.disk.format}
+        onValueChange={(v) => {
+          p.disk.format = v as any;
+          p.onChange?.();
+        }}
+      />
+
+      {p.disk.format === "Raw" && (
         <SelectInput
           editable={true}
           label="File allocation type"
@@ -168,15 +187,11 @@ function DiskInfo(p: {
           ]}
           value={p.disk.alloc_type}
           onValueChange={(v) => {
-            p.disk.alloc_type = v as any;
+            if (p.disk.format === "Raw") p.disk.alloc_type = v as any;
             p.onChange?.();
           }}
         />
-
-        <IconButton onClick={p.removeFromList}>
-          <DeleteIcon />
-        </IconButton>
-      </div>
+      )}
     </Paper>
   );
 }

virtweb_frontend/src/widgets/vms/VMDetails.tsx

@@ -334,8 +334,8 @@ function VMDetailsTabGeneral(p: DetailsInnerProps): React.ReactElement {
 function VMDetailsTabStorage(p: DetailsInnerProps): React.ReactElement {
   return (
     <Grid container spacing={2}>
-      {(p.editable || p.vm.disks.length > 0) && (
-        <EditSection title="Disks storage">
+      {(p.editable || p.vm.file_disks.length > 0) && (
+        <EditSection title="File disks storage">
           <VMDisksList {...p} />
         </EditSection>
       )}