fix(Metrics): 🐞 Adjust latency definition

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

Hide file tree

Showing 7 changed files with 163 additions and 25 deletions.
diff --git 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
@@ -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/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 {