Move 'show duplicates' from query opts to display opts

Author: jotak

web/locales/en/plugin__netobserv-plugin.json

@@ -108,9 +108,6 @@
   "Datasource": "Datasource",
   "Only available when FlowCollector.prometheus.enable is true for Overview and Topology tabs": "Only available when FlowCollector.prometheus.enable is true for Overview and Topology tabs",
   "Only available when FlowCollector.loki.enable is true": "Only available when FlowCollector.loki.enable is true",
-  "A flow might be reported from several interfaces, and from both source and destination nodes, making it appear several times. By default, duplicates are hidden. Showing duplicates is not possible in Overview and Topology tabs to avoid altering metric calculations. Use the Direction filter to switch between ingress, egress and inner-node traffic.": "A flow might be reported from several interfaces, and from both source and destination nodes, making it appear several times. By default, duplicates are hidden. Showing duplicates is not possible in Overview and Topology tabs to avoid altering metric calculations. Use the Direction filter to switch between ingress, egress and inner-node traffic.",
-  "Duplicated flows": "Duplicated flows",
-  "Show duplicates": "Show duplicates",
   "Whether each query result has to match all the filters or just any of them": "Whether each query result has to match all the filters or just any of them",
   "Match filters": "Match filters",
   "Filter flows by their drop status. Only packets dropped by the kernel are monitored here.": "Filter flows by their drop status. Only packets dropped by the kernel are monitored here.",
@@ -140,6 +137,9 @@
   "Large": "Large",
   "Force table rows to specific sizing.": "Force table rows to specific sizing.",
   "Row size": "Row size",
+  "A flow might be reported from both source and destination nodes, making it appear several times. By default, duplicates are merged, but you can show them in order to get more granular data.": "A flow might be reported from both source and destination nodes, making it appear several times. By default, duplicates are merged, but you can show them in order to get more granular data.",
+  "Duplicated flows": "Duplicated flows",
+  "Show duplicates": "Show duplicates",
   "From": "From",
   "To": "To",
   "Measurement to show as edge labels.": "Measurement to show as edge labels.",

web/src/components/dropdowns/__tests__/query-options-dropdown.spec.tsx

@@ -1,4 +1,4 @@
-import { Checkbox, Radio, Select } from '@patternfly/react-core';
+import { Radio, Select } from '@patternfly/react-core';
 import { shallow } from 'enzyme';
 import * as React from 'react';
 import { act } from 'react-dom/test-utils';
@@ -9,12 +9,10 @@ describe('<QueryOptionsDropdown />', () => {
   const props: QueryOptionsProps = {
     recordType: 'allConnections',
     dataSource: 'auto',
-    showDuplicates: true,
     allowProm: true,
     allowLoki: true,
     allowFlow: true,
     allowConnection: true,
-    allowShowDuplicates: true,
     allowPktDrops: true,
     useTopK: false,
     limit: 100,
@@ -23,7 +21,6 @@ describe('<QueryOptionsDropdown />', () => {
     setLimit: jest.fn(),
     setMatch: jest.fn(),
     setPacketLoss: jest.fn(),
-    setShowDuplicates: jest.fn(),
     setRecordType: jest.fn(),
     setDataSource: jest.fn()
   };
@@ -38,12 +35,10 @@ describe('<QueryOptionsPanel />', () => {
   const props: QueryOptionsProps = {
     recordType: 'allConnections',
     dataSource: 'auto',
-    showDuplicates: true,
     allowProm: true,
     allowLoki: true,
     allowFlow: true,
     allowConnection: true,
-    allowShowDuplicates: true,
     allowPktDrops: true,
     useTopK: false,
     limit: 100,
@@ -52,55 +47,42 @@ describe('<QueryOptionsPanel />', () => {
     setLimit: jest.fn(),
     setMatch: jest.fn(),
     setPacketLoss: jest.fn(),
-    setShowDuplicates: jest.fn(),
     setRecordType: jest.fn(),
     setDataSource: jest.fn()
   };
 
   beforeEach(() => {
     props.setLimit = jest.fn();
-    props.setShowDuplicates = jest.fn();
     props.setMatch = jest.fn();
   });
 
   it('should render component', async () => {
     const wrapper = shallow(<QueryOptionsPanel {...props} />);
-    expect(wrapper.find('.pf-v5-c-menu__group').length).toBe(6);
-    expect(wrapper.find('.pf-v5-c-menu__group-title').length).toBe(6);
+    expect(wrapper.find('.pf-v5-c-menu__group').length).toBe(5);
+    expect(wrapper.find('.pf-v5-c-menu__group-title').length).toBe(5);
     expect(wrapper.find(Radio)).toHaveLength(15);
 
     //setOptions should not be called at startup, because it is supposed to be already initialized from URL
     expect(props.setLimit).toHaveBeenCalledTimes(0);
-    expect(props.setShowDuplicates).toHaveBeenCalledTimes(0);
     expect(props.setMatch).toHaveBeenCalledTimes(0);
   });
 
   it('should set options', async () => {
     const wrapper = shallow(<QueryOptionsPanel {...props} />);
     expect(props.setLimit).toHaveBeenCalledTimes(0);
-    expect(props.setShowDuplicates).toHaveBeenCalledTimes(0);
-    expect(props.setMatch).toHaveBeenCalledTimes(0);
-
-    act(() => {
-      wrapper.find('#show-duplicates').find(Checkbox).props().onChange!({} as React.FormEvent<HTMLInputElement>, true);
-    });
-    expect(props.setLimit).toHaveBeenCalledTimes(0);
-    expect(props.setShowDuplicates).toHaveBeenNthCalledWith(1, false);
     expect(props.setMatch).toHaveBeenCalledTimes(0);
 
     act(() => {
       wrapper.find('#limit-1000').find(Radio).props().onChange!({} as React.FormEvent<HTMLInputElement>, true);
     });
     expect(props.setLimit).toHaveBeenNthCalledWith(1, 1000);
-    expect(props.setShowDuplicates).toHaveBeenNthCalledWith(1, false);
     expect(props.setMatch).toHaveBeenCalledTimes(0);
     wrapper.setProps({ ...props, limit: 1000 });
 
     act(() => {
       wrapper.find('#match-any').find(Radio).props().onChange!({} as React.FormEvent<HTMLInputElement>, true);
     });
     expect(props.setLimit).toHaveBeenNthCalledWith(1, 1000);
-    expect(props.setShowDuplicates).toHaveBeenNthCalledWith(1, false);
     expect(props.setMatch).toHaveBeenNthCalledWith(1, 'any');
   });
 });

web/src/components/dropdowns/__tests__/table-display-dropdown.spec.tsx

@@ -9,7 +9,9 @@ import { TableDisplayOptions } from '../table-display-options';
 describe('<DisplayDropdown />', () => {
   const props = {
     size: 's' as Size,
-    setSize: jest.fn()
+    setSize: jest.fn(),
+    showDuplicates: true,
+    setShowDuplicates: jest.fn()
   };
 
   it('should render component', async () => {

web/src/components/dropdowns/query-options-dropdown.tsx

@@ -11,13 +11,10 @@ export interface QueryOptionsProps {
   setRecordType: (recordType: RecordType) => void;
   dataSource: DataSource;
   setDataSource: (dataSource: DataSource) => void;
-  showDuplicates: boolean;
-  setShowDuplicates: (showDuplicates: boolean) => void;
   allowLoki: boolean;
   allowProm: boolean;
   allowFlow: boolean;
   allowConnection: boolean;
-  allowShowDuplicates: boolean;
   allowPktDrops: boolean;
   useTopK: boolean;
   limit: number;

web/src/components/dropdowns/query-options-panel.tsx

@@ -1,4 +1,4 @@
-import { Checkbox, Radio, Text, TextContent, TextVariants, Tooltip } from '@patternfly/react-core';
+import { Radio, Text, TextContent, TextVariants, Tooltip } from '@patternfly/react-core';
 import { InfoAltIcon } from '@patternfly/react-icons';
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
@@ -20,13 +20,10 @@ export const QueryOptionsPanel: React.FC<QueryOptionsProps> = ({
   setRecordType,
   dataSource,
   setDataSource,
-  showDuplicates,
-  setShowDuplicates,
   allowLoki,
   allowProm,
   allowFlow,
   allowConnection,
-  allowShowDuplicates,
   allowPktDrops,
   useTopK,
   limit,
@@ -201,31 +198,6 @@ export const QueryOptionsPanel: React.FC<QueryOptionsProps> = ({
           );
         })}
       </div>
-      <div className="pf-v5-c-menu__group">
-        <Tooltip
-          content={t(
-            // eslint-disable-next-line max-len
-            'A flow might be reported from several interfaces, and from both source and destination nodes, making it appear several times. By default, duplicates are hidden. Showing duplicates is not possible in Overview and Topology tabs to avoid altering metric calculations. Use the Direction filter to switch between ingress, egress and inner-node traffic.'
-          )}
-        >
-          <div className="pf-v5-c-menu__group-title">
-            <Text component={TextVariants.p}>
-              {t('Duplicated flows')} <InfoAltIcon />
-            </Text>
-          </div>
-        </Tooltip>
-        <label className="display-dropdown-padding pf-v5-c-menu__menu-item">
-          <Checkbox
-            isChecked={allowShowDuplicates ? showDuplicates : false}
-            isDisabled={!allowShowDuplicates}
-            name={'show-duplicates'}
-            onChange={() => setShowDuplicates(!showDuplicates)}
-            label={t('Show duplicates')}
-            data-test={'show-duplicates'}
-            id={'show-duplicates'}
-          />
-        </label>
-      </div>
       <div className="pf-v5-c-menu__group">
         <Tooltip
           content={t(

web/src/components/dropdowns/table-display-dropdown.tsx

@@ -10,9 +10,16 @@ export type Size = 's' | 'm' | 'l';
 export interface TableDisplayDropdownProps {
   size: Size;
   setSize: (v: Size) => void;
+  showDuplicates: boolean;
+  setShowDuplicates: (showDuplicates: boolean) => void;
 }
 
-export const TableDisplayDropdown: React.FC<TableDisplayDropdownProps> = ({ size, setSize }) => {
+export const TableDisplayDropdown: React.FC<TableDisplayDropdownProps> = ({
+  size,
+  setSize,
+  showDuplicates,
+  setShowDuplicates
+}) => {
   const { t } = useTranslation('plugin__netobserv-plugin');
   const ref = useOutsideClickEvent(() => setOpen(false));
   const [isOpen, setOpen] = React.useState<boolean>(false);
@@ -28,7 +35,12 @@ export const TableDisplayDropdown: React.FC<TableDisplayDropdownProps> = ({ size
           </MenuToggle>
         )}
       >
-        <TableDisplayOptions size={size} setSize={setSize} />
+        <TableDisplayOptions
+          size={size}
+          setSize={setSize}
+          showDuplicates={showDuplicates}
+          setShowDuplicates={setShowDuplicates}
+        />
       </Select>
     </div>
   );

web/src/components/dropdowns/table-display-options.tsx

@@ -1,4 +1,4 @@
-import { Radio, Text, TextVariants, Tooltip } from '@patternfly/react-core';
+import { Checkbox, Radio, Text, TextVariants, Tooltip } from '@patternfly/react-core';
 import { InfoAltIcon } from '@patternfly/react-icons';
 import * as _ from 'lodash';
 import * as React from 'react';
@@ -9,9 +9,16 @@ export type Size = 's' | 'm' | 'l';
 export interface TableDisplayOptionsProps {
   size: Size;
   setSize: (v: Size) => void;
+  showDuplicates: boolean;
+  setShowDuplicates: (showDuplicates: boolean) => void;
 }
 
-export const TableDisplayOptions: React.FC<TableDisplayOptionsProps> = ({ size, setSize }) => {
+export const TableDisplayOptions: React.FC<TableDisplayOptionsProps> = ({
+  size,
+  setSize,
+  showDuplicates,
+  setShowDuplicates
+}) => {
   const { t } = useTranslation('plugin__netobserv-plugin');
 
   const sizeOptions = {
@@ -48,6 +55,30 @@ export const TableDisplayOptions: React.FC<TableDisplayOptionsProps> = ({ size,
           );
         })}
       </div>
+      <div className="pf-v5-c-menu__group">
+        <Tooltip
+          content={t(
+            // eslint-disable-next-line max-len
+            'A flow might be reported from both source and destination nodes, making it appear several times. By default, duplicates are merged, but you can show them in order to get more granular data.'
+          )}
+        >
+          <div className="pf-v5-c-menu__group-title">
+            <Text component={TextVariants.p}>
+              {t('Duplicated flows')} <InfoAltIcon />
+            </Text>
+          </div>
+        </Tooltip>
+        <label className="display-dropdown-padding pf-v5-c-menu__menu-item">
+          <Checkbox
+            isChecked={showDuplicates}
+            name={'show-duplicates'}
+            onChange={() => setShowDuplicates(!showDuplicates)}
+            label={t('Show duplicates')}
+            data-test={'show-duplicates'}
+            id={'show-duplicates'}
+          />
+        </label>
+      </div>
     </>
   );
 };

web/src/components/netflow-traffic.tsx

@@ -875,7 +875,6 @@ export const NetflowTraffic: React.FC<NetflowTrafficProps> = ({
                 allowProm: allowProm(),
                 allowFlow: isFlow(),
                 allowConnection: isConnectionTracking(),
-                allowShowDuplicates: model.selectedViewId === 'table' && model.recordType !== 'allConnections',
                 allowPktDrops: isPktDrop(),
                 useTopK: model.selectedViewId === 'overview'
               }}

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

@@ -19,20 +19,17 @@ describe('<FiltersToolbar />', () => {
       limit: 100,
       recordType: 'allConnections',
       dataSource: 'auto',
-      showDuplicates: true,
       allowFlow: true,
       allowConnection: true,
       allowProm: true,
       allowLoki: true,
-      allowShowDuplicates: true,
       allowPktDrops: true,
       useTopK: false,
       match: 'all',
       packetLoss: 'all',
       setLimit: jest.fn(),
       setMatch: jest.fn(),
       setPacketLoss: jest.fn(),
-      setShowDuplicates: jest.fn(),
       setRecordType: jest.fn(),
       setDataSource: jest.fn()
     },

web/src/components/toolbar/view-options-toolbar.tsx

@@ -52,6 +52,8 @@ export interface ViewOptionsToolbarProps {
   scopes: ScopeConfigDef[];
   size: Size;
   setSize: (v: Size) => void;
+  showDuplicates: boolean;
+  setShowDuplicates: (showDuplicates: boolean) => void;
   setSearchEvent: (se: SearchEvent) => void;
   ref?: React.Ref<SearchHandle>;
 }
@@ -253,7 +255,14 @@ export const ViewOptionsToolbar: React.FC<ViewOptionsToolbarProps> = React.forwa
                 scopes={props.scopes}
               />
             )}
-            {props.selectedViewId === 'table' && <TableDisplayDropdown size={props.size} setSize={props.setSize} />}
+            {props.selectedViewId === 'table' && (
+              <TableDisplayDropdown
+                size={props.size}
+                setSize={props.setSize}
+                showDuplicates={props.showDuplicates}
+                setShowDuplicates={props.setShowDuplicates}
+              />
+            )}
             {props.selectedViewId === 'topology' && (
               <TopologyDisplayDropdown
                 metricFunction={props.topologyMetricFunction}