[fix issue] update server details tab with sort functiionality

bisohns · Nov 12, 2022 · dd45025 · dd45025
1 parent 4eef6a2
commit dd45025
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 38 deletions.
diff --git a/web/src/App.tsx b/web/src/App.tsx
@@ -1,23 +1,39 @@
-import React from "react";
-
-import AppThemeProvider from "./AppThemeProvider";
-import { createBrowserRouter, RouterProvider } from "react-router-dom";
-import ServerList from "./server/ServerList";
-import ServerDetail from "./server/ServerDetail";
-import AppHeader from "./AppHeader";
-
-const router = createBrowserRouter([
-  {
-    path: "/",
-    element: <ServerList />,
-  },
-  {
-    path: "/:host",
-    element: <ServerDetail />,
-  },
-]);
+import React from 'react';
+
+import AppThemeProvider from './AppThemeProvider';
+import { createBrowserRouter, RouterProvider } from 'react-router-dom';
+import ServerList from './server/ServerList';
+import ServerDetail from './server/ServerDetail';
+import AppHeader from './AppHeader';
+import useSocket from 'hooks/useSocket';
 
 function App() {
+  const { servicesGroupedByName, serversGroupedByHost, updateCount } =
+    useSocket();
+
+  const [servicesGroupByName, setServicesGroupByName] = React.useState<any>({});
+
+  const [servicesGroupByHost, setServicesGroupByHost] = React.useState<any>({});
+
+  React.useEffect(() => {
+    setServicesGroupByName(servicesGroupedByName);
+  }, [updateCount]);
+
+  React.useEffect(() => {
+    setServicesGroupByHost(serversGroupedByHost);
+  }, [updateCount]);
+
+  const router = createBrowserRouter([
+    {
+      path: '/',
+      element: <ServerList serversGroupedByHost={servicesGroupByHost} />,
+    },
+    {
+      path: '/:host',
+      element: <ServerDetail servicesGroupedByName={servicesGroupByName} />,
+    },
+  ]);
+
   return (
     <AppThemeProvider>
       <>

diff --git a/web/src/hooks/useSocket.tsx b/web/src/hooks/useSocket.tsx
@@ -13,6 +13,7 @@ const wssMetricsBaseURL = `${process.env.REACT_APP_WS_BASE_URL}/metrics`;
 */
 export default function useSocket(options = {}) {
   const [servers, setServers] = useState<ServerResponseType[]>([]);
+  const [updateCount, setUpdateCount] = useState<number>(0);
 
   const serversGroupedByHost: ServerGroupedByHostResponseType = servers.reduce(
     (group: any, server) => {
@@ -26,18 +27,18 @@ export default function useSocket(options = {}) {
   );
 
   const servicesGroupedByName: ServerGroupedByNameResponseType = servers.reduce(
-    (group: any, server:any) => {
+    (group: any, server: any) => {
       const { Message } = server;
       const { Name } = Message;
       group[Name] = group[Name] ?? [];
-      group[Name].push(server)
+      group[Name].push(server);
       return group;
     },
     {}
   );
 
-//   Uncomment during debugging
-//   console.log('server', servers);
+  //   Uncomment during debugging
+  //   console.log('server', servers);
 
   const { sendJsonMessage, readyState } = useWebSocket(wssMetricsBaseURL, {
     onOpen: () => console.log('WebSocket connection opened.'),
@@ -46,6 +47,7 @@ export default function useSocket(options = {}) {
     onMessage: (event: WebSocketEventMap['message']) => {
       const newMessage: ServerResponseType = JSON.parse(event.data);
       // if (newMessage.Error) return;
+      setUpdateCount((updateCount) => updateCount + 1);
       setServers((prev) => prev.concat(newMessage));
     },
     ...options,
@@ -65,5 +67,6 @@ export default function useSocket(options = {}) {
     servers,
     serversGroupedByHost,
     servicesGroupedByName,
+    updateCount,
   };
 }
diff --git a/web/src/server/ServerDetail.tsx b/web/src/server/ServerDetail.tsx
@@ -8,15 +8,21 @@ import PageHeader from 'common/PageHeader';
 import LoadingContent from '../common/LoadingContent';
 import useSocket from 'hooks/useSocket';
 import ServerDetailServicesTabPanel from './ServerDetailServicesTabPanel';
-import { ServerResponseType, ServerServiceNameType } from './ServerType';
+import {
+  ServerGroupedByNameResponseType,
+  ServerResponseType,
+  ServerServiceNameType,
+} from './ServerType';
 
-export default function ServerDetail() {
+export default function ServerDetail({
+  servicesGroupedByName,
+}: {
+  servicesGroupedByName: ServerGroupedByNameResponseType;
+}) {
   const { host } = useParams<{ host: string }>();
 
   const [tabIndex, setTabIndex] = React.useState<number>(0);
-
-  const { connectionStatus, sendJsonMessage, servicesGroupedByName } =
-    useSocket();
+  const { connectionStatus, sendJsonMessage } = useSocket();
   sendJsonMessage({ FilterBy: host });
 
   const handleChangeTabIndex = (
@@ -45,15 +51,16 @@ export default function ServerDetail() {
             aria-label={`${host} Tab`}
             variant='scrollable'
             scrollButtons='auto'>
-            {Object.keys(servicesGroupedByName)?.sort()?.map(
-              (serverName: string, index: number) => (
+            {Object.keys(servicesGroupedByName)
+              ?.sort()
+              ?.map((serverName: string, index: number) => (
                 <Tab label={serverName} key={index} />
-              )
-            )}
+              ))}
           </Tabs>
 
-          {Object.keys(servicesGroupedByName)?.sort()?.map(
-            (serverName: string, index: number) => (
+          {Object.keys(servicesGroupedByName)
+            ?.sort()
+            ?.map((serverName: string, index: number) => (
               <div key={index}>
                 {index === tabIndex && (
                   <ServerDetailServicesTabPanel
@@ -66,8 +73,7 @@ export default function ServerDetail() {
                   />
                 )}
               </div>
-            )
-          )}
+            ))}
         </>
       </LoadingContent>
     </Container>

diff --git a/web/src/server/ServerList.tsx b/web/src/server/ServerList.tsx
@@ -6,12 +6,16 @@ import { ReactComponent as ServerIcon } from 'assets/svg/server.svg';
 import LoadingContent from 'common/LoadingContent';
 import ThemeConfig from 'ThemeConfig';
 import useSocket from 'hooks/useSocket';
+import { ServerGroupedByHostResponseType } from './ServerType';
 
-export default function ServerList() {
+export default function ServerList({
+  serversGroupedByHost,
+}: {
+  serversGroupedByHost: ServerGroupedByHostResponseType;
+}) {
   const navigate = useNavigate();
 
-  const { connectionStatus, sendJsonMessage, serversGroupedByHost } =
-    useSocket();
+  const { connectionStatus, sendJsonMessage } = useSocket();
 
   useEffect(() => {
     sendJsonMessage({ FilterBy: '' });