Ready to implement network routes contents

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