From b188d51e0e3dc2d508aa7be604bf3a0e63734463 Mon Sep 17 00:00:00 2001
From: Dmitry Tomashevich <39378793+Dmitriynj@users.noreply.github.com>
Date: Thu, 4 Nov 2021 23:34:34 +0300
Subject: [PATCH] [7.16] [Discover] Fix time interval warning (#116606)
 (#117522)

* [Discover] Fix time interval warning (#116606)

* [Discover] fix time interval warning

* [Discover] apply suggestions

* [Discover] return check

* [Discover] fix typo

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
# Conflicts:
#	src/plugins/discover/public/application/apps/main/components/chart/histogram.tsx

* [Discover] fix prettier problem
---
 .../apps/main/components/chart/histogram.tsx  | 57 +++++++++++++++++--
 .../main/components/chart/use_chart_panels.ts | 28 +--------
 2 files changed, 53 insertions(+), 32 deletions(-)

diff --git a/src/plugins/discover/public/application/apps/main/components/chart/histogram.tsx b/src/plugins/discover/public/application/apps/main/components/chart/histogram.tsx
index a04374e1500b4..a0d051b93195a 100644
--- a/src/plugins/discover/public/application/apps/main/components/chart/histogram.tsx
+++ b/src/plugins/discover/public/application/apps/main/components/chart/histogram.tsx
@@ -8,7 +8,14 @@
 import './histogram.scss';
 import moment, { unitOfTime } from 'moment-timezone';
 import React, { useCallback, useMemo } from 'react';
-import { EuiLoadingChart, EuiSpacer, EuiText } from '@elastic/eui';
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiIconTip,
+  EuiLoadingChart,
+  EuiSpacer,
+  EuiText,
+} from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import dateMath from '@elastic/datemath';
 import {
@@ -25,6 +32,7 @@ import {
   XYChartElementEvent,
 } from '@elastic/charts';
 import { IUiSettingsClient } from 'kibana/public';
+import { i18n } from '@kbn/i18n';
 import {
   CurrentTime,
   Endzones,
@@ -64,7 +72,7 @@ export function DiscoverHistogram({
 
   const uiSettings = services.uiSettings;
   const timeZone = getTimezone(uiSettings);
-  const { chartData, fetchStatus } = dataState;
+  const { chartData, fetchStatus, bucketInterval } = dataState;
 
   const onBrushEnd = useCallback(
     ({ x }: XYBrushEvent) => {
@@ -179,6 +187,47 @@ export function DiscoverHistogram({
 
   const xAxisFormatter = services.data.fieldFormats.deserialize(chartData.yAxisFormat);
 
+  const toolTipTitle = i18n.translate('discover.timeIntervalWithValueWarning', {
+    defaultMessage: 'Warning',
+  });
+
+  const toolTipContent = i18n.translate('discover.bucketIntervalTooltip', {
+    defaultMessage:
+      'This interval creates {bucketsDescription} to show in the selected time range, so it has been scaled to {bucketIntervalDescription}.',
+    values: {
+      bucketsDescription:
+        bucketInterval!.scale && bucketInterval!.scale > 1
+          ? i18n.translate('discover.bucketIntervalTooltip.tooLargeBucketsText', {
+              defaultMessage: 'buckets that are too large',
+            })
+          : i18n.translate('discover.bucketIntervalTooltip.tooManyBucketsText', {
+              defaultMessage: 'too many buckets',
+            }),
+      bucketIntervalDescription: bucketInterval?.description,
+    },
+  });
+
+  let timeRange = (
+    <EuiText size="xs" className="dscHistogramTimeRange" textAlign="center">
+      {timeRangeText}
+    </EuiText>
+  );
+  if (bucketInterval?.scaled) {
+    timeRange = (
+      <EuiFlexGroup
+        alignItems="baseline"
+        justifyContent="center"
+        gutterSize="none"
+        responsive={false}
+      >
+        <EuiFlexItem grow={false}>{timeRange}</EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiIconTip type="alert" color="warning" title={toolTipTitle} content={toolTipContent} />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    );
+  }
+
   return (
     <React.Fragment>
       <div className="dscHistogram" data-test-subj="discoverChart" data-time-range={timeRangeText}>
@@ -227,9 +276,7 @@ export function DiscoverHistogram({
           />
         </Chart>
       </div>
-      <EuiText size="xs" className="dscHistogramTimeRange" textAlign="center">
-        {timeRangeText}
-      </EuiText>
+      {timeRange}
     </React.Fragment>
   );
 }
diff --git a/src/plugins/discover/public/application/apps/main/components/chart/use_chart_panels.ts b/src/plugins/discover/public/application/apps/main/components/chart/use_chart_panels.ts
index 72f921bca5f53..3660173ef761d 100644
--- a/src/plugins/discover/public/application/apps/main/components/chart/use_chart_panels.ts
+++ b/src/plugins/discover/public/application/apps/main/components/chart/use_chart_panels.ts
@@ -12,8 +12,7 @@ import type {
 } from '@elastic/eui';
 import { search } from '../../../../../../../data/public';
 import { AppState } from '../../services/discover_state';
-import { DataCharts$, DataChartsMessage } from '../../services/use_saved_search';
-import { useDataState } from '../../utils/use_data_state';
+import { DataCharts$ } from '../../services/use_saved_search';
 
 export function useChartPanels(
   state: AppState,
@@ -22,8 +21,6 @@ export function useChartPanels(
   onChangeInterval: (value: string) => void,
   closePopover: () => void
 ) {
-  const dataState: DataChartsMessage = useDataState(savedSearchDataChart$);
-  const { bucketInterval } = dataState;
   const { interval, hideChart } = state;
   const selectedOptionIdx = search.aggs.intervalOptions.findIndex((opt) => opt.val === interval);
   const intervalDisplay =
@@ -56,29 +53,6 @@ export function useChartPanels(
           timeInterval: intervalDisplay,
         },
       }),
-      icon: bucketInterval?.scaled ? 'alert' : '',
-      toolTipTitle: bucketInterval?.scaled
-        ? i18n.translate('discover.timeIntervalWithValueWarning', {
-            defaultMessage: 'Warning',
-          })
-        : '',
-      toolTipContent: bucketInterval?.scaled
-        ? i18n.translate('discover.bucketIntervalTooltip', {
-            defaultMessage:
-              'This interval creates {bucketsDescription} to show in the selected time range, so it has been scaled to {bucketIntervalDescription}.',
-            values: {
-              bucketsDescription:
-                bucketInterval!.scale && bucketInterval!.scale > 1
-                  ? i18n.translate('discover.bucketIntervalTooltip.tooLargeBucketsText', {
-                      defaultMessage: 'buckets that are too large',
-                    })
-                  : i18n.translate('discover.bucketIntervalTooltip.tooManyBucketsText', {
-                      defaultMessage: 'too many buckets',
-                    }),
-              bucketIntervalDescription: bucketInterval?.description,
-            },
-          })
-        : '',
       panel: 1,
       'data-test-subj': 'discoverTimeIntervalPanel',
     });