Start to build VM page

2023-10-17 18:11:31 +02:00
parent fcf66e3e93
commit 62364594c9
8 changed files with 221 additions and 148 deletions
--- a/virtweb_frontend/src/widgets/vms/VMDetails.tsx
+++ b/virtweb_frontend/src/widgets/vms/VMDetails.tsx
@ -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>
+  );
+}