Ready to implement network routes contents

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