diff --git a/public/components/event_analytics/explorer/explorer.tsx b/public/components/event_analytics/explorer/explorer.tsx
index 8541ae2e6..a321b3bee 100644
--- a/public/components/event_analytics/explorer/explorer.tsx
+++ b/public/components/event_analytics/explorer/explorer.tsx
@@ -556,7 +556,6 @@ export const Explorer = ({
>
@@ -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
index 5a149e0c7..2ed2d408f 100644
--- 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,7 +25,6 @@ export interface LogPatternProps {
text: string;
value: string;
};
- setTempQuery: () => string;
handleTimeRangePickerRefresh: (flag: boolean) => {};
patterns: PatternTableData[];
query: IQuery;
@@ -33,7 +32,6 @@ export interface LogPatternProps {
const EventPatterns = ({
selectedIntervalUnit,
- setTempQuery,
handleTimeRangePickerRefresh,
patterns,
query,
@@ -49,11 +47,18 @@ 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: {
@@ -61,9 +66,16 @@ const EventPatterns = ({
},
})
);
- // 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
index 592d8ab2d..68717b74a 100644
--- 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,
},
})