From 706bce0fd8d27383feb8f636f2c7f967e2f09f6d Mon Sep 17 00:00:00 2001 From: Pierre Hubert Date: Wed, 3 Jan 2024 12:02:49 +0100 Subject: [PATCH] Show loading message when saving network / vm configuration --- .../src/routes/EditNetworkRoute.tsx | 20 ++++++++++++++----- virtweb_frontend/src/routes/EditVMRoute.tsx | 12 ++++++++++- virtweb_frontend/src/routes/VMRoute.tsx | 5 +---- .../src/routes/ViewNetworkRoute.tsx | 8 ++------ 4 files changed, 29 insertions(+), 16 deletions(-) diff --git a/virtweb_frontend/src/routes/EditNetworkRoute.tsx b/virtweb_frontend/src/routes/EditNetworkRoute.tsx index 3503f1f..8ca60cd 100644 --- a/virtweb_frontend/src/routes/EditNetworkRoute.tsx +++ b/virtweb_frontend/src/routes/EditNetworkRoute.tsx @@ -1,13 +1,14 @@ +import { Button } from "@mui/material"; +import React from "react"; import { useNavigate, useParams } from "react-router-dom"; import { NetworkApi, NetworkInfo, NetworkURL } from "../api/NetworksApi"; import { useAlert } from "../hooks/providers/AlertDialogProvider"; +import { useLoadingMessage } from "../hooks/providers/LoadingMessageProvider"; import { useSnackbar } from "../hooks/providers/SnackbarProvider"; -import React from "react"; 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 { VirtWebRouteContainer } from "../widgets/VirtWebRouteContainer"; +import { NetworkDetails } from "../widgets/net/NetworkDetails"; export function CreateNetworkRoute(): React.ReactElement { const alert = useAlert(); @@ -91,6 +92,8 @@ function EditNetworkRouteInner(p: { onSave: (vm: NetworkInfo) => Promise; onReplace: (vm: NetworkInfo) => void; }): React.ReactElement { + const loadingMessage = useLoadingMessage(); + const [changed, setChanged] = React.useState(false); const [, updateState] = React.useState(); @@ -100,6 +103,13 @@ function EditNetworkRouteInner(p: { setChanged(true); forceUpdate(); }; + + const save = async () => { + loadingMessage.show("Saving network configuration..."); + await p.onSave(p.network); + loadingMessage.hide(); + }; + return ( p.onSave(p.network)} + onClick={save} style={{ marginRight: "10px" }} > {p.creating ? "Create" : "Save"} diff --git a/virtweb_frontend/src/routes/EditVMRoute.tsx b/virtweb_frontend/src/routes/EditVMRoute.tsx index 93f3014..8a5b420 100644 --- a/virtweb_frontend/src/routes/EditVMRoute.tsx +++ b/virtweb_frontend/src/routes/EditVMRoute.tsx @@ -8,6 +8,7 @@ import { AsyncWidget } from "../widgets/AsyncWidget"; import { ConfigImportExportButtons } from "../widgets/ConfigImportExportButtons"; import { VirtWebRouteContainer } from "../widgets/VirtWebRouteContainer"; import { VMDetails } from "../widgets/vms/VMDetails"; +import { useLoadingMessage } from "../hooks/providers/LoadingMessageProvider"; export function CreateVMRoute(): React.ReactElement { const snackbar = useSnackbar(); @@ -97,6 +98,8 @@ function EditVMInner(p: { onSave: (vm: VMInfo) => Promise; onReplace: (vm: VMInfo) => void; }): React.ReactElement { + const loadingMessage = useLoadingMessage(); + const [changed, setChanged] = React.useState(false); const [, updateState] = React.useState(); @@ -106,6 +109,13 @@ function EditVMInner(p: { setChanged(true); forceUpdate(); }; + + const save = async () => { + loadingMessage.show("Saving VM configuration..."); + await p.onSave(p.vm); + loadingMessage.hide(); + }; + return ( p.onSave(p.vm)} + onClick={save} style={{ marginRight: "10px" }} > {p.isCreating ? "Create" : "Save"} diff --git a/virtweb_frontend/src/routes/VMRoute.tsx b/virtweb_frontend/src/routes/VMRoute.tsx index ee997e9..23eea28 100644 --- a/virtweb_frontend/src/routes/VMRoute.tsx +++ b/virtweb_frontend/src/routes/VMRoute.tsx @@ -1,12 +1,9 @@ -import { mdiXml } from "@mdi/js"; -import Icon from "@mdi/react"; -import { Button, IconButton, Tooltip } from "@mui/material"; +import { Button } from "@mui/material"; import React from "react"; import { useNavigate, useParams } from "react-router-dom"; import { VMApi, VMInfo, VMState } from "../api/VMApi"; import { AsyncWidget } from "../widgets/AsyncWidget"; import { ConfigImportExportButtons } from "../widgets/ConfigImportExportButtons"; -import { RouterLink } from "../widgets/RouterLink"; import { VirtWebRouteContainer } from "../widgets/VirtWebRouteContainer"; import { VMDetails } from "../widgets/vms/VMDetails"; import { VMStatusWidget } from "../widgets/vms/VMStatusWidget"; diff --git a/virtweb_frontend/src/routes/ViewNetworkRoute.tsx b/virtweb_frontend/src/routes/ViewNetworkRoute.tsx index 85d6d19..9605529 100644 --- a/virtweb_frontend/src/routes/ViewNetworkRoute.tsx +++ b/virtweb_frontend/src/routes/ViewNetworkRoute.tsx @@ -1,6 +1,4 @@ -import { mdiXml } from "@mdi/js"; -import Icon from "@mdi/react"; -import { Button, IconButton, Tooltip } from "@mui/material"; +import { Button } from "@mui/material"; import React from "react"; import { useNavigate, useParams } from "react-router-dom"; import { @@ -8,14 +6,12 @@ import { NetworkInfo, NetworkStatus, NetworkURL, - NetworkXMLURL, } from "../api/NetworksApi"; import { AsyncWidget } from "../widgets/AsyncWidget"; -import { RouterLink } from "../widgets/RouterLink"; +import { ConfigImportExportButtons } from "../widgets/ConfigImportExportButtons"; 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();