FEAT: services tab panel

web/src/server/ServerDetail.tsx

@@ -6,10 +6,12 @@ import LoadingContent from "../common/LoadingContent";
 import {
   ServerGroupedByNameResponseType,
   ServerResponseType,
+  ServerServiceNameType,
 } from "./ServerType";
 import Tabs from "@mui/material/Tabs";
 import Tab from "@mui/material/Tab";
 import PageHeader from "common/PageHeader";
+import ServerDetailServicesTabPanel from "./ServerDetailServicesTabPanel";
 
 const wssMetricsBaseURL = `${process.env.REACT_APP_WS_BASE_URL}/metrics`;
 
@@ -20,7 +22,7 @@ export default function ServerDetail() {
   const [servers, setServers] = useState<ServerResponseType[]>([]);
 
   const servicesGroupedByName: ServerGroupedByNameResponseType = servers.reduce(
-    (group: any, server) => {
+    (group: ServerGroupedByNameResponseType, server: ServerResponseType) => {
       const { Message } = server;
       const { Name } = Message;
       group[Name] = group[Name] ?? [];
@@ -36,7 +38,6 @@ export default function ServerDetail() {
     shouldReconnect: (closeEvent) => true,
     onMessage: (event: WebSocketEventMap["message"]) => {
       const newMessage: ServerResponseType = JSON.parse(event.data);
-      if (newMessage.Error) return;
       setServers((prev) => prev.concat(newMessage));
     },
   });
@@ -88,7 +89,18 @@ export default function ServerDetail() {
 
           {Object.keys(servicesGroupedByName)?.map(
             (serverName: string, index: number) => (
-              <div key={index}>{index === tabIndex && <>{serverName}</>}</div>
+              <div key={index}>
+                {index === tabIndex && (
+                  <ServerDetailServicesTabPanel
+                    serverName={serverName as ServerServiceNameType}
+                    serverData={
+                      servicesGroupedByName[
+                        serverName as ServerServiceNameType
+                      ]?.at(-1) as ServerResponseType
+                    } // get the last object of service
+                  />
+                )}
+              </div>
             )
           )}
         </>

web/src/server/ServerDetailServicesTabPanel.tsx

@@ -1,30 +1,101 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { ServerNameEnum } from "./ServerConstant";
+import ServerDetailServicesTabPanelDisk from "./ServerDetailServicesTabPanelDisk";
+import ServerDetailServicesTabPanelDocker from "./ServerDetailServicesTabPanelDocker";
+import ServerDetailServicesTabPanelLoadAvg from "./ServerDetailServicesTabPanelLoadAvg";
+import ServerDetailServicesTabPanelMemory from "./ServerDetailServicesTabPanelMemory";
+import ServerDetailServicesTabPanelProcess from "./ServerDetailServicesTabPanelProcess";
+import ServerDetailServicesTabPanelTCP from "./ServerDetailServicesTabPanelTCP";
+import ServerDetailServicesTabPanelUptime from "./ServerDetailServicesTabPanelUptime";
+import { ServerResponseType, ServerServiceNameType } from "./ServerType";
 
 interface ServerDetailServicesTabPanelType {
-  serverName:
-    | "disk"
-    | "docker"
-    | "uptime"
-    | "memory"
-    | "process"
-    | "loadavg"
-    | "tcp";
-  serverData: Object | [];
+  serverName: ServerServiceNameType;
+  serverData: ServerResponseType;
+}
+
+interface servicesTabPanelType {
+  title: ServerServiceNameType;
+  content: React.ReactElement;
 }
 
 export default function ServerDetailServicesTabPanel(
   props: ServerDetailServicesTabPanelType
 ) {
-  //   const ServicesTabPanel: React.ElementType = {
-  //     [ServerNameEnum.DISK as "disk"]: <></>,
-  //     [ServerNameEnum.DOCKER]: <></>,
-  //     [ServerNameEnum.LOAD_AVG]: <></>,
-  //     [ServerNameEnum.MEMORY]: <></>,
-  //     [ServerNameEnum.PROCESS]: <></>,
-  //     [ServerNameEnum.TCP]: <></>,
-  //     [ServerNameEnum.UPTIME]: <></>,
-  //   }[ServerNameEnum];
+  const { serverData, serverName } = props;
+
+  const servicesTabPanel: servicesTabPanelType[] = useMemo(
+    () => [
+      {
+        title: ServerNameEnum.DISK as ServerServiceNameType,
+        content: (
+          <ServerDetailServicesTabPanelDisk
+            serverName={serverName}
+            serverData={serverData}
+          />
+        ),
+      },
+      {
+        title: ServerNameEnum.DOCKER as ServerServiceNameType,
+        content: (
+          <ServerDetailServicesTabPanelDocker
+            serverName={serverName}
+            serverData={serverData}
+          />
+        ),
+      },
+      {
+        title: ServerNameEnum.LOAD_AVG as ServerServiceNameType,
+        content: (
+          <ServerDetailServicesTabPanelLoadAvg
+            serverName={serverName}
+            serverData={serverData}
+          />
+        ),
+      },
+      {
+        title: ServerNameEnum.MEMORY as ServerServiceNameType,
+        content: (
+          <ServerDetailServicesTabPanelMemory
+            serverName={serverName}
+            serverData={serverData}
+          />
+        ),
+      },
+      {
+        title: ServerNameEnum.PROCESS as ServerServiceNameType,
+        content: (
+          <ServerDetailServicesTabPanelProcess
+            serverName={serverName}
+            serverData={serverData}
+          />
+        ),
+      },
+      {
+        title: ServerNameEnum.TCP as ServerServiceNameType,
+        content: (
+          <ServerDetailServicesTabPanelTCP
+            serverName={serverName}
+            serverData={serverData}
+          />
+        ),
+      },
+      {
+        title: ServerNameEnum.UPTIME as ServerServiceNameType,
+        content: (
+          <ServerDetailServicesTabPanelUptime
+            serverName={serverName}
+            serverData={serverData}
+          />
+        ),
+      },
+    ],
+    [serverName, serverData]
+  );
+
+  const activeServicesTabPanel = servicesTabPanel?.find(
+    (service: servicesTabPanelType) => service.title === serverName
+  );
 
-  return <div>{/* <ServicesTabPanel /> */}</div>;
+  return <div>{activeServicesTabPanel?.content}</div>;
 }

web/src/server/ServerDetailServicesTabPanelDisk.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+
+interface ServerDetailServicesTabPanelDiskType {
+  serverName:
+    | "disk"
+    | "docker"
+    | "uptime"
+    | "memory"
+    | "process"
+    | "loadavg"
+    | "tcp";
+  serverData: Object | [];
+}
+
+export default function ServerDetailServicesTabPanelDisk(
+  props: ServerDetailServicesTabPanelDiskType
+) {
+  return <div>{/* <ServicesTabPanel /> */}</div>;
+}

web/src/server/ServerDetailServicesTabPanelDocker.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+
+interface ServerDetailServicesTabPanelDockerType {
+  serverName:
+    | "disk"
+    | "docker"
+    | "uptime"
+    | "memory"
+    | "process"
+    | "loadavg"
+    | "tcp";
+  serverData: Object | [];
+}
+
+export default function ServerDetailServicesTabPanelDocker(
+  props: ServerDetailServicesTabPanelDockerType
+) {
+  return <div>{/* <ServicesTabPanel /> */}</div>;
+}

web/src/server/ServerDetailServicesTabPanelLoadAvg.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+
+interface ServerDetailServicesTabPanelLoadAvgType {
+  serverName:
+    | "disk"
+    | "docker"
+    | "uptime"
+    | "memory"
+    | "process"
+    | "loadavg"
+    | "tcp";
+  serverData: Object | [];
+}
+
+export default function ServerDetailServicesTabPanelLoadAvg(
+  props: ServerDetailServicesTabPanelLoadAvgType
+) {
+  return <div>{/* <ServicesTabPanel /> */}</div>;
+}

web/src/server/ServerDetailServicesTabPanelMemory.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+
+interface ServerDetailServicesTabPanelMemoryType {
+  serverName:
+    | "disk"
+    | "docker"
+    | "uptime"
+    | "memory"
+    | "process"
+    | "loadavg"
+    | "tcp";
+  serverData: Object | [];
+}
+
+export default function ServerDetailServicesTabPanelMemory(
+  props: ServerDetailServicesTabPanelMemoryType
+) {
+  return <div>{/* <ServicesTabPanel /> */}</div>;
+}

web/src/server/ServerDetailServicesTabPanelProcess.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+
+interface ServerDetailServicesTabPanelProcessType {
+  serverName:
+    | "disk"
+    | "docker"
+    | "uptime"
+    | "memory"
+    | "process"
+    | "loadavg"
+    | "tcp";
+  serverData: Object | [];
+}
+
+export default function ServerDetailServicesTabPanelProcess(
+  props: ServerDetailServicesTabPanelProcessType
+) {
+  return <div>{/* <ServicesTabPanel /> */}</div>;
+}

web/src/server/ServerDetailServicesTabPanelTCP.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import { ServerResponseType, ServerServiceNameType } from "./ServerType";
+
+interface ServerDetailServicesTabPanelTCPType {
+  serverName: ServerServiceNameType;
+  serverData: ServerResponseType;
+}
+
+export default function ServerDetailServicesTabPanelTCP(
+  props: ServerDetailServicesTabPanelTCPType
+) {
+  return <div></div>;
+}

web/src/server/ServerDetailServicesTabPanelUptime.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+
+interface ServerDetailServicesTabPanelUptimeType {
+  serverName:
+    | "disk"
+    | "docker"
+    | "uptime"
+    | "memory"
+    | "process"
+    | "loadavg"
+    | "tcp";
+  serverData: Object | [];
+}
+
+export default function ServerDetailServicesTabPanelUptime(
+  props: ServerDetailServicesTabPanelUptimeType
+) {
+  return <div>{/* <ServicesTabPanel /> */}</div>;
+}

web/src/server/ServerType.tsx

@@ -1,15 +1,17 @@
+export type ServerServiceNameType =
+  | "disk"
+  | "docker"
+  | "uptime"
+  | "memory"
+  | "process"
+  | "loadavg"
+  | "tcp";
+
 export interface ServerResponseType {
   Error: boolean;
   Message: {
     Host: string;
-    Name:
-      | "disk"
-      | "docker"
-      | "uptime"
-      | "memory"
-      | "process"
-      | "loadavg"
-      | "tcp";
+    Name: ServerServiceNameType;
     Platform: string;
     Data: Object;
   };