pierre/VirtWeb
1
0
Fork 0
Code Issues Pull Requests 7 Packages Projects Releases Wiki Activity

Show VM settings in grid

Browse Source
This commit is contained in:
Pierre HUBERT 2023-10-16 19:25:00 +02:00
parent 674f9fe7ed
commit fcf66e3e93
1 changed files with 114 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

224
virtweb_frontend/src/routes/EditVMRoute.tsx
View File

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