Start to build VM page

virtweb_frontend/src/routes/EditVMRoute.tsx

@@ -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>
-  );
-}