Can change disk bus after disk creation
Some checks failed
continuous-integration/drone/push Build is failing

This commit is contained in:
Pierre HUBERT 2025-05-31 09:41:12 +02:00
parent 5fe481ffed
commit 0279907ca9
4 changed files with 60 additions and 23 deletions

View File

@ -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" },

View File

@ -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) => { p.onValueChange(e.target.value); }}
onChange={(e) => {
p.onValueChange(e.target.value);
}}
>
{p.options.map((e) => (
<MenuItem

View File

@ -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 {
Avatar,
Button,
IconButton,
ListItem,
ListItemAvatar,
ListItemText,
Paper,
Tooltip,
} from "@mui/material";
import { filesize } from "filesize";
import { Button, IconButton, Paper, Tooltip } from "@mui/material";
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

View File

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