impl TCP table integration

web/src/server/ServerDetailServicesTabPanel.tsx

@@ -9,7 +9,7 @@ import ServerDetailServicesTabPanelMemory from "./ServerDetailServicesTabPanelMe
 import ServerDetailServicesTabPanelProcess from "./ServerDetailServicesTabPanelProcess";
 import ServerDetailServicesTabPanelTCP from "./ServerDetailServicesTabPanelTCP";
 import ServerDetailServicesTabPanelUptime from "./ServerDetailServicesTabPanelUptime";
-import { DiskData, LoadingAvgData, MemoryData, ProcessData, ServerResponseType, ServerServiceNameType } from "./ServerType";
+import { DiskData, LoadingAvgData, MemoryData, ProcessData, ServerResponseType, ServerServiceNameType, TCPData } from "./ServerType";
 
 interface ServerDetailServicesTabPanelType {
   serverName: ServerServiceNameType;
@@ -78,7 +78,7 @@ export default function ServerDetailServicesTabPanel(
         content: (
           <ServerDetailServicesTabPanelTCP
             serverName={serverName}
-            serverData={serverData}
+            serverData={serverData as ServerResponseType<TCPData>}
           />
         ),
       },

web/src/server/ServerDetailServicesTabPanelProcess.tsx

@@ -1,9 +1,9 @@
-import { getCoreRowModel } from "@tanstack/react-table";
-import { useVirtual } from "react-virtual";
-import Table from "common/Table";
-import useTable from "common/useTable";
-import React from "react";
-import { ProcessData, ServerResponseType } from "./ServerType";
+import { getCoreRowModel } from '@tanstack/react-table';
+import { useVirtual } from 'react-virtual';
+import Table from 'common/Table';
+import useTable from 'common/useTable';
+import React from 'react';
+import { ProcessData, ServerResponseType } from './ServerType';
 
 interface ServerDetailServicesTabPanelProcessType {
   serverName:
@@ -20,9 +20,13 @@ interface ServerDetailServicesTabPanelProcessType {
 export default function ServerDetailServicesTabPanelProcess(
   props: ServerDetailServicesTabPanelProcessType
 ) {
-  console.log(props);
+  const {
+    serverData: {
+      Message: { Data: data },
+    },
+  } = props;
   const tableInstance = useTable({
-    data:props.serverData.Message.Data,
+    data,
     columns,
     getCoreRowModel: getCoreRowModel(),
   });
@@ -40,7 +44,7 @@ export default function ServerDetailServicesTabPanelProcess(
   return (
     <Table
       ref={tableContainerRef}
-      variant="default"
+      variant='default'
       virtualization
       instance={tableInstance}
       virtualizationInstance={rowVirtualizer}
@@ -66,4 +70,3 @@ const columns = [
     accessorKey: 'Pid',
   },
 ];
-

web/src/server/ServerDetailServicesTabPanelTCP.tsx

@@ -1,13 +1,65 @@
+import Table from "common/Table";
+import useTable from "common/useTable";
 import React from "react";
-import { ServerResponseType, ServerServiceNameType } from "./ServerType";
+import { getCoreRowModel } from '@tanstack/react-table';
+import { ServerResponseType, ServerServiceNameType, TCPData } from "./ServerType";
+import { useVirtual } from "react-virtual";
 
 interface ServerDetailServicesTabPanelTCPType {
   serverName: ServerServiceNameType;
-  serverData: ServerResponseType;
+  serverData: ServerResponseType<TCPData>;
 }
 
 export default function ServerDetailServicesTabPanelTCP(
   props: ServerDetailServicesTabPanelTCPType
 ) {
-  return <div></div>;
+   const {
+     serverData: {
+       Message: { Data: {Ports } },
+     },
+   } = props;
+
+   const data = Object.entries(Ports).map(([key, value]) => {
+      return {
+        Port: key,
+        State: value,
+      };
+   })
+
+   const tableInstance = useTable({
+     data,
+     columns,
+     getCoreRowModel: getCoreRowModel(),
+   });
+
+   const tableContainerRef = React.useRef<HTMLDivElement>(null);
+
+   const { rows } = tableInstance.getRowModel();
+
+   const rowVirtualizer = useVirtual({
+     parentRef: tableContainerRef,
+     size: rows.length,
+     overscan: 10,
+   });
+
+    return (
+      <Table
+        ref={tableContainerRef}
+        variant='default'
+        virtualization
+        instance={tableInstance}
+        virtualizationInstance={rowVirtualizer}
+      />
+    );
 }
+
+const columns = [
+  {
+    header: 'Port',
+    accessorKey: 'Port',
+  },
+  {
+    header: 'State',
+    accessorKey: 'State',
+  },
+];

web/src/server/ServerType.tsx

@@ -52,6 +52,10 @@ export interface DockerData {}
 
 export interface UptimeData {}
 
+export interface TCPData {
+  Ports: Record<number,string>;
+}
+
 export interface ProcessData {
   Pid: number;
   Memory: number;