fix bug by keeping track of interval within the explorer

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,

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 = ({
                           <TimechartHeader
                             dateFormat={'MMM D, YYYY @ HH:mm:ss.SSS'}
                             options={timeIntervalOptions}
-                            onChangeInterval={(intrv) => {
+                            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}
                           />
                         </EuiFlexItem>
                       </EuiFlexGroup>
@@ -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;

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"
 >
   <I18nProvider>
     <IntlProvider
@@ -203,7 +203,7 @@ exports[`Time chart header component Renders Time chart header component 1`] = `
                       },
                     ]
                   }
-                  value="m"
+                  value="w"
                 >
                   <EuiFormControlLayout
                     compressed={true}
@@ -231,7 +231,7 @@ exports[`Time chart header component Renders Time chart header component 1`] = `
                             id="dscResultsIntervalSelector"
                             onChange={[Function]}
                             onMouseUp={[Function]}
-                            value="m"
+                            value="w"
                           >
                             <option
                               key="0"

dashboards-observability/public/components/event_analytics/explorer/timechart_header/__tests__/timechart_header.test.tsx

@@ -21,7 +21,7 @@ describe('Time chart header component', () => {
         dateFormat={'MMM D, YYYY @ HH:mm:ss.SSS'}
         onChangeInterval={onChangeInterval}
         options={TIME_INTERVAL_OPTIONS}
-        stateInterval="auto"
+        stateInterval="w"
       />
     );
 

dashboards-observability/public/components/event_analytics/explorer/timechart_header/timechart_header.tsx

@@ -3,11 +3,10 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useState, useEffect, useCallback } from 'react';
+import React from 'react';
 import { EuiFlexGroup, EuiFlexItem, EuiToolTip, EuiText, EuiSelect } from '@elastic/eui';
 import { I18nProvider } from '@osd/i18n/react';
 import { i18n } from '@osd/i18n';
-import moment from 'moment';
 
 export interface TimechartHeaderProps {
   /**
@@ -32,18 +31,17 @@ export interface TimechartHeaderProps {
   /**
    * selected interval
    */
-  stateInterval: string;
+  stateInterval?: string | undefined;
 }
 
 export function TimechartHeader({
   options,
-  onChangeInterval
+  onChangeInterval,
+  stateInterval,
 }: TimechartHeaderProps) {
-  const [interval, setInterval] = useState(options[0].value);
 
   const handleIntervalChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    setInterval(e.target.value);
-    onChangeInterval(e.target.value.length > 2 ? e.target.value.slice(5) : e.target.value);
+    onChangeInterval(e.target.value);
   };
 
   return (
@@ -68,7 +66,7 @@ export function TimechartHeader({
             id="dscResultsIntervalSelector"
             data-test-subj="eventAnalytics__EventIntervalSelect"
             options={options}
-            value={interval}
+            value={stateInterval || options[0].value}
             onChange={handleIntervalChange}
             append={undefined}
           />

dashboards-observability/public/components/event_analytics/utils/index.tsx

@@ -11,6 +11,5 @@ export {
   populateDataGrid,
   isValidTraceId,
   formatError,
-  findAutoInterval,
   getDefaultVisConfig
 } from './utils';

dashboards-observability/public/components/event_analytics/utils/utils.tsx

@@ -279,32 +279,6 @@ export const formatError = (name: string, message: string, details: string) => {
   };
 };
 
-export const findAutoInterval = (start: string = '', end: string = '') => {
-  let minInterval = 'y';
-  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 diffSeconds = momentEnd.unix() - momentStart.unix();
-
-  // less than 1 second
-  if (diffSeconds <= 1) minInterval = 'ms';
-  // less than 2 minutes
-  else if (diffSeconds <= 60 * 2) minInterval = 's';
-  // less than 2 hours
-  else if (diffSeconds <= 3600 * 2) minInterval = 'm';
-  // less than 2 days
-  else if (diffSeconds <= 86400 * 2) minInterval = 'h';
-  // less than 1 month
-  else if (diffSeconds <= 86400 * 31) minInterval = 'd';
-  // less than 3 months
-  else if (diffSeconds <= 86400 * 93) minInterval = 'w';
-  // less than 1 year
-  else if (diffSeconds <= 86400 * 366) minInterval = 'M';
-
-  return [minInterval, [{ text: 'Auto', value: 'auto_' + minInterval }, ...TIME_INTERVAL_OPTIONS]];
-};
-
 export const hexToRgb = (
   hex: string = '#3CA1C7',
   opacity: number = 1,

dashboards-observability/public/components/trace_analytics/components/common/helper_functions.tsx

@@ -217,7 +217,7 @@ export function calculateTicks(min: number, max: number, numTicks = 5): number[]
 export const minFixedInterval = (startTime: string, endTime: string) => {
   if (startTime?.length === 0 || endTime?.length === 0 || startTime === endTime) return '1d';
   const momentStart = dateMath.parse(startTime)!;
-  const momentEnd = dateMath.parse(endTime)!;
+  const momentEnd = dateMath.parse(endTime, { roundUp: true })!;
   const diffSeconds = momentEnd.unix() - momentStart.unix();
 
   if (diffSeconds <= 1) return '1ms'; // less than 1 second

dashboards-observability/public/components/trace_analytics/components/dashboard/dashboard_content.tsx

@@ -88,7 +88,7 @@ export function DashboardContent(props: DashboardProps) {
     setLoading(true);
     const DSL = filtersToDsl(filters, query, startTime, endTime, page, appConfigs);
     const timeFilterDSL = filtersToDsl([], '', startTime, endTime, page, appConfigs);
-    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,

dashboards-observability/public/components/trace_analytics/requests/services_request_handler.ts

@@ -64,7 +64,7 @@ export const handleServiceMapRequest = async (
   const startTime = DSL.custom?.timeFilter?.[0]?.range?.startTime;
   if (startTime) {
     const gte = dateMath.parse(startTime.gte)!;
-    const lte = dateMath.parse(startTime.lte)!;
+    const lte = dateMath.parse(startTime.lte, { roundUp: true })!;
     minutesInDateRange = lte.diff(gte, 'minutes', true);
   }