196 lines
5.1 KiB
TypeScript
196 lines
5.1 KiB
TypeScript
import React, { PropsWithChildren } from "react";
|
|
import { useNavigate } 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 { SelectInput } from "../widgets/forms/SelectInput";
|
|
import { CheckboxInput } from "../widgets/forms/CheckboxInput";
|
|
|
|
export function CreateVMRoute(): React.ReactElement {
|
|
const snackbar = useSnackbar();
|
|
const navigate = useNavigate();
|
|
|
|
const [vm] = React.useState(VMInfo.NewEmpty);
|
|
|
|
const create = async (v: VMInfo) => {
|
|
const res = await VMApi.Create(v);
|
|
snackbar("The virtual machine was successfully created!");
|
|
v.uuid = res.uuid;
|
|
navigate(v.ViewURL);
|
|
};
|
|
|
|
return (
|
|
<EditVMInner
|
|
vm={vm}
|
|
isCreating={true}
|
|
onSave={create}
|
|
onCancel={() => navigate("/vms")}
|
|
/>
|
|
);
|
|
}
|
|
|
|
export function EditVMRoute(): React.ReactElement {
|
|
return <>todo</>;
|
|
}
|
|
|
|
function EditVMInner(p: {
|
|
vm: VMInfo;
|
|
isCreating: boolean;
|
|
onCancel: () => void;
|
|
onSave: (vm: VMInfo) => Promise<void>;
|
|
}): React.ReactElement {
|
|
const [changed, setChanged] = React.useState(false);
|
|
|
|
const [, updateState] = React.useState<any>();
|
|
const forceUpdate = React.useCallback(() => updateState({}), []);
|
|
|
|
const valueChanged = () => {
|
|
setChanged(true);
|
|
forceUpdate();
|
|
};
|
|
|
|
return (
|
|
<VirtWebRouteContainer
|
|
label={p.isCreating ? "Create a Virtual Machine" : "Edit Virtual Machine"}
|
|
actions={
|
|
<span>
|
|
{changed && (
|
|
<Button
|
|
variant="contained"
|
|
onClick={() => p.onSave(p.vm)}
|
|
style={{ marginRight: "10px" }}
|
|
>
|
|
{p.isCreating ? "Create" : "Save"}
|
|
</Button>
|
|
)}
|
|
<Button onClick={p.onCancel} variant="outlined">
|
|
Cancel
|
|
</Button>
|
|
</span>
|
|
}
|
|
>
|
|
{/* 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>
|
|
</VirtWebRouteContainer>
|
|
);
|
|
}
|
|
|
|
function EditSection(
|
|
p: { title: string } & PropsWithChildren
|
|
): React.ReactElement {
|
|
return (
|
|
<Paper style={{ margin: "10px", padding: "10px" }}>
|
|
<Typography variant="h5" style={{ marginBottom: "15px" }}>
|
|
{p.title}
|
|
</Typography>
|
|
{p.children}
|
|
</Paper>
|
|
);
|
|
}
|