Can change disk bus after disk creation

virtweb_frontend/src/widgets/forms/DiskBusSelect.tsx

@@ -4,12 +4,16 @@ import { SelectInput } from "./SelectInput";
 export function DiskBusSelect(p: {
   editable: boolean;
   value: DiskBusType;
+  label?: string;
   onValueChange: (value: DiskBusType) => void;
+  size?: "medium" | "small";
+  disableUnderline?: boolean;
+  disableBottomMargin?: boolean;
 }): React.ReactElement {
   return (
     <SelectInput
       {...p}
-      label="Disk bus type"
+      label={p.label ?? "Disk bus type"}
       options={[
         { label: "virtio", value: "Virtio" },
         { label: "sata", value: "SATA" },

virtweb_frontend/src/widgets/forms/SelectInput.tsx

@@ -17,8 +17,11 @@ export function SelectInput(p: {
   value?: string;
   editable: boolean;
   label?: string;
+  size?: "medium" | "small";
   options: SelectOption[];
   onValueChange: (o?: string) => void;
+  disableUnderline?: boolean;
+  disableBottomMargin?: boolean;
 }): React.ReactElement {
   if (!p.editable && !p.value) return <></>;
 
@@ -28,12 +31,18 @@ export function SelectInput(p: {
   }
 
   return (
-    <FormControl fullWidth variant="standard" style={{ marginBottom: "15px" }}>
+    <FormControl
+      fullWidth
+      variant="standard"
+      style={{ marginBottom: p.disableBottomMargin ? "0px" : "15px" }}
+    >
       {p.label && <InputLabel>{p.label}</InputLabel>}
       <Select
+        {...p}
         value={p.value ?? ""}
-        label={p.label}
+        onChange={(e) => {
-        onChange={(e) => { p.onValueChange(e.target.value); }}
+          p.onValueChange(e.target.value);
+        }}
       >
         {p.options.map((e) => (
           <MenuItem

virtweb_frontend/src/widgets/forms/VMDisksList.tsx

@@ -1,30 +1,20 @@
-import { mdiHarddisk, mdiHarddiskPlus } from "@mdi/js";
+import { mdiHarddiskPlus } from "@mdi/js";
 import Icon from "@mdi/react";
 import CheckCircleIcon from "@mui/icons-material/CheckCircle";
 import DeleteIcon from "@mui/icons-material/Delete";
-import {
+import { Button, IconButton, Paper, Tooltip } from "@mui/material";
-  Avatar,
-  Button,
-  IconButton,
-  ListItem,
-  ListItemAvatar,
-  ListItemText,
-  Paper,
-  Tooltip,
-} from "@mui/material";
-import { filesize } from "filesize";
 import React from "react";
+import { DiskImage } from "../../api/DiskImageApi";
 import { ServerApi } from "../../api/ServerApi";
 import { VMFileDisk, VMInfo, VMState } from "../../api/VMApi";
 import { ConvertDiskImageDialog } from "../../dialogs/ConvertDiskImageDialog";
 import { useConfirm } from "../../hooks/providers/ConfirmDialogProvider";
+import { VMDiskFileWidget } from "../vms/VMDiskFileWidget";
 import { CheckboxInput } from "./CheckboxInput";
+import { DiskBusSelect } from "./DiskBusSelect";
+import { DiskImageSelect } from "./DiskImageSelect";
 import { SelectInput } from "./SelectInput";
 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;
@@ -126,7 +116,7 @@ function DiskInfo(p: {
   if (!p.editable || !p.disk.new)
     return (
       <VMDiskFileWidget
-        disk={p.disk}
+        {...p}
         secondaryAction={
           <>
             {p.editable && (
@@ -209,6 +199,7 @@ function DiskInfo(p: {
         }}
       />
 
+      {/* Raw disk: choose sparse mode */}
       {p.disk.format === "Raw" && (
         <CheckboxInput
           editable

virtweb_frontend/src/widgets/vms/VMDiskFileWidget.tsx

@@ -3,15 +3,20 @@ import { Icon } from "@mdi/react";
 import { Avatar, ListItem, ListItemAvatar, ListItemText } from "@mui/material";
 import { filesize } from "filesize";
 import { VMFileDisk } from "../../api/VMApi";
+import { DiskBusSelect } from "../forms/DiskBusSelect";
 
 export function VMDiskFileWidget(p: {
+  editable?: boolean;
   disk: VMFileDisk;
   secondaryAction?: React.ReactElement;
+  onChange?: () => void;
 }): React.ReactElement {
-  const info = [p.disk.bus, filesize(p.disk.size), p.disk.format];
+  const info = [filesize(p.disk.size), p.disk.format];
 
   if (p.disk.format === "Raw") info.push(p.disk.is_sparse ? "Sparse" : "Fixed");
 
+  if (!p.editable) info.push(p.disk.bus);
+
   return (
     <ListItem secondaryAction={p.secondaryAction}>
       <ListItemAvatar>
@@ -32,7 +37,35 @@ export function VMDiskFileWidget(p: {
             )}
           </>
         }
-        secondary={info.join(" - ")}
+        secondary={
+          <div style={{ display: "flex", alignItems: "center" }}>
+            {p.editable ? (
+              <div
+                style={{
+                  maxWidth: "80px",
+                  display: "inline-block",
+                  marginRight: "10px",
+                }}
+              >
+                <DiskBusSelect
+                  onValueChange={(v) => {
+                    p.disk.bus = v;
+                    p.onChange?.();
+                  }}
+                  label=""
+                  editable
+                  value={p.disk.bus}
+                  size="small"
+                  disableUnderline
+                  disableBottomMargin
+                />
+              </div>
+            ) : (
+              ""
+            )}
+            <div style={{ height: "100%" }}>{info.join(" - ")}</div>
+          </div>
+        }
       />
     </ListItem>
   );