Auto interval on date histogram is getting displayed as timestamp per…

src/legacy/core_plugins/vis_default_editor/public/components/agg.tsx

@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useState, useEffect, useCallback, createContext } from 'react';
 import {
   EuiAccordion,
   EuiToolTip,
@@ -34,6 +34,7 @@ import { DefaultEditorAggCommonProps } from './agg_common_props';
 import { AGGS_ACTION_KEYS, AggsAction } from './agg_group_state';
 import { RowsOrColumnsControl } from './controls/rows_or_columns';
 import { RadiusRatioOptionControl } from './controls/radius_ratio_option';
+import { TimeRange } from '../../../../../plugins/data/public';
 
 export interface DefaultEditorAggProps extends DefaultEditorAggCommonProps {
   agg: IAggConfig;
@@ -45,8 +46,11 @@ export interface DefaultEditorAggProps extends DefaultEditorAggCommonProps {
   isLastBucket: boolean;
   isRemovable: boolean;
   setAggsState: React.Dispatch<AggsAction>;
+  timeRange?: TimeRange;
 }
 
+export const DefaultEditorAggParamsContext = createContext({} as any);
+
 function DefaultEditorAgg({
   agg,
   aggIndex,
@@ -67,9 +71,11 @@ function DefaultEditorAgg({
   onToggleEnableAgg,
   removeAgg,
   setAggsState,
+  timeRange,
 }: DefaultEditorAggProps) {
   const [isEditorOpen, setIsEditorOpen] = useState((agg as any).brandNew);
   const [validState, setValidState] = useState(true);
+  const [, setLocalTimeRange] = useState(timeRange);
   const showDescription = !isEditorOpen && validState;
   const showError = !isEditorOpen && !validState;
   const aggName = agg.type?.name;
@@ -114,6 +120,13 @@ function DefaultEditorAgg({
     }
   }
 
+  // This useEffect is required to initiate rerender to keep labels up to date (Issue #57822).
+  useEffect(() => {
+    if (aggName === 'date_histogram') {
+      setLocalTimeRange(timeRange);
+    }
+  }, [aggName, timeRange]);
+
   useEffect(() => {
     if (isLastBucketAgg && ['date_histogram', 'histogram'].includes(aggName)) {
       setAggParamValue(
@@ -288,22 +301,24 @@ function DefaultEditorAgg({
             setStateParamValue={setStateParamValue}
           />
         )}
-        <DefaultEditorAggParams
-          agg={agg}
-          aggError={aggError}
-          aggIndex={aggIndex}
-          aggIsTooLow={aggIsTooLow}
-          disabledParams={disabledParams}
-          formIsTouched={formIsTouched}
-          groupName={groupName}
-          indexPattern={agg.getIndexPattern()}
-          metricAggs={metricAggs}
-          state={state}
-          setAggParamValue={setAggParamValue}
-          onAggTypeChange={onAggTypeChange}
-          setTouched={setTouched}
-          setValidity={setValidity}
-        />
+        <DefaultEditorAggParamsContext.Provider value={timeRange}>
+          <DefaultEditorAggParams
+            agg={agg}
+            aggError={aggError}
+            aggIndex={aggIndex}
+            aggIsTooLow={aggIsTooLow}
+            disabledParams={disabledParams}
+            formIsTouched={formIsTouched}
+            groupName={groupName}
+            indexPattern={agg.getIndexPattern()}
+            metricAggs={metricAggs}
+            state={state}
+            setAggParamValue={setAggParamValue}
+            onAggTypeChange={onAggTypeChange}
+            setTouched={setTouched}
+            setValidity={setValidity}
+          />
+        </DefaultEditorAggParamsContext.Provider>
       </>
     </EuiAccordion>
   );

src/legacy/core_plugins/vis_default_editor/public/components/agg_group.tsx

@@ -41,13 +41,15 @@ import {
   getEnabledMetricAggsCount,
 } from './agg_group_helper';
 import { aggGroupReducer, initAggsState, AGGS_ACTION_KEYS } from './agg_group_state';
+import { TimeRange } from '../../../../../plugins/data/public';
 
 export interface DefaultEditorAggGroupProps extends DefaultEditorAggCommonProps {
   schemas: Schema[];
   addSchema: AddSchema;
   reorderAggs: ReorderAggs;
   setValidity(modelName: string, value: boolean): void;
   setTouched(isTouched: boolean): void;
+  timeRange?: TimeRange;
 }
 
 function DefaultEditorAggGroup({
@@ -66,6 +68,7 @@ function DefaultEditorAggGroup({
   reorderAggs,
   setTouched,
   setValidity,
+  timeRange,
 }: DefaultEditorAggGroupProps) {
   const groupNameLabel = (aggGroupNamesMap() as any)[groupName];
   // e.g. buckets can have no aggs
@@ -179,6 +182,7 @@ function DefaultEditorAggGroup({
                     onToggleEnableAgg={onToggleEnableAgg}
                     removeAgg={removeAgg}
                     setAggsState={setAggsState}
+                    timeRange={timeRange}
                   />
                 )}
               </EuiDraggable>

src/legacy/core_plugins/vis_default_editor/public/components/controls/time_interval.tsx

@@ -18,13 +18,14 @@
  */
 
 import { get, find } from 'lodash';
-import React, { useEffect } from 'react';
+import React, { useContext, useEffect } from 'react';
 import { EuiFormRow, EuiIconTip, EuiComboBox, EuiComboBoxOptionProps } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 
 import { isValidInterval, AggParamOption } from '../../legacy_imports';
 import { AggParamEditorProps } from '../agg_param_props';
+import { DefaultEditorAggParamsContext } from '../agg';
 
 interface ComboBoxOption extends EuiComboBoxOptionProps {
   key: string;
@@ -40,6 +41,7 @@ function TimeIntervalParamEditor({
   setTouched,
   setValidity,
 }: AggParamEditorProps<string>) {
+  const timeRange = useContext(DefaultEditorAggParamsContext);
   const timeBase: string = get(editorConfig, 'interval.timeBase');
   const options = timeBase
     ? []
@@ -118,6 +120,11 @@ function TimeIntervalParamEditor({
     setValidity(isValid);
   }, [isValid]);
 
+  // To update aggConfigs actual timeRange, value of timeRange is set from context.
+  useEffect(() => {
+    agg.aggConfigs.setTimeRange(timeRange);
+  }, [agg.aggConfigs, timeRange]);
+
   return (
     <EuiFormRow
       compressed

src/legacy/core_plugins/vis_default_editor/public/components/sidebar/data_tab.tsx

@@ -40,6 +40,7 @@ import {
   toggleEnabledAgg,
 } from './state';
 import { AddSchema, ReorderAggs, DefaultEditorAggCommonProps } from '../agg_common_props';
+import { TimeRange } from '../../../../../../plugins/data/common';
 
 export interface DefaultEditorDataTabProps {
   dispatch: React.Dispatch<EditorAction>;
@@ -51,6 +52,7 @@ export interface DefaultEditorDataTabProps {
   setTouched(isTouched: boolean): void;
   setValidity(modelName: string, value: boolean): void;
   setStateValue: DefaultEditorAggCommonProps['setStateParamValue'];
+  timeRange: TimeRange;
 }
 
 function DefaultEditorDataTab({
@@ -62,6 +64,7 @@ function DefaultEditorDataTab({
   setTouched,
   setValidity,
   setStateValue,
+  timeRange,
 }: DefaultEditorDataTabProps) {
   const lastParentPipelineAgg = useMemo(
     () =>
@@ -129,6 +132,7 @@ function DefaultEditorDataTab({
         groupName={AggGroupNames.Buckets}
         schemas={schemas.buckets}
         {...commonProps}
+        timeRange={timeRange}
       />
     </>
   );

src/legacy/core_plugins/vis_default_editor/public/components/sidebar/sidebar.tsx

@@ -31,6 +31,7 @@ import { DefaultEditorAggCommonProps } from '../agg_common_props';
 import { SidebarTitle } from './sidebar_title';
 import { SavedSearch } from '../../../../kibana/public/discover/np_ready/types';
 import { PersistedState } from '../../../../../../plugins/visualizations/public';
+import { TimeRange } from '../../../../../../plugins/data/common';
 
 interface DefaultEditorSideBarProps {
   isCollapsed: boolean;
@@ -40,6 +41,7 @@ interface DefaultEditorSideBarProps {
   vis: Vis;
   isLinkedSearch: boolean;
   savedSearch?: SavedSearch;
+  timeRange: TimeRange;
 }
 
 function DefaultEditorSideBar({
@@ -50,6 +52,7 @@ function DefaultEditorSideBar({
   vis,
   isLinkedSearch,
   savedSearch,
+  timeRange,
 }: DefaultEditorSideBarProps) {
   const [selectedTab, setSelectedTab] = useState(optionTabs[0].name);
   const [isDirty, setDirty] = useState(false);
@@ -193,6 +196,7 @@ function DefaultEditorSideBar({
                   <Editor
                     isTabSelected={isTabSelected}
                     {...(name === 'data' ? dataTabProps : optionTabProps)}
+                    timeRange={timeRange}
                   />
                 </div>
               );

src/legacy/core_plugins/vis_default_editor/public/default_editor.tsx

@@ -120,6 +120,7 @@ function DefaultEditor({
           uiState={uiState}
           isLinkedSearch={linked}
           savedSearch={savedSearch}
+          timeRange={timeRange}
         />
       </Panel>
     </PanelsContainer>