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

…159320)

fixes elastic#159317

## Summary

This PR fixes a problem in the utilization of the `ControlGroupRenderer`
component in the Hosts View. The problem originated from the need to
manually compare changes in the `filterPanel` object, to prevent the
page from making duplicate requests

https://github.com/elastic/kibana/assets/2767137/b38f5691-0519-4ae2-aab2-daaf0f72cd0d

After many changes that the code has been through, the comparison
mentioned above has become unnecessary.

### How to test

- Start a local Kibana instance
- Navigate to `Infrastructure > Hosts`
- Play with the filter controls (depending on how fast the user is, it
might hang for a little while, but this won't slow the whole page down)

(cherry picked from commit bcc4f11)

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();
     };
   }, []);
 

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>

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>