Merge pull request #246 from jotak/more-summary-filters

NETOBSERV-474 summary filters by source or dest

Author: jotak

web/locales/en/plugin__netobserv-plugin.json

@@ -172,7 +172,6 @@
   "Unpin this element": "Unpin this element",
   "Pin this element": "Pin this element",
   "Name": "Name",
-  "Node Name": "Node Name",
   "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.",
   "Source to destination:": "Source to destination:",
@@ -182,7 +181,6 @@
   "Both:": "Both:",
   "{{type}} rate": "{{type}} rate",
   "Edge": "Edge",
-  "Unknown": "Unknown",
   "Unable to get topology": "Unable to get topology",
   "Query is slow": "Query is slow",
   "Overview": "Overview",
@@ -233,12 +231,14 @@
   "Query summary": "Query summary",
   "Find in view": "Find in view",
   "External": "External",
+  "Unknown": "Unknown",
   "Names": "Names",
   "Kinds": "Kinds",
   "Owner Kinds": "Owner Kinds",
   "Ports": "Ports",
   "MAC": "MAC",
   "Node IP": "Node IP",
+  "Node Name": "Node Name",
   "Kubernetes Objects": "Kubernetes Objects",
   "Owner Kubernetes Objects": "Owner Kubernetes Objects",
   "IPs & Ports": "IPs & Ports",

web/src/api/loki.ts

@@ -63,15 +63,21 @@ export interface RawTopologyMetrics {
   values: [number, unknown][];
 }
 
+export interface NameAndType {
+  name: string;
+  type: string;
+}
+
 export interface TopologyMetricPeer {
+  id: string;
   addr?: string;
-  name?: string;
   namespace?: string;
-  ownerName?: string;
-  ownerType?: string;
-  type?: string;
+  owner?: NameAndType;
+  resource?: NameAndType;
   hostName?: string;
-  displayName?: string;
+  resourceKind?: string;
+  isAmbiguous: boolean;
+  getDisplayName: (inclNamespace: boolean, disambiguate: boolean) => string | undefined;
 }
 
 export type TopologyMetrics = {

web/src/components/filters/summary-filter-button.css

@@ -0,0 +1,3 @@
+.pf-c-options-menu.summary-filter-menu ul {
+  padding-left: 0;
+}

web/src/components/filters/summary-filter-button.tsx

@@ -0,0 +1,65 @@
+import * as React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Checkbox, OptionsMenu, OptionsMenuItem, OptionsMenuPosition, OptionsMenuToggle } from '@patternfly/react-core';
+import { FilterIcon } from '@patternfly/react-icons';
+import { Filter } from '../../model/filters';
+import { FilterDir, isElementFiltered, toggleElementFilter } from '../../model/topology';
+import { TopologyMetricPeer } from '../../api/loki';
+import { NodeType } from '../../model/flow-query';
+import './summary-filter-button.css';
+
+export interface SummaryFilterButtonProps {
+  id: string;
+  filterType: NodeType;
+  fields: Partial<TopologyMetricPeer>;
+  activeFilters: Filter[];
+  setFilters: (filters: Filter[]) => void;
+}
+
+const srcFilter: FilterDir = 'src';
+const dstFilter: FilterDir = 'dst';
+const anyFilter: FilterDir = 'any';
+
+export const SummaryFilterButton: React.FC<SummaryFilterButtonProps> = ({
+  id,
+  filterType,
+  fields,
+  activeFilters,
+  setFilters
+}) => {
+  const { t } = useTranslation('plugin__netobserv-plugin');
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  const selected = [srcFilter, dstFilter, anyFilter].filter(dir =>
+    isElementFiltered(filterType, fields, dir, activeFilters, t)
+  );
+
+  const onSelect = (dir: FilterDir, e: React.BaseSyntheticEvent) => {
+    toggleElementFilter(filterType, fields, dir, selected.includes(dir), activeFilters, setFilters, t);
+    e.preventDefault();
+  };
+
+  const menuItem = (id: FilterDir, label: string) => (
+    <OptionsMenuItem id={id} key={id} onSelect={e => onSelect(id, e!)}>
+      <Checkbox
+        id={id + '-checkbox'}
+        label={label}
+        isChecked={selected.includes(id)}
+        onChange={(_, e) => onSelect(id, e)}
+      />
+    </OptionsMenuItem>
+  );
+
+  return (
+    <OptionsMenu
+      id={id}
+      className={'summary-filter-menu'}
+      data-test={id}
+      toggle={<OptionsMenuToggle toggleTemplate={<FilterIcon />} onToggle={setIsOpen} hideCaret />}
+      menuItems={[menuItem('src', t('Source')), menuItem('dst', t('Destination')), menuItem('any', t('Common'))]}
+      isOpen={isOpen}
+      position={OptionsMenuPosition.right}
+      isPlain
+    />
+  );
+};

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

@@ -5,7 +5,7 @@ import { NamedMetric, TopologyMetricPeer, TopologyMetrics } from '../../api/loki
 import { MetricScope, MetricType } from '../../model/flow-query';
 import { NodeData } from '../../model/topology';
 import { getDateFromUnix, getFormattedDate } from '../../utils/datetime';
-import { getFormattedRateValue, matchPeer } from '../../utils/metrics';
+import { getFormattedRateValue, isUnknownPeer, matchPeer } from '../../utils/metrics';
 import { TruncateLength } from '../dropdowns/truncate-dropdown';
 
 export type LegendDataItem = {
@@ -81,10 +81,13 @@ const getPeerName = (
   t: TFunction,
   peer: TopologyMetricPeer,
   scope: MetricScope,
-  truncateLength: TruncateLength = TruncateLength.OFF
+  truncateLength: TruncateLength,
+  inclNamespace: boolean,
+  disambiguate: boolean
 ): string => {
-  if (peer.displayName) {
-    return truncateParts(peer.displayName, truncateLength);
+  const name = peer.getDisplayName(inclNamespace, disambiguate);
+  if (name) {
+    return truncateParts(name, truncateLength);
   }
   if (scope === 'app') {
     // No peer distinction here
@@ -103,15 +106,17 @@ const getPeerName = (
 export const toNamedMetric = (
   t: TFunction,
   m: TopologyMetrics,
-  data?: NodeData,
-  truncateLength: TruncateLength = TruncateLength.OFF
+  truncateLength: TruncateLength,
+  inclNamespace: boolean,
+  disambiguate: boolean,
+  data?: NodeData
 ): NamedMetric => {
-  const srcName = getPeerName(t, m.source, m.scope, truncateLength);
-  const srcFullName = getPeerName(t, m.source, m.scope);
-  const dstName = getPeerName(t, m.destination, m.scope, truncateLength);
-  const dstFullName = getPeerName(t, m.destination, m.scope);
+  const srcName = getPeerName(t, m.source, m.scope, truncateLength, inclNamespace, disambiguate);
+  const srcFullName = getPeerName(t, m.source, m.scope, TruncateLength.OFF, inclNamespace, disambiguate);
+  const dstName = getPeerName(t, m.destination, m.scope, truncateLength, inclNamespace, disambiguate);
+  const dstFullName = getPeerName(t, m.destination, m.scope, TruncateLength.OFF, inclNamespace, disambiguate);
   if (srcFullName === dstFullName) {
-    if (m.source.displayName) {
+    if (!isUnknownPeer(m.source)) {
       // E.g: namespace "netobserv" to "netobserv"
       return {
         ...m,

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

@@ -15,7 +15,6 @@ import { useTranslation } from 'react-i18next';
 import { TopologyMetrics } from '../../api/loki';
 import { MetricType } from '../../model/flow-query';
 import { getStat } from '../../model/topology';
-import { peersEqual } from '../../utils/metrics';
 import { getOverviewPanelInfo, OverviewPanel, OverviewPanelId } from '../../utils/overview-panels';
 import { TruncateLength } from '../dropdowns/truncate-dropdown';
 import LokiError from '../messages/loki-error';
@@ -101,9 +100,9 @@ export const NetflowOverview: React.FC<NetflowOverviewProps> = ({
   //limit to top X since multiple queries can run in parallel
   const topKMetrics = metrics
     .sort((a, b) => getStat(b.stats, 'sum') - getStat(a.stats, 'sum'))
-    .map(m => toNamedMetric(t, m, undefined, truncateLength));
-  const namedTotalMetric = toNamedMetric(t, totalMetric, undefined, truncateLength);
-  const noInternalTopK = topKMetrics.filter(m => !peersEqual(m.source, m.destination));
+    .map(m => toNamedMetric(t, m, truncateLength, true, true));
+  const namedTotalMetric = toNamedMetric(t, totalMetric, truncateLength, false, false);
+  const noInternalTopK = topKMetrics.filter(m => m.source.id !== m.destination.id);
 
   const smallerTexts = truncateLength >= TruncateLength.M;
 

web/src/components/netflow-topology/2d/styles/styleNode.tsx

@@ -1,3 +1,5 @@
+import * as React from 'react';
+import * as _ from 'lodash';
 import { Tooltip, TooltipPosition } from '@patternfly/react-core';
 import {
   CubeIcon,
@@ -32,8 +34,6 @@ import {
 } from '@patternfly/react-topology';
 import useDetailsLevel from '@patternfly/react-topology/dist/esm/hooks/useDetailsLevel';
 import { TFunction } from 'i18next';
-import * as _ from 'lodash';
-import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Decorated, NodeData } from '../../../../model/topology';
 import BaseNode from '../components/node';
@@ -88,7 +88,7 @@ const renderIcon = (data: Decorated<NodeData>, element: NodePeer): React.ReactNo
   const iconSize =
     (shape === NodeShape.trapezoid ? width : Math.min(width, height)) -
     (shape === NodeShape.stadium ? 5 : ICON_PADDING) * 2;
-  const Component = getTypeIcon(data.resourceKind);
+  const Component = getTypeIcon(data.peer.resourceKind);
 
   return (
     <g transform={`translate(${(width - iconSize) / 2}, ${(height - iconSize) / 2})`}>
@@ -200,21 +200,21 @@ const renderDecorators = (
           element,
           TopologyQuadrant.lowerRight,
           <LevelDownAltIcon />,
-          t('Step into this {{name}}', { name: data.resourceKind?.toLowerCase() }),
+          t('Step into this {{name}}', { name: data.peer.resourceKind?.toLowerCase() }),
           false,
           onStepIntoClick,
           getShapeDecoratorCenter,
           MEDIUM_DECORATOR_PADDING
         )}
-      {(data.namespace || data.name || data.addr || data.host) &&
+      {(data.peer.namespace || data.peer.resource || data.peer.owner || data.peer.addr || data.peer.hostName) &&
         renderClickableDecorator(
           t,
           element,
           TopologyQuadrant.lowerLeft,
           isFiltered ? <TimesIcon /> : <FilterIcon />,
           isFiltered
-            ? t('Remove {{name}} filter', { name: data.resourceKind?.toLowerCase() })
-            : t('Add {{name}} filter', { name: data.resourceKind?.toLowerCase() }),
+            ? t('Remove {{name}} filter', { name: data.peer.resourceKind?.toLowerCase() })
+            : t('Add {{name}} filter', { name: data.peer.resourceKind?.toLowerCase() }),
           isFiltered,
           onFilterClick,
           getShapeDecoratorCenter,

web/src/components/netflow-topology/2d/topology-content.tsx

@@ -164,9 +164,11 @@ export const TopologyContent: React.FC<{
 
   const onFilter = React.useCallback(
     (data: Decorated<ElementData>) => {
-      const isFiltered = isElementFiltered(data, filters, t);
-      toggleElementFilter(data, isFiltered, filters, setFilters, t);
-      setSelectedIds([data.id]);
+      if (data.nodeType && data.peer) {
+        const isFiltered = isElementFiltered(data.nodeType, data.peer, 'any', filters, t);
+        toggleElementFilter(data.nodeType, data.peer, 'any', isFiltered, filters, setFilters, t);
+        setSelectedIds([data.id]);
+      }
     },
     [filters, setFilters, t]
   );

web/src/components/netflow-topology/__tests__/element-panel.spec.tsx

@@ -1,4 +1,4 @@
-import { Button, DrawerCloseButton } from '@patternfly/react-core';
+import { DrawerCloseButton, OptionsMenuToggle } from '@patternfly/react-core';
 import { BaseEdge, BaseNode, NodeModel } from '@patternfly/react-topology';
 import { mount, shallow } from 'enzyme';
 import * as React from 'react';
@@ -8,16 +8,18 @@ import { MetricFunction, MetricScope, MetricType } from '../../../model/flow-que
 import { ElementPanel, ElementPanelDetailsContent, ElementPanelMetricsContent } from '../element-panel';
 import { dataSample } from '../__tests-data__/metrics';
 import { NodeData } from '../../../model/topology';
+import { createPeer } from '../../../utils/metrics';
 import { TruncateLength } from '../../../components/dropdowns/truncate-dropdown';
 
 describe('<ElementPanel />', () => {
   const getNode = (kind: string, name: string, addr: string) => {
     const bn = new BaseNode<NodeModel, NodeData>();
     bn.setData({
       nodeType: 'resource',
-      resourceKind: kind,
-      name,
-      addr
+      peer: createPeer({
+        addr: addr,
+        resource: { name, type: kind }
+      })
     });
     return bn;
   };
@@ -61,7 +63,7 @@ describe('<ElementPanel />', () => {
     expect(wrapper.find(ElementPanelDetailsContent)).toBeTruthy();
 
     //check node infos
-    expect(wrapper.find('#addressValue').last().text()).toBe('10.129.0.15');
+    expect(wrapper.find('#node-info-address').last().text()).toBe('IP10.129.0.15');
 
     //update to edge
     wrapper.setProps({ ...mocks, element: getEdge() });
@@ -87,9 +89,11 @@ describe('<ElementPanel />', () => {
 
   it('should filter <ElementPanelDetailsContent />', async () => {
     const wrapper = mount(<ElementPanelDetailsContent {...mocks} />);
-    const filterButtons = wrapper.find(Button);
+    const ipFilters = wrapper.find(OptionsMenuToggle).last();
     // Two buttons: first for pod filter, second for IP filter
-    filterButtons.last().simulate('click');
+    ipFilters.last().simulate('click');
+    expect(wrapper.find('li').length).toBe(3);
+    wrapper.find('[id="any"]').at(0).simulate('click');
     expect(mocks.setFilters).toHaveBeenCalledWith([
       {
         def: expect.any(Object),

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

@@ -0,0 +1,37 @@
+import { Flex, FlexItem, Text, TextContent, TextVariants } from '@patternfly/react-core';
+import * as React from 'react';
+import { NodeType } from '../../model/flow-query';
+import { TopologyMetricPeer } from '../../api/loki';
+import { Filter } from '../../model/filters';
+import { SummaryFilterButton } from '../filters/summary-filter-button';
+import { PeerResourceLink } from './peer-resource-link';
+
+export const ElementField: React.FC<{
+  id: string;
+  label: string;
+  filterType: NodeType;
+  forcedText?: string;
+  peer: TopologyMetricPeer;
+  activeFilters: Filter[];
+  setFilters: (filters: Filter[]) => void;
+}> = ({ id, label, filterType, forcedText, peer, activeFilters, setFilters }) => {
+  return (
+    <TextContent id={id} className="record-field-container">
+      <Text component={TextVariants.h4}>{label}</Text>
+      <Flex>
+        <FlexItem flex={{ default: 'flex_1' }}>
+          {forcedText ? <Text>{forcedText}</Text> : <PeerResourceLink peer={peer} />}
+        </FlexItem>
+        <FlexItem>
+          <SummaryFilterButton
+            id={id + '-filter'}
+            activeFilters={activeFilters}
+            filterType={filterType}
+            fields={peer}
+            setFilters={setFilters}
+          />
+        </FlexItem>
+      </Flex>
+    </TextContent>
+  );
+};