From ceedb0ca50c7c8cfbd1feec0abf533bea12ce87b Mon Sep 17 00:00:00 2001
From: bartoval <vabarjs@gmail.com>
Date: Mon, 26 Aug 2024 23:15:13 +0200
Subject: [PATCH 1/2] fix(Metrics): :lady_beetle: Adjust latency definition

---
 __tests__/pages/Metrics/Latency.spec.tsx      |   3 +-
 .../__snapshots__/Metrics.spec.tsx.snap       | 131 ++++++++++++++++--
 package.json                                  |   8 +-
 .../SkFlowPairsTable/FlowPair.constants.ts    |  22 +--
 .../SkFlowPairsTable/FlowPair.enum.ts         |  13 +-
 src/core/components/SkTable/index.tsx         |  32 +++--
 .../Topology/hooks/useTopologyProcessData.ts  |   2 +-
 .../Topology/hooks/useTopologySiteData.ts     |   6 +-
 src/pages/Topology/services/index.ts          |  19 ++-
 src/pages/shared/Metrics/Metrics.enum.ts      |   6 +-
 .../shared/Metrics/components/Filters.tsx     |   2 +-
 .../shared/Metrics/components/Latency.tsx     |  23 ++-
 src/pages/shared/Metrics/index.tsx            |  18 ++-
 src/pages/shared/Metrics/services/index.ts    |   4 +
 src/types/Metrics.interfaces.ts               |   3 +-
 yarn.lock                                     | 122 ++++++++--------
 16 files changed, 290 insertions(+), 124 deletions(-)

diff --git a/__tests__/pages/Metrics/Latency.spec.tsx b/__tests__/pages/Metrics/Latency.spec.tsx
index 09a5e53a..703dd80c 100644
--- a/__tests__/pages/Metrics/Latency.spec.tsx
+++ b/__tests__/pages/Metrics/Latency.spec.tsx
@@ -35,6 +35,7 @@ describe('Latency component', () => {
       <Wrapper>
         <Suspense fallback={<LoadingPage />}>
           <Latency
+            title={MetricsLabels.LatencyTitleOut}
             selectedFilters={{
               sourceProcess: processResult.name
             }}
@@ -50,7 +51,7 @@ describe('Latency component', () => {
       timeout: waitForElementToBeRemovedTimeout
     });
 
-    expect(screen.getByText(MetricsLabels.LatencyTitle)).toBeInTheDocument();
+    expect(screen.getByText(MetricsLabels.LatencyTitleOut)).toBeInTheDocument();
 
     fireEvent.click(document.querySelector('.pf-v5-c-card__header-toggle')?.querySelector('button')!);
     expect(handleGetisSectionExpanded).toHaveBeenCalledTimes(1);
diff --git a/__tests__/pages/Metrics/__snapshots__/Metrics.spec.tsx.snap b/__tests__/pages/Metrics/__snapshots__/Metrics.spec.tsx.snap
index 5c0727b4..cb7efc2e 100644
--- a/__tests__/pages/Metrics/__snapshots__/Metrics.spec.tsx.snap
+++ b/__tests__/pages/Metrics/__snapshots__/Metrics.spec.tsx.snap
@@ -548,7 +548,7 @@ exports[`Metrics Component renders correctly 1`] = `
               <div
                 class="pf-v5-c-card__title-text"
               >
-                Latencies 
+                Latencies Out 
                 <div
                   style="display: contents;"
                 >
@@ -560,19 +560,27 @@ exports[`Metrics Component renders correctly 1`] = `
                     data-ouia-safe="true"
                     type="button"
                   >
-                    <svg
-                      aria-hidden="true"
-                      class="pf-v5-svg"
-                      fill="currentColor"
-                      height="1em"
-                      role="img"
-                      viewBox="0 0 512 512"
-                      width="1em"
+                    <span
+                      class="pf-v5-c-icon"
                     >
-                      <path
-                        d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zM262.655 90c-54.497 0-89.255 22.957-116.549 63.758-3.536 5.286-2.353 12.415 2.715 16.258l34.699 26.31c5.205 3.947 12.621 3.008 16.665-2.122 17.864-22.658 30.113-35.797 57.303-35.797 20.429 0 45.698 13.148 45.698 32.958 0 14.976-12.363 22.667-32.534 33.976C247.128 238.528 216 254.941 216 296v4c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12v-1.333c0-28.462 83.186-29.647 83.186-106.667 0-58.002-60.165-102-116.531-102zM256 338c-25.365 0-46 20.635-46 46 0 25.364 20.635 46 46 46s46-20.636 46-46c0-25.365-20.635-46-46-46z"
-                      />
-                    </svg>
+                      <span
+                        class="pf-v5-c-icon__content pf-m-info"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="pf-v5-svg"
+                          fill="currentColor"
+                          height="1em"
+                          role="img"
+                          viewBox="0 0 512 512"
+                          width="1em"
+                        >
+                          <path
+                            d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zM262.655 90c-54.497 0-89.255 22.957-116.549 63.758-3.536 5.286-2.353 12.415 2.715 16.258l34.699 26.31c5.205 3.947 12.621 3.008 16.665-2.122 17.864-22.658 30.113-35.797 57.303-35.797 20.429 0 45.698 13.148 45.698 32.958 0 14.976-12.363 22.667-32.534 33.976C247.128 238.528 216 254.941 216 296v4c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12v-1.333c0-28.462 83.186-29.647 83.186-106.667 0-58.002-60.165-102-116.531-102zM256 338c-25.365 0-46 20.635-46 46 0 25.364 20.635 46 46 46s46-20.636 46-46c0-25.365-20.635-46-46-46z"
+                          />
+                        </svg>
+                      </span>
+                    </span>
                   </button>
                 </div>
               </div>
@@ -633,7 +641,41 @@ exports[`Metrics Component renders correctly 1`] = `
               <div
                 class="pf-v5-c-card__title-text"
               >
-                Http requests
+                Latencies In 
+                <div
+                  style="display: contents;"
+                >
+                  <button
+                    aria-disabled="false"
+                    class="pf-v5-c-button pf-m-plain"
+                    data-ouia-component-id="OUIA-Generated-Button-plain-6"
+                    data-ouia-component-type="PF5/Button"
+                    data-ouia-safe="true"
+                    type="button"
+                  >
+                    <span
+                      class="pf-v5-c-icon"
+                    >
+                      <span
+                        class="pf-v5-c-icon__content pf-m-info"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="pf-v5-svg"
+                          fill="currentColor"
+                          height="1em"
+                          role="img"
+                          viewBox="0 0 512 512"
+                          width="1em"
+                        >
+                          <path
+                            d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zM262.655 90c-54.497 0-89.255 22.957-116.549 63.758-3.536 5.286-2.353 12.415 2.715 16.258l34.699 26.31c5.205 3.947 12.621 3.008 16.665-2.122 17.864-22.658 30.113-35.797 57.303-35.797 20.429 0 45.698 13.148 45.698 32.958 0 14.976-12.363 22.667-32.534 33.976C247.128 238.528 216 254.941 216 296v4c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12v-1.333c0-28.462 83.186-29.647 83.186-106.667 0-58.002-60.165-102-116.531-102zM256 338c-25.365 0-46 20.635-46 46 0 25.364 20.635 46 46 46s46-20.636 46-46c0-25.365-20.635-46-46-46z"
+                          />
+                        </svg>
+                      </span>
+                    </span>
+                  </button>
+                </div>
               </div>
             </div>
           </div>
@@ -659,7 +701,66 @@ exports[`Metrics Component renders correctly 1`] = `
             <button
               aria-disabled="false"
               class="pf-v5-c-button pf-m-plain"
-              data-ouia-component-id="OUIA-Generated-Button-plain-6"
+              data-ouia-component-id="OUIA-Generated-Button-plain-7"
+              data-ouia-component-type="PF5/Button"
+              data-ouia-safe="true"
+              type="button"
+            >
+              <span
+                class="pf-v5-c-card__header-toggle-icon"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="pf-v5-svg"
+                  fill="currentColor"
+                  height="1em"
+                  role="img"
+                  viewBox="0 0 256 512"
+                  width="1em"
+                >
+                  <path
+                    d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+                  />
+                </svg>
+              </span>
+            </button>
+          </div>
+          <div
+            class="pf-v5-c-card__header-main"
+          >
+            <div
+              class="pf-v5-c-card__title"
+            >
+              <div
+                class="pf-v5-c-card__title-text"
+              >
+                Http requests
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="pf-v5-l-stack__item"
+    >
+      <div
+        class="pf-v5-c-card"
+        data-ouia-component-id="OUIA-Generated-Card-6"
+        data-ouia-component-type="PF5/Card"
+        data-ouia-safe="true"
+        id=""
+      >
+        <div
+          class="pf-v5-c-card__header"
+        >
+          <div
+            class="pf-v5-c-card__header-toggle"
+          >
+            <button
+              aria-disabled="false"
+              class="pf-v5-c-button pf-m-plain"
+              data-ouia-component-id="OUIA-Generated-Button-plain-8"
               data-ouia-component-type="PF5/Button"
               data-ouia-safe="true"
               type="button"
diff --git a/package.json b/package.json
index 36478f82..b16829d9 100644
--- a/package.json
+++ b/package.json
@@ -36,14 +36,14 @@
     "commit": "git-cz"
   },
   "dependencies": {
-    "@antv/g6": "^5.0.17",
+    "@antv/g6": "^5.0.15",
     "@nivo/sankey": "^0.87.0",
     "@patternfly/patternfly": "^5.3.1",
     "@patternfly/react-charts": "^7.3.0",
     "@patternfly/react-core": "^5.3.4",
     "@patternfly/react-icons": "^5.3.2",
     "@patternfly/react-table": "5.3.4",
-    "@tanstack/react-query": "^5.52.1",
+    "@tanstack/react-query": "^5.52.2",
     "axios": "^1.7.5",
     "date-fns": "^3.6.0",
     "framer-motion": "^11.3.30",
@@ -62,8 +62,8 @@
     "@types/jest": "^29.5.12",
     "@types/react": "^18.3.4",
     "@types/react-dom": "^18.3.0",
-    "@typescript-eslint/eslint-plugin": "^8.2.0",
-    "@typescript-eslint/parser": "^8.2.0",
+    "@typescript-eslint/eslint-plugin": "^8.3.0",
+    "@typescript-eslint/parser": "^8.3.0",
     "commitizen": "^4.3.0",
     "copy-webpack-plugin": "^12.0.2",
     "css-loader": "^7.1.2",
diff --git a/src/core/components/SkFlowPairsTable/FlowPair.constants.ts b/src/core/components/SkFlowPairsTable/FlowPair.constants.ts
index ad1dfbe0..9062327d 100644
--- a/src/core/components/SkFlowPairsTable/FlowPair.constants.ts
+++ b/src/core/components/SkFlowPairsTable/FlowPair.constants.ts
@@ -37,8 +37,6 @@ export const flowPairsComponentsTable = {
       link: `${ProcessesRoutesPaths.Processes}/${props.data.counterFlow.processName}@${props.data.counterFlow.process}`
     }),
   TimestampCell: SkEndTimeCell,
-  TcpTTFB: (props: SkLinkCellProps<FlowPairsResponse>) =>
-    formatLatency(props.data.counterFlow.latency + props.data.forwardFlow.latency),
   DurationCell: SkDurationCell,
   ByteFormatCell: (props: SkHighlightValueCellProps<FlowPairsResponse>) =>
     SkHighlightValueCell({ ...props, format: formatBytes }),
@@ -77,6 +75,13 @@ export const tcpFlowPairsColumns: SKTableColumn<FlowPairsResponse>[] = [
     customCellName: 'ByteFormatCell',
     modifier: 'nowrap'
   },
+  {
+    name: FlowPairLabels.TxLatency,
+    columnDescription: 'The TCP latency primarily concerns the start of data transmission',
+    prop: 'forwardFlow.latency' as keyof FlowPairsResponse,
+    format: formatLatency,
+    modifier: 'nowrap'
+  },
   {
     name: FlowPairLabels.Server,
     prop: 'counterFlow.processName' as keyof FlowPairsResponse,
@@ -96,15 +101,16 @@ export const tcpFlowPairsColumns: SKTableColumn<FlowPairsResponse>[] = [
     modifier: 'nowrap'
   },
   {
-    name: FlowPairLabels.Duration,
-    prop: 'duration' as keyof FlowPairsResponse,
-    customCellName: 'DurationCell',
+    name: FlowPairLabels.RxLatency,
+    columnDescription: 'The TCP latency primarily concerns the start of data transmission',
+    prop: 'counterFlow.latency' as keyof FlowPairsResponse,
+    format: formatLatency,
     modifier: 'nowrap'
   },
   {
-    name: FlowPairLabels.TTFB,
-    columnDescription: 'time elapsed between client and server',
-    customCellName: 'TcpTTFB',
+    name: FlowPairLabels.Duration,
+    prop: 'duration' as keyof FlowPairsResponse,
+    customCellName: 'DurationCell',
     modifier: 'nowrap'
   },
   {
diff --git a/src/core/components/SkFlowPairsTable/FlowPair.enum.ts b/src/core/components/SkFlowPairsTable/FlowPair.enum.ts
index 860289f3..b0712011 100644
--- a/src/core/components/SkFlowPairsTable/FlowPair.enum.ts
+++ b/src/core/components/SkFlowPairsTable/FlowPair.enum.ts
@@ -22,15 +22,14 @@ export enum FlowPairLabels {
   To = 'To server',
   TxBytes = 'Data Out',
   RxBytes = 'Data In',
-  TxByteRate = 'Rate In',
-  RxByteRate = 'Rate Out',
-  TxLatency = 'Latency In',
-  RxLatency = 'Latency Out',
-  TxUnacked = 'Unkacked In',
-  RxUnacked = 'Unacked Out',
+  TxByteRate = 'Rate Out',
+  RxByteRate = 'Rate In',
+  TxLatency = 'Latency Out',
+  RxLatency = 'Latency In',
+  TxUnacked = 'Unkacked Out',
+  RxUnacked = 'Unacked In',
   TxWindow = 'Window size Out',
   RxWindow = 'Window size In',
-  TTFB = 'TTFB',
   Completed = 'Completed',
   ClientPort = 'Client port',
   ServerPort = 'Server port',
diff --git a/src/core/components/SkTable/index.tsx b/src/core/components/SkTable/index.tsx
index 9e657f17..f6720fda 100644
--- a/src/core/components/SkTable/index.tsx
+++ b/src/core/components/SkTable/index.tsx
@@ -1,4 +1,4 @@
-import { KeyboardEvent, MouseEvent as ReactMouseEvent, useCallback, useState, useMemo } from 'react';
+import { KeyboardEvent, MouseEvent as ReactMouseEvent, useCallback, useState, useMemo, FC } from 'react';
 
 import { Card, CardBody, CardHeader, Flex, Text, TextContent, Title } from '@patternfly/react-core';
 import { SearchIcon } from '@patternfly/react-icons';
@@ -41,6 +41,15 @@ export interface SKTableProps<T> {
   onGetFilters?: Function;
 }
 
+export interface CustomCellProps<T> {
+  value: string | T[keyof T] | undefined;
+  data: T;
+  callback?: Function;
+  isDisabled?: boolean;
+  format?: Function;
+  fitContent?: boolean;
+}
+
 const SkTable = function <T>({
   title,
   columns,
@@ -218,7 +227,8 @@ const SkTable = function <T>({
                   <Tr key={row.id}>
                     {row.columns.map(
                       ({ data, value, customCellName, callback, format, width, modifier, isStickyColumn }, index) => {
-                        const Component = !!customCells && !!customCellName && customCells[customCellName];
+                        const Component =
+                          !!customCells && !!customCellName && (customCells[customCellName] as FC<CustomCellProps<T>>);
 
                         return (
                           <Td
@@ -228,14 +238,16 @@ const SkTable = function <T>({
                             isStickyColumn={isStickyColumn}
                             style={{ verticalAlign: 'middle' }}
                           >
-                            {Component &&
-                              Component({
-                                data,
-                                value,
-                                callback,
-                                format: format && format(value),
-                                fitContent: modifier === 'nowrap'
-                              })}
+                            {Component && (
+                              <Component
+                                value={value}
+                                data={data}
+                                callback={callback}
+                                format={format && format(value)}
+                                fitContent={modifier === 'nowrap'}
+                              />
+                            )}
+
                             {!Component && (
                               <TableText wrapModifier={modifier === 'nowrap' ? 'fitContent' : 'truncate'}>
                                 {(format && format(value)) || value}
diff --git a/src/pages/Topology/hooks/useTopologyProcessData.ts b/src/pages/Topology/hooks/useTopologyProcessData.ts
index 7e5d4fdb..bb59942e 100644
--- a/src/pages/Topology/hooks/useTopologyProcessData.ts
+++ b/src/pages/Topology/hooks/useTopologyProcessData.ts
@@ -16,7 +16,7 @@ const processesQueryParams = {
 const metricQueryParams = {
   fetchBytes: { groupBy: 'destProcess, sourceProcess, direction' },
   fetchByteRate: { groupBy: 'destProcess, sourceProcess, direction' },
-  fetchLatency: { groupBy: 'sourceProcess, destProcess' }
+  fetchLatency: { groupBy: 'sourceProcess, destProcess, direction' }
 };
 
 const useTopologyProcessData = () => {
diff --git a/src/pages/Topology/hooks/useTopologySiteData.ts b/src/pages/Topology/hooks/useTopologySiteData.ts
index 8ea9b84b..bdf3963e 100644
--- a/src/pages/Topology/hooks/useTopologySiteData.ts
+++ b/src/pages/Topology/hooks/useTopologySiteData.ts
@@ -18,9 +18,9 @@ interface UseTopologySiteDataProps {
 }
 
 const metricQueryParams = {
-  fetchBytes: { groupBy: 'destSite, sourceSite,direction' },
-  fetchByteRate: { groupBy: 'destSite, sourceSite,direction' },
-  fetchLatency: { groupBy: 'sourceSite, destSite' }
+  fetchBytes: { groupBy: 'destSite, sourceSite, direction' },
+  fetchByteRate: { groupBy: 'destSite, sourceSite, direction' },
+  fetchLatency: { groupBy: 'sourceSite, destSite, direction' }
 };
 
 const useTopologySiteData = ({ showDataLink, showBytes, showByteRate, showLatency }: UseTopologySiteDataProps) => {
diff --git a/src/pages/Topology/services/index.ts b/src/pages/Topology/services/index.ts
index 8ab7a413..cc24c89c 100644
--- a/src/pages/Topology/services/index.ts
+++ b/src/pages/Topology/services/index.ts
@@ -1,4 +1,5 @@
 import { PrometheusApi } from '@API/Prometheus.api';
+import { Direction } from '@API/REST.enum';
 import { IDS_GROUP_SEPARATOR, IDS_MULTIPLE_SELECTION_SEPARATOR, PAIR_SEPARATOR } from '@config/config';
 import { formatByteRate, formatBytes } from '@core/utils/formatBytes';
 import { formatLatency } from '@core/utils/formatLatency';
@@ -26,7 +27,9 @@ export const TopologyController = {
       const [bytesByProcessPairs, byteRateByProcessPairs, latencyByProcessPairs] = await Promise.all([
         showBytes ? PrometheusApi.fetchAllProcessPairsBytes(params.fetchBytes.groupBy, params.filterBy) : [],
         showByteRate ? PrometheusApi.fetchAllProcessPairsByteRates(params.fetchByteRate.groupBy, params.filterBy) : [],
-        showLatency ? PrometheusApi.fetchAllProcessPairsLatencies(params.fetchLatency.groupBy, params.filterBy) : []
+        showLatency
+          ? PrometheusApi.fetchAllProcessPairsLatencies(params.fetchLatency.groupBy, { ...params.filterBy })
+          : []
       ]);
 
       return { bytesByProcessPairs, byteRateByProcessPairs, latencyByProcessPairs };
@@ -124,7 +127,15 @@ export const TopologyController = {
 
     const bytesByPairsMap = getPairsMap(bytesByPairs);
     const byteRateByPairsMap = getPairsMap(byteRateByPairs);
-    const latencyByPairsMap = getPairsMap(latencyByPairs);
+    // Incoming metrics indicate that the source is the client and the destination is the server. In our case, the edges have a direction from client to server
+    const latencyByPairsMapIn = getPairsMap(
+      latencyByPairs?.filter((pair) => pair.metric.direction === Direction.Incoming)
+    );
+
+    // Outgoing metrics indicate that the source is the server and the destination is the client. It is used to determine the reverse metric
+    const latencyByPairsMapOut = getPairsMap(
+      latencyByPairs?.filter((pair) => pair.metric.direction === Direction.Outgoing)
+    );
 
     return edges.map((edge) => {
       const pairKey = `${edge.sourceName}${edge.targetName}`;
@@ -136,10 +147,10 @@ export const TopologyController = {
           protocol: protocolPairsMap ? protocolPairsMap[`${edge.source}${edge.target}`] : '',
           bytes: bytesByPairsMap[pairKey],
           byteRate: byteRateByPairsMap[pairKey],
-          latency: latencyByPairsMap[pairKey],
+          latency: latencyByPairsMapIn[pairKey],
           bytesReverse: bytesByPairsMap[reversePairKey],
           byteRateReverse: byteRateByPairsMap[reversePairKey],
-          latencyReverse: latencyByPairsMap[reversePairKey]
+          latencyReverse: latencyByPairsMapOut[reversePairKey]
         }
       };
     });
diff --git a/src/pages/shared/Metrics/Metrics.enum.ts b/src/pages/shared/Metrics/Metrics.enum.ts
index 22a76db2..4e895f06 100644
--- a/src/pages/shared/Metrics/Metrics.enum.ts
+++ b/src/pages/shared/Metrics/Metrics.enum.ts
@@ -27,8 +27,10 @@ export enum MetricsLabels {
   ByteRateMaxCol = 'max',
   DataTransferTitle = 'Traffic',
   ByteRateTitle = 'Byte rate',
-  LatencyTitle = 'Latencies',
-  LatencyDescription = 'TCP: TTFB for terminated connections.  HTTP: Response time',
+  LatencyTitleOut = 'Incoming Latency',
+  LatencyTitleIn = 'Outgoing Latency',
+  LatencyDescriptionIn = 'It is the time that elapses between the server sending data and the client receiving that data',
+  LatencyDescriptionOut = 'It is the time that elapses between the client sending data and the server receiving that data',
   ConnectionTitle = 'Tcp connections',
   TerminatedConnections = 'Closed connections',
   LiveConnections = 'Open connections',
diff --git a/src/pages/shared/Metrics/components/Filters.tsx b/src/pages/shared/Metrics/components/Filters.tsx
index 1ebe776f..0790cd5d 100644
--- a/src/pages/shared/Metrics/components/Filters.tsx
+++ b/src/pages/shared/Metrics/components/Filters.tsx
@@ -75,7 +75,7 @@ const MetricFilters: FC<MetricFiltersProps> = memo(
     const [selectedFilterIsOpen, setSelectedFilterIsOpen] = useState<Record<string, boolean>>(filterToggleDefault);
 
     // Handler for toggling the open and closed states of a Select element.
-    function handleToggleMenu(ev: ReactMouseEvent, openFilter: Record<string, boolean>) {
+    function handleToggleMenu(_: ReactMouseEvent, openFilter: Record<string, boolean>) {
       setSelectedFilterIsOpen({ ...selectedFilterIsOpen, ...openFilter });
     }
 
diff --git a/src/pages/shared/Metrics/components/Latency.tsx b/src/pages/shared/Metrics/components/Latency.tsx
index 85384e77..fd8ed17d 100644
--- a/src/pages/shared/Metrics/components/Latency.tsx
+++ b/src/pages/shared/Metrics/components/Latency.tsx
@@ -1,6 +1,15 @@
 import { FC, useCallback, useEffect, useState } from 'react';
 
-import { Button, Card, CardBody, CardExpandableContent, CardHeader, CardTitle, Tooltip } from '@patternfly/react-core';
+import {
+  Button,
+  Card,
+  CardBody,
+  CardExpandableContent,
+  CardHeader,
+  CardTitle,
+  Icon,
+  Tooltip
+} from '@patternfly/react-core';
 import { QuestionCircleIcon, SearchIcon } from '@patternfly/react-icons';
 import { keepPreviousData, useQuery } from '@tanstack/react-query';
 
@@ -13,6 +22,8 @@ import { MetricsLabels } from '../Metrics.enum';
 import MetricsController from '../services';
 
 interface LatencyProps {
+  title?: string;
+  description?: string;
   selectedFilters: QueryMetricsParams;
   openSections?: boolean;
   forceUpdate?: number;
@@ -23,6 +34,8 @@ interface LatencyProps {
 const minChartHeight = 680;
 
 const Latency: FC<LatencyProps> = function ({
+  title = '',
+  description = '',
   selectedFilters,
   forceUpdate,
   openSections = false,
@@ -76,10 +89,12 @@ const Latency: FC<LatencyProps> = function ({
     <Card isExpanded={isExpanded}>
       <CardHeader onExpand={handleExpand}>
         <CardTitle>
-          {MetricsLabels.LatencyTitle}{' '}
-          <Tooltip content={MetricsLabels.LatencyDescription}>
+          {title}{' '}
+          <Tooltip content={description}>
             <Button variant="plain">
-              <QuestionCircleIcon />
+              <Icon status="info">
+                <QuestionCircleIcon />
+              </Icon>
             </Button>
           </Tooltip>
         </CardTitle>
diff --git a/src/pages/shared/Metrics/index.tsx b/src/pages/shared/Metrics/index.tsx
index 1f54eac6..8204a6fd 100644
--- a/src/pages/shared/Metrics/index.tsx
+++ b/src/pages/shared/Metrics/index.tsx
@@ -2,7 +2,7 @@ import { FC, useCallback, useRef, useState, startTransition } from 'react';
 
 import { Stack, StackItem } from '@patternfly/react-core';
 
-import { AvailableProtocols } from '@API/REST.enum';
+import { AvailableProtocols, Direction } from '@API/REST.enum';
 import { ConfigMetricFilters, ExpandedMetricSections, QueryMetricsParams } from '@sk-types/Metrics.interfaces';
 
 import MetricFilters from './components/Filters';
@@ -11,6 +11,7 @@ import Request from './components/Request';
 import Response from './components/Response';
 import TcpConnection from './components/TcpConnection';
 import Traffic from './components/Traffic';
+import { MetricsLabels } from './Metrics.enum';
 
 interface UseMetricsProps {
   defaultMetricFilterValues: QueryMetricsParams;
@@ -141,7 +142,20 @@ const Metrics: FC<MetricsProps> = function (props) {
       )}
       <StackItem>
         <Latency
-          selectedFilters={queryParams}
+          title={MetricsLabels.LatencyTitleOut}
+          description={MetricsLabels.LatencyDescriptionOut}
+          selectedFilters={{ ...queryParams, direction: Direction.Incoming }}
+          openSections={defaultOpenSections?.latency}
+          forceUpdate={shouldUpdateData}
+          onGetIsSectionExpanded={handleSectionToggle}
+        />
+      </StackItem>
+
+      <StackItem>
+        <Latency
+          title={MetricsLabels.LatencyTitleIn}
+          description={MetricsLabels.LatencyDescriptionIn}
+          selectedFilters={{ ...queryParams, direction: Direction.Outgoing }}
           openSections={defaultOpenSections?.latency}
           forceUpdate={shouldUpdateData}
           onGetIsSectionExpanded={handleSectionToggle}
diff --git a/src/pages/shared/Metrics/services/index.ts b/src/pages/shared/Metrics/services/index.ts
index 05d230ab..ba11c884 100644
--- a/src/pages/shared/Metrics/services/index.ts
+++ b/src/pages/shared/Metrics/services/index.ts
@@ -31,6 +31,7 @@ const MetricsController = {
     destProcess,
     service,
     protocol,
+    direction,
     duration = defaultTimeInterval.seconds,
     start = getCurrentAndPastTimestamps(duration).start,
     end = getCurrentAndPastTimestamps(duration).end
@@ -42,6 +43,7 @@ const MetricsController = {
       destProcess,
       service,
       protocol,
+      direction,
       start,
       end,
       step: calculateStep(end - start)
@@ -75,6 +77,7 @@ const MetricsController = {
     destProcess,
     service,
     protocol,
+    direction,
     duration = defaultTimeInterval.seconds,
     start = getCurrentAndPastTimestamps(duration).start,
     end = getCurrentAndPastTimestamps(duration).end
@@ -86,6 +89,7 @@ const MetricsController = {
       destProcess,
       service,
       protocol,
+      direction,
       start,
       end,
       step: calculateStep(end - start)
diff --git a/src/types/Metrics.interfaces.ts b/src/types/Metrics.interfaces.ts
index 81528862..2f999dfe 100644
--- a/src/types/Metrics.interfaces.ts
+++ b/src/types/Metrics.interfaces.ts
@@ -1,4 +1,4 @@
-import { AvailableProtocols } from '@API/REST.enum';
+import { AvailableProtocols, Direction } from '@API/REST.enum';
 
 import { PrometheusMetric } from './Prometheus.interfaces';
 import { skAxisXY } from './SkChartArea.interfaces';
@@ -30,6 +30,7 @@ export interface QueryMetricsParams {
   start?: number;
   end?: number;
   duration?: number;
+  direction?: Direction;
 }
 
 export interface ExpandedMetricSections {
diff --git a/yarn.lock b/yarn.lock
index fb951f04..84ad7b5a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -210,7 +210,7 @@
     "@antv/util" "^3.3.5"
     tslib "^2.5.3"
 
-"@antv/g6@^5.0.17":
+"@antv/g6@^5.0.15":
   version "5.0.17"
   resolved "https://registry.yarnpkg.com/@antv/g6/-/g6-5.0.17.tgz#2d41a1deca2ce5ab80d33eb0ddf3108ede7bb3d9"
   integrity sha512-i9dWgvzDTKs5ry+LTtxFoUrUGyeM80OTFA8W9RGDB/9Nu2tboNqrq4OEmkwAulOELnKugz238dESgxLBG7gkdg==
@@ -1535,17 +1535,17 @@
   dependencies:
     "@sinonjs/commons" "^2.0.0"
 
-"@tanstack/query-core@5.52.0":
-  version "5.52.0"
-  resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-5.52.0.tgz#44070b2d6eb58c3a5ce2788471d842e932294a87"
-  integrity sha512-U1DOEgltjUwalN6uWYTewSnA14b+tE7lSylOiASKCAO61ENJeCq9VVD/TXHA6O5u9+6v5+UgGYBSccTKDoyMqw==
+"@tanstack/query-core@5.52.2":
+  version "5.52.2"
+  resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-5.52.2.tgz#a023864a892fda9858b724d667eb19cd84ce054a"
+  integrity sha512-9vvbFecK4A0nDnrc/ks41e3UHONF1DAnGz8Tgbxkl59QcvKWmc0ewhYuIKRh8NC4ja5LTHT9EH16KHbn2AIYWA==
 
-"@tanstack/react-query@^5.52.1":
-  version "5.52.1"
-  resolved "https://registry.yarnpkg.com/@tanstack/react-query/-/react-query-5.52.1.tgz#d454e2bb86ab21621de016c7044514d6412db7ee"
-  integrity sha512-soyn4dNIUZ8US8NaPVXv06gkZFHaZnPfKWPDjRJjFRW3Y7WZ0jx72eT6zhw3VQlkMPysmXye8l35ewPHspKgbQ==
+"@tanstack/react-query@^5.52.2":
+  version "5.52.2"
+  resolved "https://registry.yarnpkg.com/@tanstack/react-query/-/react-query-5.52.2.tgz#3fffbc86351edcaeec335bc8958bcab4204bd169"
+  integrity sha512-d4OwmobpP+6+SvuAxW1RzAY95Pv87Gu+0GjtErzFOUXo+n0FGcwxKvzhswCsXKxsgnAr3bU2eJ2u+GXQAutkCQ==
   dependencies:
-    "@tanstack/query-core" "5.52.0"
+    "@tanstack/query-core" "5.52.2"
 
 "@testing-library/dom@^10.4.0":
   version "10.4.0"
@@ -2046,30 +2046,30 @@
   dependencies:
     "@types/node" "*"
 
-"@typescript-eslint/eslint-plugin@^8.2.0":
-  version "8.2.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.2.0.tgz#bf50e9c8dac6bdf15dd1b52ca29448550903558e"
-  integrity sha512-02tJIs655em7fvt9gps/+4k4OsKULYGtLBPJfOsmOq1+3cdClYiF0+d6mHu6qDnTcg88wJBkcPLpQhq7FyDz0A==
+"@typescript-eslint/eslint-plugin@^8.3.0":
+  version "8.3.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.3.0.tgz#726627fad16d41d20539637efee8c2329fe6be32"
+  integrity sha512-FLAIn63G5KH+adZosDYiutqkOkYEx0nvcwNNfJAf+c7Ae/H35qWwTYvPZUKFj5AS+WfHG/WJJfWnDnyNUlp8UA==
   dependencies:
     "@eslint-community/regexpp" "^4.10.0"
-    "@typescript-eslint/scope-manager" "8.2.0"
-    "@typescript-eslint/type-utils" "8.2.0"
-    "@typescript-eslint/utils" "8.2.0"
-    "@typescript-eslint/visitor-keys" "8.2.0"
+    "@typescript-eslint/scope-manager" "8.3.0"
+    "@typescript-eslint/type-utils" "8.3.0"
+    "@typescript-eslint/utils" "8.3.0"
+    "@typescript-eslint/visitor-keys" "8.3.0"
     graphemer "^1.4.0"
     ignore "^5.3.1"
     natural-compare "^1.4.0"
     ts-api-utils "^1.3.0"
 
-"@typescript-eslint/parser@^8.2.0":
-  version "8.2.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-8.2.0.tgz#de3993304feb98576d9ffbf10c83ca1bcb68a5dd"
-  integrity sha512-j3Di+o0lHgPrb7FxL3fdEy6LJ/j2NE8u+AP/5cQ9SKb+JLH6V6UHDqJ+e0hXBkHP1wn1YDFjYCS9LBQsZDlDEg==
+"@typescript-eslint/parser@^8.3.0":
+  version "8.3.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-8.3.0.tgz#3c72c32bc909cb91ce3569e7d11d729ad84deafa"
+  integrity sha512-h53RhVyLu6AtpUzVCYLPhZGL5jzTD9fZL+SYf/+hYOx2bDkyQXztXSc4tbvKYHzfMXExMLiL9CWqJmVz6+78IQ==
   dependencies:
-    "@typescript-eslint/scope-manager" "8.2.0"
-    "@typescript-eslint/types" "8.2.0"
-    "@typescript-eslint/typescript-estree" "8.2.0"
-    "@typescript-eslint/visitor-keys" "8.2.0"
+    "@typescript-eslint/scope-manager" "8.3.0"
+    "@typescript-eslint/types" "8.3.0"
+    "@typescript-eslint/typescript-estree" "8.3.0"
+    "@typescript-eslint/visitor-keys" "8.3.0"
     debug "^4.3.4"
 
 "@typescript-eslint/scope-manager@8.0.0":
@@ -2080,21 +2080,21 @@
     "@typescript-eslint/types" "8.0.0"
     "@typescript-eslint/visitor-keys" "8.0.0"
 
-"@typescript-eslint/scope-manager@8.2.0":
-  version "8.2.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-8.2.0.tgz#4a4bd7e7df5522acc8795c3b6f21e8c41b951138"
-  integrity sha512-OFn80B38yD6WwpoHU2Tz/fTz7CgFqInllBoC3WP+/jLbTb4gGPTy9HBSTsbDWkMdN55XlVU0mMDYAtgvlUspGw==
+"@typescript-eslint/scope-manager@8.3.0":
+  version "8.3.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-8.3.0.tgz#834301d2e70baf924c26818b911bdc40086f7468"
+  integrity sha512-mz2X8WcN2nVu5Hodku+IR8GgCOl4C0G/Z1ruaWN4dgec64kDBabuXyPAr+/RgJtumv8EEkqIzf3X2U5DUKB2eg==
   dependencies:
-    "@typescript-eslint/types" "8.2.0"
-    "@typescript-eslint/visitor-keys" "8.2.0"
+    "@typescript-eslint/types" "8.3.0"
+    "@typescript-eslint/visitor-keys" "8.3.0"
 
-"@typescript-eslint/type-utils@8.2.0":
-  version "8.2.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-8.2.0.tgz#5cd7fef50f492e5a0f508bdd40678861a57c3549"
-  integrity sha512-g1CfXGFMQdT5S+0PSO0fvGXUaiSkl73U1n9LTK5aRAFnPlJ8dLKkXr4AaLFvPedW8lVDoMgLLE3JN98ZZfsj0w==
+"@typescript-eslint/type-utils@8.3.0":
+  version "8.3.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-8.3.0.tgz#c1ae6af8c21a27254321016b052af67ddb44a9ac"
+  integrity sha512-wrV6qh//nLbfXZQoj32EXKmwHf4b7L+xXLrP3FZ0GOUU72gSvLjeWUl5J5Ue5IwRxIV1TfF73j/eaBapxx99Lg==
   dependencies:
-    "@typescript-eslint/typescript-estree" "8.2.0"
-    "@typescript-eslint/utils" "8.2.0"
+    "@typescript-eslint/typescript-estree" "8.3.0"
+    "@typescript-eslint/utils" "8.3.0"
     debug "^4.3.4"
     ts-api-utils "^1.3.0"
 
@@ -2103,10 +2103,10 @@
   resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-8.0.0.tgz#7195ea9369fe5ee46b958d7ffca6bd26511cce18"
   integrity sha512-wgdSGs9BTMWQ7ooeHtu5quddKKs5Z5dS+fHLbrQI+ID0XWJLODGMHRfhwImiHoeO2S5Wir2yXuadJN6/l4JRxw==
 
-"@typescript-eslint/types@8.2.0":
-  version "8.2.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-8.2.0.tgz#dfe9895a2812f7c6bf7af863054c22a67060420c"
-  integrity sha512-6a9QSK396YqmiBKPkJtxsgZZZVjYQ6wQ/TlI0C65z7vInaETuC6HAHD98AGLC8DyIPqHytvNuS8bBVvNLKyqvQ==
+"@typescript-eslint/types@8.3.0":
+  version "8.3.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-8.3.0.tgz#378e62447c2d7028236e55a81d3391026600563b"
+  integrity sha512-y6sSEeK+facMaAyixM36dQ5NVXTnKWunfD1Ft4xraYqxP0lC0POJmIaL/mw72CUMqjY9qfyVfXafMeaUj0noWw==
 
 "@typescript-eslint/typescript-estree@8.0.0":
   version "8.0.0"
@@ -2122,29 +2122,29 @@
     semver "^7.6.0"
     ts-api-utils "^1.3.0"
 
-"@typescript-eslint/typescript-estree@8.2.0":
-  version "8.2.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-8.2.0.tgz#fbdb93a1c7ac7f1f96ae2de4fc97cd64c60ae894"
-  integrity sha512-kiG4EDUT4dImplOsbh47B1QnNmXSoUqOjWDvCJw/o8LgfD0yr7k2uy54D5Wm0j4t71Ge1NkynGhpWdS0dEIAUA==
+"@typescript-eslint/typescript-estree@8.3.0":
+  version "8.3.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-8.3.0.tgz#3e3d38af101ba61a8568f034733b72bfc9f176b9"
+  integrity sha512-Mq7FTHl0R36EmWlCJWojIC1qn/ZWo2YiWYc1XVtasJ7FIgjo0MVv9rZWXEE7IK2CGrtwe1dVOxWwqXUdNgfRCA==
   dependencies:
-    "@typescript-eslint/types" "8.2.0"
-    "@typescript-eslint/visitor-keys" "8.2.0"
+    "@typescript-eslint/types" "8.3.0"
+    "@typescript-eslint/visitor-keys" "8.3.0"
     debug "^4.3.4"
-    globby "^11.1.0"
+    fast-glob "^3.3.2"
     is-glob "^4.0.3"
     minimatch "^9.0.4"
     semver "^7.6.0"
     ts-api-utils "^1.3.0"
 
-"@typescript-eslint/utils@8.2.0":
-  version "8.2.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-8.2.0.tgz#02d442285925f28d520587185f295f932702e733"
-  integrity sha512-O46eaYKDlV3TvAVDNcoDzd5N550ckSe8G4phko++OCSC1dYIb9LTc3HDGYdWqWIAT5qDUKphO6sd9RrpIJJPfg==
+"@typescript-eslint/utils@8.3.0":
+  version "8.3.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-8.3.0.tgz#b10972319deac5959c7a7075d0cf2b5e1de7ec08"
+  integrity sha512-F77WwqxIi/qGkIGOGXNBLV7nykwfjLsdauRB/DOFPdv6LTF3BHHkBpq81/b5iMPSF055oO2BiivDJV4ChvNtXA==
   dependencies:
     "@eslint-community/eslint-utils" "^4.4.0"
-    "@typescript-eslint/scope-manager" "8.2.0"
-    "@typescript-eslint/types" "8.2.0"
-    "@typescript-eslint/typescript-estree" "8.2.0"
+    "@typescript-eslint/scope-manager" "8.3.0"
+    "@typescript-eslint/types" "8.3.0"
+    "@typescript-eslint/typescript-estree" "8.3.0"
 
 "@typescript-eslint/utils@^6.0.0 || ^7.0.0 || ^8.0.0":
   version "8.0.0"
@@ -2164,12 +2164,12 @@
     "@typescript-eslint/types" "8.0.0"
     eslint-visitor-keys "^3.4.3"
 
-"@typescript-eslint/visitor-keys@8.2.0":
-  version "8.2.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-8.2.0.tgz#f6abb3b6508898a117175ddc11f9b9869cc96834"
-  integrity sha512-sbgsPMW9yLvS7IhCi8IpuK1oBmtbWUNP+hBdwl/I9nzqVsszGnNGti5r9dUtF5RLivHUFFIdRvLiTsPhzSyJ3Q==
+"@typescript-eslint/visitor-keys@8.3.0":
+  version "8.3.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-8.3.0.tgz#320d747d107af1eef1eb43fbc4ccdbddda13068b"
+  integrity sha512-RmZwrTbQ9QveF15m/Cl28n0LXD6ea2CjkhH5rQ55ewz3H24w+AMCJHPVYaZ8/0HoG8Z3cLLFFycRXxeO2tz9FA==
   dependencies:
-    "@typescript-eslint/types" "8.2.0"
+    "@typescript-eslint/types" "8.3.0"
     eslint-visitor-keys "^3.4.3"
 
 "@ungap/structured-clone@^1.2.0":

From 19f62590ae54d598db1ac97fab836b732c4d788e Mon Sep 17 00:00:00 2001
From: bartoval <vabarjs@gmail.com>
Date: Tue, 27 Aug 2024 16:31:56 +0200
Subject: [PATCH 2/2] test(General): :white_check_mark: Update snapshots

---
 __tests__/pages/Metrics/__snapshots__/Metrics.spec.tsx.snap | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/__tests__/pages/Metrics/__snapshots__/Metrics.spec.tsx.snap b/__tests__/pages/Metrics/__snapshots__/Metrics.spec.tsx.snap
index cb7efc2e..9f2bac69 100644
--- a/__tests__/pages/Metrics/__snapshots__/Metrics.spec.tsx.snap
+++ b/__tests__/pages/Metrics/__snapshots__/Metrics.spec.tsx.snap
@@ -548,7 +548,7 @@ exports[`Metrics Component renders correctly 1`] = `
               <div
                 class="pf-v5-c-card__title-text"
               >
-                Latencies Out 
+                Incoming Latency 
                 <div
                   style="display: contents;"
                 >
@@ -641,7 +641,7 @@ exports[`Metrics Component renders correctly 1`] = `
               <div
                 class="pf-v5-c-card__title-text"
               >
-                Latencies In 
+                Outgoing Latency 
                 <div
                   style="display: contents;"
                 >