73 lines
2.0 KiB
TypeScript
73 lines
2.0 KiB
TypeScript
import { mdiHarddisk } from "@mdi/js";
|
|
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 = [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>
|
|
<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={
|
|
<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>
|
|
);
|
|
}
|