Ready to implement network routes contents

virtweb_frontend/src/widgets/BaseAuthenticatedPage.tsx

@@ -3,8 +3,7 @@ import {
   mdiDisc,
   mdiHome,
   mdiInformation,
-  mdiLan,
-  mdiNetwork,
+  mdiLan
 } from "@mdi/js";
 import Icon from "@mdi/react";
 import {

virtweb_frontend/src/widgets/forms/EditSection.tsx

@@ -0,0 +1,17 @@
+import { Grid, Paper, Typography } from "@mui/material";
+import { PropsWithChildren } from "react";
+
+export 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>
+  );
+}

virtweb_frontend/src/widgets/forms/VMSelectIsoInput.tsx

@@ -22,7 +22,7 @@ export function VMSelectIsoInput(p: {
   if (!p.value && !p.editable) return <></>;
 
   if (p.value) {
-    const iso = p.isoList.find((d) => d.filename == p.value);
+    const iso = p.isoList.find((d) => d.filename === p.value);
     return (
       <ListItem
         secondaryAction={

virtweb_frontend/src/widgets/net/NetworkDetails.tsx

@@ -0,0 +1,55 @@
+import { Grid } from "@mui/material";
+import { NetworkInfo } from "../../api/NetworksApi";
+import { ServerApi } from "../../api/ServerApi";
+import { EditSection } from "../forms/EditSection";
+import { TextInput } from "../forms/TextInput";
+
+export function NetworkDetails(p: {
+  net: NetworkInfo;
+  editable: boolean;
+  onChange?: () => void;
+}): React.ReactElement {
+  return (
+    <Grid container spacing={2}>
+      {/* Metadata section */}
+      <EditSection title="Metadata">
+        <TextInput
+          label="Name"
+          editable={p.editable}
+          value={p.net.name}
+          onValueChange={(v) => {
+            p.net.name = v ?? "";
+            p.onChange?.();
+          }}
+          checkValue={(v) => /^[a-zA-Z0-9]+$/.test(v)}
+          size={ServerApi.Config.constraints.net_name_size}
+        />
+
+        <TextInput label="UUID" editable={false} value={p.net.uuid} />
+
+        <TextInput
+          label="Title"
+          editable={p.editable}
+          value={p.net.title}
+          onValueChange={(v) => {
+            p.net.title = v;
+            p.onChange?.();
+          }}
+          size={ServerApi.Config.constraints.net_title_size}
+        />
+
+        <TextInput
+          label="Description"
+          editable={p.editable}
+          value={p.net.description}
+          onValueChange={(v) => {
+            p.net.description = v;
+            p.onChange?.();
+          }}
+          multiline={true}
+        />
+      </EditSection>
+      TODO:continue
+    </Grid>
+  );
+}

virtweb_frontend/src/widgets/vms/VMDetails.tsx

@@ -1,19 +1,18 @@
-import { Grid, Paper, Typography } from "@mui/material";
-import { PropsWithChildren } from "react";
+import { Grid } from "@mui/material";
+import React from "react";
 import { validate as validateUUID } from "uuid";
+import { IsoFile, IsoFilesApi } from "../../api/IsoFilesApi";
 import { ServerApi } from "../../api/ServerApi";
 import { VMInfo } from "../../api/VMApi";
+import { AsyncWidget } from "../AsyncWidget";
 import { CheckboxInput } from "../forms/CheckboxInput";
+import { EditSection } from "../forms/EditSection";
 import { SelectInput } from "../forms/SelectInput";
 import { TextInput } from "../forms/TextInput";
-import { VMScreenshot } from "./VMScreenshot";
-import { IsoFile, IsoFilesApi } from "../../api/IsoFilesApi";
-import { AsyncWidget } from "../AsyncWidget";
-import React from "react";
-import { filesize } from "filesize";
+import { VMAutostartInput } from "../forms/VMAutostartInput";
 import { VMDisksList } from "../forms/VMDisksList";
 import { VMSelectIsoInput } from "../forms/VMSelectIsoInput";
-import { VMAutostartInput } from "../forms/VMAutostartInput";
+import { VMScreenshot } from "./VMScreenshot";
 
 interface DetailsProps {
   vm: VMInfo;
@@ -34,7 +33,7 @@ export function VMDetails(p: DetailsProps): React.ReactElement {
       loadKey={"1"}
       load={load}
       errMsg="Failed to load the list of ISO files"
-      build={() => <VMDetailsInner isoList={list!} {...p} />}
+      build={() => <VMDetailsInner isoList={list} {...p} />}
     />
   );
 }
@@ -63,7 +62,7 @@ function VMDetailsInner(
             p.onChange?.();
           }}
           checkValue={(v) => /^[a-zA-Z0-9]+$/.test(v)}
-          size={ServerApi.Config.constraints.name_size}
+          size={ServerApi.Config.constraints.vm_name_size}
         />
 
         <TextInput label="UUID" editable={false} value={p.vm.uuid} />
@@ -87,7 +86,7 @@ function VMDetailsInner(
             p.vm.title = v;
             p.onChange?.();
           }}
-          size={ServerApi.Config.constraints.title_size}
+          size={ServerApi.Config.constraints.vm_title_size}
         />
 
         <TextInput
@@ -176,18 +175,3 @@ function VMDetailsInner(
     </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>
-  );
-}