diff --git a/src/components/WebsocketConnectError.js b/src/components/WebsocketConnectError.js
deleted file mode 100644
index d824d86..0000000
--- a/src/components/WebsocketConnectError.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import {Alert} from "@mui/material";
-
-export default function WebsocketConnectError() {
- return (
-
- Failed to connect websocket.
-
- );
-}
\ No newline at end of file
diff --git a/src/components/notifications/StatisticsDataEnds.js b/src/components/notifications/StatisticsDataEnds.js
new file mode 100644
index 0000000..0c37bbf
--- /dev/null
+++ b/src/components/notifications/StatisticsDataEnds.js
@@ -0,0 +1,22 @@
+import {Button} from "@mui/material";
+import {enqueueSnackbar} from "notistack";
+
+export default function StatisticsDataEnds() {
+ const action = (
+
+ );
+
+ return enqueueSnackbar('The statistics data stream is ended.', {
+ variant: 'warning',
+ persist: true,
+ action
+ });
+}
\ No newline at end of file
diff --git a/src/components/notifications/WebsocketConnectError.js b/src/components/notifications/WebsocketConnectError.js
new file mode 100644
index 0000000..aa386ea
--- /dev/null
+++ b/src/components/notifications/WebsocketConnectError.js
@@ -0,0 +1,21 @@
+import {Button} from "@mui/material";
+import {enqueueSnackbar} from "notistack";
+
+export default function WebsocketConnectError() {
+ const action = (
+
+ );
+
+ return enqueueSnackbar('Cannot connect to WebSocket.', {
+ variant: 'error',
+ persist: true,
+ action
+ });
+}
\ No newline at end of file
diff --git a/src/components/WebsocketDisconnectError.js b/src/components/notifications/WebsocketDisconnectError.js
similarity index 84%
rename from src/components/WebsocketDisconnectError.js
rename to src/components/notifications/WebsocketDisconnectError.js
index b7f0f45..7b80aa9 100644
--- a/src/components/WebsocketDisconnectError.js
+++ b/src/components/notifications/WebsocketDisconnectError.js
@@ -1,13 +1,11 @@
import {enqueueSnackbar} from "notistack";
import {Button} from "@mui/material";
-import RefreshIcon from '@mui/icons-material/Refresh';
export function showWebsocketDisconnectError() {
const action = (
}
onClick={() => window.location.reload()}
>
Reload
diff --git a/src/routes/Containers/Detail/ContainerDetail.js b/src/routes/Containers/Detail/ContainerDetail.js
index f8459af..28db353 100644
--- a/src/routes/Containers/Detail/ContainerDetail.js
+++ b/src/routes/Containers/Detail/ContainerDetail.js
@@ -4,7 +4,7 @@ import {useEffect, useMemo, useState} from "react";
import {getController} from "../../../lib/HostGuestController";
import {aioProvider, isDisconnectError} from "../../../lib/dataProvidor";
import dataModel from "../../../lib/dataModel";
-import {showWebsocketDisconnectError} from "../../../components/WebsocketDisconnectError";
+import {showWebsocketDisconnectError} from "../../../components/notifications/WebsocketDisconnectError";
import {closeSnackbar} from "notistack";
const tabs = [{
diff --git a/src/routes/Containers/Detail/Stat/ContainerDetailStatistics.js b/src/routes/Containers/Detail/Stat/ContainerDetailStatistics.js
index 75259ba..5df0fa2 100644
--- a/src/routes/Containers/Detail/Stat/ContainerDetailStatistics.js
+++ b/src/routes/Containers/Detail/Stat/ContainerDetailStatistics.js
@@ -5,6 +5,7 @@ import {Line} from "react-chartjs-2";
import {Box} from "@mui/material";
import {closeSnackbar, enqueueSnackbar} from "notistack";
import {styled} from "@mui/material/styles";
+import StatisticsDataEnds from "../../../../components/notifications/StatisticsDataEnds";
const makeOptions = (title, options) => {
const opt = {
@@ -111,7 +112,7 @@ export default function ContainerDetailStatistics() {
const charts = [chartCpu, chartMem, chartNet, chartBlock];
if (!data) {
- snackbarKeys.push(enqueueSnackbar("The statistics data stream is ended.", {variant: 'warning'}));
+ snackbarKeys.push(StatisticsDataEnds());
return;
}
diff --git a/src/routes/Containers/List/ContainersList.js b/src/routes/Containers/List/ContainersList.js
index 5d69184..8a3f2fc 100644
--- a/src/routes/Containers/List/ContainersList.js
+++ b/src/routes/Containers/List/ContainersList.js
@@ -7,10 +7,11 @@ import {Tooltip} from "@mui/material";
import {getController} from "../../../lib/HostGuestController";
import IconButton from "@mui/material/IconButton";
import {Link as RouterLink} from 'react-router-dom';
-import {aioProvider, isDisconnectError} from "../../../lib/dataProvidor";
-import {showWebsocketDisconnectError} from "../../../components/WebsocketDisconnectError";
+import {aioProvider, isConnectError, isDisconnectError} from "../../../lib/dataProvidor";
+import {showWebsocketDisconnectError} from "../../../components/notifications/WebsocketDisconnectError";
import ContainerUpLearnMore from "../../../components/ContainerUpLearnMore";
-import {closeSnackbar} from "notistack";
+import {closeSnackbar, enqueueSnackbar} from "notistack";
+import WebsocketConnectError from "../../../components/notifications/WebsocketConnectError";
export default function ContainersList() {
const [loading, setLoading] = useState(true);
@@ -19,6 +20,7 @@ export default function ContainersList() {
const [containers, setContainers] = useState([]);
useEffect(() => {
+ const snackbarKeys = [];
let count = 0;
let tryConnect = () => {};
@@ -51,7 +53,10 @@ export default function ContainersList() {
e = error.response.data;
}
if (loading) {
- setErrMsg(e);
+ snackbarKeys.push(enqueueSnackbar(e, {
+ variant: "error",
+ persist: true
+ }));
setLoading(false);
} else {
if (isDisconnectError(error) || count) {
@@ -73,7 +78,14 @@ export default function ContainersList() {
} else {
// show connect error only when connecting
// no retry
- setErrMsg(e);
+ if (isConnectError(error)) {
+ snackbarKeys.push(WebsocketConnectError());
+ } else {
+ snackbarKeys.push(enqueueSnackbar(e, {
+ variant: "error",
+ persist: true
+ }));
+ }
}
}
}
@@ -88,6 +100,11 @@ export default function ContainersList() {
tryConnect();
return () => {
cancel();
+ for (const key of snackbarKeys) {
+ // todo fix snackbar
+ console.log('close snackbar');
+ closeSnackbar(key);
+ }
if (disconnectKey) {
closeSnackbar(disconnectKey);
disconnectKey = null;
diff --git a/src/routes/Images/List/ImageList.js b/src/routes/Images/List/ImageList.js
index e0a689b..aaf5f63 100644
--- a/src/routes/Images/List/ImageList.js
+++ b/src/routes/Images/List/ImageList.js
@@ -8,7 +8,7 @@ import ImagesTable from "./ImagesTable";
import dataModel from "../../../lib/dataModel";
import ImagePullDialog from "./ImagePullDialog";
import {aioProvider, isDisconnectError} from "../../../lib/dataProvidor";
-import {showWebsocketDisconnectError} from "../../../components/WebsocketDisconnectError";
+import {showWebsocketDisconnectError} from "../../../components/notifications/WebsocketDisconnectError";
import ContainerUpLearnMore from "../../../components/ContainerUpLearnMore";
import {closeSnackbar} from "notistack";
diff --git a/src/routes/Overview/Overview.js b/src/routes/Overview/Overview.js
index fab916e..d57667d 100644
--- a/src/routes/Overview/Overview.js
+++ b/src/routes/Overview/Overview.js
@@ -1,7 +1,7 @@
import {useEffect, useState} from "react";
-import {aioProvider, isDisconnectError} from "../../lib/dataProvidor";
+import {aioProvider, isConnectError, isDisconnectError} from "../../lib/dataProvidor";
import dataModel from "../../lib/dataModel";
-import {showWebsocketDisconnectError} from "../../components/WebsocketDisconnectError";
+import {showWebsocketDisconnectError} from "../../components/notifications/WebsocketDisconnectError";
import {closeSnackbar, enqueueSnackbar} from "notistack";
import {useNavigate} from "react-router-dom";
import {Doughnut} from "react-chartjs-2";
@@ -9,6 +9,8 @@ import {Box, Card, CardContent, Stack, Tooltip} from "@mui/material";
import Typography from "@mui/material/Typography";
import InfoIcon from '@mui/icons-material/Info';
import ContainerUpLearnMore from "../../components/ContainerUpLearnMore";
+import StatisticsDataEnds from "../../components/notifications/StatisticsDataEnds";
+import WebsocketConnectError from "../../components/notifications/WebsocketConnectError";
const minPerc = 0.01;
const loadingColor = 'rgb(100, 100, 100)';
@@ -100,7 +102,7 @@ export default function Overview() {
}
if (!data) {
- snackbarKeys.push(enqueueSnackbar("The statistics data stream is ended.", {variant: 'warning'}));
+ snackbarKeys.push(StatisticsDataEnds());
return;
}
@@ -194,10 +196,14 @@ export default function Overview() {
} else {
// show connect error only when connecting
// no retry
- snackbarKeys.push(enqueueSnackbar(e, {
- variant: "error",
- persist: true
- }));
+ if (isConnectError(error)) {
+ snackbarKeys.push(WebsocketConnectError());
+ } else {
+ snackbarKeys.push(enqueueSnackbar(e, {
+ variant: "error",
+ persist: true
+ }));
+ }
}
}
};