Can create VM from UI

virtweb_frontend/src/routes/EditVMRoute.tsx

@@ -0,0 +1,195 @@
+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>
+  );
+}

virtweb_frontend/src/routes/IsoFilesRoute.tsx

@@ -68,10 +68,10 @@ function UploadIsoFileCard(p: {
   );
 
   const handleChange = (newValue: File | null) => {
-    if (newValue && newValue.size > ServerApi.Config.iso_max_size) {
+    if (newValue && newValue.size > ServerApi.Config.constraints.iso_max_size) {
       alert(
         `The file is too big (max size allowed: ${filesize(
-          ServerApi.Config.iso_max_size
+          ServerApi.Config.constraints.iso_max_size
         )}`
       );
       return;