Can remove disks files from UI

This commit is contained in:
Pierre HUBERT 2023-10-26 12:04:55 +02:00
parent bdb2f6427d
commit 9371d709a5
2 changed files with 94 additions and 20 deletions

View File

@ -27,6 +27,7 @@ export interface VMDisk {
// application attribute // application attribute
new?: boolean; new?: boolean;
deleteType?: "keepfile" | "deletefile";
} }
interface VMInfoInterface { interface VMInfoInterface {
@ -137,6 +138,12 @@ export class VMApi {
* Update the information about a single VM * Update the information about a single VM
*/ */
static async UpdateSingle(vm: VMInfo): Promise<VMInfo> { static async UpdateSingle(vm: VMInfo): Promise<VMInfo> {
// Process disks list, looking for removal
vm.disks = vm.disks.filter((d) => d.deleteType !== "keepfile");
vm.disks.forEach((d) => {
if (d.deleteType === "deletefile") d.delete = true;
});
const data = ( const data = (
await APIClient.exec({ await APIClient.exec({
uri: `/vm/${vm.uuid!}`, uri: `/vm/${vm.uuid!}`,

View File

@ -1,18 +1,23 @@
import { mdiHarddisk } from "@mdi/js";
import Icon from "@mdi/react";
import CheckCircleIcon from "@mui/icons-material/CheckCircle";
import DeleteIcon from "@mui/icons-material/Delete";
import { import {
Avatar, Avatar,
Button, Button,
IconButton,
ListItem, ListItem,
ListItemAvatar, ListItemAvatar,
ListItemText, ListItemText,
Paper, Paper,
Tooltip,
} from "@mui/material"; } from "@mui/material";
import { VMDisk, VMInfo } from "../../api/VMApi";
import { filesize } from "filesize"; import { filesize } from "filesize";
import Icon from "@mdi/react";
import { mdiHarddisk } from "@mdi/js";
import { TextInput } from "./TextInput";
import { ServerApi } from "../../api/ServerApi"; import { ServerApi } from "../../api/ServerApi";
import { VMDisk, VMInfo } from "../../api/VMApi";
import { useConfirm } from "../../hooks/providers/ConfirmDialogProvider";
import { SelectInput } from "./SelectInput"; import { SelectInput } from "./SelectInput";
import { TextInput } from "./TextInput";
export function VMDisksList(p: { export function VMDisksList(p: {
vm: VMInfo; vm: VMInfo;
@ -39,6 +44,10 @@ export function VMDisksList(p: {
editable={p.editable} editable={p.editable}
disk={d} disk={d}
onChange={p.onChange} onChange={p.onChange}
removeFromList={() => {
p.vm.disks.splice(num, 1);
p.onChange?.();
}}
/> />
))} ))}
@ -51,22 +60,74 @@ function DiskInfo(p: {
editable: boolean; editable: boolean;
disk: VMDisk; disk: VMDisk;
onChange?: () => void; onChange?: () => void;
removeFromList: () => void;
}): React.ReactElement { }): React.ReactElement {
const confirm = useConfirm();
const deleteDisk = async () => {
if (p.disk.deleteType) {
p.disk.deleteType = undefined;
p.onChange?.();
return;
}
const keepFile = await confirm(
`You asked to delete the disk ${p.disk.name}. Do you want to keep the block file or not ? `,
"Delete disk",
"Keep the file",
"Delete the file"
);
if (!(await confirm("Do you really want to delete this disk?"))) return;
p.disk.deleteType = keepFile ? "keepfile" : "deletefile";
p.onChange?.();
};
if (!p.editable || !p.disk.new) if (!p.editable || !p.disk.new)
return ( return (
<ListItem> <ListItem
secondaryAction={
p.editable && (
<IconButton
edge="end"
aria-label="delete disk"
onClick={deleteDisk}
>
{p.disk.deleteType ? (
<Tooltip title="Cancel disk removal">
<CheckCircleIcon />
</Tooltip>
) : (
<Tooltip title="Remove disk">
<DeleteIcon />
</Tooltip>
)}
</IconButton>
)
}
>
<ListItemAvatar> <ListItemAvatar>
<Avatar> <Avatar>
<Icon path={mdiHarddisk} /> <Icon path={mdiHarddisk} />
</Avatar> </Avatar>
</ListItemAvatar> </ListItemAvatar>
<ListItemText <ListItemText
primary={p.disk.name} 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={`${filesize(p.disk.size * 1000 * 1000)} - ${ secondary={`${filesize(p.disk.size * 1000 * 1000)} - ${
p.disk.alloc_type p.disk.alloc_type
}`} }`}
/> />
{/* TODO delete disk if editable */}
</ListItem> </ListItem>
); );
@ -96,19 +157,25 @@ function DiskInfo(p: {
type="number" type="number"
/> />
<SelectInput <div style={{ display: "flex", justifyContent: "space-between" }}>
editable={true} <SelectInput
label="File allocation type" editable={true}
options={[ label="File allocation type"
{ label: "Sparse allocation", value: "Sparse" }, options={[
{ label: "Fixed allocation", value: "Fixed" }, { label: "Sparse allocation", value: "Sparse" },
]} { label: "Fixed allocation", value: "Fixed" },
value={p.disk.alloc_type} ]}
onValueChange={(v) => { value={p.disk.alloc_type}
p.disk.alloc_type = v as any; onValueChange={(v) => {
p.onChange?.(); p.disk.alloc_type = v as any;
}} p.onChange?.();
/> }}
/>
<IconButton onClick={p.removeFromList}>
<DeleteIcon />
</IconButton>
</div>
</Paper> </Paper>
); );
} }