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, }, })