Make it look like other filter menu

(small hack to make PF do what we want)

Author: jotak

web/locales/en/plugin__netobserv-plugin.json

@@ -28,6 +28,8 @@
   "Scope": "Scope",
   "Long labels can reduce visibility.": "Long labels can reduce visibility.",
   "Truncate labels": "Truncate labels",
+  "Long labels can reduce visibility.": "Long labels can reduce visibility.",
+  "Truncate labels": "Truncate labels",
   "Display options": "Display options",
   "Source": "Source",
   "Destination": "Destination",
@@ -167,6 +169,7 @@
   "JSON": "JSON",
   "Kind not managed": "Kind not managed",
   "Unable to get flows": "Unable to get flows",
+  "Name": "Name",
   "Step into this {{name}}": "Step into this {{name}}",
   "Add {{name}} filter": "Add {{name}} filter",
   "Unpin this element": "Unpin this element",
@@ -241,7 +244,6 @@
   "Kubernetes Objects": "Kubernetes Objects",
   "Owner Kubernetes Objects": "Owner Kubernetes Objects",
   "IPs & Ports": "IPs & Ports",
-  "Name": "Name",
   "Kind": "Kind",
   "Owner Kind": "Owner Kind",
   "Port": "Port",

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

@@ -1,11 +1,12 @@
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
-import { OptionsMenu, OptionsMenuItem, OptionsMenuPosition, OptionsMenuToggle } from '@patternfly/react-core';
+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;
@@ -33,19 +34,26 @@ export const SummaryFilterButton: React.FC<SummaryFilterButtonProps> = ({
     isElementFiltered(filterType, fields, dir, activeFilters, t)
   );
 
-  const onSelect = (dir: FilterDir) => {
+  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} isSelected={selected.includes(id)} onSelect={() => onSelect(id)}>
-      {label}
+    <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'))]}