Can export networks config from UI

virtweb_frontend/src/routes/EditNetworkRoute.tsx

@@ -7,13 +7,14 @@ import { AsyncWidget } from "../widgets/AsyncWidget";
 import { NetworkDetails } from "../widgets/net/NetworkDetails";
 import { VirtWebRouteContainer } from "../widgets/VirtWebRouteContainer";
 import { Button } from "@mui/material";
+import { ConfigImportExportButtons } from "../widgets/ConfigImportExportButtons";
 
 export function CreateNetworkRoute(): React.ReactElement {
   const alert = useAlert();
   const snackbar = useSnackbar();
   const navigate = useNavigate();
 
-  const [network] = React.useState<NetworkInfo>({
+  const [network, setNetwork] = React.useState<NetworkInfo>({
     name: "NewNetwork",
     forward_mode: "Isolated",
   });
@@ -35,6 +36,7 @@ export function CreateNetworkRoute(): React.ReactElement {
       creating={true}
       onCancel={() => navigate("/net")}
       onSave={createNetwork}
+      onReplace={setNetwork}
     />
   );
 }
@@ -75,6 +77,7 @@ export function EditNetworkRoute(): React.ReactElement {
           creating={false}
           onCancel={() => navigate(`/net/${uuid}`)}
           onSave={updateNetwork}
+          onReplace={setNetwork}
         />
       )}
     />
@@ -86,6 +89,7 @@ function EditNetworkRouteInner(p: {
   creating: boolean;
   onCancel: () => void;
   onSave: (vm: NetworkInfo) => Promise<void>;
+  onReplace: (vm: NetworkInfo) => void;
 }): React.ReactElement {
   const [changed, setChanged] = React.useState(false);
 
@@ -101,6 +105,15 @@ function EditNetworkRouteInner(p: {
       label={p.creating ? "Create a Network" : "Edit Network"}
       actions={
         <span>
+          <ConfigImportExportButtons
+            currentConf={p.network}
+            filename={`net-${p.network.name}.json`}
+            importConf={(c) => {
+              p.onReplace(c);
+              valueChanged();
+            }}
+          />
+
           {changed && (
             <Button
               variant="contained"

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"