Can restore disk image when adding disks to virtual machine

virtweb_frontend/src/widgets/forms/VMDisksList.tsx

@@ -21,12 +21,15 @@ import { useConfirm } from "../../hooks/providers/ConfirmDialogProvider";
 import { CheckboxInput } from "./CheckboxInput";
 import { SelectInput } from "./SelectInput";
 import { TextInput } from "./TextInput";
+import { DiskImageSelect } from "./DiskImageSelect";
+import { DiskImage } from "../../api/DiskImageApi";
 
 export function VMDisksList(p: {
   vm: VMInfo;
   state?: VMState;
   onChange?: () => void;
   editable: boolean;
+  diskImagesList: DiskImage[];
 }): React.ReactElement {
   const [currBackupRequest, setCurrBackupRequest] = React.useState<
     VMFileDisk | undefined
@@ -67,6 +70,7 @@ export function VMDisksList(p: {
             p.onChange?.();
           }}
           onRequestBackup={handleBackupRequest}
+          diskImagesList={p.diskImagesList}
         />
       ))}
 
@@ -93,6 +97,7 @@ function DiskInfo(p: {
   onChange?: () => void;
   removeFromList: () => void;
   onRequestBackup: (disk: VMFileDisk) => void;
+  diskImagesList: DiskImage[];
 }): React.ReactElement {
   const confirm = useConfirm();
   const deleteDisk = async () => {
@@ -198,23 +203,6 @@ function DiskInfo(p: {
         </IconButton>
       </div>
 
-      <TextInput
-        editable={true}
-        label="Disk size (GB)"
-        size={{
-          min:
-            ServerApi.Config.constraints.disk_size.min / (1000 * 1000 * 1000),
-          max:
-            ServerApi.Config.constraints.disk_size.max / (1000 * 1000 * 1000),
-        }}
-        value={(p.disk.size / (1000 * 1000 * 1000)).toString()}
-        onValueChange={(v) => {
-          p.disk.size = Number(v ?? "0") * 1000 * 1000 * 1000;
-          p.onChange?.();
-        }}
-        type="number"
-      />
-
       <SelectInput
         editable={true}
         label="Disk format"
@@ -243,6 +231,34 @@ function DiskInfo(p: {
           }}
         />
       )}
+
+      <TextInput
+        editable={true}
+        label="Disk size (GB)"
+        size={{
+          min:
+            ServerApi.Config.constraints.disk_size.min / (1000 * 1000 * 1000),
+          max:
+            ServerApi.Config.constraints.disk_size.max / (1000 * 1000 * 1000),
+        }}
+        value={(p.disk.size / (1000 * 1000 * 1000)).toString()}
+        onValueChange={(v) => {
+          p.disk.size = Number(v ?? "0") * 1000 * 1000 * 1000;
+          p.onChange?.();
+        }}
+        type="number"
+        disabled={!!p.disk.from_image}
+      />
+
+      <DiskImageSelect
+        label="Use disk image as template"
+        list={p.diskImagesList}
+        value={p.disk.from_image}
+        onValueChange={(v) => {
+          p.disk.from_image = v;
+          p.onChange?.();
+        }}
+      />
     </Paper>
   );
 }