Start to build VM page

This commit is contained in:
Pierre HUBERT 2023-10-17 18:11:31 +02:00
parent fcf66e3e93
commit 62364594c9
8 changed files with 221 additions and 148 deletions

View File

@ -15,8 +15,9 @@ import { AuthApi } from "./api/AuthApi";
import { IsoFilesRoute } from "./routes/IsoFilesRoute"; import { IsoFilesRoute } from "./routes/IsoFilesRoute";
import { ServerApi } from "./api/ServerApi"; import { ServerApi } from "./api/ServerApi";
import { SysInfoRoute } from "./routes/SysInfoRoute"; import { SysInfoRoute } from "./routes/SysInfoRoute";
import { VirtualMachinesRoute } from "./routes/VirtualMachinesRoute"; import { VMListRoute } from "./routes/VMListRoute";
import { CreateVMRoute, EditVMRoute } from "./routes/EditVMRoute"; import { CreateVMRoute, EditVMRoute } from "./routes/EditVMRoute";
import { VMRoute } from "./routes/VMRoute";
interface AuthContext { interface AuthContext {
signedIn: boolean; signedIn: boolean;
@ -39,8 +40,9 @@ export function App() {
<Route path="*" element={<BaseAuthenticatedPage />}> <Route path="*" element={<BaseAuthenticatedPage />}>
<Route path="iso" element={<IsoFilesRoute />} /> <Route path="iso" element={<IsoFilesRoute />} />
<Route path="vms" element={<VirtualMachinesRoute />} /> <Route path="vms" element={<VMListRoute />} />
<Route path="vms/new" element={<CreateVMRoute />} /> <Route path="vms/new" element={<CreateVMRoute />} />
<Route path="vm/:uuid" element={<VMRoute />} />
<Route path="vm/:uuid/edit" element={<EditVMRoute />} /> <Route path="vm/:uuid/edit" element={<EditVMRoute />} />
<Route path="sysinfo" element={<SysInfoRoute />} /> <Route path="sysinfo" element={<SysInfoRoute />} />

View File

@ -1,16 +1,12 @@
import { Button, Grid, Paper, Typography } from "@mui/material"; import { Button } from "@mui/material";
import React, { PropsWithChildren } from "react"; import React from "react";
import { useNavigate, useParams } from "react-router-dom"; import { useNavigate, useParams } from "react-router-dom";
import { validate as validateUUID } from "uuid";
import { ServerApi } from "../api/ServerApi";
import { VMApi, VMInfo } from "../api/VMApi"; import { VMApi, VMInfo } from "../api/VMApi";
import { useAlert } from "../hooks/providers/AlertDialogProvider"; import { useAlert } from "../hooks/providers/AlertDialogProvider";
import { useSnackbar } from "../hooks/providers/SnackbarProvider"; import { useSnackbar } from "../hooks/providers/SnackbarProvider";
import { AsyncWidget } from "../widgets/AsyncWidget"; import { AsyncWidget } from "../widgets/AsyncWidget";
import { VirtWebRouteContainer } from "../widgets/VirtWebRouteContainer"; import { VirtWebRouteContainer } from "../widgets/VirtWebRouteContainer";
import { CheckboxInput } from "../widgets/forms/CheckboxInput"; import { VMDetails } from "../widgets/vms/VMDetails";
import { SelectInput } from "../widgets/forms/SelectInput";
import { TextInput } from "../widgets/forms/TextInput";
export function CreateVMRoute(): React.ReactElement { export function CreateVMRoute(): React.ReactElement {
const snackbar = useSnackbar(); const snackbar = useSnackbar();
@ -105,7 +101,6 @@ function EditVMInner(p: {
setChanged(true); setChanged(true);
forceUpdate(); forceUpdate();
}; };
return ( return (
<VirtWebRouteContainer <VirtWebRouteContainer
label={p.isCreating ? "Create a Virtual Machine" : "Edit Virtual Machine"} label={p.isCreating ? "Create a Virtual Machine" : "Edit Virtual Machine"}
@ -126,127 +121,7 @@ function EditVMInner(p: {
</span> </span>
} }
> >
<Grid container spacing={2}> <VMDetails vm={p.vm} editable={true} onChange={valueChanged} />
{/* Metadata section */}
<EditSection title="Metadata">
<TextInput
label="Name"
editable={true}
value={p.vm.name}
onValueChange={(v) => {
p.vm.name = v ?? "";
valueChanged();
}}
size={ServerApi.Config.constraints.name_size}
/>
<TextInput label="UUID" editable={false} value={p.vm.uuid} />
<TextInput
label="VM genid"
editable={true}
value={p.vm.genid}
onValueChange={(v) => {
p.vm.genid = v;
valueChanged();
}}
checkValue={(v) => validateUUID(v)}
/>
<TextInput
label="Title"
editable={true}
value={p.vm.title}
onValueChange={(v) => {
p.vm.title = v;
valueChanged();
}}
size={ServerApi.Config.constraints.title_size}
/>
<TextInput
label="Description"
editable={true}
value={p.vm.description}
onValueChange={(v) => {
p.vm.description = v;
valueChanged();
}}
multiline={true}
/>
</EditSection>
{/* General section */}
<EditSection title="General">
<SelectInput
editing={true}
label="CPU Architecture"
onValueChange={(v) => {
p.vm.architecture = v! as any;
valueChanged();
}}
value={p.vm.architecture}
options={[
{ label: "i686", value: "i686" },
{ label: "x86_64", value: "x86_64" },
]}
/>
<SelectInput
editing={true}
label="Boot type"
onValueChange={(v) => {
p.vm.boot_type = v! as any;
valueChanged();
}}
value={p.vm.boot_type}
options={[
{ label: "UEFI with Secure Boot", value: "UEFISecureBoot" },
{ label: "UEFI", value: "UEFI" },
]}
/>
<TextInput
label="Memory (MB)"
editable={true}
type="number"
value={p.vm.memory.toString()}
onValueChange={(v) => {
p.vm.memory = Number(v ?? "0");
valueChanged();
}}
checkValue={(v) =>
Number(v) > ServerApi.Config.constraints.memory_size.min &&
Number(v) < ServerApi.Config.constraints.memory_size.max
}
/>
<CheckboxInput
editable={true}
label="Enable VNC access"
checked={p.vm.vnc_access}
onValueChange={(v) => {
p.vm.vnc_access = v;
valueChanged();
}}
/>
</EditSection>
</Grid>
</VirtWebRouteContainer> </VirtWebRouteContainer>
); );
} }
function EditSection(
p: { title: string } & PropsWithChildren
): React.ReactElement {
return (
<Grid item sm={12} md={6}>
<Paper style={{ margin: "10px", padding: "10px" }}>
<Typography variant="h5" style={{ marginBottom: "15px" }}>
{p.title}
</Typography>
{p.children}
</Paper>
</Grid>
);
}

View File

@ -22,7 +22,7 @@ import { VMStatusWidget } from "../widgets/vms/VMStatusWidget";
import { useSnackbar } from "../hooks/providers/SnackbarProvider"; import { useSnackbar } from "../hooks/providers/SnackbarProvider";
import { useConfirm } from "../hooks/providers/ConfirmDialogProvider"; import { useConfirm } from "../hooks/providers/ConfirmDialogProvider";
export function VirtualMachinesRoute(): React.ReactElement { export function VMListRoute(): React.ReactElement {
const [list, setList] = React.useState<VMInfo[] | undefined>(); const [list, setList] = React.useState<VMInfo[] | undefined>();
const loadKey = React.useRef(1); const loadKey = React.useRef(1);
@ -119,7 +119,7 @@ function VMListWidget(p: {
<TableCell>{row.description ?? ""}</TableCell> <TableCell>{row.description ?? ""}</TableCell>
<TableCell>{filesize(row.memory * 1000 * 1000)}</TableCell> <TableCell>{filesize(row.memory * 1000 * 1000)}</TableCell>
<TableCell> <TableCell>
<VMStatusWidget d={row} /> <VMStatusWidget vm={row} />
</TableCell> </TableCell>
<TableCell> <TableCell>
<Tooltip title="View this VM"> <Tooltip title="View this VM">

View File

@ -0,0 +1,56 @@
import { useNavigate, useParams } from "react-router-dom";
import { VMApi, VMInfo, VMState } from "../api/VMApi";
import React from "react";
import { AsyncWidget } from "../widgets/AsyncWidget";
import { VirtWebRouteContainer } from "../widgets/VirtWebRouteContainer";
import { VMDetails } from "../widgets/vms/VMDetails";
import { VMStatusWidget } from "../widgets/vms/VMStatusWidget";
import { Button } from "@mui/material";
export function VMRoute(): React.ReactElement {
const { uuid } = useParams();
const [vm, setVM] = React.useState<VMInfo>();
const load = async () => {
setVM(await VMApi.GetSingle(uuid!));
};
return (
<AsyncWidget
loadKey={uuid}
load={load}
errMsg="Failed to load VM information!"
build={() => <VMRouteBody vm={vm!} />}
/>
);
}
function VMRouteBody(p: { vm: VMInfo }): React.ReactElement {
const navigate = useNavigate();
const [state, setState] = React.useState<VMState | undefined>();
return (
<VirtWebRouteContainer
label={`VM ${p.vm.name}`}
actions={
<span>
<VMStatusWidget vm={p.vm} onChange={setState} />
{(state === "Shutdown" || state === "Shutoff") && (
<Button
variant="contained"
style={{ marginLeft: "15px" }}
onClick={() => navigate(p.vm.EditURL)}
>
Edit
</Button>
)}
</span>
}
>
<VMDetails vm={p.vm} editable={false} />
</VirtWebRouteContainer>
);
}

View File

@ -6,15 +6,16 @@ export function CheckboxInput(p: {
checked: boolean | undefined; checked: boolean | undefined;
onValueChange: (v: boolean) => void; onValueChange: (v: boolean) => void;
}): React.ReactElement { }): React.ReactElement {
if (!p.editable && p.checked) //if (!p.editable && p.checked)
return <Typography variant="body2">{p.label}</Typography>; // return <Typography variant="body2">{p.label}</Typography>;
if (!p.editable) return <></>; //if (!p.editable) return <></>;
return ( return (
<FormControlLabel <FormControlLabel
control={ control={
<Checkbox <Checkbox
disabled={!p.editable}
checked={p.checked} checked={p.checked}
onChange={(e) => p.onValueChange(e.target.checked)} onChange={(e) => p.onValueChange(e.target.checked)}
/> />

View File

@ -8,16 +8,16 @@ export interface SelectOption {
export function SelectInput(p: { export function SelectInput(p: {
value?: string; value?: string;
editing: boolean; editable: boolean;
label: string; label: string;
options: SelectOption[]; options: SelectOption[];
onValueChange: (o?: string) => void; onValueChange: (o?: string) => void;
}): React.ReactElement { }): React.ReactElement {
if (!p.editing && !p.value) return <></>; if (!p.editable && !p.value) return <></>;
if (!p.editing) { if (!p.editable) {
const value = p.options.find((o) => o.value === p.value)?.label; const value = p.options.find((o) => o.value === p.value)?.label;
return <TextInput label={p.label} editable={p.editing} value={value} />; return <TextInput label={p.label} editable={p.editable} value={value} />;
} }
return ( return (
<FormControl fullWidth variant="standard" style={{ marginBottom: "15px" }}> <FormControl fullWidth variant="standard" style={{ marginBottom: "15px" }}>

View File

@ -0,0 +1,138 @@
import { Grid, Paper, Typography } from "@mui/material";
import { PropsWithChildren } from "react";
import { validate as validateUUID } from "uuid";
import { ServerApi } from "../../api/ServerApi";
import { VMInfo } from "../../api/VMApi";
import { CheckboxInput } from "../forms/CheckboxInput";
import { SelectInput } from "../forms/SelectInput";
import { TextInput } from "../forms/TextInput";
export function VMDetails(p: {
vm: VMInfo;
editable: boolean;
onChange?: () => void;
}): React.ReactElement {
return (
<Grid container spacing={2}>
{/* Metadata section */}
<EditSection title="Metadata">
<TextInput
label="Name"
editable={p.editable}
value={p.vm.name}
onValueChange={(v) => {
p.vm.name = v ?? "";
p.onChange?.();
}}
size={ServerApi.Config.constraints.name_size}
/>
<TextInput label="UUID" editable={false} value={p.vm.uuid} />
<TextInput
label="VM genid"
editable={p.editable}
value={p.vm.genid}
onValueChange={(v) => {
p.vm.genid = v;
p.onChange?.();
}}
checkValue={(v) => validateUUID(v)}
/>
<TextInput
label="Title"
editable={p.editable}
value={p.vm.title}
onValueChange={(v) => {
p.vm.title = v;
p.onChange?.();
}}
size={ServerApi.Config.constraints.title_size}
/>
<TextInput
label="Description"
editable={p.editable}
value={p.vm.description}
onValueChange={(v) => {
p.vm.description = v;
p.onChange?.();
}}
multiline={true}
/>
</EditSection>
{/* General section */}
<EditSection title="General">
<SelectInput
editable={p.editable}
label="CPU Architecture"
onValueChange={(v) => {
p.vm.architecture = v! as any;
p.onChange?.();
}}
value={p.vm.architecture}
options={[
{ label: "i686", value: "i686" },
{ label: "x86_64", value: "x86_64" },
]}
/>
<SelectInput
editable={p.editable}
label="Boot type"
onValueChange={(v) => {
p.vm.boot_type = v! as any;
p.onChange?.();
}}
value={p.vm.boot_type}
options={[
{ label: "UEFI with Secure Boot", value: "UEFISecureBoot" },
{ label: "UEFI", value: "UEFI" },
]}
/>
<TextInput
label="Memory (MB)"
editable={p.editable}
type="number"
value={p.vm.memory.toString()}
onValueChange={(v) => {
p.vm.memory = Number(v ?? "0");
p.onChange?.();
}}
checkValue={(v) =>
Number(v) > ServerApi.Config.constraints.memory_size.min &&
Number(v) < ServerApi.Config.constraints.memory_size.max
}
/>
<CheckboxInput
editable={p.editable}
label="Enable VNC access"
checked={p.vm.vnc_access}
onValueChange={(v) => {
p.vm.vnc_access = v;
p.onChange?.();
}}
/>
</EditSection>
</Grid>
);
}
function EditSection(
p: { title: string } & PropsWithChildren
): React.ReactElement {
return (
<Grid item sm={12} md={6}>
<Paper style={{ margin: "10px", padding: "10px" }}>
<Typography variant="h5" style={{ marginBottom: "15px" }}>
{p.title}
</Typography>
{p.children}
</Paper>
</Grid>
);
}

View File

@ -11,7 +11,7 @@ import { useConfirm } from "../../hooks/providers/ConfirmDialogProvider";
import { useSnackbar } from "../../hooks/providers/SnackbarProvider"; import { useSnackbar } from "../../hooks/providers/SnackbarProvider";
export function VMStatusWidget(p: { export function VMStatusWidget(p: {
d: VMInfo; vm: VMInfo;
onChange?: (s: VMState) => void; onChange?: (s: VMState) => void;
}): React.ReactElement { }): React.ReactElement {
const snackbar = useSnackbar(); const snackbar = useSnackbar();
@ -20,7 +20,7 @@ export function VMStatusWidget(p: {
const refresh = async () => { const refresh = async () => {
try { try {
const s = await VMApi.GetState(p.d); const s = await VMApi.GetState(p.vm);
if (s !== state) p.onChange?.(s); if (s !== state) p.onChange?.(s);
setState(s); setState(s);
} catch (e) { } catch (e) {
@ -32,6 +32,7 @@ export function VMStatusWidget(p: {
const changedAction = () => setState(undefined); const changedAction = () => setState(undefined);
React.useEffect(() => { React.useEffect(() => {
refresh();
const i = setInterval(() => refresh(), 3000); const i = setInterval(() => refresh(), 3000);
return () => clearInterval(i); return () => clearInterval(i);
@ -54,7 +55,7 @@ export function VMStatusWidget(p: {
cond={["Shutdown", "Shutoff", "Crashed"]} cond={["Shutdown", "Shutoff", "Crashed"]}
icon={<PlayArrowIcon />} icon={<PlayArrowIcon />}
tooltip="Start the Virtual Machine" tooltip="Start the Virtual Machine"
performAction={() => VMApi.StartVM(p.d)} performAction={() => VMApi.StartVM(p.vm)}
onExecuted={changedAction} onExecuted={changedAction}
/> />
@ -64,7 +65,7 @@ export function VMStatusWidget(p: {
cond={["Paused", "PowerManagementSuspended"]} cond={["Paused", "PowerManagementSuspended"]}
icon={<PlayArrowIcon />} icon={<PlayArrowIcon />}
tooltip="Resume the Virtual Machine" tooltip="Resume the Virtual Machine"
performAction={() => VMApi.ResumeVM(p.d)} performAction={() => VMApi.ResumeVM(p.vm)}
onExecuted={changedAction} onExecuted={changedAction}
/> />
@ -75,7 +76,7 @@ export function VMStatusWidget(p: {
icon={<PauseIcon />} icon={<PauseIcon />}
tooltip="Suspend the Virtual Machine" tooltip="Suspend the Virtual Machine"
confirmMessage="Do you really want to supsend this VM?" confirmMessage="Do you really want to supsend this VM?"
performAction={() => VMApi.SuspendVM(p.d)} performAction={() => VMApi.SuspendVM(p.vm)}
onExecuted={changedAction} onExecuted={changedAction}
/> />
@ -86,7 +87,7 @@ export function VMStatusWidget(p: {
icon={<PowerSettingsNewIcon />} icon={<PowerSettingsNewIcon />}
tooltip="Shutdown the Virtual Machine" tooltip="Shutdown the Virtual Machine"
confirmMessage="Do you really want to shutdown this VM?" confirmMessage="Do you really want to shutdown this VM?"
performAction={() => VMApi.ShutdownVM(p.d)} performAction={() => VMApi.ShutdownVM(p.vm)}
onExecuted={changedAction} onExecuted={changedAction}
/> />
@ -97,7 +98,7 @@ export function VMStatusWidget(p: {
icon={<StopIcon />} icon={<StopIcon />}
tooltip="Kill the Virtual Machine" tooltip="Kill the Virtual Machine"
confirmMessage="Do you really want to kill this VM? This could lead to data loss / corruption!" confirmMessage="Do you really want to kill this VM? This could lead to data loss / corruption!"
performAction={() => VMApi.KillVM(p.d)} performAction={() => VMApi.KillVM(p.vm)}
onExecuted={changedAction} onExecuted={changedAction}
/> />
@ -108,7 +109,7 @@ export function VMStatusWidget(p: {
icon={<ReplayIcon />} icon={<ReplayIcon />}
tooltip="Reset the Virtual Machine" tooltip="Reset the Virtual Machine"
confirmMessage="Do you really want to reset this VM?" confirmMessage="Do you really want to reset this VM?"
performAction={() => VMApi.ResetVM(p.d)} performAction={() => VMApi.ResetVM(p.vm)}
onExecuted={changedAction} onExecuted={changedAction}
/> />
</div> </div>