Ready to implement network routes contents

virtweb_frontend/src/App.tsx

@@ -1,25 +1,30 @@
 import React from "react";
-import "./App.css";
 import {
   Route,
   RouterProvider,
   createBrowserRouter,
   createRoutesFromElements,
 } from "react-router-dom";
-import { NotFoundRoute } from "./routes/NotFound";
-import { OIDCCbRoute } from "./routes/auth/OIDCCbRoute";
-import { BaseLoginPage } from "./widgets/BaseLoginPage";
-import { BaseAuthenticatedPage } from "./widgets/BaseAuthenticatedPage";
-import { LoginRoute } from "./routes/auth/LoginRoute";
+import "./App.css";
 import { AuthApi } from "./api/AuthApi";
-import { IsoFilesRoute } from "./routes/IsoFilesRoute";
 import { ServerApi } from "./api/ServerApi";
+import {
+  CreateNetworkRoute,
+  EditNetworkRoute,
+} from "./routes/EditNetworkRoute";
+import { CreateVMRoute, EditVMRoute } from "./routes/EditVMRoute";
+import { IsoFilesRoute } from "./routes/IsoFilesRoute";
+import { NetworksListRoute } from "./routes/NetworksListRoute";
+import { NotFoundRoute } from "./routes/NotFound";
 import { SysInfoRoute } from "./routes/SysInfoRoute";
 import { VMListRoute } from "./routes/VMListRoute";
-import { CreateVMRoute, EditVMRoute } from "./routes/EditVMRoute";
 import { VMRoute } from "./routes/VMRoute";
 import { VNCRoute } from "./routes/VNCRoute";
-import { NetworksListRoute } from "./routes/NetworksListRoute";
+import { LoginRoute } from "./routes/auth/LoginRoute";
+import { OIDCCbRoute } from "./routes/auth/OIDCCbRoute";
+import { BaseAuthenticatedPage } from "./widgets/BaseAuthenticatedPage";
+import { BaseLoginPage } from "./widgets/BaseLoginPage";
+import { ViewNetworkRoute } from "./routes/ViewNetworkRoute";
 
 interface AuthContext {
   signedIn: boolean;
@@ -49,6 +54,9 @@ export function App() {
           <Route path="vm/:uuid/vnc" element={<VNCRoute />} />
 
           <Route path="net" element={<NetworksListRoute />} />
+          <Route path="net/new" element={<CreateNetworkRoute />} />
+          <Route path="net/:uuid" element={<ViewNetworkRoute />} />
+          <Route path="net/:uuid/edit" element={<EditNetworkRoute />} />
 
           <Route path="sysinfo" element={<SysInfoRoute />} />
           <Route path="*" element={<NotFoundRoute />} />

virtweb_frontend/src/api/NetworksApi.ts

@@ -8,7 +8,7 @@ export interface IpConfig {
 
 export interface NetworkInfo {
   name: string;
-  uuid: string;
+  uuid?: string;
   title?: string;
   description?: string;
   forward_mode: "NAT" | "Isolated";
@@ -24,6 +24,19 @@ export function NetworkURL(n: NetworkInfo, edit: boolean = false): string {
 }
 
 export class NetworkApi {
+  /**
+   * Create a new network
+   */
+  static async Create(n: NetworkInfo): Promise<{ uid: string }> {
+    return (
+      await APIClient.exec({
+        method: "POST",
+        uri: "/network/create",
+        jsonData: n,
+      })
+    ).data;
+  }
+
   /**
    * Get the entire list of networks
    */
@@ -36,6 +49,31 @@ export class NetworkApi {
     ).data;
   }
 
+  /**
+   * Get the information about a single network
+   */
+  static async GetSingle(uuid: string): Promise<NetworkInfo> {
+    return (
+      await APIClient.exec({
+        method: "GET",
+        uri: `/network/${uuid}`,
+      })
+    ).data;
+  }
+
+  /**
+   * Update an existing network
+   */
+  static async Update(n: NetworkInfo): Promise<{ uid: string }> {
+    return (
+      await APIClient.exec({
+        method: "PUT",
+        uri: `/network/${n.uuid}`,
+        jsonData: n,
+      })
+    ).data;
+  }
+
   /**
    * Delete a network
    */

virtweb_frontend/src/api/ServerApi.ts

@@ -10,11 +10,13 @@ export interface ServerConfig {
 
 export interface ServerConstraints {
   iso_max_size: number;
-  name_size: LenConstraint;
-  title_size: LenConstraint;
+  vm_name_size: LenConstraint;
+  vm_title_size: LenConstraint;
   memory_size: LenConstraint;
   disk_name_size: LenConstraint;
   disk_size: LenConstraint;
+  net_name_size: LenConstraint;
+  net_title_size: LenConstraint;
 }
 
 export interface LenConstraint {

virtweb_frontend/src/routes/EditNetworkRoute.tsx

@@ -0,0 +1,122 @@
+import { useNavigate, useParams } from "react-router-dom";
+import { NetworkApi, NetworkInfo } from "../api/NetworksApi";
+import { useAlert } from "../hooks/providers/AlertDialogProvider";
+import { useSnackbar } from "../hooks/providers/SnackbarProvider";
+import React from "react";
+import { AsyncWidget } from "../widgets/AsyncWidget";
+import { NetworkDetails } from "../widgets/net/NetworkDetails";
+import { VirtWebRouteContainer } from "../widgets/VirtWebRouteContainer";
+import { Button } from "@mui/material";
+
+export function CreateNetworkRoute(): React.ReactElement {
+  const alert = useAlert();
+  const snackbar = useSnackbar();
+  const navigate = useNavigate();
+
+  const [network] = React.useState<NetworkInfo>({
+    name: "NewNetwork",
+    forward_mode: "Isolated",
+  });
+
+  const createNetwork = async (n: NetworkInfo) => {
+    try {
+      const res = await NetworkApi.Create(n);
+      snackbar("The network was successfully created!");
+      navigate(`/net/${res.uid}`);
+    } catch (e) {
+      console.error(e);
+      alert("Failed to create network!");
+    }
+  };
+
+  return (
+    <EditNetworkRouteInner
+      network={network}
+      creating={true}
+      onCancel={() => navigate("/net")}
+      onSave={createNetwork}
+    />
+  );
+}
+
+export function EditNetworkRoute(): React.ReactElement {
+  const alert = useAlert();
+  const snackbar = useSnackbar();
+
+  const { uuid } = useParams();
+  const navigate = useNavigate();
+
+  const [network, setNetwork] = React.useState<NetworkInfo | undefined>();
+
+  const load = async () => {
+    setNetwork(await NetworkApi.GetSingle(uuid!));
+  };
+
+  const updateNetwork = async (n: NetworkInfo) => {
+    try {
+      await NetworkApi.Update(n);
+      snackbar("The network was successfully updated!");
+      navigate(`/net/${network!.uuid}`);
+    } catch (e) {
+      console.error(e);
+      alert("Failed to update network!");
+    }
+  };
+
+  return (
+    <AsyncWidget
+      loadKey={uuid}
+      ready={network !== undefined}
+      errMsg="Failed to fetch network information!"
+      load={load}
+      build={() => (
+        <EditNetworkRouteInner
+          network={network!}
+          creating={false}
+          onCancel={() => navigate(`/net/${uuid}`)}
+          onSave={updateNetwork}
+        />
+      )}
+    />
+  );
+}
+
+function EditNetworkRouteInner(p: {
+  network: NetworkInfo;
+  creating: boolean;
+  onCancel: () => void;
+  onSave: (vm: NetworkInfo) => 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.creating ? "Create a Network" : "Edit Network"}
+      actions={
+        <span>
+          {changed && (
+            <Button
+              variant="contained"
+              onClick={() => p.onSave(p.network)}
+              style={{ marginRight: "10px" }}
+            >
+              {p.creating ? "Create" : "Save"}
+            </Button>
+          )}
+          <Button onClick={p.onCancel} variant="outlined">
+            Cancel
+          </Button>
+        </span>
+      }
+    >
+      <NetworkDetails net={p.network} editable={true} onChange={valueChanged} />
+    </VirtWebRouteContainer>
+  );
+}

virtweb_frontend/src/routes/ViewNetworkRoute.tsx

@@ -0,0 +1,51 @@
+import React from "react";
+import { NetworkApi, NetworkInfo } from "../api/NetworksApi";
+import { AsyncWidget } from "../widgets/AsyncWidget";
+import { useNavigate, useParams } from "react-router-dom";
+import { VirtWebRouteContainer } from "../widgets/VirtWebRouteContainer";
+import { Button } from "@mui/material";
+import { NetworkDetails } from "../widgets/net/NetworkDetails";
+
+export function ViewNetworkRoute() {
+  const { uuid } = useParams();
+
+  const [network, setNetwork] = React.useState<NetworkInfo | undefined>();
+
+  const load = async () => {
+    setNetwork(await NetworkApi.GetSingle(uuid!));
+  };
+
+  return (
+    <AsyncWidget
+      loadKey={uuid}
+      ready={network !== undefined}
+      errMsg="Failed to fetch network information!"
+      load={load}
+      build={() => <ViewNetworkRouteInner network={network!} />}
+    />
+  );
+}
+
+function ViewNetworkRouteInner(p: {
+  network: NetworkInfo;
+}): React.ReactElement {
+  const navigate = useNavigate();
+
+  return (
+    <VirtWebRouteContainer
+      label={`Network ${p.network.name}`}
+      actions={
+        /* TODO: show only if network is stopped */
+        <Button
+          variant="contained"
+          style={{ marginLeft: "15px" }}
+          onClick={() => navigate(`/net/${p.network.uuid}/edit`)}
+        >
+          Edit
+        </Button>
+      }
+    >
+      <NetworkDetails net={p.network} editable={false} />
+    </VirtWebRouteContainer>
+  );
+}

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