[release-1.11] NETOBSERV-2566 & NETOBSERV-2604 selecting "either" removes the filter (#1266)

* handle endpoint filters for prometheus only

* improve default filter & direction handling

* Apply suggestion from @jotak

---------

Co-authored-by: Julien Pinsonneau <jpinsonn@redhat.com>
Co-authored-by: Joel Takvorian <joel.takvorian@homeblocks.net>

Author: 3 people

web/src/components/netflow-traffic.tsx

@@ -195,11 +195,12 @@ export const NetflowTraffic: React.FC<NetflowTrafficProps> = ({
   }, [getAvailableColumns]);
 
   const getFilterDefs = React.useCallback(() => {
-    return getFilterDefinitions(model.config.filters, model.config.columns, t).filter(fd => {
+    const allFilterDefs = getFilterDefinitions(model.config.filters, model.config.columns, t);
+    return allFilterDefs.filter(fd => {
       if (fd.id === 'id') {
         return isConnectionTracking();
       }
-      return checkFilterAvailable(fd, model.config, model.dataSource);
+      return checkFilterAvailable(fd, model.config, model.dataSource, allFilterDefs);
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [model.config, model.dataSource]);

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

@@ -64,15 +64,57 @@ export const FiltersToolbar: React.FC<FiltersToolbarProps> = ({
 
   const [searchInputValue, setSearchInputValue] = React.useState('');
 
-  const [direction, setDirection] = React.useState<Direction>();
-  const [filter, setFilter] = React.useState<FilterDefinition | null>(
-    findFilter(filterDefinitions, 'src_namespace') || filterDefinitions.length ? filterDefinitions[0] : null
+  const getDefaultFilter = React.useCallback((defs: FilterDefinition[]): FilterDefinition => {
+    // Parent guarantees non-empty definitions
+    return findFilter(defs, 'src_namespace') || defs[0];
+  }, []);
+
+  const getDefaultDirection = React.useCallback((filter: FilterDefinition): Direction => {
+    // Set direction based on filter's category or id prefix
+    if (filter.category === 'source' || filter.id.startsWith('src_')) {
+      return 'source';
+    } else if (filter.category === 'destination' || filter.id.startsWith('dst_')) {
+      return 'destination';
+    }
+    return undefined;
+  }, []);
+
+  const [filter, setFilter] = React.useState<FilterDefinition>(() => getDefaultFilter(filterDefinitions));
+  const [direction, setDirection] = React.useState<Direction>(() =>
+    getDefaultDirection(getDefaultFilter(filterDefinitions))
   );
   const [compare, setCompare] = React.useState<FilterCompare>(FilterCompare.equal);
   const [value, setValue] = React.useState<string>('');
 
   const [showFilters, setShowFilters] = useLocalStorage<boolean>(localStorageShowFiltersKey, true);
 
+  // Safe filter setter that validates the filter exists in filterDefinitions
+  const setSafeFilter = React.useCallback(
+    (f: FilterDefinition | null | undefined) => {
+      if (!f) {
+        // If null/undefined, use default filter
+        setFilter(getDefaultFilter(filterDefinitions));
+      } else if (filterDefinitions.find(fd => fd.id === f.id)) {
+        // If filter exists in definitions, use it
+        setFilter(f);
+      } else {
+        // If filter doesn't exist, fallback to default
+        setFilter(getDefaultFilter(filterDefinitions));
+      }
+    },
+    [filterDefinitions, getDefaultFilter]
+  );
+
+  // Update filter if filterDefinitions changes and current filter is no longer valid
+  React.useEffect(() => {
+    if (!filterDefinitions.find(fd => fd.id === filter.id)) {
+      const newFilter = getDefaultFilter(filterDefinitions);
+      setFilter(newFilter);
+      // Sync direction with the new filter
+      setDirection(getDefaultDirection(newFilter));
+    }
+  }, [filterDefinitions, filter, getDefaultFilter, getDefaultDirection]);
+
   // reset and delay message state to trigger tooltip properly
   const setMessageWithDelay = React.useCallback(
     (m: string | undefined) => {
@@ -93,9 +135,6 @@ export const FiltersToolbar: React.FC<FiltersToolbarProps> = ({
   }, []);
 
   const getFilterToolbar = React.useCallback(() => {
-    if (!filter) {
-      return <></>;
-    }
     return (
       <ToolbarItem className="flex-start">
         <Tooltip
@@ -118,7 +157,7 @@ export const FiltersToolbar: React.FC<FiltersToolbarProps> = ({
             value={value}
             setValue={setValue}
             setCompare={setCompare}
-            setFilter={setFilter}
+            setFilter={setSafeFilter}
             setDirection={setDirection}
             setIndicator={setIndicator}
             searchInputValue={searchInputValue}
@@ -141,6 +180,7 @@ export const FiltersToolbar: React.FC<FiltersToolbarProps> = ({
     searchInputValue,
     setFilters,
     setMessageWithDelay,
+    setSafeFilter,
     value
   ]);
 

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

@@ -48,7 +48,7 @@ export interface FilterSearchInputProps {
   value: string;
   setValue: (v: string) => void;
   setCompare: (v: FilterCompare) => void;
-  setFilter: (v: FilterDefinition) => void;
+  setFilter: (v: FilterDefinition | null | undefined) => void;
   setDirection: (v: Direction) => void;
   setIndicator: (v: Indicator) => void;
   setSearchInputValue: (v: string) => void;

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

@@ -20,7 +20,7 @@ export interface FilterSearchPanelProps {
   direction: Direction;
   setDirection: (direction: Direction) => void;
   filter: FilterDefinition;
-  setFilter: (filter: FilterDefinition) => void;
+  setFilter: (filter: FilterDefinition | null | undefined) => void;
   filters?: Filters;
   compare: FilterCompare;
   setCompare: (compare: FilterCompare) => void;

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

@@ -16,7 +16,7 @@ export interface FiltersDropdownProps {
   selectedDirection: Direction;
   setSelectedDirection: (v: Direction) => void;
   selectedFilter: FilterDefinition;
-  setSelectedFilter: (f: FilterDefinition) => void;
+  setSelectedFilter: (f: FilterDefinition | null | undefined) => void;
   match?: Match;
 }
 
@@ -79,7 +79,7 @@ export const FiltersDropdown: React.FC<FiltersDropdownProps> = ({
       }
     } else if (selectedFilter.id.startsWith('src_') || selectedFilter.id.startsWith('dst_')) {
       const id = selectedFilter.id.replace('src_', '').replace('dst_', '') as FilterId;
-      setSelectedFilter(findFilter(filterDefinitions, id)!);
+      setSelectedFilter(findFilter(filterDefinitions, id));
     }
   }, [filterDefinitions, selectedDirection, selectedFilter, setSelectedDirection, setSelectedFilter]);
   return (

web/src/utils/__tests__/filter-definitions.spec.ts

@@ -205,3 +205,48 @@ describe('Check availability against features', () => {
     expect(available).toBe(true);
   });
 });
+
+describe('Check endpoint filters availability with Prometheus only', () => {
+  const getConfig = (promLabels: string[], dataSources: string[] = ['prom']): Config => {
+    return { promLabels, dataSources, columns: ColumnConfigSampleDefs, filters: FilterConfigSampleDefs } as Config;
+  };
+
+  it('should be available when both src_ and dst_ variants are available', () => {
+    const namespaceFilter = findFilter(FilterDefinitionSample, 'namespace')!;
+    const nameFilter = findFilter(FilterDefinitionSample, 'name')!;
+
+    // Both src and dst variants have their labels available
+    const available = checkFilterAvailable(
+      namespaceFilter,
+      getConfig(['SrcK8S_Namespace', 'DstK8S_Namespace']),
+      'prom',
+      FilterDefinitionSample
+    );
+    expect(available).toBe(true);
+
+    const nameAvailable = checkFilterAvailable(
+      nameFilter,
+      getConfig(['SrcK8S_Name', 'DstK8S_Name']),
+      'prom',
+      FilterDefinitionSample
+    );
+    expect(nameAvailable).toBe(true);
+  });
+
+  it('should not be available when variants are missing', () => {
+    const namespaceFilter = findFilter(FilterDefinitionSample, 'namespace')!;
+
+    // Neither src_ nor dst_ variant available
+    const available = checkFilterAvailable(namespaceFilter, getConfig([]), 'prom', FilterDefinitionSample);
+    expect(available).toBe(false);
+  });
+
+  it('should be available with Loki enabled', () => {
+    const namespaceFilter = findFilter(FilterDefinitionSample, 'namespace')!;
+
+    // With Loki, endpoint filters follow the default behavior
+    const available = checkFilterAvailable(namespaceFilter, getConfig([], ['loki']), 'auto', FilterDefinitionSample);
+    // Should fall through to default "allow by default" behavior
+    expect(available).toBe(true);
+  });
+});