Merge pull request #538 from TackAdam/filterFix

Bugfix: Event Analytics Filters
opensearch-project · Jun 27, 2023 · 220ee69 · 220ee69
2 parents 4ab8089 + 6ff533a
commit 220ee69
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 20 deletions.
diff --git a/public/components/event_analytics/explorer/explorer.tsx b/public/components/event_analytics/explorer/explorer.tsx
@@ -556,7 +556,6 @@ export const Explorer = ({
                     <EuiHorizontalRule margin="xs" />
                     <LogPatterns
                       selectedIntervalUnit={selectedIntervalRef.current}
-                      setTempQuery={setTempQuery}
                       handleTimeRangePickerRefresh={handleTimeRangePickerRefresh}
                     />
                   </>
@@ -727,7 +726,7 @@ export const Explorer = ({
       if (availability !== true) {
         await updateQueryInStore(tempQuery);
       }
-      await fetchData();
+      await fetchData(startTime, endTime);
     },
     [tempQuery, query]
   );

diff --git a/public/components/event_analytics/explorer/log_patterns/log_patterns.tsx b/public/components/event_analytics/explorer/log_patterns/log_patterns.tsx
@@ -4,7 +4,7 @@
  */
 
 import { EuiFlexGroup, EuiFlexItem, EuiHorizontalRule, EuiLink, EuiText } from '@elastic/eui';
-import React, { useContext, useState } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import { connect, useDispatch } from 'react-redux';
 import {
   FILTERED_PATTERN,
@@ -25,15 +25,13 @@ export interface LogPatternProps {
     text: string;
     value: string;
   };
-  setTempQuery: () => string;
   handleTimeRangePickerRefresh: (flag: boolean) => {};
   patterns: PatternTableData[];
   query: IQuery;
 }
 
 const EventPatterns = ({
   selectedIntervalUnit,
-  setTempQuery,
   handleTimeRangePickerRefresh,
   patterns,
   query,
@@ -49,21 +47,35 @@ const EventPatterns = ({
     requestParams: { tabId },
   });
 
+  // refresh patterns on opening page
+  useEffect(() => {
+    getPatterns(selectedIntervalUnit?.value?.replace(/^auto_/, '') || 'y');
+  }, []);
+
   const onPatternSelection = async (pattern: string) => {
     if (query[FILTERED_PATTERN] === pattern) {
       return;
     }
-    dispatch(
+    // await here allows react to render update properly and display it.
+    // it forces the query to be changed before running it, without await the visual wont update.
+    await dispatch(
       changeQuery({
         tabId,
         query: {
           [FILTERED_PATTERN]: pattern,
         },
       })
     );
-    // workaround to refresh callback and trigger fetch data
-    await setTempQuery(query[RAW_QUERY]);
-    await handleTimeRangePickerRefresh(true);
+    handleTimeRangePickerRefresh(true);
+    // after rendering the patterns visual, we want the pattern to be reset for future searches
+    await dispatch(
+      changeQuery({
+        tabId,
+        query: {
+          [FILTERED_PATTERN]: '',
+        },
+      })
+    );
   };
 
   const showToastError = (errorMsg: string) => {

diff --git a/public/services/data_fetchers/ppl/ppl_data_fetcher.ts b/public/services/data_fetchers/ppl/ppl_data_fetcher.ts
@@ -83,7 +83,7 @@ export class PPLDataFetcher extends DataFetcherBase implements IDataFetcher {
     } = this.searchContext;
     const { dispatch, changeQuery } = this.storeContext;
 
-    await this.processTimestamp(query, appBaseQuery);
+    await this.processTimestamp(query);
     if (isEmpty(this.timestamp)) return;
 
     const curStartTime = startingTime || this.query[SELECTED_DATE_RANGE][0];
@@ -103,7 +103,7 @@ export class PPLDataFetcher extends DataFetcherBase implements IDataFetcher {
     );
 
     // update UI with new query state
-    await this.updateQueryState(this.query[RAW_QUERY], finalQuery, this.timestamp, appBaseQuery);
+    await this.updateQueryState(this.query[RAW_QUERY], finalQuery, this.timestamp);
     // calculate proper time interval for count distribution
     if (!selectedInterval.current || selectedInterval.current.text === 'Auto') {
       findAutoInterval(curStartTime, curEndTime);
@@ -158,8 +158,8 @@ export class PPLDataFetcher extends DataFetcherBase implements IDataFetcher {
     }
   }
 
-  async processTimestamp(query: IQuery, appBaseQuery: string) {
-    if (query[SELECTED_TIMESTAMP] && appBaseQuery === '') {
+  async processTimestamp(query: IQuery) {
+    if (query[SELECTED_TIMESTAMP]) {
       this.timestamp = query[SELECTED_TIMESTAMP];
     } else {
       await this.setTimestamp(this.queryIndex);
@@ -175,12 +175,7 @@ export class PPLDataFetcher extends DataFetcherBase implements IDataFetcher {
     return await timestampUtils.getTimestamp(indexPattern);
   }
 
-  async updateQueryState(
-    rawQuery: string,
-    finalQuery: string,
-    curTimestamp: string,
-    appBaseQuery: string
-  ) {
+  async updateQueryState(rawQuery: string, finalQuery: string, curTimestamp: string) {
     const { batch, dispatch, changeQuery, changeVizConfig } = this.storeContext;
     const { query } = this.searchParams;
     const {
@@ -197,7 +192,7 @@ export class PPLDataFetcher extends DataFetcherBase implements IDataFetcher {
           tabId,
           query: {
             finalQuery,
-            [RAW_QUERY]: buildRawQuery(query, appBaseQuery),
+            [RAW_QUERY]: query.rawQuery,
             [SELECTED_TIMESTAMP]: curTimestamp,
           },
         })