From 82d634c89e9f11cdb4b03ab24277cbe6651d401e Mon Sep 17 00:00:00 2001 From: Derek Ho Date: Wed, 9 Nov 2022 14:09:22 -0500 Subject: [PATCH] fix bug by keeping track of interval within the explorer (#1266) * [2.x] Add log pattern table (#1187) (#1212) Signed-off-by: Joshua Li * Release notes for 2.4.0 (#1259) (#1262) Signed-off-by: Rupal Mahajan (cherry picked from commit eef1979aeb083b25809be2873c76e23f77a22581) Co-authored-by: Rupal Mahajan * fix bug by keeping track of interval within the explorer Signed-off-by: Derek Ho * remove unecessary import Signed-off-by: Derek Ho * fix merge conflicts Signed-off-by: Derek Ho * fix test Signed-off-by: Derek Ho * fix test Signed-off-by: Derek Ho * fix rounding on datemath.parse and get rid of duplicate code Signed-off-by: Derek Ho * address pr review comments Signed-off-by: Derek Ho * replace length check wiht regex Signed-off-by: Derek Ho * resolve merge issues Signed-off-by: Derek Ho Signed-off-by: Joshua Li Signed-off-by: Derek Ho Co-authored-by: Joshua Li Co-authored-by: opensearch-trigger-bot[bot] <98922864+opensearch-trigger-bot[bot]@users.noreply.github.com> Co-authored-by: Rupal Mahajan --- .../config_components/trace_config.tsx | 2 +- .../event_analytics/explorer/explorer.tsx | 31 ++++++++++++------- .../timechart_header.test.tsx.snap | 6 ++-- .../__tests__/timechart_header.test.tsx | 2 +- .../timechart_header/timechart_header.tsx | 14 ++++----- .../event_analytics/utils/index.tsx | 1 - .../event_analytics/utils/utils.tsx | 26 ---------------- .../components/common/helper_functions.tsx | 2 +- .../dashboard/dashboard_content.tsx | 2 +- .../requests/services_request_handler.ts | 2 +- 10 files changed, 34 insertions(+), 54 deletions(-) diff --git a/dashboards-observability/public/components/application_analytics/components/config_components/trace_config.tsx b/dashboards-observability/public/components/application_analytics/components/config_components/trace_config.tsx index e0ff9a1bb..92d0d40bf 100644 --- a/dashboards-observability/public/components/application_analytics/components/config_components/trace_config.tsx +++ b/dashboards-observability/public/components/application_analytics/components/config_components/trace_config.tsx @@ -55,7 +55,7 @@ export const TraceConfig = (props: TraceConfigProps) => { useEffect(() => { setLoading(true); const timeFilterDSL = filtersToDsl([], '', startTime, endTime); - const latencyTrendStartTime = dateMath.parse(endTime)?.subtract(24, 'hours').toISOString()!; + const latencyTrendStartTime = dateMath.parse(endTime, { roundUp: true })?.subtract(24, 'hours').toISOString()!; const latencyTrendDSL = filtersToDsl(filters, query, latencyTrendStartTime, endTime); handleDashboardRequest( http, diff --git a/dashboards-observability/public/components/event_analytics/explorer/explorer.tsx b/dashboards-observability/public/components/event_analytics/explorer/explorer.tsx index 85f29a6d7..1db108a1f 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/explorer.tsx +++ b/dashboards-observability/public/components/event_analytics/explorer/explorer.tsx @@ -182,6 +182,11 @@ export const Explorer = ({ const [browserTabFocus, setBrowserTabFocus] = useState(true); const [liveTimestamp, setLiveTimestamp] = useState(DATE_PICKER_FORMAT); const [triggerAvailability, setTriggerAvailability] = useState(false); + + const selectedIntervalRef = useRef<{ + text: string; + value: string; + }>(); const [viewLogPatterns, setViewLogPatterns] = useState(false); const [spanValue, setSpanValue] = useState(false); const [subType, setSubType] = useState('visualization'); @@ -203,13 +208,11 @@ export const Explorer = ({ liveTailTabIdRef.current = liveTailTabId; liveTailNameRef.current = liveTailName; - let minInterval = 'y'; const findAutoInterval = (start: string = '', end: string = '') => { - if (start?.length === 0 || end?.length === 0 || start === end) - return ['d', [...TIME_INTERVAL_OPTIONS]]; const momentStart = dateMath.parse(start)!; - const momentEnd = dateMath.parse(end)!; + const momentEnd = dateMath.parse(end, { roundUp: true })!; const diffSeconds = momentEnd.unix() - momentStart.unix(); + let minInterval = 'y' // less than 1 second if (diffSeconds <= 1) minInterval = 'ms'; @@ -230,6 +233,7 @@ export const Explorer = ({ { text: 'Auto', value: 'auto_' + minInterval }, ...TIME_INTERVAL_OPTIONS, ]); + selectedIntervalRef.current = ({ text: 'Auto', value: 'auto_' + minInterval }) }; useEffect(() => { @@ -436,18 +440,20 @@ export const Explorer = ({ ); } } else { - findAutoInterval(startTime, endTime); + if (!selectedIntervalRef.current || selectedIntervalRef.current.text === 'Auto') { + findAutoInterval(startingTime, endingTime); + } if (isLiveTailOnRef.current) { getLiveTail(undefined, getErrorHandler('Error fetching events')); } else { getEvents(undefined, getErrorHandler('Error fetching events')); } - getCountVisualizations(minInterval); + getCountVisualizations(selectedIntervalRef.current!.value.replace(/^auto_/, '')); // to fetch patterns data on current query if (!finalQuery.match(PATTERNS_REGEX)) { - getPatterns(minInterval); - } + getPatterns(selectedIntervalRef.current!.value.replace(/^auto_/, '')); + } } // for comparing usage if for the same tab, user changed index from one to another @@ -740,11 +746,14 @@ export const Explorer = ({ { + onChangeInterval={(selectedIntrv) => { + const intervalOptionsIndex = timeIntervalOptions.findIndex(item => item.value === selectedIntrv) + const intrv = selectedIntrv.replace(/^auto_/, '') getCountVisualizations(intrv); + selectedIntervalRef.current = timeIntervalOptions[intervalOptionsIndex] getPatterns(intrv, getErrorHandler('Error fetching patterns')); }} - stateInterval="auto" + stateInterval={selectedIntervalRef.current?.value} /> @@ -1352,7 +1361,7 @@ export const Explorer = ({ setIsLiveTailOn(true); setToast('Live tail On', 'success'); setIsLiveTailPopoverOpen(false); - setLiveTimestamp(dateMath.parse(endingTime)?.utc().format(DATE_PICKER_FORMAT) || ''); + setLiveTimestamp(dateMath.parse(endingTime, { roundUp: true })?.utc().format(DATE_PICKER_FORMAT) || ''); setLiveHits(0); await sleep(2000); const curLiveTailname = liveTailNameRef.current; diff --git a/dashboards-observability/public/components/event_analytics/explorer/timechart_header/__tests__/__snapshots__/timechart_header.test.tsx.snap b/dashboards-observability/public/components/event_analytics/explorer/timechart_header/__tests__/__snapshots__/timechart_header.test.tsx.snap index 9c302d242..7255e68b3 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/timechart_header/__tests__/__snapshots__/timechart_header.test.tsx.snap +++ b/dashboards-observability/public/components/event_analytics/explorer/timechart_header/__tests__/__snapshots__/timechart_header.test.tsx.snap @@ -32,7 +32,7 @@ exports[`Time chart header component Renders Time chart header component 1`] = ` }, ] } - stateInterval="auto" + stateInterval="w" >