Memphis function UI

ui_src/src/components/sideBar/style.scss

@@ -40,7 +40,7 @@
         }
         .coming-soon {
             background-color: var(--purple);
-            color: var(--white);
+            color: var(--white) !important;
             font-size: 10px;
             position: relative;
             border-radius: 32px;

ui_src/src/domain/administration/style.scss

@@ -60,6 +60,7 @@
         position: relative;
         height: calc(100% - 40px);
         width: calc(100% - 350px);
+        min-height: 450px;
         min-width: 800px;
         min-height: 530px;
         top: 20px;

ui_src/src/domain/administration/versionUpgrade/style.scss

@@ -18,7 +18,6 @@
         .actions{
             position: absolute;
             left: 5%;
-            top: 12%;
             .current-version-wrapper{
                 padding: 8px;
             }

ui_src/src/domain/stationOverview/index.js

@@ -31,6 +31,7 @@ const initializeState = {
     stationSocketData: {},
     stationPartition: -1
 };
+let sub;
 
 const StationOverview = () => {
     const [stationState, stationDispatch] = useReducer(Reducer);
@@ -39,6 +40,7 @@ const StationOverview = () => {
     const history = useHistory();
     const [state, dispatch] = useContext(Context);
     const [isLoading, setisLoading] = useState(false);
+    const [socketOn, setSocketOn] = useState(false);
 
     const sortData = (data) => {
         data.audit_logs?.sort((a, b) => new Date(b.created_at) - new Date(a.created_at));
@@ -82,7 +84,9 @@ const StationOverview = () => {
         }
     };
     useEffect(() => {
-        getStationDetails();
+        if (socketOn) {
+            getStationDetails();
+        }
     }, [stationState?.stationPartition || stationState?.stationSocketData?.total_messages || stationState?.stationSocketData?.total_dls_messages]);
 
     useEffect(() => {
@@ -93,27 +97,9 @@ const StationOverview = () => {
         stationDispatch({ type: 'SET_STATION_PARTITION', payload: -1 });
     }, []);
 
-    useEffect(() => {
-        let sub;
+    const startListen = async () => {
         const jc = JSONCodec();
         const sc = StringCodec();
-        const subscribeAndListen = async () => {
-            try {
-                (async () => {
-                    const rawBrokerName = await state.socket?.request(
-                        `$memphis_ws_subs.station_overview_data.${stationName}.${stationState?.stationPartition || -1}`,
-                        sc.encode('SUB')
-                    );
-                    if (rawBrokerName) {
-                        const brokerName = JSON.parse(sc.decode(rawBrokerName?._rdata))['name'];
-                        sub = state.socket?.subscribe(`$memphis_ws_pubs.station_overview_data.${stationName}.${stationState?.stationPartition || -1}.${brokerName}`);
-                        listenForUpdates();
-                    }
-                })();
-            } catch (err) {
-                console.error('Error subscribing to station overview data:', err);
-            }
-        };
 
         const listenForUpdates = async () => {
             try {
@@ -122,34 +108,56 @@ const StationOverview = () => {
                         let data = jc.decode(msg.data);
                         sortData(data);
                         stationDispatch({ type: 'SET_SOCKET_DATA', payload: data });
+                        if (!socketOn) {
+                            setSocketOn(true);
+                        }
                     }
                 }
             } catch (err) {
                 console.error(`Error receiving data updates for station overview:`, err);
             }
         };
 
-        const stopListenAndSubscribe = async (subscribe = false) => {
+        try {
+            const rawBrokerName = await state.socket?.request(
+                `$memphis_ws_subs.station_overview_data.${stationName}.${stationState?.stationPartition || -1}`,
+                sc.encode('SUB')
+            );
+            if (rawBrokerName) {
+                const brokerName = JSON.parse(sc.decode(rawBrokerName?._rdata))['name'];
+                sub = state.socket?.subscribe(`$memphis_ws_pubs.station_overview_data.${stationName}.${stationState?.stationPartition || -1}.${brokerName}`);
+                listenForUpdates();
+            }
+        } catch (err) {
+            console.error('Error subscribing to station overview data:', err);
+        }
+    };
+
+    const stopListen = async () => {
+        if (sub) {
             try {
                 await sub.unsubscribe();
-                subscribe && subscribeAndListen();
             } catch (err) {
                 console.error('Error unsubscribing from station overview data:', err);
             }
-        };
-
-        if (sub) {
-            stopListenAndSubscribe(true);
-        } else {
-            subscribeAndListen();
         }
+    };
 
+    useEffect(() => {
+        if (state.socket) {
+            startListen();
+        }
         return () => {
-            if (sub) {
-                stopListenAndSubscribe();
-            }
+            stopListen();
         };
-    }, [state?.socket, stationState?.stationPartition]);
+    }, [state.socket]);
+
+    useEffect(() => {
+        if (sub && socketOn) {
+            stopListen();
+            startListen();
+        }
+    }, [stationState?.stationPartition]);
 
     return (
         <StationStoreContext.Provider value={[stationState, stationDispatch]}>

ui_static_files/build/asset-manifest.json

@@ -1,7 +1,7 @@
 {
   "files": {
-    "main.css": "/static/css/main.4357fd62.css",
-    "main.js": "/static/js/main.85a478c1.js",
+    "main.css": "/static/css/main.d2357107.css",
+    "main.js": "/static/js/main.beb6bc7e.js",
     "static/js/617.a5f8c4fc.chunk.js": "/static/js/617.a5f8c4fc.chunk.js",
     "static/js/2542.27de8743.chunk.js": "/static/js/2542.27de8743.chunk.js",
     "static/js/1737.e134cfd4.chunk.js": "/static/js/1737.e134cfd4.chunk.js",
@@ -296,7 +296,7 @@
     "static/media/closeNotification.svg": "/static/media/closeNotification.7551e8366682f9c6585bb1a694c4112a.svg"
   },
   "entrypoints": [
-    "static/css/main.4357fd62.css",
-    "static/js/main.85a478c1.js"
+    "static/css/main.d2357107.css",
+    "static/js/main.beb6bc7e.js"
   ]
 }

ui_static_files/build/index.html

@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Memphis.dev console is designed to simplify your work and give you a graphical user interface for controlling your stations, security, integrations, and observing your data and other vital metrics"/><link rel="manifest" href="/manifest.json"/><title>Memphis.dev Console</title><link rel="apple-touch-icon" sizes="57x57" href="/img/favicon/apple-icon-57x57.png"><link rel="apple-touch-icon" sizes="60x60" href="/img/favicon/apple-icon-60x60.png"><link rel="apple-touch-icon" sizes="72x72" href="/img/favicon/apple-icon-72x72.png"><link rel="apple-touch-icon" sizes="76x76" href="/img/favicon/apple-icon-76x76.png"><link rel="apple-touch-icon" sizes="114x114" href="/img/favicon/apple-icon-114x114.png"><link rel="apple-touch-icon" sizes="120x120" href="/img/favicon/apple-icon-120x120.png"><link rel="apple-touch-icon" sizes="144x144" href="/img/favicon/apple-icon-144x144.png"><link rel="apple-touch-icon" sizes="152x152" href="/img/favicon/apple-icon-152x152.png"><link rel="apple-touch-icon" sizes="180x180" href="/img/favicon/apple-icon-180x180.png"><link rel="icon" type="image/png" sizes="192x192" href="/img/favicon/android-icon-192x192.png"><link rel="icon" type="image/png" sizes="32x32" href="/img/favicon/favicon-32x32.png"><link rel="icon" type="image/png" sizes="96x96" href="/img/favicon/favicon-96x96.png"><link rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16x16.png"><meta name="msapplication-TileColor" content="#ffffff"><meta name="msapplication-TileImage" content="/img/favicon/ms-icon-144x144.png"><meta name="theme-color" content="#ffffff"><script defer="defer" src="/static/js/main.85a478c1.js"></script><link href="/static/css/main.4357fd62.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Memphis.dev console is designed to simplify your work and give you a graphical user interface for controlling your stations, security, integrations, and observing your data and other vital metrics"/><link rel="manifest" href="/manifest.json"/><title>Memphis.dev Console</title><link rel="apple-touch-icon" sizes="57x57" href="/img/favicon/apple-icon-57x57.png"><link rel="apple-touch-icon" sizes="60x60" href="/img/favicon/apple-icon-60x60.png"><link rel="apple-touch-icon" sizes="72x72" href="/img/favicon/apple-icon-72x72.png"><link rel="apple-touch-icon" sizes="76x76" href="/img/favicon/apple-icon-76x76.png"><link rel="apple-touch-icon" sizes="114x114" href="/img/favicon/apple-icon-114x114.png"><link rel="apple-touch-icon" sizes="120x120" href="/img/favicon/apple-icon-120x120.png"><link rel="apple-touch-icon" sizes="144x144" href="/img/favicon/apple-icon-144x144.png"><link rel="apple-touch-icon" sizes="152x152" href="/img/favicon/apple-icon-152x152.png"><link rel="apple-touch-icon" sizes="180x180" href="/img/favicon/apple-icon-180x180.png"><link rel="icon" type="image/png" sizes="192x192" href="/img/favicon/android-icon-192x192.png"><link rel="icon" type="image/png" sizes="32x32" href="/img/favicon/favicon-32x32.png"><link rel="icon" type="image/png" sizes="96x96" href="/img/favicon/favicon-96x96.png"><link rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16x16.png"><meta name="msapplication-TileColor" content="#ffffff"><meta name="msapplication-TileImage" content="/img/favicon/ms-icon-144x144.png"><meta name="theme-color" content="#ffffff"><script defer="defer" src="/static/js/main.beb6bc7e.js"></script><link href="/static/css/main.d2357107.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>