Can export networks config from UI

virtweb_frontend/src/routes/ViewNetworkRoute.tsx

@@ -1,6 +1,6 @@
 import { mdiXml } from "@mdi/js";
 import Icon from "@mdi/react";
-import { Button, IconButton } from "@mui/material";
+import { Button, IconButton, Tooltip } from "@mui/material";
 import React from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import {
@@ -15,6 +15,7 @@ import { RouterLink } from "../widgets/RouterLink";
 import { VirtWebRouteContainer } from "../widgets/VirtWebRouteContainer";
 import { NetworkDetails } from "../widgets/net/NetworkDetails";
 import { NetworkStatusWidget } from "../widgets/net/NetworkStatusWidget";
+import { ConfigImportExportButtons } from "../widgets/ConfigImportExportButtons";
 
 export function ViewNetworkRoute() {
   const { uuid } = useParams();
@@ -47,15 +48,22 @@ function ViewNetworkRouteInner(p: {
     <VirtWebRouteContainer
       label={`Network ${p.network.name}`}
       actions={
-        <span>
+        <span style={{ display: "flex", alignItems: "center" }}>
           <NetworkStatusWidget net={p.network} onChange={setNetStatus} />
 
           <RouterLink to={NetworkXMLURL(p.network)}>
-            <IconButton size="small">
-              <Icon path={mdiXml} style={{ width: "1em" }} />
-            </IconButton>
+            <Tooltip title="View network definition">
+              <IconButton size="small">
+                <Icon path={mdiXml} style={{ width: "1em" }} />
+              </IconButton>
+            </Tooltip>
           </RouterLink>
 
+          <ConfigImportExportButtons
+            filename={`net-${p.network.name}.json`}
+            currentConf={p.network}
+          />
+
           {netStatus === "Stopped" && (
             <Button
               variant="contained"