auto refresh v1, and action buttons in container page

ContainerUp · Sep 16, 2023 · e274193 · e274193
1 parent b12dd71
commit e274193
Show file tree

Hide file tree

Showing 30 changed files with 951 additions and 736 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -15,6 +15,7 @@
     "axios": "^1.4.0",
     "date-fns": "^2.30.0",
     "http-proxy-middleware": "^2.0.6",
+    "notistack": "^3.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.15.0",

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.ico" />-->
+    <link rel="icon" href="%PUBLIC_URL%/favicon.png" />
     <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/index.js b/src/index.js
@@ -12,6 +12,8 @@ import '@fontsource/roboto/500.css';
 import '@fontsource/roboto/700.css';
 import 'xterm/css/xterm.css';
 import './index.css';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
+import {purple} from "@mui/material/colors";
 
 import Root from './routes/Root'
 import Login from './routes/Login'
@@ -29,6 +31,14 @@ import ImageDetail from "./routes/Images/Detail/ImageDetail";
 import ContainerCreate from "./routes/Containers/Create/ContainerCreate";
 import Logout from "./routes/Logout";
 
+const theme = createTheme({
+    palette: {
+        primary: {
+            main: purple[700],
+        },
+    },
+});
+
 const router = createBrowserRouter([{
     path: "/",
     element: <Root />,
@@ -78,9 +88,12 @@ const router = createBrowserRouter([{
     element: <Logout />
 }]);
 
+
 ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>
       <CssBaseline />
-      <RouterProvider router={router} />
+      <ThemeProvider theme={theme}>
+          <RouterProvider router={router} />
+      </ThemeProvider>
   </React.StrictMode>
 );
diff --git a/src/lib/dataProvidor.js b/src/lib/dataProvidor.js
@@ -112,7 +112,7 @@ const aioMain = onAioClose => {
         Object.keys(reqQueue).forEach(index => {
             const req = reqQueue[index];
             subscribers[index] = {onData: req.onData, onError: req.onError};
-            req.fnSub(index, req.onData, req.onError, req.arg);
+            req.fnSub(index, req.arg);
             delete reqQueue[index];
         });
         ready = true;
@@ -155,15 +155,15 @@ const aioMain = onAioClose => {
         fnSub(index, arg);
 
         return () => commonUnsubscribe(index, fnUnsub);
-    }
+    };
 
     const commonUnsubscribe = (index, fnUnsub) => {
         if (!reqQueue[index] && !subscribers[index]) {
             // no need to send
             return;
         }
 
-        if (ready) {
+        if (ready && !closed) {
             // new index, we don't need the resp actually
             const newIndex = nextIndex;
             nextIndex += 1;
@@ -172,7 +172,7 @@ const aioMain = onAioClose => {
         delete subscribers[index];
         delete reqQueue[index];
         disconnecter();
-    }
+    };
 
     let disconnectTimeout;
     const disconnecter = () => {
@@ -185,7 +185,7 @@ const aioMain = onAioClose => {
         } else {
             clearTimeout(disconnectTimeout);
         }
-    }
+    };
 
     const _subContainersList = index => {
         writer({index: parseInt(index), action: 'subscribeToContainersList'});

diff --git a/src/routes/AppBarButtons.js b/src/routes/AppBarButtons.js
@@ -1,11 +1,13 @@
 import {Box} from "@mui/material";
 import {getController} from "../lib/HostGuestController";
 import {useEffect, useState} from "react";
+import ContainerDetailButtons from "./Containers/ContainerDetailButtons";
 
 const emptyElement = <></>;
 
 export default function AppBarButtons() {
     const [children, setChildren] = useState(emptyElement);
+    const [isContainerDetailButtons, setIsContainerDetailButtons] = useState(false);
 
     useEffect(() => {
         const ctrl = getController('bar_button');
@@ -16,6 +18,12 @@ export default function AppBarButtons() {
             if (!c) {
                 c = emptyElement;
             }
+            if (c === 'container_detail_buttons') {
+                c = emptyElement;
+                setIsContainerDetailButtons(true);
+            } else {
+                setIsContainerDetailButtons(false);
+            }
             setChildren(c);
         });
 
@@ -25,6 +33,9 @@ export default function AppBarButtons() {
     return (
         <Box component="div">
             {children}
+            {isContainerDetailButtons && (
+                <ContainerDetailButtons />
+            )}
         </Box>
     );
 }
diff --git a/src/routes/Containers/ContainerDetail.js b/src/routes/Containers/ContainerDetail.js
@@ -2,6 +2,8 @@ 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 dataModel from "../../lib/dataModel";
 
 const tabs = [{
     to: "overview",
@@ -47,7 +49,7 @@ export default function ContainerDetail() {
             return [ret, true];
         }
         return [0, false];
-    }, [pathname])
+    }, [pathname]);
 
     const [value, setValue] = useState(tabVal);
     const navigate = useNavigate();
@@ -56,7 +58,7 @@ export default function ContainerDetail() {
         if (!tabValValid) {
             navigate('overview');
         }
-    }, [tabValValid, navigate])
+    }, [tabValValid, navigate]);
 
     useEffect(() => {
         const ctrl = getController('bar_breadcrumb');
@@ -73,33 +75,71 @@ export default function ContainerDetail() {
         document.title = 'ContainerUp - Container ' + containerId;
     }, [containerId]);
 
-    if (!tabValValid) {
-        // navigate
-        return (
-            <></>
-        );
-    }
-
-    const handleChange = (event, newValue) => {
+    const handleTabChange = (event, newValue) => {
         setValue(newValue);
     };
 
+    useEffect(() => {
+        const ctrl = getController('bar_button');
+        const unregister = ctrl.asControllerGuest('container_detail_buttons');
+        return () => unregister();
+    }, []);
+
+    const [container, setContainer] = useState({Id: containerId});
+    const [loading, setLoading] = useState(true);
+    const [errMsg, setErrMsg] = useState('');
+
+    useEffect(() => {
+        const ctrl = getController('container_detail_buttons');
+        const unregister = ctrl.asControllerGuest(container);
+        return () => unregister();
+    }, [container]);
+
+    useEffect(() => {
+        const onData = d => {
+            setContainer(d);
+            setLoading(false);
+        };
+
+        const onError = error => {
+            if (dataModel.errIsNoLogin(error)) {
+                let query = new URLSearchParams();
+                query.append('cb', pathname);
+                navigate('/login?' + query.toString());
+                return;
+            }
+            let e = error.toString();
+            if (error.response) {
+                e = error.response.data;
+            }
+            setErrMsg(e);
+            setLoading(false);
+        };
+
+        const cancel = aioProvider().container(containerId, onData, onError)
+        return () => cancel();
+    }, [containerId, navigate, pathname]);
+
     return (
         <>
-            <Box sx={{ width: '100%', marginBottom: '16px' }}>
-                <Tabs value={value} onChange={handleChange} aria-label="container tabs">
-                    {tabs.map(t => (
-                        <Tab
-                            key={t.to}
-                            component={Link}
-                            label={t.label}
-                            to={t.to}
-                        />
-                    ))}
-                </Tabs>
-            </Box>
-
-            <Outlet />
+            {tabValValid && (
+                <>
+                    <Box sx={{ width: '100%', marginBottom: '16px' }}>
+                        <Tabs value={value} onChange={handleTabChange} aria-label="container tabs">
+                            {tabs.map(t => (
+                                <Tab
+                                    key={t.to}
+                                    component={Link}
+                                    label={t.label}
+                                    to={t.to}
+                                />
+                            ))}
+                        </Tabs>
+                    </Box>
+
+                    <Outlet context={{container, loading, errMsg}} />
+                </>
+            )}
         </>
     );
 }