Can select disk bus type when adding new disk to VM

virtweb_frontend/src/api/VMApi.ts

@@ -19,9 +19,13 @@ export type VMState =
 
 export type VMFileDisk = BaseFileVMDisk & (RawVMDisk | QCow2Disk);
 
+export type DiskBusType = "Virtio" | "Sata";
+
 export interface BaseFileVMDisk {
   size: number;
   name: string;
+  bus: DiskBusType;
+
   delete: boolean;
 
   // For new disk only

virtweb_frontend/src/widgets/forms/DiskBusSelect.tsx

@@ -0,0 +1,20 @@
+import { DiskBusType } from "../../api/VMApi";
+import { SelectInput } from "./SelectInput";
+
+export function DiskBusSelect(p: {
+  editable: boolean;
+  value: DiskBusType;
+  onValueChange: (value: DiskBusType) => void;
+}): React.ReactElement {
+  return (
+    <SelectInput
+      {...p}
+      label="Disk bus type"
+      options={[
+        { label: "virtio", value: "Virtio" },
+        { label: "sata", value: "Sata" },
+      ]}
+      onValueChange={(v) => p.onValueChange(v as any)}
+    />
+  );
+}

virtweb_frontend/src/widgets/forms/VMDisksList.tsx

@@ -23,6 +23,7 @@ import { SelectInput } from "./SelectInput";
 import { TextInput } from "./TextInput";
 import { DiskImageSelect } from "./DiskImageSelect";
 import { DiskImage } from "../../api/DiskImageApi";
+import { DiskBusSelect } from "./DiskBusSelect";
 
 export function VMDisksList(p: {
   vm: VMInfo;
@@ -39,6 +40,7 @@ export function VMDisksList(p: {
     p.vm.file_disks.push({
       format: "QCow2",
       size: 10000 * 1000 * 1000,
+      bus: "Virtio",
       delete: false,
       name: `disk${p.vm.file_disks.length}`,
       new: true,
@@ -220,6 +222,16 @@ function DiskInfo(p: {
         }}
       />
 
+      {/* Bus selection */}
+      <DiskBusSelect
+        editable
+        value={p.disk.bus}
+        onValueChange={(v) => {
+          p.disk.bus = v;
+          p.onChange?.();
+        }}
+      />
+
       {p.disk.format === "Raw" && (
         <CheckboxInput
           editable