Can export networks config from UI

This commit is contained in:
Pierre HUBERT 2023-12-23 17:39:52 +01:00
parent 66dcf668f0
commit d053490a47
2 changed files with 27 additions and 6 deletions

View File

@ -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"

View File

@ -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"