From db63d302fa9fde0d92d45237e257a5dff2e9662a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Manuel=20G=C3=B3mez=20Castro?= Date: Fri, 30 Jul 2021 10:34:58 +0200 Subject: [PATCH 1/7] Changed items currently using useFilterManager to pick a property of an object Switched useState by useMemo in use-filter-manager --- public/components/common/hocs/withKibanaContext.tsx | 2 +- public/components/common/hooks/use-es-search.ts | 2 +- public/components/common/hooks/use-filter-manager.ts | 9 ++++----- public/components/common/modules/panel/main-panel.tsx | 2 +- .../components/visualize/components/security-alerts.tsx | 2 +- 5 files changed, 8 insertions(+), 9 deletions(-) diff --git a/public/components/common/hocs/withKibanaContext.tsx b/public/components/common/hocs/withKibanaContext.tsx index a9669d87f9..e4dbab3ee3 100644 --- a/public/components/common/hocs/withKibanaContext.tsx +++ b/public/components/common/hocs/withKibanaContext.tsx @@ -35,7 +35,7 @@ export interface withKibanaContextExtendsProps { export const withKibanaContext = (Component:React.FunctionComponent) => { function hoc(props:T & withKibanaContextProps ):React.FunctionComponentElement { 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 { const data = getDataPlugin(); const indexPattern = useIndexPattern(); - const filterManager = useFilterManager(); + const {filterManager} = useFilterManager(); const [query] = useQuery(); const [esResults, setEsResults] = useState({} as SearchResponse); const [managedFilters, setManagedFilters] = useState([]); diff --git a/public/components/common/hooks/use-filter-manager.ts b/public/components/common/hooks/use-filter-manager.ts index ba06229b37..ca8a1032bd 100644 --- a/public/components/common/hooks/use-filter-manager.ts +++ b/public/components/common/hooks/use-filter-manager.ts @@ -10,10 +10,9 @@ * 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'; export const useFilterManager = () => { - const [filterManager, setFilterManager] = useState(getDataPlugin().query.filterManager); - return filterManager; -} \ No newline at end of file + const filterManager = useMemo(() => getDataPlugin().query.filterManager, []); + return { filterManager }; +}; diff --git a/public/components/common/modules/panel/main-panel.tsx b/public/components/common/modules/panel/main-panel.tsx index 99ab3131cc..8eeb884de0 100644 --- a/public/components/common/modules/panel/main-panel.tsx +++ b/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(); diff --git a/public/components/visualize/components/security-alerts.tsx b/public/components/visualize/components/security-alerts.tsx index bd2c67bb37..762f51aa61 100644 --- a/public/components/visualize/components/security-alerts.tsx +++ b/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(); From 3c2b218b4054d7f762654bc4f910f00d6251026c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Manuel=20G=C3=B3mez=20Castro?= Date: Thu, 29 Jul 2021 12:33:44 +0200 Subject: [PATCH 2/7] Set useFilterManager to handle its own subscription Removed subscription handling from useEsSearch --- .../components/common/hooks/use-es-search.ts | 22 ++++--------------- .../common/hooks/use-filter-manager.ts | 17 +++++++++++++- 2 files changed, 20 insertions(+), 19 deletions(-) diff --git a/public/components/common/hooks/use-es-search.ts b/public/components/common/hooks/use-es-search.ts index 1858ba24e9..b5fc92afe8 100644 --- a/public/components/common/hooks/use-es-search.ts +++ b/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({} as SearchResponse); - const [managedFilters, setManagedFilters] = useState([]); const [error, setError] = useState({} as Error); const [isLoading, setIsLoading] = useState(true); const [page, setPage] = useState(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 => { 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) diff --git a/public/components/common/hooks/use-filter-manager.ts b/public/components/common/hooks/use-filter-manager.ts index ca8a1032bd..1102ba09b6 100644 --- a/public/components/common/hooks/use-filter-manager.ts +++ b/public/components/common/hooks/use-filter-manager.ts @@ -11,8 +11,23 @@ */ import { getDataPlugin } from '../../../kibana-services'; import { useState, useEffect, useMemo } from 'react'; +import { Filter } from 'src/plugins/data/public'; +import _ from 'lodash'; export const useFilterManager = () => { const filterManager = useMemo(() => getDataPlugin().query.filterManager, []); - return { filterManager }; + const [filters, setFilters] = useState([]) + + useEffect(() => { + let filterSubscriber = filterManager.getUpdates$().subscribe(() => { + const newFilters = filterManager.getFilters(); + if (!_.isEqual(filters, newFilters)) { + setFilters(newFilters); + } + return () => { + filterSubscriber.unsubscribe(); + }; + }); + }, []); + return { filterManager, filters }; }; From 0e2323ea9302ad3b27d1b38c886839b4270e511d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Manuel=20G=C3=B3mez=20Castro?= Date: Thu, 29 Jul 2021 12:42:55 +0200 Subject: [PATCH 3/7] Updated Changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 49128be0ae..96b36af0cd 100644 --- a/CHANGELOG.md +++ b/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 [#3513](https://github.com/wazuh/wazuh-kibana-app/pull/3513) ### Fixed From aa84f6b5a42ce125bf97ec58471d6c9a1c1a619a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Manuel=20G=C3=B3mez=20Castro?= Date: Thu, 29 Jul 2021 16:19:31 +0200 Subject: [PATCH 4/7] Tweaked the unsubscription method --- public/components/common/hooks/use-filter-manager.ts | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/public/components/common/hooks/use-filter-manager.ts b/public/components/common/hooks/use-filter-manager.ts index 1102ba09b6..d9b03540a6 100644 --- a/public/components/common/hooks/use-filter-manager.ts +++ b/public/components/common/hooks/use-filter-manager.ts @@ -16,17 +16,15 @@ import _ from 'lodash'; export const useFilterManager = () => { const filterManager = useMemo(() => getDataPlugin().query.filterManager, []); - const [filters, setFilters] = useState([]) + const [filters, setFilters] = useState([]); useEffect(() => { - let filterSubscriber = filterManager.getUpdates$().subscribe(() => { + const { unsubscribe } = filterManager.getUpdates$().subscribe(() => { const newFilters = filterManager.getFilters(); if (!_.isEqual(filters, newFilters)) { setFilters(newFilters); } - return () => { - filterSubscriber.unsubscribe(); - }; + return unsubscribe; }); }, []); return { filterManager, filters }; From 72619fb46503faad007c6cac94161d7aba2b7c7d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Manuel=20G=C3=B3mez=20Castro?= Date: Thu, 29 Jul 2021 17:08:12 +0200 Subject: [PATCH 5/7] Fixed unsubscription typo and set it to return of useEffect --- public/components/common/hooks/use-filter-manager.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/components/common/hooks/use-filter-manager.ts b/public/components/common/hooks/use-filter-manager.ts index d9b03540a6..7e4d000d41 100644 --- a/public/components/common/hooks/use-filter-manager.ts +++ b/public/components/common/hooks/use-filter-manager.ts @@ -24,8 +24,8 @@ export const useFilterManager = () => { if (!_.isEqual(filters, newFilters)) { setFilters(newFilters); } - return unsubscribe; }); + return unsubscribe; }, []); return { filterManager, filters }; }; From ddc1a99d948f3100157775a4e83b62146a7623dd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Manuel=20G=C3=B3mez=20Castro?= Date: Fri, 30 Jul 2021 10:00:49 +0200 Subject: [PATCH 6/7] Fixed issue with cleanup method --- public/components/common/hooks/use-filter-manager.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/public/components/common/hooks/use-filter-manager.ts b/public/components/common/hooks/use-filter-manager.ts index 7e4d000d41..c18f1a7a00 100644 --- a/public/components/common/hooks/use-filter-manager.ts +++ b/public/components/common/hooks/use-filter-manager.ts @@ -19,13 +19,15 @@ export const useFilterManager = () => { const [filters, setFilters] = useState([]); useEffect(() => { - const { unsubscribe } = filterManager.getUpdates$().subscribe(() => { + const subscription = filterManager.getUpdates$().subscribe(() => { const newFilters = filterManager.getFilters(); if (!_.isEqual(filters, newFilters)) { setFilters(newFilters); } }); - return unsubscribe; + return () => { + subscription.unsubscribe(); + }; }, []); return { filterManager, filters }; }; From ee2c9c7684190dbdd20a94b01268fd561b2542c7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Manuel=20G=C3=B3mez=20Castro?= Date: Fri, 30 Jul 2021 10:42:13 +0200 Subject: [PATCH 7/7] Updated changelog --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 96b36af0cd..36adadce7f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -51,7 +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 [#3513](https://github.com/wazuh/wazuh-kibana-app/pull/3513) +- Moved the filterManager subscription to the hook useFilterManager [#3517](https://github.com/wazuh/wazuh-kibana-app/pull/3517) ### Fixed