Can change disk bus after disk creation
Some checks failed
continuous-integration/drone/push Build is failing
Some checks failed
continuous-integration/drone/push Build is failing
This commit is contained in:
parent
5fe481ffed
commit
0279907ca9
@ -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" },
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
@ -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>
|
||||
);
|
||||
|
Loading…
x
Reference in New Issue
Block a user