Show VM settings in grid

virtweb_frontend/src/routes/EditVMRoute.tsx

@@ -1,16 +1,16 @@
+import { Button, Grid, Paper, Typography } from "@mui/material";
 import React, { PropsWithChildren } from "react";
 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 { SelectInput } from "../widgets/forms/SelectInput";
-import { CheckboxInput } from "../widgets/forms/CheckboxInput";
+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";
 
 export function CreateVMRoute(): React.ReactElement {
   const snackbar = useSnackbar();
@@ -126,110 +126,112 @@ function EditVMInner(p: {
         </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}
-        />
+      <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="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="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="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>
+          <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" },
-          ]}
-        />
+        {/* 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" },
-          ]}
-        />
+          <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
-          }
-        />
+          <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>
+          <CheckboxInput
+            editable={true}
+            label="Enable VNC access"
+            checked={p.vm.vnc_access}
+            onValueChange={(v) => {
+              p.vm.vnc_access = v;
+              valueChanged();
+            }}
+          />
+        </EditSection>
+      </Grid>
     </VirtWebRouteContainer>
   );
 }
@@ -238,11 +240,13 @@ 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>
+    <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>
   );
 }