Refactorize disks list

virtweb_frontend/src/api/VMApi.ts

@@ -19,7 +19,7 @@ export type VMState =
 
 export type VMFileDisk = BaseFileVMDisk & (RawVMDisk | QCow2Disk);
 
-export type DiskBusType = "Virtio" | "Sata";
+export type DiskBusType = "Virtio" | "SATA";
 
 export interface BaseFileVMDisk {
   size: number;

virtweb_frontend/src/widgets/forms/DiskBusSelect.tsx

@@ -12,7 +12,7 @@ export function DiskBusSelect(p: {
       label="Disk bus type"
       options={[
         { label: "virtio", value: "Virtio" },
-        { label: "sata", value: "Sata" },
+        { label: "sata", value: "SATA" },
       ]}
       onValueChange={(v) => p.onValueChange(v as any)}
     />

virtweb_frontend/src/widgets/forms/VMDisksList.tsx

@@ -24,6 +24,7 @@ import { TextInput } from "./TextInput";
 import { DiskImageSelect } from "./DiskImageSelect";
 import { DiskImage } from "../../api/DiskImageApi";
 import { DiskBusSelect } from "./DiskBusSelect";
+import { VMDiskFileWidget } from "../vms/VMDiskFileWidget";
 
 export function VMDisksList(p: {
   vm: VMInfo;
@@ -124,7 +125,8 @@ function DiskInfo(p: {
 
   if (!p.editable || !p.disk.new)
     return (
-      <ListItem
+      <VMDiskFileWidget
+        disk={p.disk}
         secondaryAction={
           <>
             {p.editable && (
@@ -158,32 +160,7 @@ function DiskInfo(p: {
             )}
           </>
         }
-      >
-        <ListItemAvatar>
-          <Avatar>
-            <Icon path={mdiHarddisk} />
-          </Avatar>
-        </ListItemAvatar>
-        <ListItemText
-          primary={
-            <>
-              {p.disk.name}{" "}
-              {p.disk.deleteType && (
-                <span style={{ color: "red" }}>
-                  {p.disk.deleteType === "deletefile"
-                    ? "Remove, DELETING block file"
-                    : "Remove, keeping block file"}
-                </span>
-              )}
-            </>
-          }
-          secondary={`${filesize(p.disk.size)} - ${p.disk.format}${
-            p.disk.format == "Raw"
-              ? " - " + (p.disk.is_sparse ? "Sparse" : "Fixed")
-              : ""
-          }`}
-        />
-      </ListItem>
+      />
     );
 
   return (

virtweb_frontend/src/widgets/vms/VMDiskFileWidget.tsx

@@ -4,17 +4,35 @@ import { Avatar, ListItem, ListItemAvatar, ListItemText } from "@mui/material";
 import { filesize } from "filesize";
 import { VMFileDisk } from "../../api/VMApi";
 
-export function VMDiskFileWidget(p: { disk: VMFileDisk }): React.ReactElement {
+export function VMDiskFileWidget(p: {
+  disk: VMFileDisk;
+  secondaryAction?: React.ReactElement;
+}): React.ReactElement {
+  const info = [p.disk.bus, filesize(p.disk.size), p.disk.format];
+
+  if (p.disk.format === "Raw") info.push(p.disk.is_sparse ? "Sparse" : "Fixed");
+
   return (
-    <ListItem>
+    <ListItem secondaryAction={p.secondaryAction}>
       <ListItemAvatar>
         <Avatar>
           <Icon path={mdiHarddisk} />
         </Avatar>
       </ListItemAvatar>
       <ListItemText
-        primary={p.disk.name}
-        secondary={`${p.disk.format} - ${filesize(p.disk.size)}`}
+        primary={
+          <>
+            {p.disk.name}{" "}
+            {p.disk.deleteType && (
+              <span style={{ color: "red" }}>
+                {p.disk.deleteType === "deletefile"
+                  ? "Remove, DELETING block file"
+                  : "Remove, keeping block file"}
+              </span>
+            )}
+          </>
+        }
+        secondary={info.join(" - ")}
       />
     </ListItem>
   );