Managed to insert an ISO file

virtweb_frontend/src/api/VMApi.ts

@@ -27,6 +27,7 @@ interface VMInfoInterface {
   architecture: "i686" | "x86_64";
   memory: number;
   vnc_access: boolean;
+  iso_file?: string;
 }
 
 export class VMInfo implements VMInfoInterface {
@@ -39,6 +40,7 @@ export class VMInfo implements VMInfoInterface {
   architecture: "i686" | "x86_64";
   memory: number;
   vnc_access: boolean;
+  iso_file?: string;
 
   constructor(int: VMInfoInterface) {
     this.name = int.name;
@@ -50,6 +52,7 @@ export class VMInfo implements VMInfoInterface {
     this.architecture = int.architecture;
     this.memory = int.memory;
     this.vnc_access = int.vnc_access;
+    this.iso_file = int.iso_file;
   }
 
   static NewEmpty(): VMInfo {

virtweb_frontend/src/widgets/forms/SelectInput.tsx

@@ -2,7 +2,7 @@ import { FormControl, InputLabel, MenuItem, Select } from "@mui/material";
 import { TextInput } from "./TextInput";
 
 export interface SelectOption {
-  value: string;
+  value?: string;
   label: string;
 }
 

virtweb_frontend/src/widgets/vms/VMDetails.tsx

@@ -7,13 +7,38 @@ import { CheckboxInput } from "../forms/CheckboxInput";
 import { SelectInput } from "../forms/SelectInput";
 import { TextInput } from "../forms/TextInput";
 import { VMScreenshot } from "./VMScreenshot";
+import { IsoFile, IsoFilesApi } from "../../api/IsoFilesApi";
+import { AsyncWidget } from "../AsyncWidget";
+import React from "react";
+import { filesize } from "filesize";
 
-export function VMDetails(p: {
+interface DetailsProps {
   vm: VMInfo;
   editable: boolean;
   onChange?: () => void;
   screenshot?: boolean;
-}): React.ReactElement {
+}
+
+export function VMDetails(p: DetailsProps): React.ReactElement {
+  const [list, setList] = React.useState<IsoFile[] | any>();
+
+  const load = async () => {
+    setList(await IsoFilesApi.GetList());
+  };
+
+  return (
+    <AsyncWidget
+      loadKey={"1"}
+      load={load}
+      errMsg="Failed to load the list of ISO files"
+      build={() => <VMDetailsInner iso={list!} {...p} />}
+    />
+  );
+}
+
+function VMDetailsInner(
+  p: DetailsProps & { iso: IsoFile[] }
+): React.ReactElement {
   return (
     <Grid container spacing={2}>
       {
@@ -128,6 +153,28 @@ export function VMDetails(p: {
           }}
         />
       </EditSection>
+
+      {/* Storage section */}
+      <EditSection title="Storage">
+        <SelectInput
+          label="ISO file"
+          editable={p.editable}
+          value={p.vm.iso_file}
+          onValueChange={(v) => {
+            p.vm.iso_file = v;
+            p.onChange?.();
+          }}
+          options={[
+            { label: "None", value: undefined },
+            ...p.iso.map((i) => {
+              return {
+                label: `${i.filename} ${filesize(i.size)}`,
+                value: i.filename,
+              };
+            }),
+          ]}
+        />
+      </EditSection>
     </Grid>
   );
 }