Merge pull request #436 from bartoval/polite_pairs_for_site-client_an…

…d_site-server refactor(General): ♻️ Polish site-* in processpairs
skupperproject · Aug 7, 2024 · 4080300 · 4080300
2 parents 886ee8f + 5940c29
commit 4080300
Show file tree

Hide file tree

Showing 12 changed files with 116 additions and 204 deletions.
diff --git a/src/core/components/DurationCell/DurationCell.ts b/src/core/components/DurationCell/DurationCell.ts
@@ -3,6 +3,4 @@ import { ReactNode } from 'react';
 export interface DurationCellProps<T> {
   data: T;
   value: ReactNode;
-  startTime: number;
-  endTime: number;
 }
diff --git a/src/core/components/DurationCell/index.tsx b/src/core/components/DurationCell/index.tsx
@@ -1,15 +1,19 @@
 import { Tooltip } from '@patternfly/react-core';
 import { TableText } from '@patternfly/react-table';
 
-import { formatTimeInterval } from '@core/utils/formatTimeInterval';
+import { formatLatency } from '@core/utils/formatLatency';
 
 import { DurationCellProps } from './DurationCell';
 
 /**
- *  startTime and endTime are expected to be in microseconds
+ *  value is expected to be in microseconds
  */
-const DurationCell = function <T>({ startTime, endTime }: DurationCellProps<T>) {
-  const duration = formatTimeInterval(endTime, startTime);
+const DurationCell = function <T>({ value }: DurationCellProps<T>) {
+  if (!value) {
+    return null;
+  }
+
+  const duration = formatLatency(value as number);
 
   return (
     <Tooltip content={duration}>

diff --git a/src/core/utils/formatTimeInterval.spec.ts b/src/core/utils/formatTimeInterval.spec.ts
diff --git a/src/core/utils/formatTimeInterval.ts b/src/core/utils/formatTimeInterval.ts
diff --git a/src/pages/Processes/Processes.interfaces.ts b/src/pages/Processes/Processes.interfaces.ts
@@ -22,7 +22,7 @@ export interface ProcessPairsContentProps {
   processPairId: string;
   sourceId: string;
   destinationId: string;
-  protocol: AvailableProtocols;
+  protocol: AvailableProtocols | 'undefined';
 }
 
 // Process Details component

diff --git a/src/pages/Processes/__tests__/ProcessPairs.spec.tsx b/src/pages/Processes/__tests__/ProcessPairs.spec.tsx
@@ -74,7 +74,7 @@ describe('Begin testing the Processes component', () => {
   });
 
   it('should render render the TCP Process Pairs Content Component and the tab Open connection is active', async () => {
-    const { queryByTestId, getByText, getByTestId } = render(
+    const { queryByTestId, getByTestId } = render(
       <Wrapper>
         <Suspense fallback={<LoadingPage />}>
           <ProcessPairsContent
@@ -92,7 +92,6 @@ describe('Begin testing the Processes component', () => {
     });
 
     expect(getByTestId('tcp-active-connections-table')).toBeInTheDocument();
-    expect(getByText('Connection history (0)').closest('button')).toBeDisabled();
   });
 
   it('should render render the TCP Process Pairs Content Component and the Tab connection history is active', async () => {
@@ -117,33 +116,4 @@ describe('Begin testing the Processes component', () => {
 
     expect(getByTestId('tcp-old-connections-table')).toBeInTheDocument();
   });
-
-  // it('should render render the TCP Process Pairs Content Component and the Tab connection history is active', async () => {
-  //   const { handleGetFilters } = renderHook(() =>
-  //     useProcessPairsContent({
-  //       protocol: AvailableProtocols.Tcp
-  //     })
-  //   );
-
-  //   const { queryByTestId, getByText } = render(
-  //     <Wrapper>
-  //       <Suspense fallback={<LoadingPage />}>
-  //         <ProcessPairsContent
-  //           processPairId={processPairsResultPayment2ToOp.identity}
-  //           sourceId={processPairsResultPayment2ToOp.sourceId}
-  //           destinationId={processPairsResultPayment2ToOp.destinationId}
-  //           protocol={AvailableProtocols.Tcp}
-  //         />
-  //       </Suspense>
-  //     </Wrapper>
-  //   );
-
-  //   await waitForElementToBeRemoved(() => queryByTestId(getTestsIds.loadingView()), {
-  //     timeout: waitForElementToBeRemovedTimeout
-  //   });
-
-  //   fireEvent.click(getByText('Duration'));
-
-  //   expect(handleGetFilters).toHaveBeenCalledTimes(1);
-  // });
 });
diff --git a/src/pages/Processes/components/ProcessPairsFlows.tsx b/src/pages/Processes/components/ProcessPairsFlows.tsx
@@ -19,6 +19,8 @@ import { ProcessPairsFlowsProps, RemoteFilterOptionsProtocolMap } from '../Proce
 
 const TAB_1_KEY = 'liveConnections';
 const TAB_2_KEY = 'connections';
+const TAB_3_KEY = 'http2Requests';
+const TAB_4_KEY = 'httpRequests';
 
 const initPaginatedFlowPairsQueryParams: RemoteFilterOptions = {
   offset: 0,
@@ -58,7 +60,7 @@ const initPaginatedQueryParams: RemoteFilterOptionsProtocolMap = {
   }
 };
 
-const useProcessPairsContent = ({ protocol }: { protocol: AvailableProtocols }) => {
+const useProcessPairsContent = ({ protocol }: { protocol: AvailableProtocols | 'undefined' }) => {
   const [queryParamsPaginated, setQueryParamsPaginated] =
     useState<RemoteFilterOptionsProtocolMap>(initPaginatedQueryParams);
 
@@ -97,31 +99,31 @@ const ProcessPairsFlows: FC<ProcessPairsFlowsProps> = function ({ processPairId,
     useFlowPairsQuery(
       queryParamsPaginated[AvailableProtocols.Http],
       processPairId,
-      AvailableProtocols.Http === protocol
+      AvailableProtocols.Http === protocol || protocol === 'undefined'
     )
   );
 
   const { results: http2Requests, count: http2RequestsCount } = extractData(
     useFlowPairsQuery(
       queryParamsPaginated[AvailableProtocols.Http2],
       processPairId,
-      AvailableProtocols.Http2 === protocol
+      AvailableProtocols.Http2 === protocol || protocol === 'undefined'
     )
   );
 
   const { results: activeConnections, count: activeConnectionsCount } = extractData(
     useFlowPairsQuery(
       queryParamsPaginated[AvailableProtocols.Tcp].active,
       processPairId,
-      AvailableProtocols.Tcp === protocol
+      AvailableProtocols.Tcp === protocol || protocol === 'undefined'
     )
   );
 
   const { results: oldConnections, count: oldConnectionsCount } = extractData(
     useFlowPairsQuery(
       queryParamsPaginated[AvailableProtocols.Tcp].old,
       processPairId,
-      AvailableProtocols.Tcp === protocol
+      AvailableProtocols.Tcp === protocol || protocol === 'undefined'
     )
   );
 
@@ -131,7 +133,11 @@ const ProcessPairsFlows: FC<ProcessPairsFlowsProps> = function ({ processPairId,
       ? TAB_1_KEY
       : oldConnectionsCount
         ? TAB_2_KEY
-        : '';
+        : http2RequestsCount
+          ? TAB_3_KEY
+          : httpRequestsCount
+            ? TAB_4_KEY
+            : '';
 
   return (
     <>
@@ -147,70 +153,87 @@ const ProcessPairsFlows: FC<ProcessPairsFlowsProps> = function ({ processPairId,
         </Card>
       )}
 
-      {((protocol === AvailableProtocols.Tcp && !!activeConnectionsCount) || !!oldConnectionsCount) && (
+      {(!!activeConnectionsCount || !!oldConnectionsCount || !!http2RequestsCount || !!httpRequestsCount) && (
         <Tabs activeKey={activeTab} onSelect={handleTabClick} component="nav" isBox>
-          <Tab
-            eventKey={TAB_1_KEY}
-            title={<TabTitleText>{`${ProcessesLabels.ActiveConnections} (${activeConnectionsCount})`}</TabTitleText>}
-          >
-            <FlowPairs
-              data-testid={'tcp-active-connections-table'}
-              columns={activeTcpColumns}
-              rows={activeConnections}
-              paginationTotalRows={activeConnectionsCount}
-              pagination={true}
-              paginationPageSize={DEFAULT_PAGINATION_SIZE}
-              onGetFilters={(filters: RemoteFilterOptions) => handleGetFilters(filters, 'active')}
-            />
-          </Tab>
-          <Tab
-            disabled={oldConnectionsCount === 0}
-            eventKey={TAB_2_KEY}
-            title={<TabTitleText>{`${ProcessesLabels.OldConnections} (${oldConnectionsCount})`}</TabTitleText>}
-          >
-            <FlowPairs
-              data-testid={'tcp-old-connections-table'}
-              columns={oldTcpColumns}
-              rows={oldConnections}
-              paginationTotalRows={oldConnectionsCount}
-              pagination={true}
-              paginationPageSize={DEFAULT_PAGINATION_SIZE}
-              onGetFilters={(filters: RemoteFilterOptions) => handleGetFilters(filters, 'old')}
-            />
-          </Tab>
+          {!!activeConnectionsCount && (
+            <Tab
+              eventKey={TAB_1_KEY}
+              title={<TabTitleText>{`${ProcessesLabels.ActiveConnections} (${activeConnectionsCount})`}</TabTitleText>}
+            >
+              <FlowPairs
+                data-testid={'tcp-active-connections-table'}
+                columns={activeTcpColumns}
+                rows={activeConnections}
+                paginationTotalRows={activeConnectionsCount}
+                pagination={true}
+                paginationPageSize={DEFAULT_PAGINATION_SIZE}
+                onGetFilters={(filters: RemoteFilterOptions) => handleGetFilters(filters, 'active')}
+              />
+            </Tab>
+          )}
+
+          {!!oldConnectionsCount && (
+            <Tab
+              disabled={oldConnectionsCount === 0}
+              eventKey={TAB_2_KEY}
+              title={<TabTitleText>{`${ProcessesLabels.OldConnections} (${oldConnectionsCount})`}</TabTitleText>}
+            >
+              <FlowPairs
+                data-testid={'tcp-old-connections-table'}
+                columns={oldTcpColumns}
+                rows={oldConnections}
+                paginationTotalRows={oldConnectionsCount}
+                pagination={true}
+                paginationPageSize={DEFAULT_PAGINATION_SIZE}
+                onGetFilters={(filters: RemoteFilterOptions) => handleGetFilters(filters, 'old')}
+              />
+            </Tab>
+          )}
+          {!!http2RequestsCount && (
+            <Tab
+              disabled={http2RequestsCount === 0}
+              eventKey={TAB_3_KEY}
+              title={<TabTitleText>{`${ProcessesLabels.Http2Requests} (${http2RequestsCount})`}</TabTitleText>}
+            >
+              <FlowPairs
+                data-testid={'http2-table'}
+                columns={httpColumns}
+                rows={http2Requests}
+                paginationTotalRows={http2RequestsCount}
+                pagination={true}
+                paginationPageSize={DEFAULT_PAGINATION_SIZE}
+                onGetFilters={handleGetFilters}
+              />
+            </Tab>
+          )}
+
+          {!!httpRequestsCount && (
+            <Tab
+              disabled={httpRequestsCount === 0}
+              eventKey={TAB_4_KEY}
+              title={<TabTitleText>{`${ProcessesLabels.HttpRequests} (${httpRequestsCount})`}</TabTitleText>}
+            >
+              <FlowPairs
+                data-testid={'http-table'}
+                title={ProcessesLabels.HttpRequests}
+                columns={httpColumns}
+                rows={httpRequests}
+                paginationTotalRows={httpRequestsCount}
+                pagination={true}
+                paginationPageSize={DEFAULT_PAGINATION_SIZE}
+                onGetFilters={handleGetFilters}
+              />
+            </Tab>
+          )}
         </Tabs>
       )}
-      {protocol === AvailableProtocols.Http2 && !!http2RequestsCount && (
-        <FlowPairs
-          data-testid={'http2-table'}
-          title={ProcessesLabels.Http2Requests}
-          columns={httpColumns}
-          rows={http2Requests}
-          paginationTotalRows={http2RequestsCount}
-          pagination={true}
-          paginationPageSize={DEFAULT_PAGINATION_SIZE}
-          onGetFilters={handleGetFilters}
-        />
-      )}
-      {protocol === AvailableProtocols.Http && !!httpRequestsCount && (
-        <FlowPairs
-          data-testid={'http-table'}
-          title={ProcessesLabels.HttpRequests}
-          columns={httpColumns}
-          rows={httpRequests}
-          paginationTotalRows={httpRequestsCount}
-          pagination={true}
-          paginationPageSize={DEFAULT_PAGINATION_SIZE}
-          onGetFilters={handleGetFilters}
-        />
-      )}
     </>
   );
 };
 
 export default ProcessPairsFlows;
 
-const useFlowPairsQuery = (queryParams: RemoteFilterOptions, processPairId: string, enabled: boolean) => {
+const useFlowPairsQuery = (queryParams: RemoteFilterOptions, processPairId: string, enabled = true) => {
   const { data } = useSuspenseQuery({
     queryKey: [QueriesProcesses.GetFlowPairs, queryParams, processPairId],
     queryFn: () =>