Managed to insert an ISO file

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>
   );
 }