Can edit more network settings

virtweb_frontend/src/routes/EditNetworkRoute.tsx

@@ -1,5 +1,5 @@
 import { useNavigate, useParams } from "react-router-dom";
-import { NetworkApi, NetworkInfo } from "../api/NetworksApi";
+import { NetworkApi, NetworkInfo, NetworkURL } from "../api/NetworksApi";
 import { useAlert } from "../hooks/providers/AlertDialogProvider";
 import { useSnackbar } from "../hooks/providers/SnackbarProvider";
 import React from "react";
@@ -56,7 +56,7 @@ export function EditNetworkRoute(): React.ReactElement {
     try {
       await NetworkApi.Update(n);
       snackbar("The network was successfully updated!");
-      navigate(`/net/${network!.uuid}`);
+      navigate(NetworkURL(network!));
     } catch (e) {
       console.error(e);
       alert("Failed to update network!");

virtweb_frontend/src/routes/NetworksListRoute.tsx

@@ -20,6 +20,7 @@ import { VirtWebRouteContainer } from "../widgets/VirtWebRouteContainer";
 import { useConfirm } from "../hooks/providers/ConfirmDialogProvider";
 import { useSnackbar } from "../hooks/providers/SnackbarProvider";
 import { useAlert } from "../hooks/providers/AlertDialogProvider";
+import { NetworkStatusWidget } from "../widgets/net/NetworkStatusWidget";
 
 export function NetworksListRoute(): React.ReactElement {
   const confirm = useConfirm();
@@ -93,6 +94,7 @@ function NetworksListRouteInner(p: {
               <TableCell>Description</TableCell>
               <TableCell>Network type</TableCell>
               <TableCell>IP</TableCell>
+              <TableCell>State</TableCell>
               <TableCell>Actions</TableCell>
             </TableRow>
           </TableHead>
@@ -112,6 +114,9 @@ function NetworksListRouteInner(p: {
                   <TableCell>
                     {t.ip_v4 && "IPv4"} {t.ip_v6 && "IPv6"}
                   </TableCell>
+                  <TableCell>
+                    <NetworkStatusWidget net={t} />
+                  </TableCell>
                   <TableCell>
                     <RouterLink to={NetworkURL(t)}>
                       <IconButton>

virtweb_frontend/src/routes/ViewNetworkRoute.tsx

@@ -1,10 +1,16 @@
 import React from "react";
-import { NetworkApi, NetworkInfo } from "../api/NetworksApi";
+import {
+  NetworkApi,
+  NetworkInfo,
+  NetworkStatus,
+  NetworkURL,
+} 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";
+import { NetworkStatusWidget } from "../widgets/net/NetworkStatusWidget";
 
 export function ViewNetworkRoute() {
   const { uuid } = useParams();
@@ -31,18 +37,25 @@ function ViewNetworkRouteInner(p: {
 }): React.ReactElement {
   const navigate = useNavigate();
 
+  const [netStatus, setNetStatus] = React.useState<NetworkStatus | undefined>();
+
   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>
+        <span>
+          <NetworkStatusWidget net={p.network} onChange={setNetStatus} />
+
+          {netStatus === "Stopped" && (
+            <Button
+              variant="contained"
+              style={{ marginLeft: "15px" }}
+              onClick={() => navigate(NetworkURL(p.network, true))}
+            >
+              Edit
+            </Button>
+          )}
+        </span>
       }
     >
       <NetworkDetails net={p.network} editable={false} />