Merge pull request #461 from bartoval/hide_columns_programmatically

refactor(General): ♻️ Hide table columns programmatically
skupperproject · Sep 17, 2024 · 539059b · 539059b
2 parents 6f239a6 + 5fc2dfc
commit 539059b
Show file tree

Hide file tree

Showing 14 changed files with 86 additions and 125 deletions.
diff --git a/__tests__/core/SkLinkCell.spec.tsx b/__tests__/core/SkLinkCell.spec.tsx
@@ -24,7 +24,7 @@ describe('SkLinkCell', () => {
 
   it('should render an empty cell', () => {
     render(<SkLinkCell data={data} value="" link="/some-link" />);
-    const emptyElement = screen.getByText("''");
+    const emptyElement = screen.getByText('');
     expect(emptyElement).toBeInTheDocument();
   });
 
@@ -40,7 +40,7 @@ describe('SkLinkCell', () => {
 
   it('should handle non-string values', () => {
     render(<SkLinkCell data={data} value={undefined} link="/some-link" />);
-    const emptyElement = screen.getByText("''");
+    const emptyElement = screen.getByText('');
     expect(emptyElement).toBeInTheDocument();
   });
 });
diff --git a/__tests__/pages/Services/Service.spec.tsx b/__tests__/pages/Services/Service.spec.tsx
@@ -47,7 +47,7 @@ describe('Begin testing the Service component', () => {
 
     expect(screen.getByText(ServicesLabels.Overview)).toBeInTheDocument();
     expect(screen.getByText(`${ServicesLabels.Servers}`)).toBeInTheDocument();
-    expect(screen.getByText(`${ServicesLabels.ActiveConnections}`)).toBeInTheDocument();
+    expect(screen.getByText(`${ServicesLabels.OpenConnections}`)).toBeInTheDocument();
     expect(screen.getByText(`${ServicesLabels.OldConnections}`)).toBeInTheDocument();
   });
 

diff --git a/src/core/components/SkTable/SkTable.utils.ts b/src/core/components/SkTable/SkTable.utils.ts
@@ -0,0 +1,42 @@
+import { getValueFromNestedProperty } from '@core/utils/getValueFromNestedProperty';
+import { NonNullableValue, SKTableColumn } from '@sk-types/SkTable.interfaces';
+
+type ColumnVisibilityConfig<T> = {
+  [key in keyof T]?: boolean;
+};
+
+/**
+ * Sets the visibility of table columns based on the provided visibility configuration.
+ */
+export function setColumnVisibility<T>(
+  tableColumns: SKTableColumn<T>[],
+  visibilityConfig: Partial<ColumnVisibilityConfig<T>> = {}
+): SKTableColumn<T>[] {
+  return tableColumns.map((column) => {
+    if (column.prop && column.prop in visibilityConfig) {
+      return {
+        ...column,
+        show: visibilityConfig[column.prop]
+      };
+    }
+
+    return {
+      ...column,
+      show: column.show ?? true
+    };
+  });
+}
+
+export function sortRowsByColumnName<T>(rows: NonNullableValue<T>[], columnName: string, direction: number) {
+  return rows.sort((a, b) => {
+    // Get the values of the sort column for the two rows being compared, and handle null values.
+    const paramA = getValueFromNestedProperty(a, columnName.split('.') as (keyof T)[]);
+    const paramB = getValueFromNestedProperty(b, columnName.split('.') as (keyof T)[]);
+
+    if (paramA == null || paramB == null || paramA === paramB) {
+      return 0;
+    }
+
+    return paramA > paramB ? direction : -direction;
+  });
+}
diff --git a/src/core/components/SkTable/index.tsx b/src/core/components/SkTable/index.tsx
@@ -20,6 +20,7 @@ import { NonNullableValue, SKTableColumn } from '@sk-types/SkTable.interfaces';
 
 import SkPagination from './SkPagination';
 import SKEmptyData from '../SkEmptyData';
+import { sortRowsByColumnName } from './SkTable.utils';
 
 const FIRST_PAGE_NUMBER = 1;
 const PAGINATION_PAGE_SIZE = 10;
@@ -278,17 +279,3 @@ const SkTable = function <T>({
 };
 
 export default SkTable;
-
-function sortRowsByColumnName<T>(rows: NonNullableValue<T>[], columnName: string, direction: number) {
-  return rows.sort((a, b) => {
-    // Get the values of the sort column for the two rows being compared, and handle null values.
-    const paramA = getValueFromNestedProperty(a, columnName.split('.') as (keyof T)[]);
-    const paramB = getValueFromNestedProperty(b, columnName.split('.') as (keyof T)[]);
-
-    if (paramA == null || paramB == null || paramA === paramB) {
-      return 0;
-    }
-
-    return paramA > paramB ? direction : -direction;
-  });
-}
diff --git a/src/pages/ProcessGroups/components/ProcessList.tsx b/src/pages/ProcessGroups/components/ProcessList.tsx
@@ -1,6 +1,7 @@
 import { FC } from 'react';
 
 import SkTable from '@core/components/SkTable';
+import { setColumnVisibility } from '@core/components/SkTable/SkTable.utils';
 import { CustomProcessCells, processesTableColumns } from '@pages/Processes/Processes.constants';
 import { ProcessesLabels } from '@pages/Processes/Processes.enum';
 import { ProcessResponse } from '@sk-types/REST.interfaces';
@@ -13,7 +14,7 @@ const ProcessList: FC<ProcessListProps> = function ({ processes }) {
   return (
     <SkTable
       title={ProcessesLabels.Section}
-      columns={processesTableColumns}
+      columns={setColumnVisibility(processesTableColumns, { groupName: false })}
       rows={processes}
       customCells={{
         linkCell: CustomProcessCells.linkCell,

diff --git a/src/pages/Processes/Processes.constants.ts b/src/pages/Processes/Processes.constants.ts
@@ -1,7 +1,5 @@
 import SkEndTimeCell from '@core/components/SkEndTimeCell';
 import SkExposedCell from '@core/components/SkExposedCell';
-import { httpFlowPairsColumns, tcpFlowPairsColumns } from '@core/components/SkFlowPairsTable/FlowPair.constants';
-import { FlowPairLabels } from '@core/components/SkFlowPairsTable/FlowPair.enum';
 import SkHighlightValueCell, { SkHighlightValueCellProps } from '@core/components/SkHighlightValueCell';
 import SkLinkCell, { SkLinkCellProps } from '@core/components/SkLinkCell';
 import { formatByteRate, formatBytes } from '@core/utils/formatBytes';
@@ -157,61 +155,6 @@ export const processesHttpConnectedColumns: SKTableColumn<ProcessPairsResponse>[
   }
 ];
 
-const oldTcpHiddenColumns: Record<string, { show: boolean }> = {
-  [FlowPairLabels.Client]: {
-    show: false
-  },
-  [FlowPairLabels.Site]: {
-    show: false
-  },
-  [FlowPairLabels.Server]: {
-    show: false
-  },
-  [FlowPairLabels.ServerSite]: {
-    show: false
-  }
-};
-
-const activeTcpHiddenColumns: Record<string, { show: boolean }> = {
-  ...oldTcpHiddenColumns,
-  [FlowPairLabels.Duration]: {
-    show: false
-  },
-  [FlowPairLabels.FlowPairClosed]: {
-    show: false
-  }
-};
-
-const httpHiddenColumns: Record<string, { show: boolean }> = {
-  [FlowPairLabels.From]: {
-    show: false
-  },
-  [FlowPairLabels.To]: {
-    show: false
-  },
-  [FlowPairLabels.Site]: {
-    show: false
-  },
-  [FlowPairLabels.ServerSite]: {
-    show: false
-  }
-};
-
-export const httpColumns = httpFlowPairsColumns.map((flowPair) => ({
-  ...flowPair,
-  show: httpHiddenColumns[flowPair.name]?.show
-}));
-
-export const oldTcpColumns = tcpFlowPairsColumns.map((flowPair) => ({
-  ...flowPair,
-  show: oldTcpHiddenColumns[flowPair.name]?.show
-}));
-
-export const activeTcpColumns = tcpFlowPairsColumns.map((flowPair) => ({
-  ...flowPair,
-  show: activeTcpHiddenColumns[flowPair.name]?.show
-}));
-
 export const processesSelectOptions: { name: string; id: string }[] = [
   {
     name: 'Process',

diff --git a/src/pages/Processes/Processes.enum.ts b/src/pages/Processes/Processes.enum.ts
@@ -50,7 +50,7 @@ export enum ProcessesLabels {
   ExposedTitle = 'Exposure status',
   IsExposed = 'Exposed',
   IsNotExposed = 'Unexposed',
-  ActiveConnections = 'Open connections',
+  OpenConnections = 'Open connections',
   OldConnections = 'Connection history',
   ProcessPairsEmptyTitle = 'No connections or requests to display',
   ProcessPairsEmptyMessage = 'As new connections or requests are established, they will be dynamically added to the table for display',

diff --git a/src/pages/Processes/components/FlowPairsList.tsx b/src/pages/Processes/components/FlowPairsList.tsx
@@ -9,12 +9,13 @@ import { AvailableProtocols, SortDirection, TcpStatus } from '@API/REST.enum';
 import { DEFAULT_PAGINATION_SIZE, UPDATE_INTERVAL } from '@config/config';
 import SKEmptyData from '@core/components/SkEmptyData';
 import SkFlowPairsTable from '@core/components/SkFlowPairsTable';
+import { httpFlowPairsColumns, tcpFlowPairsColumns } from '@core/components/SkFlowPairsTable/FlowPair.constants';
+import { setColumnVisibility } from '@core/components/SkTable/SkTable.utils';
 import { TopologyURLQueyParams } from '@pages/Topology/Topology.enum';
 import { QueryFiltersProtocolMap } from '@sk-types/Processes.interfaces';
 import { QueryFilters } from '@sk-types/REST.interfaces';
 import useUpdateQueryStringValueWithoutNavigation from 'hooks/useUpdateQueryStringValueWithoutNavigation';
 
-import { activeTcpColumns, httpColumns, oldTcpColumns } from '../Processes.constants';
 import { ProcessesLabels, QueriesProcesses } from '../Processes.enum';
 
 const TAB_1_KEY = 'liveConnections';
@@ -175,13 +176,10 @@ const FlowPairsList: FC<FlowPairsListProps> = function ({ sourceProcessId, destP
       )}
       <Tabs activeKey={activeTab} onSelect={handleTabClick} component="nav" isBox>
         {!!activeConnectionsCount && (
-          <Tab
-            eventKey={TAB_1_KEY}
-            title={<TabTitleText>{`${ProcessesLabels.ActiveConnections} (${activeConnectionsCount})`}</TabTitleText>}
-          >
+          <Tab eventKey={TAB_1_KEY} title={<TabTitleText>{ProcessesLabels.OpenConnections}</TabTitleText>}>
             <SkFlowPairsTable
               data-testid={'tcp-active-connections-table'}
-              columns={activeTcpColumns}
+              columns={setColumnVisibility(tcpFlowPairsColumns, { duration: false, endTime: false })}
               rows={activeConnections}
               paginationTotalRows={activeConnectionsCount}
               pagination={true}
@@ -199,7 +197,7 @@ const FlowPairsList: FC<FlowPairsListProps> = function ({ sourceProcessId, destP
           >
             <SkFlowPairsTable
               data-testid={'tcp-old-connections-table'}
-              columns={oldTcpColumns}
+              columns={setColumnVisibility(tcpFlowPairsColumns, { duration: false, endTime: false })}
               rows={oldConnections}
               paginationTotalRows={oldConnectionsCount}
               pagination={true}
@@ -213,11 +211,16 @@ const FlowPairsList: FC<FlowPairsListProps> = function ({ sourceProcessId, destP
           <Tab
             disabled={http2RequestsCount === 0}
             eventKey={TAB_3_KEY}
-            title={<TabTitleText>{`${ProcessesLabels.Http2Requests} (${http2RequestsCount})`}</TabTitleText>}
+            title={<TabTitleText>{ProcessesLabels.Http2Requests}</TabTitleText>}
           >
             <SkFlowPairsTable
               data-testid={'http2-table'}
-              columns={httpColumns}
+              columns={setColumnVisibility(httpFlowPairsColumns, {
+                sourceProcessName: false,
+                destProcessName: false,
+                sourceSiteName: false,
+                destSiteName: false
+              })}
               rows={http2Requests}
               paginationTotalRows={http2RequestsCount}
               pagination={true}
@@ -231,12 +234,17 @@ const FlowPairsList: FC<FlowPairsListProps> = function ({ sourceProcessId, destP
           <Tab
             disabled={httpRequestsCount === 0}
             eventKey={TAB_4_KEY}
-            title={<TabTitleText>{`${ProcessesLabels.HttpRequests} (${httpRequestsCount})`}</TabTitleText>}
+            title={<TabTitleText>{ProcessesLabels.HttpRequests}</TabTitleText>}
           >
             <SkFlowPairsTable
               data-testid={'http-table'}
               title={ProcessesLabels.HttpRequests}
-              columns={httpColumns}
+              columns={setColumnVisibility(httpFlowPairsColumns, {
+                sourceProcessName: false,
+                destProcessName: false,
+                sourceSiteName: false,
+                destSiteName: false
+              })}
               rows={httpRequests}
               paginationTotalRows={httpRequestsCount}
               pagination={true}

diff --git a/src/pages/Services/Services.constants.ts b/src/pages/Services/Services.constants.ts
@@ -1,8 +1,6 @@
 import { SortDirection, TcpStatus } from '@API/REST.enum';
 import { BIG_PAGINATION_SIZE } from '@config/config';
 import SkEndTimeCell from '@core/components/SkEndTimeCell';
-import { httpFlowPairsColumns, tcpFlowPairsColumns } from '@core/components/SkFlowPairsTable/FlowPair.constants';
-import { FlowPairLabels } from '@core/components/SkFlowPairsTable/FlowPair.enum';
 import SkLinkCell, { SkLinkCellProps } from '@core/components/SkLinkCell';
 import { sankeyMetricOptions } from '@core/components/SKSanckeyChart/SkSankey.constants';
 import { ProcessesLabels } from '@pages/Processes/Processes.enum';
@@ -16,6 +14,12 @@ export const ServicesPaths = {
   name: ServicesLabels.Section
 };
 
+export const TAB_0_KEY = ServicesLabels.Overview;
+export const TAB_1_KEY = ServicesLabels.Servers;
+export const TAB_2_KEY = ServicesLabels.Requests;
+export const TAB_3_KEY = ServicesLabels.OpenConnections;
+export const TAB_4_KEY = ServicesLabels.OldConnections;
+
 export const customServiceCells = {
   ServiceNameLinkCell: (props: SkLinkCellProps<ServiceResponse>) =>
     SkLinkCell({
@@ -51,8 +55,7 @@ export const ServiceColumns: SKTableColumn<ServiceResponse>[] = [
     width: 15
   },
   {
-    name: ServicesLabels.CurrentFlowPairs,
-    columnDescription: 'Open connections',
+    name: ServicesLabels.OpenConnections,
     prop: 'currentFlows' as keyof ServiceResponse,
     width: 15
   },
@@ -90,30 +93,6 @@ export const tcpServerColumns: SKTableColumn<ProcessResponse>[] = [
   }
 ];
 
-// Http/2 Table
-export const httpColumns = httpFlowPairsColumns;
-
-// Tcp Table
-const tcpHiddenColumns: Record<string, { show: boolean }> = {
-  [FlowPairLabels.FlowPairClosed]: {
-    show: false
-  },
-  [FlowPairLabels.To]: {
-    show: false
-  }
-};
-
-export const tcpColumns = tcpFlowPairsColumns.map((flowPair) => ({
-  ...flowPair,
-  show: tcpHiddenColumns[flowPair.name]?.show
-}));
-
-export const TAB_0_KEY = ServicesLabels.Overview;
-export const TAB_1_KEY = ServicesLabels.Servers;
-export const TAB_2_KEY = ServicesLabels.Requests;
-export const TAB_3_KEY = ServicesLabels.ActiveConnections;
-export const TAB_4_KEY = ServicesLabels.OldConnections;
-
 export const servicesSelectOptions: { name: string; id: string }[] = [
   {
     name: 'Routing key',

diff --git a/src/pages/Services/Services.enum.ts b/src/pages/Services/Services.enum.ts
@@ -23,7 +23,7 @@ export enum ServicesLabels {
   TCP = 'TCP',
   Description = 'Collection of processes (servers) that are exposed across the Application network, along with their respective connections to the processes (clients) they communicate with',
   NoMetricSourceProcessFilter = 'No Clients',
-  ActiveConnections = 'Open connections',
+  OpenConnections = 'Open connections',
   OldConnections = 'Connection history',
   TcpTrafficTx = 'Outbound traffic ',
   TcpTrafficRx = 'Inbound traffic',
@@ -40,6 +40,5 @@ export enum ServicesLabels {
   SankeyChartDescription = 'Visualizing relationships and the distribution among processes and sites',
   Name = 'Routing key',
   Protocol = 'Protocol',
-  CurrentFlowPairs = 'Tcp open connections',
   TotalFLowPairs = 'Total'
 }
diff --git a/src/pages/Services/components/HttpRequests.tsx b/src/pages/Services/components/HttpRequests.tsx
@@ -2,11 +2,11 @@ import { FC } from 'react';
 
 import { Stack, StackItem } from '@patternfly/react-core';
 
-import { httpSelectOptions } from '@core/components/SkFlowPairsTable/FlowPair.constants';
+import { httpFlowPairsColumns, httpSelectOptions } from '@core/components/SkFlowPairsTable/FlowPair.constants';
 
 import FlowPairsTable from './FlowPairsTable';
 import ProcessPairsSankeyChart from './ProcessPairsSankey';
-import { httpColumns, initRequestsQueryParams } from '../Services.constants';
+import { initRequestsQueryParams } from '../Services.constants';
 
 interface HttpRequestsProps {
   id: string;
@@ -22,7 +22,7 @@ const HttpRequests: FC<HttpRequestsProps> = function ({ id, name }) {
       <StackItem>
         <FlowPairsTable
           options={httpSelectOptions}
-          columns={httpColumns}
+          columns={httpFlowPairsColumns}
           filters={{ ...initRequestsQueryParams, routingKey: name }}
         />
       </StackItem>

diff --git a/src/pages/Services/components/NavigationMenu.tsx b/src/pages/Services/components/NavigationMenu.tsx
@@ -44,7 +44,7 @@ const NavigationMenu: FC<NavigationMenuProps> = function ({
       <Tab
         isDisabled={!tcpActiveConnectionCount}
         eventKey={TAB_3_KEY}
-        title={<TabTitleText>{ServicesLabels.ActiveConnections}</TabTitleText>}
+        title={<TabTitleText>{ServicesLabels.OpenConnections}</TabTitleText>}
       />
       <Tab
         isDisabled={!tcpTerminatedConnectionCount}