Show loading message when saving network / vm configuration
This commit is contained in:
parent
ffac6991c4
commit
706bce0fd8
@ -1,13 +1,14 @@
|
|||||||
|
import { Button } from "@mui/material";
|
||||||
|
import React from "react";
|
||||||
import { useNavigate, useParams } from "react-router-dom";
|
import { useNavigate, useParams } from "react-router-dom";
|
||||||
import { NetworkApi, NetworkInfo, NetworkURL } from "../api/NetworksApi";
|
import { NetworkApi, NetworkInfo, NetworkURL } from "../api/NetworksApi";
|
||||||
import { useAlert } from "../hooks/providers/AlertDialogProvider";
|
import { useAlert } from "../hooks/providers/AlertDialogProvider";
|
||||||
|
import { useLoadingMessage } from "../hooks/providers/LoadingMessageProvider";
|
||||||
import { useSnackbar } from "../hooks/providers/SnackbarProvider";
|
import { useSnackbar } from "../hooks/providers/SnackbarProvider";
|
||||||
import React from "react";
|
|
||||||
import { AsyncWidget } from "../widgets/AsyncWidget";
|
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";
|
import { ConfigImportExportButtons } from "../widgets/ConfigImportExportButtons";
|
||||||
|
import { VirtWebRouteContainer } from "../widgets/VirtWebRouteContainer";
|
||||||
|
import { NetworkDetails } from "../widgets/net/NetworkDetails";
|
||||||
|
|
||||||
export function CreateNetworkRoute(): React.ReactElement {
|
export function CreateNetworkRoute(): React.ReactElement {
|
||||||
const alert = useAlert();
|
const alert = useAlert();
|
||||||
@ -91,6 +92,8 @@ function EditNetworkRouteInner(p: {
|
|||||||
onSave: (vm: NetworkInfo) => Promise<void>;
|
onSave: (vm: NetworkInfo) => Promise<void>;
|
||||||
onReplace: (vm: NetworkInfo) => void;
|
onReplace: (vm: NetworkInfo) => void;
|
||||||
}): React.ReactElement {
|
}): React.ReactElement {
|
||||||
|
const loadingMessage = useLoadingMessage();
|
||||||
|
|
||||||
const [changed, setChanged] = React.useState(false);
|
const [changed, setChanged] = React.useState(false);
|
||||||
|
|
||||||
const [, updateState] = React.useState<any>();
|
const [, updateState] = React.useState<any>();
|
||||||
@ -100,6 +103,13 @@ function EditNetworkRouteInner(p: {
|
|||||||
setChanged(true);
|
setChanged(true);
|
||||||
forceUpdate();
|
forceUpdate();
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const save = async () => {
|
||||||
|
loadingMessage.show("Saving network configuration...");
|
||||||
|
await p.onSave(p.network);
|
||||||
|
loadingMessage.hide();
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<VirtWebRouteContainer
|
<VirtWebRouteContainer
|
||||||
label={p.creating ? "Create a Network" : "Edit Network"}
|
label={p.creating ? "Create a Network" : "Edit Network"}
|
||||||
@ -117,7 +127,7 @@ function EditNetworkRouteInner(p: {
|
|||||||
{changed && (
|
{changed && (
|
||||||
<Button
|
<Button
|
||||||
variant="contained"
|
variant="contained"
|
||||||
onClick={() => p.onSave(p.network)}
|
onClick={save}
|
||||||
style={{ marginRight: "10px" }}
|
style={{ marginRight: "10px" }}
|
||||||
>
|
>
|
||||||
{p.creating ? "Create" : "Save"}
|
{p.creating ? "Create" : "Save"}
|
||||||
|
@ -8,6 +8,7 @@ import { AsyncWidget } from "../widgets/AsyncWidget";
|
|||||||
import { ConfigImportExportButtons } from "../widgets/ConfigImportExportButtons";
|
import { ConfigImportExportButtons } from "../widgets/ConfigImportExportButtons";
|
||||||
import { VirtWebRouteContainer } from "../widgets/VirtWebRouteContainer";
|
import { VirtWebRouteContainer } from "../widgets/VirtWebRouteContainer";
|
||||||
import { VMDetails } from "../widgets/vms/VMDetails";
|
import { VMDetails } from "../widgets/vms/VMDetails";
|
||||||
|
import { useLoadingMessage } from "../hooks/providers/LoadingMessageProvider";
|
||||||
|
|
||||||
export function CreateVMRoute(): React.ReactElement {
|
export function CreateVMRoute(): React.ReactElement {
|
||||||
const snackbar = useSnackbar();
|
const snackbar = useSnackbar();
|
||||||
@ -97,6 +98,8 @@ function EditVMInner(p: {
|
|||||||
onSave: (vm: VMInfo) => Promise<void>;
|
onSave: (vm: VMInfo) => Promise<void>;
|
||||||
onReplace: (vm: VMInfo) => void;
|
onReplace: (vm: VMInfo) => void;
|
||||||
}): React.ReactElement {
|
}): React.ReactElement {
|
||||||
|
const loadingMessage = useLoadingMessage();
|
||||||
|
|
||||||
const [changed, setChanged] = React.useState(false);
|
const [changed, setChanged] = React.useState(false);
|
||||||
|
|
||||||
const [, updateState] = React.useState<any>();
|
const [, updateState] = React.useState<any>();
|
||||||
@ -106,6 +109,13 @@ function EditVMInner(p: {
|
|||||||
setChanged(true);
|
setChanged(true);
|
||||||
forceUpdate();
|
forceUpdate();
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const save = async () => {
|
||||||
|
loadingMessage.show("Saving VM configuration...");
|
||||||
|
await p.onSave(p.vm);
|
||||||
|
loadingMessage.hide();
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<VirtWebRouteContainer
|
<VirtWebRouteContainer
|
||||||
label={p.isCreating ? "Create a Virtual Machine" : "Edit Virtual Machine"}
|
label={p.isCreating ? "Create a Virtual Machine" : "Edit Virtual Machine"}
|
||||||
@ -122,7 +132,7 @@ function EditVMInner(p: {
|
|||||||
{changed && (
|
{changed && (
|
||||||
<Button
|
<Button
|
||||||
variant="contained"
|
variant="contained"
|
||||||
onClick={() => p.onSave(p.vm)}
|
onClick={save}
|
||||||
style={{ marginRight: "10px" }}
|
style={{ marginRight: "10px" }}
|
||||||
>
|
>
|
||||||
{p.isCreating ? "Create" : "Save"}
|
{p.isCreating ? "Create" : "Save"}
|
||||||
|
@ -1,12 +1,9 @@
|
|||||||
import { mdiXml } from "@mdi/js";
|
import { Button } from "@mui/material";
|
||||||
import Icon from "@mdi/react";
|
|
||||||
import { Button, IconButton, Tooltip } from "@mui/material";
|
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import { useNavigate, useParams } from "react-router-dom";
|
import { useNavigate, useParams } from "react-router-dom";
|
||||||
import { VMApi, VMInfo, VMState } from "../api/VMApi";
|
import { VMApi, VMInfo, VMState } from "../api/VMApi";
|
||||||
import { AsyncWidget } from "../widgets/AsyncWidget";
|
import { AsyncWidget } from "../widgets/AsyncWidget";
|
||||||
import { ConfigImportExportButtons } from "../widgets/ConfigImportExportButtons";
|
import { ConfigImportExportButtons } from "../widgets/ConfigImportExportButtons";
|
||||||
import { RouterLink } from "../widgets/RouterLink";
|
|
||||||
import { VirtWebRouteContainer } from "../widgets/VirtWebRouteContainer";
|
import { VirtWebRouteContainer } from "../widgets/VirtWebRouteContainer";
|
||||||
import { VMDetails } from "../widgets/vms/VMDetails";
|
import { VMDetails } from "../widgets/vms/VMDetails";
|
||||||
import { VMStatusWidget } from "../widgets/vms/VMStatusWidget";
|
import { VMStatusWidget } from "../widgets/vms/VMStatusWidget";
|
||||||
|
@ -1,6 +1,4 @@
|
|||||||
import { mdiXml } from "@mdi/js";
|
import { Button } from "@mui/material";
|
||||||
import Icon from "@mdi/react";
|
|
||||||
import { Button, IconButton, Tooltip } from "@mui/material";
|
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import { useNavigate, useParams } from "react-router-dom";
|
import { useNavigate, useParams } from "react-router-dom";
|
||||||
import {
|
import {
|
||||||
@ -8,14 +6,12 @@ import {
|
|||||||
NetworkInfo,
|
NetworkInfo,
|
||||||
NetworkStatus,
|
NetworkStatus,
|
||||||
NetworkURL,
|
NetworkURL,
|
||||||
NetworkXMLURL,
|
|
||||||
} from "../api/NetworksApi";
|
} from "../api/NetworksApi";
|
||||||
import { AsyncWidget } from "../widgets/AsyncWidget";
|
import { AsyncWidget } from "../widgets/AsyncWidget";
|
||||||
import { RouterLink } from "../widgets/RouterLink";
|
import { ConfigImportExportButtons } from "../widgets/ConfigImportExportButtons";
|
||||||
import { VirtWebRouteContainer } from "../widgets/VirtWebRouteContainer";
|
import { VirtWebRouteContainer } from "../widgets/VirtWebRouteContainer";
|
||||||
import { NetworkDetails } from "../widgets/net/NetworkDetails";
|
import { NetworkDetails } from "../widgets/net/NetworkDetails";
|
||||||
import { NetworkStatusWidget } from "../widgets/net/NetworkStatusWidget";
|
import { NetworkStatusWidget } from "../widgets/net/NetworkStatusWidget";
|
||||||
import { ConfigImportExportButtons } from "../widgets/ConfigImportExportButtons";
|
|
||||||
|
|
||||||
export function ViewNetworkRoute() {
|
export function ViewNetworkRoute() {
|
||||||
const { uuid } = useParams();
|
const { uuid } = useParams();
|
||||||
|
Loading…
Reference in New Issue
Block a user