Respond to dataView changes

elastic · Oct 20, 2022 · 6cdbe6b · 6cdbe6b
1 parent 1007c0b
commit 6cdbe6b
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 4 deletions.
diff --git a/x-pack/plugins/infra/public/containers/logs/log_filter/log_filter_state.ts b/x-pack/plugins/infra/public/containers/logs/log_filter/log_filter_state.ts
@@ -53,7 +53,7 @@ const unsupportedLanguageError = i18n.translate(
   }
 );
 
-export const useLogFilterState = ({ indexPattern }: { indexPattern?: DataViewBase }) => {
+export const useLogFilterState = ({ dataView }: { dataView?: DataViewBase }) => {
   const {
     notifications: { toasts },
     data: {
@@ -83,8 +83,10 @@ export const useLogFilterState = ({ indexPattern }: { indexPattern?: DataViewBas
   }, [logFilterState.validationError, queryString, toasts]);
 
   const parseQuery = useCallback(
-    (filterQuery: Query) => buildEsQuery(indexPattern, filterQuery, [], kibanaQuerySettings),
-    [indexPattern, kibanaQuerySettings]
+    (filterQuery: Query) => {
+      return buildEsQuery(dataView, filterQuery, [], kibanaQuerySettings);
+    },
+    [dataView, kibanaQuerySettings]
   );
 
   const getNewLogFilterState = useCallback(
@@ -132,6 +134,13 @@ export const useLogFilterState = ({ indexPattern }: { indexPattern?: DataViewBas
     }, [getNewLogFilterState, queryString])
   );
 
+  // NOTE: If the dataView changes the query will need to be reparsed and the filter regenerated.
+  useEffect(() => {
+    if (dataView) {
+      setLogFilterState(getNewLogFilterState(queryString.getQuery()));
+    }
+  }, [dataView, getNewLogFilterState, queryString]);
+
   return {
     queryStringQuery: logFilterState.queryStringQuery, // NOTE: Query String Manager query.
     filterQuery: logFilterState.filterQuery, // NOTE: Valid and syntactically correct query applied to requests etc.

diff --git a/x-pack/plugins/infra/public/pages/logs/stream/page_providers.tsx b/x-pack/plugins/infra/public/pages/logs/stream/page_providers.tsx
@@ -27,7 +27,7 @@ const LogFilterState: React.FC = ({ children }) => {
   const { derivedDataView } = useLogViewContext();
 
   return (
-    <LogFilterStateProvider indexPattern={derivedDataView}>
+    <LogFilterStateProvider dataView={derivedDataView}>
       <WithLogFilterUrlState />
       {children}
     </LogFilterStateProvider>