From 479c5ea6f51bfff83f748d1a9b29f28beff0b69b Mon Sep 17 00:00:00 2001
From: James Gowdy <jgowdy@elastic.co>
Date: Mon, 15 May 2023 19:27:33 +0100
Subject: [PATCH] [ML] Fixing filtering in log pattern analysis flyout
 (#157530)

Filters are no longer being picked up by `useData` in the log pattern
analysis flyout, this looks like it might be a race condition caused by
the `useEffect` which loads the state data.
This state data will never change while the flyout is open and so rather
than using a initial render `useEffect` the state can be loaded and used
when `aiopsListState` is initialized.

(cherry picked from commit b6b03556db65574dbc0f4d2e594f665a2b1dfd26)
---
 .../log_categorization_for_flyout.tsx         | 19 ++++++-------------
 1 file changed, 6 insertions(+), 13 deletions(-)

diff --git a/x-pack/plugins/aiops/public/components/log_categorization/log_categorization_for_flyout.tsx b/x-pack/plugins/aiops/public/components/log_categorization/log_categorization_for_flyout.tsx
index 176381f8b92de..ceb0348b4e899 100644
--- a/x-pack/plugins/aiops/public/components/log_categorization/log_categorization_for_flyout.tsx
+++ b/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;