[8.8] [Infrastructure UI] Filter control re-rendering problem fix (#1…

…59320) (#159458) # Backport This will backport the following commits from `main` to `8.8`: - [[Infrastructure UI] Filter control re-rendering problem fix (#159320)](#159320)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Carlos Crespo <[email protected]>
elastic · Jun 12, 2023 · 639d1a3 · 639d1a3
1 parent 197ab14
commit 639d1a3
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 35 deletions.
diff --git a/x-pack/plugins/infra/public/pages/metrics/hosts/components/search_bar/controls_content.tsx b/x-pack/plugins/infra/public/pages/metrics/hosts/components/search_bar/controls_content.tsx
@@ -12,16 +12,15 @@ import {
   type ControlGroupInput,
 } from '@kbn/controls-plugin/public';
 import { ViewMode } from '@kbn/embeddable-plugin/public';
-import { compareFilters, COMPARE_ALL_OPTIONS, Filter, Query, TimeRange } from '@kbn/es-query';
+import type { Filter, Query, TimeRange } from '@kbn/es-query';
 import { DataView } from '@kbn/data-views-plugin/public';
-import { skipWhile, Subscription } from 'rxjs';
+import { Subscription } from 'rxjs';
 import { useControlPanels } from '../../hooks/use_control_panels_url_state';
 
 interface Props {
   dataView: DataView | undefined;
   timeRange: TimeRange;
   filters: Filter[];
-  selectedOptions: Filter[];
   query: Query;
   onFiltersChange: (filters: Filter[]) => void;
 }
@@ -30,13 +29,11 @@ export const ControlsContent: React.FC<Props> = ({
   dataView,
   filters,
   query,
-  selectedOptions,
   timeRange,
   onFiltersChange,
 }) => {
   const [controlPanels, setControlPanels] = useControlPanels(dataView);
-  const inputSubscription = useRef<Subscription>();
-  const filterSubscription = useRef<Subscription>();
+  const subscriptions = useRef<Subscription>(new Subscription());
 
   const getInitialInput = useCallback(async () => {
     const initialInput: Partial<ControlGroupInput> = {
@@ -57,27 +54,24 @@ export const ControlsContent: React.FC<Props> = ({
   const loadCompleteHandler = useCallback(
     (controlGroup: ControlGroupAPI) => {
       if (!controlGroup) return;
-      inputSubscription.current = controlGroup.onFiltersPublished$
-        .pipe(
-          skipWhile((newFilters) =>
-            compareFilters(selectedOptions, newFilters, COMPARE_ALL_OPTIONS)
-          )
-        )
-        .subscribe((newFilters) => {
+
+      subscriptions.current.add(
+        controlGroup.onFiltersPublished$.subscribe((newFilters) => {
           onFiltersChange(newFilters);
-        });
+        })
+      );
 
-      filterSubscription.current = controlGroup
-        .getInput$()
-        .subscribe(({ panels }) => setControlPanels(panels));
+      subscriptions.current.add(
+        controlGroup.getInput$().subscribe(({ panels }) => setControlPanels(panels))
+      );
     },
-    [onFiltersChange, setControlPanels, selectedOptions]
+    [onFiltersChange, setControlPanels]
   );
 
   useEffect(() => {
+    const currentSubscriptions = subscriptions.current;
     return () => {
-      filterSubscription.current?.unsubscribe();
-      inputSubscription.current?.unsubscribe();
+      currentSubscriptions.unsubscribe();
     };
   }, []);
 

diff --git a/x-pack/plugins/infra/public/pages/metrics/hosts/components/search_bar/limit_options.tsx b/x-pack/plugins/infra/public/pages/metrics/hosts/components/search_bar/limit_options.tsx
@@ -27,7 +27,7 @@ interface Props {
 
 export const LimitOptions = ({ limit, onChange }: Props) => {
   const [idSelected, setIdSelected] = useState(limit as number);
-  const onSelected = (value: number) => {
+  const onSelected = (_id: string, value: number) => {
     setIdSelected(value);
     onChange(value);
   };
@@ -70,7 +70,7 @@ export const LimitOptions = ({ limit, onChange }: Props) => {
           })}
           idSelected={buildId(idSelected)}
           options={options}
-          onChange={(_, value: number) => onSelected(value)}
+          onChange={onSelected}
         />
       </EuiFlexItem>
     </EuiFlexGroup>

diff --git a/x-pack/plugins/infra/public/pages/metrics/hosts/components/search_bar/unified_search_bar.tsx b/x-pack/plugins/infra/public/pages/metrics/hosts/components/search_bar/unified_search_bar.tsx
@@ -5,14 +5,8 @@
  * 2.0.
  */
 
-import React, { useMemo } from 'react';
-import {
-  compareFilters,
-  COMPARE_ALL_OPTIONS,
-  type Query,
-  type TimeRange,
-  type Filter,
-} from '@kbn/es-query';
+import React, { useCallback, useMemo } from 'react';
+import type { Query, TimeRange, Filter } from '@kbn/es-query';
 import { i18n } from '@kbn/i18n';
 import {
   EuiFlexGrid,
@@ -43,11 +37,12 @@ export const UnifiedSearchBar = () => {
     onSubmit({ limit });
   };
 
-  const onPanelFiltersChange = (panelFilters: Filter[]) => {
-    if (!compareFilters(searchCriteria.panelFilters, panelFilters, COMPARE_ALL_OPTIONS)) {
+  const onPanelFiltersChange = useCallback(
+    (panelFilters: Filter[]) => {
       onSubmit({ panelFilters });
-    }
-  };
+    },
+    [onSubmit]
+  );
 
   const handleRefresh = (payload: { query?: Query; dateRange: TimeRange }, isUpdate?: boolean) => {
     // This makes sure `onQueryChange` is only called when the submit button is clicked
@@ -84,7 +79,6 @@ export const UnifiedSearchBar = () => {
                 dataView={dataView}
                 query={searchCriteria.query}
                 filters={searchCriteria.filters}
-                selectedOptions={searchCriteria.panelFilters}
                 onFiltersChange={onPanelFiltersChange}
               />
             </EuiFlexItem>