address feedback

Author: jpinsonneau

web/locales/en/plugin__netobserv-plugin.json

@@ -14,9 +14,9 @@
   "Cluster name": "Cluster name",
   "UDN": "UDN",
   "Can't find metrics for this element. Check your capture filters to ensure we can monitor it. Else it probably means there is no traffic here.": "Can't find metrics for this element. Check your capture filters to ensure we can monitor it. Else it probably means there is no traffic here.",
-  "Peer A": "Peer A",
+  "Endpoint A": "Endpoint A",
   "Source": "Source",
-  "Peer B": "Peer B",
+  "Endpoint B": "Endpoint B",
   "Destination": "Destination",
   "Stats": "Stats",
   "Top 5 DNS latency": "Top 5 DNS latency",
@@ -74,9 +74,9 @@
   "Force": "Force",
   "Grid": "Grid",
   "Invalid": "Invalid",
-  "Any": "Any",
-  "All": "All",
-  "Peers": "Peers",
+  "OR": "OR",
+  "AND": "AND",
+  "Bidirectionnal": "Bidirectionnal",
   "rate": "rate",
   "Average": "Average",
   "Latest": "Latest",
@@ -105,6 +105,7 @@
   "Fully dropped": "Fully dropped",
   "Containing drops": "Containing drops",
   "Without drops": "Without drops",
+  "All": "All",
   "Log type to query. A conversation is an aggregation of flows between same peers. Only ended conversations will appear in Overview and Topology tabs.": "Log type to query. A conversation is an aggregation of flows between same peers. Only ended conversations will appear in Overview and Topology tabs.",
   "Log type": "Log type",
   "Only available when FlowCollector.processor.logTypes option equals \"CONNECTIONS\", \"ENDED_CONNECTIONS\" or \"ALL\"": "Only available when FlowCollector.processor.logTypes option equals \"CONNECTIONS\", \"ENDED_CONNECTIONS\" or \"ALL\"",
@@ -480,12 +481,7 @@
   "Filter": "Filter",
   "Comparator": "Comparator",
   "Add filter": "Add filter",
-  "Peer": "Peer",
-  "When a filter has multiple values, the logical OR operator is used between each of these.": "When a filter has multiple values, the logical OR operator is used between each of these.",
-  "When using match any, the logical OR operator is used between filters.": "When using match any, the logical OR operator is used between filters.",
-  "When using match {{match}}, the logical AND operator is used between filters.": "When using match {{match}}, the logical AND operator is used between filters.",
-  "OR": "OR",
-  "AND": "AND",
+  "Endpoint": "Endpoint",
   "Not": "Not",
   "equals": "equals",
   "more than": "more than",
@@ -495,22 +491,21 @@
   "group filter": "group filter",
   "filter": "filter",
   "Edit": "Edit",
-  "As peer A": "As peer A",
+  "Either": "Either",
+  "As endpoint A": "As endpoint A",
   "As source": "As source",
-  "As peer B": "As peer B",
+  "As endpoint B": "As endpoint B",
   "As destination": "As destination",
   "Remove": "Remove",
-  "Match filters according to your needs.": "Match filters according to your needs.",
-  "Any will match at least one filter": "Any will match at least one filter",
-  "All will match all the filters": "All will match all the filters",
-  "Peers will match all the filters and include the return traffic": "Peers will match all the filters and include the return traffic",
-  "Match": "Match",
+  "the logical OR operator is used between each values of the same filter.": "the logical OR operator is used between each values of the same filter.",
+  "The logical OR operator is used between filters.": "The logical OR operator is used between filters.",
+  "The logical AND operator is used between Endpoints and common filters. The traffic is matched in both directions.": "The logical AND operator is used between Endpoints and common filters. The traffic is matched in both directions.",
+  "The logical AND operator is used between filters keeping specified directions.": "The logical AND operator is used between filters keeping specified directions.",
   "Edit filters": "Edit filters",
   "Reset defaults": "Reset defaults",
   "Clear all": "Clear all",
   "Swap": "Swap",
   "Swap from and to filters": "Swap from and to filters",
-  "Common": "Common",
   "Quick filters": "Quick filters",
   "More options": "More options",
   "Export overview": "Export overview",

web/src/components/drawer/element/element-panel-content.tsx

@@ -157,7 +157,7 @@ export const ElementPanelContent: React.FC<ElementPanelContentProps> = ({
                   isExpanded={!hidden.includes('source')}
                   id={'source'}
                 >
-                  {filters.match === 'peers' ? t('Peer A') : t('Source')}
+                  {filters.match === 'bidirectionnal' ? t('Endpoint A') : t('Source')}
                 </AccordionToggle>
               }
               <AccordionContent
@@ -185,7 +185,7 @@ export const ElementPanelContent: React.FC<ElementPanelContentProps> = ({
                   isExpanded={!hidden.includes('destination')}
                   id={'destination'}
                 >
-                  {filters.match === 'peers' ? t('Peer B') : t('Destination')}
+                  {filters.match === 'bidirectionnal' ? t('Endpoint B') : t('Destination')}
                 </AccordionToggle>
               }
               <AccordionContent

web/src/components/dropdowns/match-dropdown.tsx

@@ -1,42 +1,33 @@
 import { Dropdown, DropdownItem, MenuToggle, MenuToggleElement } from '@patternfly/react-core';
-import { BarsIcon, ListIcon, RouteIcon } from '@patternfly/react-icons';
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Match } from '../../model/flow-query';
 
 export interface MatchDropdownProps {
   selected: Match;
   setMatch: (l: Match) => void;
+  allowBidirectionnal?: boolean;
   id?: string;
 }
 
-export const MatchValues = ['all', 'any', 'peers'] as Match[];
+export const MatchValues = ['any', 'all', 'bidirectionnal'] as Match[];
 
-export const MatchDropdown: React.FC<MatchDropdownProps> = ({ selected, setMatch, id }) => {
+export const MatchDropdown: React.FC<MatchDropdownProps> = ({ allowBidirectionnal, selected, setMatch, id }) => {
   const { t } = useTranslation('plugin__netobserv-plugin');
   const [isOpen, setOpen] = React.useState(false);
 
-  const getMatchDisplay = (layoutName: Match) => {
+  const getMatchDisplay = (layoutName: Match, toggle?: boolean) => {
     switch (layoutName) {
       case 'any':
-        return t('Any');
+        return t('OR');
       case 'all':
-        return t('All');
-      case 'peers':
-        return t('Peers');
-      default:
-        return t('Invalid');
-    }
-  };
-
-  const getIcon = (layoutName: Match) => {
-    switch (layoutName) {
-      case 'any':
-        return <BarsIcon />;
-      case 'all':
-        return <ListIcon />;
-      case 'peers':
-        return <RouteIcon />;
+        return t('AND');
+      case 'bidirectionnal':
+        if (!toggle && allowBidirectionnal) {
+          return t('Bidirectionnal');
+        }
+        // display as AND if bidirectionnal is not allowed here
+        return t('AND');
       default:
         return t('Invalid');
     }
@@ -56,13 +47,11 @@ export const MatchDropdown: React.FC<MatchDropdownProps> = ({ selected, setMatch
           onClick={() => setOpen(!isOpen)}
           onBlur={() => setTimeout(() => setOpen(false), 500)}
         >
-          {getIcon(selected)}
-          &nbsp;
-          {getMatchDisplay(selected)}
+          {getMatchDisplay(selected, true)}
         </MenuToggle>
       )}
     >
-      {MatchValues.map(v => (
+      {MatchValues.filter(v => allowBidirectionnal || v !== 'bidirectionnal').map(v => (
         <DropdownItem
           data-test={v}
           id={v}
@@ -72,8 +61,6 @@ export const MatchDropdown: React.FC<MatchDropdownProps> = ({ selected, setMatch
             setMatch(v);
           }}
         >
-          {getIcon(v)}
-          &nbsp;
           {getMatchDisplay(v)}
         </DropdownItem>
       ))}

web/src/components/netflow-traffic-tab.tsx

@@ -118,7 +118,7 @@ export const NetflowTrafficTab: React.FC<NetflowTrafficTabProps> = ({ match, obj
               values: [{ v: `${obj.kind}.${obj.metadata!.namespace}.${obj.metadata!.name}` }]
             }
           ],
-          match: 'peers'
+          match: 'bidirectionnal'
         });
         break;
       case 'Service':
@@ -156,7 +156,7 @@ export const NetflowTrafficTab: React.FC<NetflowTrafficTabProps> = ({ match, obj
               values: [{ v: obj!.metadata!.name as string }]
             }
           ],
-          match: 'peers'
+          match: 'bidirectionnal'
         });
         break;
       case 'Node':
@@ -168,7 +168,7 @@ export const NetflowTrafficTab: React.FC<NetflowTrafficTabProps> = ({ match, obj
               values: [{ v: obj!.metadata!.name as string }]
             }
           ],
-          match: 'peers'
+          match: 'bidirectionnal'
         });
         break;
       case 'ReplicaSet':
@@ -182,7 +182,7 @@ export const NetflowTrafficTab: React.FC<NetflowTrafficTabProps> = ({ match, obj
               })
             }
           ],
-          match: 'peers'
+          match: 'bidirectionnal'
         });
         break;
       case 'HorizontalPodAutoscaler':
@@ -197,7 +197,7 @@ export const NetflowTrafficTab: React.FC<NetflowTrafficTabProps> = ({ match, obj
               ]
             }
           ],
-          match: 'peers'
+          match: 'bidirectionnal'
         });
         break;
     }

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

@@ -136,15 +136,15 @@ export const NodeDecorators: React.FC<NodeDecoratorsProps> = ({
             <ContextMenuItem key={'src'} onClick={onFilterDirClick('src')}>
               <Checkbox
                 id={'context-src-checkbox'}
-                label={match === 'peers' ? t('Peer A') : t('Source')}
+                label={match === 'bidirectionnal' ? t('Endpoint A') : t('Source')}
                 isChecked={isSrcFiltered}
                 onChange={() => onFilterDirClick('src')}
               />
             </ContextMenuItem>,
             <ContextMenuItem key={'dst'} onClick={onFilterDirClick('dst')}>
               <Checkbox
                 id={'context-dst-checkbox'}
-                label={match === 'peers' ? t('Peer B') : t('Destination')}
+                label={match === 'bidirectionnal' ? t('Endpoint B') : t('Destination')}
                 isChecked={isDstFiltered}
                 onChange={() => onFilterDirClick('dst')}
               />

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

@@ -223,7 +223,7 @@ export const TopologyContent: React.FC<TopologyContentProps> = ({
             false,
             filters.list,
             list => {
-              setFilters({ list: list, match: 'peers' });
+              setFilters({ list: list, match: 'bidirectionnal' });
             },
             filterDefinitions
           );

web/src/components/toolbar/filters/__tests__/filter-search-input.spec.tsx

@@ -52,7 +52,7 @@ describe('<FilterSearchInput />', () => {
 
     //check form content
     const popper = wrapper.find('#filter-popper');
-    expect(popper.find('#direction-filter-toggle').last().text()).toBe('Source');
+    expect(popper.find('#radio-source').last().props().checked).toBe(true);
     expect(popper.find('#column-filter-toggle').last().text()).toBe('Name');
     expect(popper.find('#filter-compare-toggle-button').last().text()).toBe('Equals=');
     expect(popper.find('#search').last().props().value).toBe('loki');

web/src/components/toolbar/filters/filter-search-input.tsx

@@ -137,8 +137,8 @@ export const FilterSearchInput: React.FC<FilterSearchInputProps> = ({
         newFilters.push({ def, compare, values: [filterValue] });
       }
 
-      // force peers mode to have directions set
-      if (filters?.match === 'peers') {
+      // force bidirectionnal mode to have directions set
+      if (filters?.match === 'bidirectionnal') {
         newFilters = setTargeteableFilters(filterDefinitions, newFilters, direction === 'destination' ? 'dst' : 'src');
       }
       setFilters({ ...filters!, list: newFilters });
@@ -343,19 +343,19 @@ export const FilterSearchInput: React.FC<FilterSearchInputProps> = ({
           } else {
             suggestions = suggestions.filter(s => s.value != FilterCompare.moreThanOrEqual);
           }
-          // also suggest other definitions starting by the same id
+          // also suggest other definitions containing the id
           setSuggestions(
             suggestions.concat(
               filterDefinitions
-                .filter(fd => fd.id !== updated.def!.id && fd.id.startsWith(updated.def!.id))
+                .filter(fd => fd.id !== updated.def!.id && fd.id.includes(updated.def!.id))
                 .map(defToSuggestion)
             )
           );
         }
       } else if (updated.value?.length) {
         // suggest fields if def is not matched yet
         const suggestions = filterDefinitions
-          .filter(fd => fd.id.startsWith(updated.value!))
+          .filter(fd => fd.id.includes(updated.value!))
           .map(defToSuggestion) as Suggestion[];
         if (filter.component === 'autocomplete') {
           filter
@@ -495,6 +495,7 @@ export const FilterSearchInput: React.FC<FilterSearchInputProps> = ({
                       setSelectedDirection={setDirection}
                       selectedFilter={filter}
                       setSelectedFilter={setFilter}
+                      match={filters?.match}
                     />
                     <FilterHints def={filter} />
                   </FormGroup>

web/src/components/toolbar/filters/filters-chips.css

@@ -25,11 +25,20 @@
   text-align: center;
 }
 
-.and-or-text {
+.match-dropdown-container {
   align-self: center;
   padding: 0 0.5em 0 0.5em;
 }
 
+.match-dropdown-container>button::before,
+.match-dropdown-container>button::after {
+  display: none;
+}
+
+.match-dropdown-container>button>.pf-v5-c-menu-toggle__controls {
+  padding-left: 0.25em;
+}
+
 .flex-block {
   display: flex;
   flex-wrap: wrap;