error notifications

src/components/notifications/StatisticsDataEnds.js

@@ -0,0 +1,22 @@
+import {Button} from "@mui/material";
+import {enqueueSnackbar} from "notistack";
+
+export default function StatisticsDataEnds() {
+    const action = (
+        <Button
+            color="inherit"
+            size="small"
+            component="a"
+            href="https://containerup.org/faq/#the-statistics-data-stream-is-ended"
+            target="_blank"
+        >
+            Learn more
+        </Button>
+    );
+
+    return enqueueSnackbar('The statistics data stream is ended.', {
+        variant: 'warning',
+        persist: true,
+        action
+    });
+}

src/components/notifications/WebsocketConnectError.js

@@ -0,0 +1,21 @@
+import {Button} from "@mui/material";
+import {enqueueSnackbar} from "notistack";
+
+export default function WebsocketConnectError() {
+    const action = (
+        <Button
+            size="small"
+            color="inherit"
+            href="https://containerup.org/faq/#cannot-connect-to-websocket"
+            target="_blank"
+        >
+            Troubleshoot!
+        </Button>
+    );
+
+    return enqueueSnackbar('Cannot connect to WebSocket.', {
+        variant: 'error',
+        persist: true,
+        action
+    });
+}

src/components/WebsocketDisconnectError.js → 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 = (
         <Button
             color="inherit"
             size="small"
-            startIcon={<RefreshIcon />}
             onClick={() => window.location.reload()}
         >
             Reload

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 = [{

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;
             }
 

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;

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

src/routes/Overview/Overview.js

@@ -1,14 +1,16 @@
 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";
 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
+                        }));
+                    }
                 }
             }
         };