move helpers + voronoi as component

web/locales/en/plugin__netobserv-plugin.json

@@ -149,9 +149,6 @@
   "Switch between one way / back and forth filtering": "Switch between one way / back and forth filtering",
   "One way shows traffic strictly as defined per your filters": "One way shows traffic strictly as defined per your filters",
   "Back and forth shows traffic according to your filters, plus the related return traffic": "Back and forth shows traffic according to your filters, plus the related return traffic",
-  "Source": "Source",
-  "Destination": "Destination",
-  "Common": "Common",
   "Filter already exists": "Filter already exists",
   "Hide filters": "Hide filters",
   "Show {{count}} filters": "Show {{count}} filters",
@@ -160,6 +157,8 @@
   "Collapse": "Collapse",
   "Expand": "Expand",
   "Quick filters": "Quick filters",
+  "Source": "Source",
+  "Destination": "Destination",
   "Step {{index}}/{{count}}": "Step {{index}}/{{count}}",
   "Step {{index}}/{{count}}_plural": "Step {{index}}/{{count}}",
   "Previous tip": "Previous tip",
@@ -212,9 +211,6 @@
   "Reset time range": "Reset time range",
   "Others": "Others",
   "Total dropped": "Total dropped",
-  "(non nodes)": "(non nodes)",
-  "(non pods)": "(non pods)",
-  "internal": "internal",
   "Manage columns": "Manage columns",
   "Selected columns will appear in the table.": "Selected columns will appear in the table.",
   "Click and drag the items to reorder the columns in the table.": "Click and drag the items to reorder the columns in the table.",
@@ -424,6 +420,10 @@
   "Not a valid MAC address": "Not a valid MAC address",
   "Unknown protocol": "Unknown protocol",
   "Unknown direction": "Unknown direction",
+  "Common": "Common",
+  "(non nodes)": "(non nodes)",
+  "(non pods)": "(non pods)",
+  "internal": "internal",
   "P": "P",
   "Pps": "Pps",
   "minimum": "minimum",

web/src/components/filters/autocomplete-filter.tsx

@@ -14,9 +14,9 @@ import * as React from 'react';
 import { createFilterValue, FilterDefinition, FilterOption, FilterValue } from '../../model/filters';
 import { autoCompleteCache } from '../../utils/autocomplete-cache';
 import { getHTTPErrorDetails } from '../../utils/errors';
+import { Indicator } from '../../utils/filters-helper';
 import { usePrevious } from '../../utils/previous-hook';
 import './autocomplete-filter.css';
-import { Indicator } from './filters-helper';
 
 const optionsMenuID = 'options-menu-list';
 const isMenuOption = (elt?: Element) => {

web/src/components/filters/filters-chips.tsx

@@ -13,10 +13,10 @@ import {
 } from '../../model/filters';
 import { QuickFilter } from '../../model/quick-filters';
 import { autoCompleteCache } from '../../utils/autocomplete-cache';
+import { getFilterFullName, hasSrcDstFilters, swapFilters } from '../../utils/filters-helper';
 import { getPathWithParams, netflowTrafficPath } from '../../utils/url';
 import { navigate } from '../dynamic-loader/dynamic-loader';
 import { LinksOverflow } from '../overflow/links-overflow';
-import { getFilterFullName, hasSrcDstFilters, swapFilters } from './filters-helper';
 
 export interface FiltersChipsProps {
   isForced: boolean;

web/src/components/filters/filters-dropdown.tsx

@@ -10,7 +10,7 @@ import {
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { FilterDefinition } from '../../model/filters';
-import { buildGroups, getFilterFullName } from './filters-helper';
+import { buildGroups, getFilterFullName } from '../../utils/filters-helper';
 
 export interface FiltersDropdownProps {
   filterDefinitions: FilterDefinition[];

web/src/components/filters/filters-toolbar.tsx

@@ -14,6 +14,7 @@ import { useTranslation } from 'react-i18next';
 import { Filter, FilterDefinition, Filters, FilterValue, findFromFilters } from '../../model/filters';
 import { QuickFilter } from '../../model/quick-filters';
 import { findFilter } from '../../utils/filter-definitions';
+import { Indicator } from '../../utils/filters-helper';
 import { localStorageShowFiltersKey, useLocalStorage } from '../../utils/local-storage-hook';
 import { QueryOptionsDropdown, QueryOptionsDropdownProps } from '../dropdowns/query-options-dropdown';
 import { LinksOverflow } from '../overflow/links-overflow';
@@ -22,7 +23,6 @@ import CompareFilter, { FilterCompare } from './compare-filter';
 import { FilterHints } from './filter-hints';
 import { FiltersChips } from './filters-chips';
 import FiltersDropdown from './filters-dropdown';
-import { Indicator } from './filters-helper';
 import './filters-toolbar.css';
 import { QuickFilters } from './quick-filters';
 import TextFilter from './text-filter';

web/src/components/filters/text-filter.tsx

@@ -3,7 +3,7 @@ import { SearchIcon } from '@patternfly/react-icons';
 import * as _ from 'lodash';
 import * as React from 'react';
 import { createFilterValue, FilterDefinition, FilterValue } from '../../model/filters';
-import { Indicator } from './filters-helper';
+import { Indicator } from '../../utils/filters-helper';
 
 export interface TextFilterProps {
   filterDefinition: FilterDefinition;

web/src/components/metrics/chart-voronoi.tsx

@@ -0,0 +1,27 @@
+import { ChartLegendTooltip, createContainer } from '@patternfly/react-charts';
+import React from 'react';
+import { ChartDataPoint, LegendDataItem } from '../../utils/metrics-helper';
+
+export interface ChartVoronoiProps {
+  legendData: LegendDataItem[];
+  f: (v: number) => string;
+}
+
+export const ChartVoronoi: React.FC<ChartVoronoiProps> = ({ legendData, f }) => {
+  const CursorVoronoiContainer = createContainer('voronoi', 'cursor');
+  const tooltipData = legendData.map(item => ({ ...item, name: item.tooltipName || item.name }));
+  return (
+    <CursorVoronoiContainer
+      cursorDimension="x"
+      labels={(dp: { datum: ChartDataPoint }) => {
+        return dp.datum.y || dp.datum.y === 0 ? f(dp.datum.y) : 'n/a';
+      }}
+      labelComponent={<ChartLegendTooltip legendData={tooltipData} title={(datum: ChartDataPoint) => datum.date} />}
+      mouseFollowTooltips
+      voronoiDimension="x"
+      voronoiPadding={50}
+    />
+  );
+};
+
+export default ChartVoronoi;

web/src/components/metrics/histogram.tsx

@@ -29,10 +29,6 @@ import { TimeRange } from '../../utils/datetime';
 import { getDateMsInSeconds } from '../../utils/duration';
 import { localStorageHistogramGuidedTourDoneKey, useLocalStorage } from '../../utils/local-storage-hook';
 import { getFormattedValue } from '../../utils/metrics';
-import { TruncateLength } from '../dropdowns/truncate-dropdown';
-import { GuidedTourHandle } from '../guided-tour/guided-tour';
-import BrushHandleComponent from './brush-handle';
-import './histogram.css';
 import {
   ChartDataPoint,
   Dimensions,
@@ -42,7 +38,11 @@ import {
   observeDimensions,
   toHistogramDatapoints,
   toNamedMetric
-} from './metrics-helper';
+} from '../../utils/metrics-helper';
+import { TruncateLength } from '../dropdowns/truncate-dropdown';
+import { GuidedTourHandle } from '../guided-tour/guided-tour';
+import BrushHandleComponent from './brush-handle';
+import './histogram.css';
 
 export const VoronoiContainer = createContainer('voronoi', 'brush');
 

web/src/components/metrics/metrics-donut.tsx

@@ -6,8 +6,8 @@ import { MetricFunction, MetricType } from '../../model/flow-query';
 import { getStat } from '../../model/metrics';
 import { localStorageOverviewDonutDimensionKey, useLocalStorage } from '../../utils/local-storage-hook';
 import { getFormattedValue, isUnknownPeer } from '../../utils/metrics';
+import { defaultDimensions, Dimensions, observeDimensions } from '../../utils/metrics-helper';
 import './metrics-content.css';
-import { defaultDimensions, Dimensions, observeDimensions } from './metrics-helper';
 
 export interface MetricsDonutProps {
   id: string;

web/src/components/metrics/metrics-graph-total.tsx

@@ -18,16 +18,16 @@ import { GenericMetric, NamedMetric } from '../../api/loki';
 import { MetricFunction, MetricType } from '../../model/flow-query';
 import { localStorageOverviewMetricsTotalDimensionKey, useLocalStorage } from '../../utils/local-storage-hook';
 import { getFormattedValue, isUnknownPeer } from '../../utils/metrics';
-import './metrics-content.css';
 import {
   ChartDataPoint,
-  chartVoronoi,
   defaultDimensions,
   Dimensions,
   LegendDataItem,
   observeDimensions,
   toDatapoints
-} from './metrics-helper';
+} from '../../utils/metrics-helper';
+import { ChartVoronoi } from './chart-voronoi';
+import './metrics-content.css';
 
 export interface MetricsGraphWithTotalProps {
   id: string;
@@ -141,9 +141,9 @@ export const MetricsGraphWithTotal: React.FC<MetricsGraphWithTotalProps> = ({
           <Chart
             themeColor={ChartThemeColor.multiUnordered}
             containerComponent={
-              showLegend
-                ? chartVoronoi(legendData, (v: number) => getFormattedValue(v, metricType, metricFunction, t))
-                : undefined
+              showLegend ? (
+                <ChartVoronoi legendData={legendData} f={v => getFormattedValue(v, metricType, metricFunction, t)} />
+              ) : undefined
             }
             legendData={legendData}
             legendOrientation="horizontal"

web/src/components/metrics/metrics-graph.tsx

@@ -17,16 +17,16 @@ import { GenericMetric, NamedMetric } from '../../api/loki';
 import { MetricFunction, MetricType } from '../../model/flow-query';
 import { localStorageOverviewMetricsDimensionKey, useLocalStorage } from '../../utils/local-storage-hook';
 import { getFormattedValue } from '../../utils/metrics';
-import './metrics-content.css';
 import {
   ChartDataPoint,
-  chartVoronoi,
   defaultDimensions,
   Dimensions,
   LegendDataItem,
   observeDimensions,
   toDatapoints
-} from './metrics-helper';
+} from '../../utils/metrics-helper';
+import { ChartVoronoi } from './chart-voronoi';
+import './metrics-content.css';
 
 export interface MetricsGraphProps {
   id: string;
@@ -105,9 +105,9 @@ export const MetricsGraph: React.FC<MetricsGraphProps> = ({
       <Chart
         themeColor={ChartThemeColor.multiUnordered}
         containerComponent={
-          showLegend
-            ? chartVoronoi(legendData, (v: number) => getFormattedValue(v, metricType, metricFunction, t))
-            : undefined
+          showLegend ? (
+            <ChartVoronoi legendData={legendData} f={v => getFormattedValue(v, metricType, metricFunction, t)} />
+          ) : undefined
         }
         legendData={showLegend ? legendData : undefined}
         legendOrientation={'horizontal'}

web/src/components/modals/export-modal.tsx

@@ -24,8 +24,8 @@ import { FlowQuery } from '../../model/flow-query';
 import { Column, getFullColumnName } from '../../utils/columns';
 import { getTimeRangeOptions, TimeRange } from '../../utils/datetime';
 import { formatDuration, getDateSInMiliseconds } from '../../utils/duration';
+import { getFilterFullName } from '../../utils/filters-helper';
 import { getLocalStorage, localStorageExportColsKey, useLocalStorage } from '../../utils/local-storage-hook';
-import { getFilterFullName } from '../filters/filters-helper';
 import './export-modal.css';
 import Modal from './modal';
 

web/src/components/netflow-overview/netflow-overview.tsx

@@ -19,6 +19,7 @@ import { getStat } from '../../model/metrics';
 import { getDNSErrorDescription, getDNSRcodeDescription } from '../../utils/dns';
 import { getDSCPServiceClassName } from '../../utils/dscp';
 import { localStorageOverviewKebabKey, useLocalStorage } from '../../utils/local-storage-hook';
+import { observeDOMRect, toNamedMetric } from '../../utils/metrics-helper';
 import {
   customPanelMatcher,
   getFunctionFromId,
@@ -37,7 +38,6 @@ import { TruncateLength } from '../dropdowns/truncate-dropdown';
 import { MetricsDonut } from '../metrics/metrics-donut';
 import { MetricsGraph } from '../metrics/metrics-graph';
 import { MetricsGraphWithTotal } from '../metrics/metrics-graph-total';
-import { observeDOMRect, toNamedMetric } from '../metrics/metrics-helper';
 import { NetflowOverviewPanel } from './netflow-overview-panel';
 import './netflow-overview.css';
 import { PanelKebab, PanelKebabOptions } from './panel-kebab';

web/src/components/netflow-topology/element-panel-metrics.tsx

@@ -6,9 +6,9 @@ import { isTimeMetric, MetricType } from '../../model/flow-query';
 import { getStat } from '../../model/metrics';
 import { decorated, NodeData } from '../../model/topology';
 import { matchPeer } from '../../utils/metrics';
+import { toNamedMetric } from '../../utils/metrics-helper';
 import { TruncateLength } from '../dropdowns/truncate-dropdown';
 import { MetricsGraph } from '../metrics/metrics-graph';
-import { toNamedMetric } from '../metrics/metrics-helper';
 import { ElementPanelStats } from './element-panel-stats';
 
 type MetricsRadio = 'in' | 'out' | 'both';

web/src/components/netflow-topology/netflow-topology.tsx

@@ -7,7 +7,7 @@ import { TopologyMetrics } from '../../api/loki';
 import { Filter, FilterDefinition, Filters } from '../../model/filters';
 import { FlowScope, MetricType, StatFunction } from '../../model/flow-query';
 import { GraphElementPeer, LayoutName, TopologyOptions } from '../../model/topology';
-import { observeDOMRect } from '../metrics/metrics-helper';
+import { observeDOMRect } from '../../utils/metrics-helper';
 import { ScopeSlider } from '../scope-slider/scope-slider';
 import { SearchEvent, SearchHandle } from '../search/search';
 import componentFactory from './2d/componentFactories/componentFactory';

web/src/utils/back-and-forth.ts

@@ -1,9 +1,9 @@
 import { FlowMetricsResult, RecordsResult } from '../api/loki';
 import { getFlowMetrics, getFlowRecords } from '../api/routes';
-import { swapFilters } from '../components/filters/filters-helper';
 import { Filter, FilterDefinition, Filters } from '../model/filters';
 import { filtersToString, FlowQuery } from '../model/flow-query';
 import { computeStepInterval, TimeRange } from './datetime';
+import { swapFilters } from './filters-helper';
 import { mergeStats, substractMetrics, sumMetrics } from './metrics';
 
 export const getFetchFunctions = (filterDefinitions: FilterDefinition[], filters: Filters, matchAny: boolean) => {

web/src/components/filters/filters-helper.ts → web/src/utils/filters-helper.ts

@@ -1,6 +1,6 @@
 import { TFunction } from 'i18next';
-import { Filter, FilterDefinition, FilterId } from '../../model/filters';
-import { findFilter } from '../../utils/filter-definitions';
+import { Filter, FilterDefinition, FilterId } from '../model/filters';
+import { findFilter } from './filter-definitions';
 
 export type Indicator = 'default' | 'success' | 'warning' | 'error' | undefined;
 

web/src/components/metrics/metrics-helper.tsx → web/src/utils/metrics-helper.ts

@@ -1,13 +1,13 @@
-import { ChartLegendTooltip, createContainer, getResizeObserver } from '@patternfly/react-charts';
+import { getResizeObserver } from '@patternfly/react-charts';
 import { TFunction } from 'i18next';
 import * as React from 'react';
-import { GenericMetric, NamedMetric, TopologyMetricPeer, TopologyMetrics } from '../../api/loki';
-import { FlowScope } from '../../model/flow-query';
-import { NodeData } from '../../model/topology';
-import { getDateFromUnix, getFormattedDate, TimeRange } from '../../utils/datetime';
-import { getDateSInMiliseconds } from '../../utils/duration';
-import { isUnknownPeer, matchPeer } from '../../utils/metrics';
-import { TruncateLength } from '../dropdowns/truncate-dropdown';
+import { GenericMetric, NamedMetric, TopologyMetricPeer, TopologyMetrics } from '../api/loki';
+import { TruncateLength } from '../components/dropdowns/truncate-dropdown';
+import { FlowScope } from '../model/flow-query';
+import { NodeData } from '../model/topology';
+import { getDateFromUnix, getFormattedDate, TimeRange } from './datetime';
+import { getDateSInMiliseconds } from './duration';
+import { isUnknownPeer, matchPeer } from './metrics';
 
 export type LegendDataItem = {
   childName?: string;
@@ -51,23 +51,6 @@ export const toHistogramDatapoints = (metric: NamedMetric): ChartDataPoint[] =>
   return result;
 };
 
-export const chartVoronoi = (legendData: LegendDataItem[], f: (v: number) => string) => {
-  const CursorVoronoiContainer = createContainer('voronoi', 'cursor');
-  const tooltipData = legendData.map(item => ({ ...item, name: item.tooltipName || item.name }));
-  return (
-    <CursorVoronoiContainer
-      cursorDimension="x"
-      labels={(dp: { datum: ChartDataPoint }) => {
-        return dp.datum.y || dp.datum.y === 0 ? f(dp.datum.y) : 'n/a';
-      }}
-      labelComponent={<ChartLegendTooltip legendData={tooltipData} title={(datum: ChartDataPoint) => datum.date} />}
-      mouseFollowTooltips
-      voronoiDimension="x"
-      voronoiPadding={50}
-    />
-  );
-};
-
 export const getHistogramRangeFromLimit = (totalMetric: NamedMetric, limit: number, start?: number): TimeRange => {
   let limitCount = 0,
     from = 0,