Start to build VM page
This commit is contained in:
@ -1,16 +1,12 @@
|
||||
import { Button, Grid, Paper, Typography } from "@mui/material";
|
||||
import React, { PropsWithChildren } from "react";
|
||||
import { Button } from "@mui/material";
|
||||
import React from "react";
|
||||
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 { useAlert } from "../hooks/providers/AlertDialogProvider";
|
||||
import { useSnackbar } from "../hooks/providers/SnackbarProvider";
|
||||
import { AsyncWidget } from "../widgets/AsyncWidget";
|
||||
import { VirtWebRouteContainer } from "../widgets/VirtWebRouteContainer";
|
||||
import { CheckboxInput } from "../widgets/forms/CheckboxInput";
|
||||
import { SelectInput } from "../widgets/forms/SelectInput";
|
||||
import { TextInput } from "../widgets/forms/TextInput";
|
||||
import { VMDetails } from "../widgets/vms/VMDetails";
|
||||
|
||||
export function CreateVMRoute(): React.ReactElement {
|
||||
const snackbar = useSnackbar();
|
||||
@ -105,7 +101,6 @@ function EditVMInner(p: {
|
||||
setChanged(true);
|
||||
forceUpdate();
|
||||
};
|
||||
|
||||
return (
|
||||
<VirtWebRouteContainer
|
||||
label={p.isCreating ? "Create a Virtual Machine" : "Edit Virtual Machine"}
|
||||
@ -126,127 +121,7 @@ function EditVMInner(p: {
|
||||
</span>
|
||||
}
|
||||
>
|
||||
<Grid container spacing={2}>
|
||||
{/* 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>
|
||||
<VMDetails vm={p.vm} editable={true} onChange={valueChanged} />
|
||||
</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>
|
||||
);
|
||||
}
|
||||
|
||||
@ -22,7 +22,7 @@ import { VMStatusWidget } from "../widgets/vms/VMStatusWidget";
|
||||
import { useSnackbar } from "../hooks/providers/SnackbarProvider";
|
||||
import { useConfirm } from "../hooks/providers/ConfirmDialogProvider";
|
||||
|
||||
export function VirtualMachinesRoute(): React.ReactElement {
|
||||
export function VMListRoute(): React.ReactElement {
|
||||
const [list, setList] = React.useState<VMInfo[] | undefined>();
|
||||
|
||||
const loadKey = React.useRef(1);
|
||||
@ -119,7 +119,7 @@ function VMListWidget(p: {
|
||||
<TableCell>{row.description ?? ""}</TableCell>
|
||||
<TableCell>{filesize(row.memory * 1000 * 1000)}</TableCell>
|
||||
<TableCell>
|
||||
<VMStatusWidget d={row} />
|
||||
<VMStatusWidget vm={row} />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Tooltip title="View this VM">
|
||||
56
virtweb_frontend/src/routes/VMRoute.tsx
Normal file
56
virtweb_frontend/src/routes/VMRoute.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user