Refacto storage tab

virtweb_frontend/src/widgets/forms/VMSelectIsoInput.tsx

@@ -23,27 +23,6 @@ export function VMSelectIsoInput(p: {
 
   return (
     <>
-      <SelectInput
-        label="Attach an ISO file"
-        editable={p.editable}
-        value={undefined}
-        onValueChange={(v) => {
-          if (v) {
-            p.attachedISOs.push(v);
-            p.onChange(p.attachedISOs);
-          }
-        }}
-        options={[
-          { label: "None", value: undefined },
-          ...p.isoList.map((i) => {
-            return {
-              label: `${i.filename} ${filesize(i.size)}`,
-              value: i.filename,
-            };
-          }),
-        ]}
-      />
-
       {p.attachedISOs.map((isoName, num) => {
         const iso = p.isoList.find((d) => d.filename === isoName);
         return (
@@ -78,6 +57,27 @@ export function VMSelectIsoInput(p: {
           </ListItem>
         );
       })}
+
+      <SelectInput
+        label="Attach an ISO file"
+        editable={p.editable}
+        value={undefined}
+        onValueChange={(v) => {
+          if (v) {
+            p.attachedISOs.push(v);
+            p.onChange(p.attachedISOs);
+          }
+        }}
+        options={[
+          { label: "None", value: undefined },
+          ...p.isoList.map((i) => {
+            return {
+              label: `${i.filename} ${filesize(i.size)}`,
+              value: i.filename,
+            };
+          }),
+        ]}
+      />
     </>
   );
 }

virtweb_frontend/src/widgets/vms/VMDetails.tsx

@@ -258,22 +258,31 @@ function VMDetailsTabGeneral(p: DetailsInnerProps): React.ReactElement {
   );
 }
 
+/**
+ * Storage section
+ */
 function VMDetailsTabStorage(p: DetailsInnerProps): React.ReactElement {
   return (
     <Grid container spacing={2}>
-      {/* Storage section */}
+      {p.editable && p.vm.disks.length > 0 && (
-      <EditSection title="Storage">
+        <EditSection title="Disks storage">
-        <VMSelectIsoInput
+          <VMDisksList {...p} />
-          editable={p.editable}
+        </EditSection>
-          isoList={p.isoList}
+      )}
-          attachedISOs={p.vm.iso_files}
+
-          onChange={(v) => {
+      {(p.editable || p.vm.iso_files.length > 0) && (
-            p.vm.iso_files = v;
+        <EditSection title="ISO storage">
-            p.onChange?.();
+          <VMSelectIsoInput
-          }}
+            editable={p.editable}
-        />
+            isoList={p.isoList}
-        <VMDisksList {...p} />
+            attachedISOs={p.vm.iso_files}
-      </EditSection>
+            onChange={(v) => {
+              p.vm.iso_files = v;
+              p.onChange?.();
+            }}
+          />
+        </EditSection>
+      )}
     </Grid>
   );
 }