[8.8] [ML] Fixing filtering in log pattern analysis flyout (#157530) (#…

…157785)

# Backport

This will backport the following commits from `main` to `8.8`:
- [[ML] Fixing filtering in log pattern analysis flyout
(#157530)](#157530)

<!--- Backport version: 8.9.7 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"James
Gowdy","email":"[email protected]"},"sourceCommit":{"committedDate":"2023-05-15T18:27:33Z","message":"[ML]
Fixing filtering in log pattern analysis flyout (#157530)\n\nFilters are
no longer being picked up by `useData` in the log pattern\r\nanalysis
flyout, this looks like it might be a race condition caused by\r\nthe
`useEffect` which loads the state data.\r\nThis state data will never
change while the flyout is open and so rather\r\nthan using a initial
render `useEffect` the state can be loaded and used\r\nwhen
`aiopsListState` is
initialized.","sha":"b6b03556db65574dbc0f4d2e594f665a2b1dfd26","branchLabelMapping":{"^v8.9.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["bug","non-issue",":ml","release_note:skip","Feature:ML/AIOps","v8.8.0","v8.9.0"],"number":157530,"url":"https://github.com/elastic/kibana/pull/157530","mergeCommit":{"message":"[ML]
Fixing filtering in log pattern analysis flyout (#157530)\n\nFilters are
no longer being picked up by `useData` in the log pattern\r\nanalysis
flyout, this looks like it might be a race condition caused by\r\nthe
`useEffect` which loads the state data.\r\nThis state data will never
change while the flyout is open and so rather\r\nthan using a initial
render `useEffect` the state can be loaded and used\r\nwhen
`aiopsListState` is
initialized.","sha":"b6b03556db65574dbc0f4d2e594f665a2b1dfd26"}},"sourceBranch":"main","suggestedTargetBranches":["8.8"],"targetPullRequestStates":[{"branch":"8.8","label":"v8.8.0","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v8.9.0","labelRegex":"^v8.9.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/157530","number":157530,"mergeCommit":{"message":"[ML]
Fixing filtering in log pattern analysis flyout (#157530)\n\nFilters are
no longer being picked up by `useData` in the log pattern\r\nanalysis
flyout, this looks like it might be a race condition caused by\r\nthe
`useEffect` which loads the state data.\r\nThis state data will never
change while the flyout is open and so rather\r\nthan using a initial
render `useEffect` the state can be loaded and used\r\nwhen
`aiopsListState` is
initialized.","sha":"b6b03556db65574dbc0f4d2e594f665a2b1dfd26"}}]}]
BACKPORT-->

Co-authored-by: James Gowdy <[email protected]>

x-pack/plugins/aiops/public/components/log_categorization/log_categorization_for_flyout.tsx

@@ -4,7 +4,7 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
-import React, { FC, useState, useEffect, useCallback, useRef } from 'react';
+import React, { FC, useState, useEffect, useCallback, useRef, useMemo } from 'react';
 import type { SavedSearch } from '@kbn/discover-plugin/public';
 import type { DataView, DataViewField } from '@kbn/data-views-plugin/public';
 import { i18n } from '@kbn/i18n';
@@ -60,12 +60,15 @@ export const LogCategorizationFlyout: FC<LogCategorizationPageProps> = ({
     uiSettings,
   } = useAiopsAppContext();
   const { euiTheme } = useEuiTheme();
+  const { filters, query } = useMemo(() => getState(), [getState]);
 
   const mounted = useRef(false);
   const { runCategorizeRequest, cancelRequest, randomSampler } = useCategorizeRequest();
-  const [aiopsListState, setAiopsListState] = usePageUrlState<AiOpsPageUrlState>(
+  const [aiopsListState] = usePageUrlState<AiOpsPageUrlState>(
     'AIOPS_INDEX_VIEWER',
-    getDefaultAiOpsListState()
+    getDefaultAiOpsListState({
+      searchQuery: createMergedEsQuery(query, filters, dataView, uiSettings),
+    })
   );
   const [selectedCategory, setSelectedCategory] = useState<Category | null>(null);
   const [selectedSavedSearch /* , setSelectedSavedSearch*/] = useState(savedSearch);
@@ -109,16 +112,6 @@ export const LogCategorizationFlyout: FC<LogCategorizationPageProps> = ({
     true
   );
 
-  useEffect(() => {
-    const { filters, query } = getState();
-
-    setAiopsListState({
-      ...aiopsListState,
-      searchQuery: createMergedEsQuery(query, filters, dataView, uiSettings),
-    });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
   const loadCategories = useCallback(async () => {
     const { title: index, timeFieldName: timeField } = dataView;