fix(Metrics): 🐞 Adjust latency definition

skupperproject · Aug 27, 2024 · 31de00c · 31de00c
1 parent 1490451
commit 31de00c
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 9 deletions.
diff --git 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 = 'Latencies Out',
+  LatencyTitleIn = 'Latencies In',
+  LatencyDescriptionIn = 'This metric measures the latency from the source servers to destination clients',
+  LatencyDescriptionOut = 'This metric measures the latency from the source clients to destination servers',
   ConnectionTitle = 'Tcp connections',
   TerminatedConnections = 'Closed connections',
   LiveConnections = 'Open connections',

diff --git 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
@@ -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
@@ -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
@@ -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 {