Enhancement/3512 refactor use filter manager

CHANGELOG.md

@@ -51,6 +51,7 @@ All notable changes to the Wazuh app project will be documented in this file.
 - Changed ossec to wazuh in sample-data [#3121](https://github.com/wazuh/wazuh-kibana-app/pull/3121)
 - Changed empty fields in FIM tables and `syscheck.value_name` in discovery now show an empty tag for visual clarity [#3279](https://github.com/wazuh/wazuh-kibana-app/pull/3279)
 - Adapted the Mitre tactics and techniques resources to use the API endpoints [#3346](https://github.com/wazuh/wazuh-kibana-app/pull/3346)
+- Moved the filterManager subscription to the hook useFilterManager [#3517](https://github.com/wazuh/wazuh-kibana-app/pull/3517)
 
 ### Fixed
 

public/components/common/hocs/withKibanaContext.tsx

@@ -35,7 +35,7 @@ export interface withKibanaContextExtendsProps {
 export const withKibanaContext = <T extends object>(Component:React.FunctionComponent<T>) => {
   function hoc(props:T & withKibanaContextProps ):React.FunctionComponentElement<T & withKibanaContextExtendsProps> {
     const indexPattern = props.indexPattern ? props.indexPattern : useIndexPattern();
-    const filterManager = props.filterManager ? props.filterManager : useFilterManager();
+    const filterManager = props.filterManager ? props.filterManager : useFilterManager().filterManager;
     const [query, setQuery] = props.query ? useState(props.query) : useQueryManager();
     const { timeFilter, timeHistory, setTimeFilter } = props.timeFilter ? props.timeFilter : useTimeFilter();
     return <Component {...props}

public/components/common/hooks/use-es-search.ts

@@ -13,8 +13,7 @@
 import { SetStateAction, useEffect, useState } from 'react';
 import { getDataPlugin } from '../../../kibana-services';
 import { useFilterManager, useIndexPattern, useQuery } from '.';
-import _ from 'lodash';
-import { Filter, IndexPattern } from 'src/plugins/data/public';
+import { IndexPattern } from 'src/plugins/data/public';
 import {
   UI_ERROR_SEVERITIES,
   UIErrorLog,
@@ -44,10 +43,9 @@ interface IUseEsSearch {
 const useEsSearch = ({ preAppliedFilters = [], preAppliedAggs = {}, size = 10 }): IUseEsSearch => {
   const data = getDataPlugin();
   const indexPattern = useIndexPattern();
-  const filterManager = useFilterManager();
+  const {filters} = useFilterManager();
   const [query] = useQuery();
   const [esResults, setEsResults] = useState<SearchResponse>({} as SearchResponse);
-  const [managedFilters, setManagedFilters] = useState<Filter[] | []>([]);
   const [error, setError] = useState<Error>({} as Error);
   const [isLoading, setIsLoading] = useState<boolean>(true);
   const [page, setPage] = useState<number>(0);
@@ -74,25 +72,13 @@ const useEsSearch = ({ preAppliedFilters = [], preAppliedAggs = {}, size = 10 })
         setIsLoading(false);
       }
     })();
-  }, [indexPattern, query, managedFilters, page]);
-
-  useEffect(() => {
-    let filterSubscriber = filterManager.getUpdates$().subscribe(() => {
-      const newFilters = filterManager.getFilters();
-      if (!_.isEqual(managedFilters, newFilters)) {
-        setManagedFilters(newFilters);
-      }
-      return () => {
-        filterSubscriber.unsubscribe();
-      };
-    });
-  }, []);
+  }, [indexPattern, query, filters, page]);
 
   const search = async (): Promise<SearchResponse> => {
     if (indexPattern) {
       const esQuery = await data.query.getEsQuery(indexPattern as IndexPattern);
       const searchSource = await data.search.searchSource.create();
-      const combined = [...esQuery.bool.filter, ...preAppliedFilters, ...managedFilters];
+      const combined = [...esQuery.bool.filter, ...preAppliedFilters, ...filters];
 
       return await searchSource
         .setParent(undefined)

public/components/common/hooks/use-filter-manager.ts

@@ -10,10 +10,24 @@
  * Find more information about this on the LICENSE file.
  */
 import { getDataPlugin } from '../../../kibana-services';
-import { useState, useEffect} from 'react';
-
+import { useState, useEffect, useMemo } from 'react';
+import { Filter } from 'src/plugins/data/public';
+import _ from 'lodash';
 
 export const useFilterManager = () => {
-    const [filterManager, setFilterManager] = useState(getDataPlugin().query.filterManager);
-    return filterManager;
-}
+  const filterManager = useMemo(() => getDataPlugin().query.filterManager, []);
+  const [filters, setFilters] = useState<Filter[]>([]);
+
+  useEffect(() => {
+    const subscription = filterManager.getUpdates$().subscribe(() => {
+      const newFilters = filterManager.getFilters();
+      if (!_.isEqual(filters, newFilters)) {
+        setFilters(newFilters);
+      }
+    });
+    return () => {
+      subscription.unsubscribe();
+    };
+  }, []);
+  return { filterManager, filters };
+};

public/components/common/modules/panel/main-panel.tsx

@@ -38,7 +38,7 @@ import { getErrorOrchestrator } from '../../../../react-services/common-services
 export const MainPanel = ({ sidePanelChildren, tab = 'general', moduleConfig = {}, ...props }) => {
   const [viewId, setViewId] = useState('main');
   const [selectedFilter, setSelectedFilter] = useState({ field: '', value: '' });
-  const filterManager = useFilterManager();
+  const {filterManager} = useFilterManager();
 
   const buildOverviewVisualization = async () => {
     const tabVisualizations = new TabVisualizations();

public/components/visualize/components/security-alerts.tsx

@@ -16,7 +16,7 @@ import { useAllowedAgents } from '../../common/hooks/useAllowedAgents'
 
 export const SecurityAlerts = ({initialColumns = ["icon", "timestamp", 'rule.mitre.id', 'rule.mitre.tactic', 'rule.description', 'rule.level', 'rule.id']}) => {
  const [query] = useQuery();
- const filterManager = useFilterManager();
+ const {filterManager} = useFilterManager();
  const copyOfFilterManager = filterManager
  const refreshAngularDiscover = useRefreshAngularDiscover();