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

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

@@ -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/common';
 
 export interface DefaultEditorAggProps extends DefaultEditorAggCommonProps {
   agg: IAggConfig;
@@ -45,6 +46,7 @@ export interface DefaultEditorAggProps extends DefaultEditorAggCommonProps {
   isLastBucket: boolean;
   isRemovable: boolean;
   setAggsState: React.Dispatch<AggsAction>;
+  timeRange?: TimeRange;
 }
 
 function DefaultEditorAgg({
@@ -67,6 +69,7 @@ function DefaultEditorAgg({
   onToggleEnableAgg,
   removeAgg,
   setAggsState,
+  timeRange,
 }: DefaultEditorAggProps) {
   const [isEditorOpen, setIsEditorOpen] = useState((agg as any).brandNew);
   const [validState, setValidState] = useState(true);
@@ -114,6 +117,12 @@ function DefaultEditorAgg({
     }
   }
 
+  // Passed timeRange value is required to update agg.params.timeRange to the actual data,
+  // so makeLabel could return the relevant interval description.
+  useEffect(() => {
+    agg.params.timeRange = timeRange;
+  }, [agg.params.timeRange, timeRange]);
+
   useEffect(() => {
     if (isLastBucketAgg && ['date_histogram', 'histogram'].includes(aggName)) {
       setAggParamValue(

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/common';
 
 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/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>