impl TCP table integration

bisohns · Nov 30, 2022 · 512c15e · 512c15e
1 parent e337e0e
commit 512c15e
Showing 1 changed file with 48 additions and 38 deletions.
diff --git a/web/src/server/ServerDetailServicesTabPanelTCP.tsx b/web/src/server/ServerDetailServicesTabPanelTCP.tsx
@@ -1,9 +1,13 @@
-import Table from "common/Table";
-import useTable from "common/useTable";
-import React from "react";
+import Table from 'common/Table';
+import useTable from 'common/useTable';
+import React, { useMemo } from 'react';
 import { getCoreRowModel } from '@tanstack/react-table';
-import { ServerResponseType, ServerServiceNameType, TCPData } from "./ServerType";
-import { useVirtual } from "react-virtual";
+import {
+  ServerResponseType,
+  ServerServiceNameType,
+  TCPData,
+} from './ServerType';
+import { useVirtual } from 'react-virtual';
 
 interface ServerDetailServicesTabPanelTCPType {
   serverName: ServerServiceNameType;
@@ -13,44 +17,50 @@ interface ServerDetailServicesTabPanelTCPType {
 export default function ServerDetailServicesTabPanelTCP(
   props: ServerDetailServicesTabPanelTCPType
 ) {
-   const {
-     serverData: {
-       Message: { Data: {Ports } },
-     },
-   } = props;
+  const {
+    serverData: {
+      Message: {
+        Data: { Ports },
+      },
+    },
+  } = props;
 
-   const data = Object.entries(Ports).map(([key, value]) => {
-      return {
-        Port: key,
-        State: value,
-      };
-   })
+  const data = useMemo(
+    () =>
+      Object.entries(Ports).map(([key, value]) => {
+        return {
+          Port: key,
+          State: value,
+        };
+      }),
+    [Ports]
+  );
 
-   const tableInstance = useTable({
-     data,
-     columns,
-     getCoreRowModel: getCoreRowModel(),
-   });
+  const tableInstance = useTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+  });
 
-   const tableContainerRef = React.useRef<HTMLDivElement>(null);
+  const tableContainerRef = React.useRef<HTMLDivElement>(null);
 
-   const { rows } = tableInstance.getRowModel();
+  const { rows } = tableInstance.getRowModel();
 
-   const rowVirtualizer = useVirtual({
-     parentRef: tableContainerRef,
-     size: rows.length,
-     overscan: 10,
-   });
+  const rowVirtualizer = useVirtual({
+    parentRef: tableContainerRef,
+    size: rows.length,
+    overscan: 10,
+  });
 
-    return (
-      <Table
-        ref={tableContainerRef}
-        variant='default'
-        virtualization
-        instance={tableInstance}
-        virtualizationInstance={rowVirtualizer}
-      />
-    );
+  return (
+    <Table
+      ref={tableContainerRef}
+      variant='default'
+      virtualization
+      instance={tableInstance}
+      virtualizationInstance={rowVirtualizer}
+    />
+  );
 }
 
 const columns = [
@@ -62,4 +72,4 @@ const columns = [
     header: 'State',
     accessorKey: 'State',
   },
-];
+];