overview & topology rtt

netobserv · Aug 2, 2023 · 70047c4 · 70047c4
1 parent d910933
commit 70047c4
Show file tree

Hide file tree

Showing 21 changed files with 350 additions and 109 deletions.
diff --git a/web/locales/en/plugin__netobserv-plugin.json b/web/locales/en/plugin__netobserv-plugin.json
@@ -18,12 +18,15 @@
   "Grid": "Grid",
   "ColaGroups": "ColaGroups",
   "Invalid": "Invalid",
+  "rate": "rate",
   "Total": "Total",
-  "Latest rate": "Latest rate",
-  "Max rate": "Max rate",
-  "Average rate": "Average rate",
+  "Latest": "Latest",
+  "Max": "Max",
+  "Average": "Average",
+  "Only average is available for RTT": "Only average is available for RTT",
   "Packets": "Packets",
   "Bytes": "Bytes",
+  "RTT": "RTT",
   "Type of measurement to show in graphs.": "Type of measurement to show in graphs.",
   "Metric type": "Metric type",
   "The level of details represented.": "The level of details represented.",
@@ -205,6 +208,7 @@
   "Unable to get overview": "Unable to get overview",
   "Clear or reset filters and try again.": "Clear or reset filters and try again.",
   "Average latency": "Average latency",
+  "Average RTT": "Average RTT",
   "Total flow count": "Total flow count",
   "Show total traffic for the selected filters": "Show total traffic for the selected filters",
   "Show total": "Show total",
@@ -245,11 +249,14 @@
   "IP": "IP",
   "No information available for this content. Change scope to get more details.": "No information available for this content. Change scope to get more details.",
   "Stats": "Stats",
+  "Flow RTT": "Flow RTT",
   "Top 5 rates": "Top 5 rates",
   "A -> B": "A -> B",
   "In": "In",
   "B -> A": "B -> A",
   "Out": "Out",
+  "Average rate": "Average rate",
+  "Latest rate": "Latest rate",
   "Edge": "Edge",
   "Unable to get topology": "Unable to get topology",
   "Query is slow": "Query is slow",
@@ -295,6 +302,9 @@
   "Filtered byte rate": "Filtered byte rate",
   "Filtered sum of top-k packets / filtered total packets": "Filtered sum of top-k packets / filtered total packets",
   "packets": "packets",
+  "Filtered avg RTT / filtered total avg RTT": "Filtered avg RTT / filtered total avg RTT",
+  "Filtered avg RTT": "Filtered avg RTT",
+  "ms": "ms",
   "Configuration": "Configuration",
   "Sampling": "Sampling",
   "Cardinality": "Cardinality",
@@ -359,7 +369,6 @@
   "The total aggregated number of bytes.": "The total aggregated number of bytes.",
   "The total aggregated number of packets.": "The total aggregated number of packets.",
   "Time elapsed between Start Time and End Time.": "Time elapsed between Start Time and End Time.",
-  "Flow RTT": "Flow RTT",
   "Flow Round Trip Time": "Flow Round Trip Time",
   "Collection Time": "Collection Time",
   "Reception time of the record by the collector.": "Reception time of the record by the collector.",
@@ -474,6 +483,8 @@
   "The top dropped rates (dropped by the kernel) as bar compared to total as line over the selected interval": "The top dropped rates (dropped by the kernel) as bar compared to total as line over the selected interval",
   "Top {{limit}} average DNS latencies": "Top {{limit}} average DNS latencies",
   "The average DNS latencies over the selected interval": "The average DNS latencies over the selected interval",
+  "Top {{limit}} average flow RTT": "Top {{limit}} average flow RTT",
+  "The average flow Round Trip Time over the selected interval": "The average flow Round Trip Time over the selected interval",
   "Top {{limit}} DNS response code": "Top {{limit}} DNS response code",
   "The top DNS response code extracted from DNS response headers over the selected interval": "The top DNS response code extracted from DNS response headers over the selected interval",
   "Top {{limit}} DNS response code stacked with total": "Top {{limit}} DNS response code stacked with total",

diff --git a/web/src/api/routes.ts b/web/src/api/routes.ts
@@ -81,6 +81,7 @@ export const getTopology = (params: FlowQuery, range: number | TimeRange): Promi
     const metrics = parseMetrics(
       aggQR.result as RawTopologyMetrics[],
       range,
+      params.type,
       params.aggregateBy!,
       aggQR.unixTimestamp,
       aggQR.isMock

diff --git a/web/src/components/__tests-data__/metrics.ts b/web/src/components/__tests-data__/metrics.ts
@@ -108,13 +108,15 @@ export const metric4: RawTopologyMetrics = {
 export const metrics = parseMetrics(
   [metric1, metric2, metric3],
   { from: 1653989800, to: 1653990100 },
+  'bytes',
   'resource',
   0
 ) as PairTopologyMetrics[];
 
 export const droppedMetrics = parseMetrics(
   [metric4],
   { from: 1653989800, to: 1653990100 },
+  'bytes',
   'resource',
   0
 ) as PairTopologyMetrics[];
diff --git a/web/src/components/dropdowns/metric-function-dropdown.tsx b/web/src/components/dropdowns/metric-function-dropdown.tsx
@@ -1,32 +1,34 @@
-import { Dropdown, DropdownItem, DropdownPosition, DropdownToggle } from '@patternfly/react-core';
+import { Dropdown, DropdownItem, DropdownPosition, DropdownToggle, Tooltip } from '@patternfly/react-core';
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
-import { MetricFunction } from '../../model/flow-query';
+import { MetricFunction, MetricType } from '../../model/flow-query';
 
 const metricFunctionOptions: MetricFunction[] = ['last', 'avg', 'max', 'sum'];
 
 export const MetricFunctionDropdown: React.FC<{
   selected?: string;
   setMetricFunction: (v: MetricFunction) => void;
+  metricType?: MetricType;
   id?: string;
-}> = ({ selected, setMetricFunction, id }) => {
+}> = ({ selected, setMetricFunction, metricType, id }) => {
   const { t } = useTranslation('plugin__netobserv-plugin');
   const [metricDropdownOpen, setMetricDropdownOpen] = React.useState(false);
 
   const getMetricDisplay = React.useCallback(
     (mf: MetricFunction): string => {
+      const suffix = metricType !== 'flowRtt' ? ' ' + t('rate') : '';
       switch (mf) {
         case 'sum':
           return t('Total');
         case 'last':
-          return t('Latest rate');
+          return `${t('Latest')}${suffix}`;
         case 'max':
-          return t('Max rate');
+          return `${t('Max')}${suffix}`;
         case 'avg':
-          return t('Average rate');
+          return `${t('Average')}${suffix}`;
       }
     },
-    [t]
+    [metricType, t]
   );
 
   return (
@@ -35,13 +37,20 @@ export const MetricFunctionDropdown: React.FC<{
       id={id}
       position={DropdownPosition.right}
       toggle={
-        <DropdownToggle
-          data-test={`${id}-dropdown`}
-          id={`${id}-dropdown`}
-          onToggle={() => setMetricDropdownOpen(!metricDropdownOpen)}
+        <Tooltip
+          trigger={metricType === 'flowRtt' ? 'mouseenter focus' : ''}
+          position="top"
+          content={t('Only average is available for RTT')}
         >
-          {getMetricDisplay(selected as MetricFunction)}
-        </DropdownToggle>
+          <DropdownToggle
+            data-test={`${id}-dropdown`}
+            id={`${id}-dropdown`}
+            isDisabled={metricType === 'flowRtt'}
+            onToggle={() => setMetricDropdownOpen(!metricDropdownOpen)}
+          >
+            {getMetricDisplay(selected as MetricFunction)}
+          </DropdownToggle>
+        </Tooltip>
       }
       isOpen={metricDropdownOpen}
       dropdownItems={metricFunctionOptions.map(v => (

diff --git a/web/src/components/dropdowns/metric-type-dropdown.tsx b/web/src/components/dropdowns/metric-type-dropdown.tsx
@@ -3,13 +3,14 @@ import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { MetricType } from '../../model/flow-query';
 
-const metricTypeOptions: MetricType[] = ['bytes', 'packets'];
+const metricTypeOptions: MetricType[] = ['bytes', 'packets', 'flowRtt'];
 
 export const MetricTypeDropdown: React.FC<{
   selected?: string;
   setMetricType: (v: MetricType) => void;
+  isTopology?: boolean;
   id?: string;
-}> = ({ selected, setMetricType, id }) => {
+}> = ({ selected, setMetricType, id, isTopology }) => {
   const { t } = useTranslation('plugin__netobserv-plugin');
   const [metricDropdownOpen, setMetricDropdownOpen] = React.useState(false);
 
@@ -20,6 +21,8 @@ export const MetricTypeDropdown: React.FC<{
           return t('Packets');
         case 'bytes':
           return t('Bytes');
+        case 'flowRtt':
+          return t('RTT');
         default:
           throw new Error('getMetricDisplay called with invalid metricType: ' + metricType);
       }
@@ -42,19 +45,21 @@ export const MetricTypeDropdown: React.FC<{
         </DropdownToggle>
       }
       isOpen={metricDropdownOpen}
-      dropdownItems={metricTypeOptions.map(v => (
-        <DropdownItem
-          data-test={v}
-          id={v}
-          key={v}
-          onClick={() => {
-            setMetricDropdownOpen(false);
-            setMetricType(v);
-          }}
-        >
-          {getMetricDisplay(v)}
-        </DropdownItem>
-      ))}
+      dropdownItems={metricTypeOptions
+        .filter(v => isTopology || v !== 'flowRtt')
+        .map(v => (
+          <DropdownItem
+            data-test={v}
+            id={v}
+            key={v}
+            onClick={() => {
+              setMetricDropdownOpen(false);
+              setMetricType(v);
+            }}
+          >
+            {getMetricDisplay(v)}
+          </DropdownItem>
+        ))}
     />
   );
 };

diff --git a/web/src/components/dropdowns/topology-display-dropdown.tsx b/web/src/components/dropdowns/topology-display-dropdown.tsx
@@ -76,12 +76,14 @@ export const TopologyDisplayOptions: React.FC<{
                 id="metricFunction"
                 selected={metricFunction}
                 setMetricFunction={setMetricFunction}
+                metricType={metricType}
               />
             </FlexItem>
             <FlexItem>
               <MetricTypeDropdown
                 data-test="metricType"
                 id="metricType"
+                isTopology
                 selected={metricType}
                 setMetricType={setMetricType}
               />

diff --git a/web/src/components/metrics/metrics-content.tsx b/web/src/components/metrics/metrics-content.tsx
@@ -6,6 +6,7 @@ import {
   ChartGroup,
   ChartLabel,
   ChartLegend,
+  ChartLine,
   ChartScatter,
   ChartStack,
   ChartThemeColor
@@ -34,6 +35,7 @@ export type MetricsContentProps = {
   limit: number;
   showBar?: boolean;
   showArea?: boolean;
+  showLine?: boolean;
   showScatter?: boolean;
   smallerTexts?: boolean;
   itemsPerRow?: number;
@@ -48,14 +50,18 @@ export const MetricsContent: React.FC<MetricsContentProps> = ({
   limit,
   showBar,
   showArea,
+  showLine,
   showScatter,
   smallerTexts,
   itemsPerRow,
   tooltipsTruncate
 }) => {
   const { t } = useTranslation('plugin__netobserv-plugin');
 
-  const filteredMetrics = metrics.slice(0, limit);
+  let filteredMetrics = metrics.slice(0, limit);
+  if (metricType === 'flowRtt') {
+    filteredMetrics = filteredMetrics.map(m => ({ ...m, values: m.values.filter(v => v[1] !== 0) }));
+  }
 
   const legendData: LegendDataItem[] = filteredMetrics.map((m, idx) => ({
     childName: `${showBar ? 'bar-' : 'area-'}${idx}`,
@@ -119,6 +125,13 @@ export const MetricsContent: React.FC<MetricsContentProps> = ({
             ))}
           </ChartGroup>
         )}
+        {showLine && (
+          <ChartGroup>
+            {topKDatapoints.map((datapoints, idx) => (
+              <ChartLine name={`line-${idx}`} key={`line-${idx}`} data={datapoints} interpolation="monotoneX" />
+            ))}
+          </ChartGroup>
+        )}
         {showScatter && (
           <ChartGroup>
             {topKDatapoints.map((datapoints, idx) => (

diff --git a/web/src/components/netflow-overview/__tests__/netflow-overview.spec.tsx b/web/src/components/netflow-overview/__tests__/netflow-overview.spec.tsx
@@ -22,6 +22,7 @@ describe('<NetflowOverview />', () => {
     metrics: [],
     droppedMetrics: [],
     dnsLatencyMetrics: [],
+    rttMetrics: [],
     totalMetric: undefined,
     filterActionLinks: <></>,
     truncateLength: TruncateLength.M

diff --git a/web/src/components/netflow-overview/netflow-overview-panel.tsx b/web/src/components/netflow-overview/netflow-overview-panel.tsx
@@ -13,7 +13,7 @@ export const NetflowOverviewPanel: React.FC<{
   id?: string;
 }> = ({ id, doubleWidth, bodyClassSmall, title, titleTooltip, kebab, children }) => {
   return (
-    <FlexItem id={id} className={`overview-flex-item ${doubleWidth ? 'full' : ''}`}>
+    <FlexItem id={id} className={`overview-flex-item center ${doubleWidth ? 'full' : ''}`}>
       <Card isFlat className="overview-card">
         <Flex className="overview-card-content" direction={{ default: 'column' }}>
           <FlexItem>

diff --git a/web/src/components/netflow-overview/netflow-overview.css b/web/src/components/netflow-overview/netflow-overview.css
@@ -21,6 +21,10 @@
   width: 50%;
 }
 
+.overview-flex-item.center {
+  align-self: flex-start;
+}
+
 .overview-flex-item.full {
   width: 100%;
 }