update: custom resource tab panel

web/.gitignore

@@ -13,6 +13,7 @@
 
 # misc
 .DS_Store
+.env 
 .env.local
 .env.development.local
 .env.test.local

web/src/hooks/useSocket.tsx

@@ -45,7 +45,7 @@ export default function useSocket(options = {}) {
     shouldReconnect: (closeEvent) => true,
     onMessage: (event: WebSocketEventMap['message']) => {
       const newMessage: ServerResponseType = JSON.parse(event.data);
-      if (newMessage.Error) return;
+      // if (newMessage.Error) return;
       setServers((prev) => prev.concat(newMessage));
     },
     ...options,

web/src/server/ServerConstant.tsx

@@ -6,4 +6,5 @@ export const ServerNameEnum = {
   PROCESS: "process",
   LOAD_AVG: "loadavg",
   TCP: "tcp",
+  CUSTOM:'custom'
 };

web/src/server/ServerDetailServicesTabPaneCustom.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { ServerServiceNameType } from './ServerType';
+
+interface ServerDetailServicesTabPanelLoadAvgType {
+  serverName: ServerServiceNameType;
+  Error?: string;
+  serverData: any;
+}
+
+export default function ServerDetailServicesTabPanelCustom(
+  props: ServerDetailServicesTabPanelLoadAvgType
+) {
+  if (props.serverData.Error) {
+    return (
+      <div>
+        <p> {props.serverData.Message.Error}</p>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <pre>{props.serverData.Message?.Data?.Output}</pre>
+    </div>
+  );
+}

web/src/server/ServerDetailServicesTabPanel.tsx

@@ -1,13 +1,14 @@
 import React, { useMemo } from "react";
 import { ServerNameEnum } from "./ServerConstant";
+import ServerDetailServicesTabPanelCustom from "./ServerDetailServicesTabPaneCustom";
 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 { DiskData, MemoryData, ServerResponseType, ServerServiceNameType } from "./ServerType";
+import { DiskData, LoadingAvgData, MemoryData, ServerResponseType, ServerServiceNameType } from "./ServerType";
 
 interface ServerDetailServicesTabPanelType {
   serverName: ServerServiceNameType;
@@ -49,7 +50,7 @@ export default function ServerDetailServicesTabPanel(
         content: (
           <ServerDetailServicesTabPanelLoadAvg
             serverName={serverName}
-            serverData={serverData}
+            serverData={serverData as ServerResponseType<LoadingAvgData>}
           />
         ),
       },
@@ -89,6 +90,15 @@ export default function ServerDetailServicesTabPanel(
           />
         ),
       },
+      {
+        title: ServerNameEnum.CUSTOM as ServerServiceNameType,
+        content: (
+          <ServerDetailServicesTabPanelCustom
+            serverName={serverName}
+            serverData={serverData}
+          />
+        ),
+      },
     ],
     [serverName, serverData]
   );

web/src/server/ServerType.tsx

@@ -8,11 +8,12 @@ export type ServerServiceNameType =
   | "tcp";
 
   export type ServerResponseMessageData =
-  | Array<DiskData>
-  | MemoryData
-  | DockerData
-  | UptimeData
-  | ProcessData;
+    | Array<DiskData>
+    | MemoryData
+    | DockerData
+    | UptimeData
+    | ProcessData
+    | LoadingAvgData;
 
 export interface ServerResponseType<T = ServerResponseMessageData> {
   Error: boolean;
@@ -41,6 +42,12 @@ export interface DiskData {
   VolumeName: string;
 }
 
+export interface LoadingAvgData {
+  Load1M:number;
+  Load5M:number;
+  Load15M:number;
+}
+
 export interface DockerData {}
 
 export interface UptimeData {}