demo server

ContainerUp · Sep 20, 2023 · c0eaed9 · c0eaed9
1 parent e274193
commit c0eaed9
Show file tree

Hide file tree

Showing 26 changed files with 351 additions and 131 deletions.
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/favicon.png b/public/favicon.png
diff --git a/public/index.html b/public/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.png" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
 <!--    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />-->

diff --git a/src/components/ContainerUpLearnMore.js b/src/components/ContainerUpLearnMore.js
@@ -0,0 +1,21 @@
+import {Alert} from "@mui/material";
+
+export default function ContainerUpLearnMore({variant}) {
+    if (!process.env.REACT_APP_CONTAINERUP_DEMO) {
+        return '';
+    }
+
+    if (variant === "long") {
+        return (
+            <Alert severity="info" sx={{mt: '5px'}}>
+                Love this project? Learn more about ContainerUp <a href="https://containerup.org/" target="_blank" rel="noreferrer">here</a>.
+            </Alert>
+        );
+    }
+
+    return (
+        <Alert severity="info" sx={{mt: '5px'}}>
+            Learn more about ContainerUp <a href="https://containerup.org/" target="_blank" rel="noreferrer">here</a>.
+        </Alert>
+    );
+}
diff --git a/src/components/MyDrawerItem.js b/src/components/MyDrawerItem.js
@@ -4,13 +4,17 @@ import ListItemText from "@mui/material/ListItemText";
 import ListItem from "@mui/material/ListItem";
 import {useLocation, useNavigate} from "react-router-dom";
 
-export default function MyDrawerItem({drawerOpen, text, icon, path, or}) {
+export default function MyDrawerItem({drawerOpen, text, icon, path, or, href}) {
     const navigate = useNavigate();
     const {pathname} = useLocation();
 
     const handleClick = () => {
-        navigate(path)
-    }
+        if (href) {
+            window.open(href, '_blank').focus();
+            return;
+        }
+        navigate(path);
+    };
 
     let selected = false;
     if (pathname.indexOf(path) === 0

diff --git a/src/components/MyTerminal.js b/src/components/MyTerminal.js
diff --git a/src/components/MyTerminalTwoWay.js b/src/components/MyTerminalTwoWay.js
@@ -39,7 +39,6 @@ export default function MyTerminalTwoWay({dataSide}) {
                 default:
                     console.log('unknown dataSide command', data);
             }
-            xterm.write(data)
         });
         xterm.onData(str => dsWriter({type: 'data', data: str}));
         xterm.onResize(({cols, rows}) => reportSize({cols, rows}));

diff --git a/src/components/WebsocketConnectError.js b/src/components/WebsocketConnectError.js
@@ -0,0 +1,9 @@
+import {Alert} from "@mui/material";
+
+export default function WebsocketConnectError() {
+    return (
+        <Alert severity="error">
+            Failed to connect websocket.
+        </Alert>
+    );
+}
diff --git a/src/components/WebsocketDisconnectError.js b/src/components/WebsocketDisconnectError.js
@@ -0,0 +1,22 @@
+import {enqueueSnackbar} from "notistack";
+import {Button} from "@mui/material";
+import RefreshIcon from '@mui/icons-material/Refresh';
+
+export function showWebsocketDisconnectError() {
+    const action = snackbarId => (
+        <Button
+            color="inherit"
+            size="small"
+            startIcon={<RefreshIcon />}
+            onClick={() => window.location.reload()}
+        >
+            Reload
+        </Button>
+    );
+
+    enqueueSnackbar('Websocket disconnected. The information on this page is NOT up-to-date.', {
+        variant: 'warning',
+        persist: true,
+        action
+    });
+}
diff --git a/src/lib/dataProvidor.js b/src/lib/dataProvidor.js
@@ -43,7 +43,7 @@ const makeAioConnection = (onData, onOpen, onError, onClose) => {
         ws.close();
         state = 99;
 
-        onError(new Error('Websocket error'));
+        onError(new WebsocketError('Cannot connect to websocket', websocketErrorTypeConnect));
     });
     ws.addEventListener('close', event => {
         if (state === 99) {
@@ -57,7 +57,7 @@ const makeAioConnection = (onData, onOpen, onError, onClose) => {
         if (code === 4001) {
             err = dataModel.errors.errNoLogin;
         } else {
-            err = new Error(`Websocket closed ${code} ${reason}`);
+            err = new WebsocketError(`Websocket closed ${code} ${reason}`, websocketErrorTypeDisconnect);
         }
         onClose(err);
     });
@@ -147,7 +147,7 @@ const aioMain = onAioClose => {
             return () => commonUnsubscribe(index, fnUnsub);
         }
         if (closed) {
-            onError(new Error('connection closed'));
+            onError(new WebsocketError('connection closed', websocketErrorTypeDisconnect));
             return () => {};
         }
 
@@ -230,3 +230,28 @@ export function aioProvider() {
     });
     return aio;
 }
+
+class WebsocketError extends Error {
+    constructor(message, type) {
+        super(message);
+        this.name = this.constructor.name;
+        this.errType = type;
+    }
+}
+
+const websocketErrorTypeDisconnect = 'disconnect';
+const websocketErrorTypeConnect = 'connect';
+
+export function isDisconnectError(err) {
+    if (!(err instanceof WebsocketError)) {
+        return false;
+    }
+    return err.errType === websocketErrorTypeDisconnect;
+}
+
+export function isConnectError(err) {
+    if (!(err instanceof WebsocketError)) {
+        return false;
+    }
+    return err.errType === websocketErrorTypeConnect;
+}
diff --git a/src/lib/ga4.js b/src/lib/ga4.js
@@ -0,0 +1,42 @@
+import { useEffect } from "react";
+import { useLocation } from "react-router-dom";
+
+export const useGA4 = () => {
+    const ga4 = process.env.REACT_APP_CONTAINERUP_GA4;
+
+    useEffect(() => {
+        if (!ga4) {
+            return;
+        }
+
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){window.dataLayer.push(arguments);}
+        gtag('js', new Date());
+        gtag('config', ga4, {
+            send_page_view: false
+        });
+
+        const script = document.createElement('script');
+        script.src = "https://www.googletagmanager.com/gtag/js?id=" + ga4;
+        script.async = true;
+
+        document.body.appendChild(script);
+        return () => {
+            document.body.removeChild(script);
+        };
+    }, [ga4]);
+
+    const location = useLocation();
+    useEffect(() => {
+        if (!ga4) {
+            return;
+        }
+
+        function gtag(){window.dataLayer.push(arguments);}
+        gtag("event", "page_view", {
+            page_path: location.pathname + location.search + location.hash,
+            page_search: location.search,
+            page_hash: location.hash,
+        });
+    }, [ga4, location]);
+};
diff --git a/src/routes/Containers/ContainerDetail.js b/src/routes/Containers/ContainerDetail.js
@@ -2,8 +2,9 @@ import {Box, Tab, Tabs} from "@mui/material";
 import {Link, Outlet, useLocation, useNavigate, useParams} from "react-router-dom";
 import {useEffect, useMemo, useState} from "react";
 import {getController} from "../../lib/HostGuestController";
-import {aioProvider} from "../../lib/dataProvidor";
+import {aioProvider, isDisconnectError} from "../../lib/dataProvidor";
 import dataModel from "../../lib/dataModel";
+import {showWebsocketDisconnectError} from "../../components/WebsocketDisconnectError";
 
 const tabs = [{
     to: "overview",
@@ -112,13 +113,21 @@ export default function ContainerDetail() {
             if (error.response) {
                 e = error.response.data;
             }
-            setErrMsg(e);
-            setLoading(false);
+            if (loading) {
+                setErrMsg(e);
+                setLoading(false);
+            } else {
+                if (isDisconnectError(error)) {
+                    showWebsocketDisconnectError();
+                } else {
+                    setErrMsg(e);
+                }
+            }
         };
 
         const cancel = aioProvider().container(containerId, onData, onError)
         return () => cancel();
-    }, [containerId, navigate, pathname]);
+    }, [containerId, loading, navigate, pathname]);
 
     return (
         <>

diff --git a/src/routes/Containers/ContainerDetailButtons.js b/src/routes/Containers/ContainerDetailButtons.js
@@ -6,7 +6,7 @@ import SaveIcon from "@mui/icons-material/Save";
 import ListItemText from "@mui/material/ListItemText";
 import {green, orange, red, yellow} from "@mui/material/colors";
 import DeleteIcon from "@mui/icons-material/Delete";
-import {useEffect, useState} from "react";
+import {useCallback, useEffect, useState} from "react";
 import StopIcon from "@mui/icons-material/Stop";
 import PlayArrowIcon from "@mui/icons-material/PlayArrow";
 import {getController} from "../../lib/HostGuestController";
@@ -192,6 +192,10 @@ export default function ContainerDetailButtons() {
         return () => ac.abort();
     }, [actioning, container, navigate, pathname, action]);
 
+    const handleDialogCommitClose = useCallback(() => {
+        setDialogCommitOpen(false)
+    }, []);
+
     const st = getStatusText(container);
 
     if (!container) {
@@ -205,7 +209,8 @@ export default function ContainerDetailButtons() {
             {container && (
                 <>
                     <ContainerDialogRemove
-                        container={container}
+                        containerName={container.Name}
+                        containerIdShort={container.Id.substring(0, 12)}
                         actioning={dialogRemoveOpen && actioning}
                         open={dialogRemoveOpen}
                         onClose={() => setDialogRemoveOpen(false)}
@@ -214,8 +219,9 @@ export default function ContainerDetailButtons() {
 
                     <ContainerDialogCommit
                         open={dialogCommitOpen}
-                        container={container}
-                        onClose={() => setDialogCommitOpen(false)}
+                        containerName={container.Name}
+                        containerIdShort={container.Id.substring(0, 12)}
+                        onClose={handleDialogCommitClose}
                     />
                 </>
             )}

diff --git a/src/routes/Containers/Create/ContainerCreate.js b/src/routes/Containers/Create/ContainerCreate.js
@@ -172,7 +172,7 @@ export default function ContainerCreate() {
                 return {
                     container: v.container,
                     host: v.host,
-                    rw: v.rw
+                    readWrite: v.rw
                 };
             }),
             ports: ports.map(p => {
@@ -195,7 +195,6 @@ export default function ContainerCreate() {
                     return;
                 }
 
-                console.log(error)
                 let errStr = error.toString();
                 if (dataModel.errIsNoLogin(error)) {
                     errStr = 'Session expired. Reload the page, and try again.';

diff --git a/src/routes/Containers/Create/CreateNameImage.js b/src/routes/Containers/Create/CreateNameImage.js
@@ -15,6 +15,7 @@ import ImagePullTerminal from "../../Images/List/ImagePullTerminal";
 import CreateImagePullActions from "./CreateImagePullActions";
 import Pipe from "../../../lib/Pipe";
 import CheckIcon from "@mui/icons-material/Check";
+import {demoImage} from "../../Images/List/ImagePullDialog";
 
 const checkNameAndGetImage = (containerName, imageId, abortController) => {
     const p1 = dataModel.containerInspect(containerName, false, abortController)
@@ -103,10 +104,22 @@ export default function CreateNameImage({name, image, onConfirm, onEdited}) {
     const pullTerminationOnReceive = pullTerminationPipe.useOnReceive();
     const pullTerminationWriter = pullTerminationPipe.useWriter();
 
-    const imgPulled = imageName && imageOpt && (
-        (imageOpt.Names && imageOpt.Names[0] && imageName === imageOpt.Names[0]) ||
-        (imageOpt.Id && imageName === imageOpt.Id.substring(0, 12))
-    );
+    let imgPulled = false;
+    if (imageName && imageOpt) {
+        if (imageOpt.Names) {
+            for (const name of imageOpt.Names) {
+                if (name === imageName) {
+                    imgPulled = true;
+                    break;
+                }
+            }
+        }
+        if (!imgPulled) {
+            if (imageOpt.Id && (imageName === imageOpt.Id.substring(0, 12) || imageOpt.Id === imageName)) {
+                imgPulled = true;
+            }
+        }
+    }
 
     const [loadingImageDetail, setLoadingImageDetail] = useState(false);
 
@@ -384,6 +397,10 @@ export default function CreateNameImage({name, image, onConfirm, onEdited}) {
                             <>
                                 The image <b>{imageName}</b> is not found locally. <br />
                                 To continue, pull this image first. Pull the image now?
+
+                                <Alert severity="info">
+                                    As a limit of the demo server, please try this one: <b>{demoImage}</b>
+                                </Alert>
                             </>
                         )}
                     </DialogContentText>