Merge pull request #405 from bartoval/add_metric_latency_tooltip

feat(Metrics): ✨ Add latency tooltip description for tcp and…
skupperproject · Apr 28, 2024 · 2e79e8b · 2e79e8b
2 parents 0948ef7 + 97c0390
commit 2e79e8b
Show file tree

Hide file tree

Showing 8 changed files with 49 additions and 14 deletions.
diff --git a/src/pages/ProcessGroups/views/ProcessGroup.tsx b/src/pages/ProcessGroups/views/ProcessGroup.tsx
@@ -136,7 +136,8 @@ const ProcessGroup = function () {
               rows={processResults}
               customCells={{
                 linkCell: CustomProcessCells.linkCell,
-                linkCellSite: CustomProcessCells.linkCellSite
+                linkCellSite: CustomProcessCells.linkCellSite,
+                TimestampCell: CustomProcessCells.TimestampCell
               }}
             />
           )}

diff --git a/src/pages/Processes/Processes.constants.ts b/src/pages/Processes/Processes.constants.ts
@@ -57,7 +57,7 @@ export const CustomProcessCells = {
     HighlightValueCell({ ...props, format: formatBytes }),
   ByteRateFormatCell: (props: HighlightValueCellProps<FlowPairsResponse>) =>
     HighlightValueCell({ ...props, format: formatByteRate }),
-  ProcessTimestampCell: (props: LinkCellProps<ProcessResponse>) => EndTimeCell(props)
+  TimestampCell: (props: LinkCellProps<ProcessResponse>) => EndTimeCell(props)
 };
 
 export const processesTableColumns: SKColumn<ProcessResponse>[] = [
@@ -79,7 +79,7 @@ export const processesTableColumns: SKColumn<ProcessResponse>[] = [
   {
     name: ProcessesLabels.Created,
     prop: 'startTime' as keyof ProcessResponse,
-    customCellName: 'ProcessTimestampCell',
+    customCellName: 'TimestampCell',
     width: 15
   }
 ];

diff --git a/src/pages/Sites/Sites.constants.ts b/src/pages/Sites/Sites.constants.ts
@@ -31,7 +31,7 @@ export const siteColumns: SKColumn<SiteResponse>[] = [
   {
     name: SiteLabels.Created,
     prop: 'startTime' as keyof SiteResponse,
-    customCellName: 'ProcessTimestampCell',
+    customCellName: 'TimestampCell',
     width: 15
   }
 ];
diff --git a/src/pages/Sites/views/Sites.tsx b/src/pages/Sites/views/Sites.tsx
@@ -33,7 +33,7 @@ const Sites = function () {
           rows={sites}
           paginationPageSize={BIG_PAGINATION_SIZE}
           customCells={{
-            ProcessTimestampCell: (props: LinkCellProps<SiteResponse>) => EndTimeCell(props),
+            TimestampCell: (props: LinkCellProps<SiteResponse>) => EndTimeCell(props),
             LinkCell: (props: LinkCellProps<SiteResponse>) =>
               LinkCell({
                 ...props,

diff --git a/src/pages/shared/FlowPairs/FlowPair.constants.ts b/src/pages/shared/FlowPairs/FlowPair.constants.ts
@@ -38,7 +38,7 @@ export const flowPairsComponentsTable = {
       type: 'process',
       link: `${ProcessesRoutesPaths.Processes}/${props.data.counterFlow.processName}@${props.data.counterFlow.process}`
     }),
-  ProcessTimestampCell: (props: LinkCellProps<FlowPairsResponse>) => EndTimeCell(props),
+  TimestampCell: (props: LinkCellProps<FlowPairsResponse>) => EndTimeCell(props),
   TcpTTFB: (props: LinkCellProps<FlowPairsResponse>) =>
     formatLatency(props.data.counterFlow.latency + props.data.forwardFlow.latency),
   DurationCell: (props: LinkCellProps<FlowPairsResponse>) =>
@@ -54,7 +54,7 @@ export const tcpFlowPairsColumns: SKColumn<FlowPairsResponse>[] = [
   {
     name: FlowPairLabels.FlowPairClosed,
     prop: 'endTime' as keyof FlowPairsResponse,
-    customCellName: 'ProcessTimestampCell',
+    customCellName: 'TimestampCell',
     width: 15
   },
   {
@@ -121,7 +121,7 @@ export const httpFlowPairsColumns: SKColumn<FlowPairsResponse>[] = [
   {
     name: FlowPairLabels.Completed,
     prop: 'endTime' as keyof FlowPairsResponse,
-    customCellName: 'ProcessTimestampCell',
+    customCellName: 'TimestampCell',
     width: 15
   },
   {

diff --git a/src/pages/shared/Metrics/Metrics.enum.ts b/src/pages/shared/Metrics/Metrics.enum.ts
@@ -28,6 +28,7 @@ export enum MetricsLabels {
   DataTransferTitle = 'Traffic',
   ByteRateTitle = 'Byte rate',
   LatencyTitle = 'Latencies',
+  LatencyDescription = 'TCP: TTFB for terminated connections.  HTTP: Response time',
   ConnectionTitle = 'Tcp connections',
   TerminatedConnections = 'Closed connections',
   LiveConnections = 'Live connections',

diff --git a/src/pages/shared/Metrics/__tests__/__snapshots__/Metrics.spec.tsx.snap b/src/pages/shared/Metrics/__tests__/__snapshots__/Metrics.spec.tsx.snap
@@ -566,7 +566,33 @@ exports[`Metrics Component renders correctly 1`] = `
               <div
                 class="pf-v5-c-card__title-text"
               >
-                Latencies
+                Latencies 
+                <div
+                  style="display: contents;"
+                >
+                  <button
+                    aria-disabled="false"
+                    class="pf-v5-c-button pf-m-plain"
+                    data-ouia-component-id="OUIA-Generated-Button-plain-4"
+                    data-ouia-component-type="PF5/Button"
+                    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"
+                    >
+                      <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>
+                  </button>
+                </div>
               </div>
             </div>
           </div>
@@ -592,7 +618,7 @@ 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-4"
+              data-ouia-component-id="OUIA-Generated-Button-plain-5"
               data-ouia-component-type="PF5/Button"
               data-ouia-safe="true"
               type="button"
@@ -651,7 +677,7 @@ 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-5"
+              data-ouia-component-id="OUIA-Generated-Button-plain-6"
               data-ouia-component-type="PF5/Button"
               data-ouia-safe="true"
               type="button"

diff --git a/src/pages/shared/Metrics/components/Latency.tsx b/src/pages/shared/Metrics/components/Latency.tsx
@@ -1,7 +1,7 @@
 import { FC, useCallback, useEffect, useState } from 'react';
 
-import { Card, CardBody, CardExpandableContent, CardHeader, CardTitle } from '@patternfly/react-core';
-import { SearchIcon } from '@patternfly/react-icons';
+import { Button, Card, CardBody, CardExpandableContent, CardHeader, CardTitle, Tooltip } from '@patternfly/react-core';
+import { QuestionCircleIcon, SearchIcon } from '@patternfly/react-icons';
 import { keepPreviousData, useQuery } from '@tanstack/react-query';
 
 import EmptyData from '@core/components/EmptyData';
@@ -75,7 +75,14 @@ const Latency: FC<LatencyProps> = function ({
   return (
     <Card isExpanded={isExpanded}>
       <CardHeader onExpand={handleExpand}>
-        <CardTitle>{MetricsLabels.LatencyTitle}</CardTitle>
+        <CardTitle>
+          {MetricsLabels.LatencyTitle}{' '}
+          <Tooltip content={MetricsLabels.LatencyDescription}>
+            <Button variant="plain">
+              <QuestionCircleIcon />
+            </Button>
+          </Tooltip>
+        </CardTitle>
       </CardHeader>
 
       <CardExpandableContent>