[ML] Update callout texts for dashboard, rename file

elastic · Mar 22, 2021 · 8bdd67b · 8bdd67b
1 parent 9019ab6
commit 8bdd67b
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 14 deletions.
diff --git a/x-pack/plugins/ml/public/application/explorer/explorer.js b/x-pack/plugins/ml/public/application/explorer/explorer.js
@@ -63,7 +63,7 @@ import { AnomalyTimeline } from './anomaly_timeline';
 import { FILTER_ACTION } from './explorer_constants';
 
 // Explorer Charts
-import { ExplorerChartsContainer } from './explorer_charts/embeddable_explorer_charts_container';
+import { ExplorerChartsContainer } from './explorer_charts/explorer_charts_container';
 
 // Anomalies Table
 import { AnomaliesTable } from '../components/anomalies_table/anomalies_table';

diff --git a/...on/explorer/explorer_charts_container.tsx → ...r_charts/explorer_anomalies_container.tsx b/...on/explorer/explorer_charts_container.tsx → ...r_charts/explorer_anomalies_container.tsx
@@ -10,16 +10,16 @@ import { i18n } from '@kbn/i18n';
 import React, { FC } from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
 // @ts-ignore
-import { ExplorerChartsContainer } from './explorer_charts/embeddable_explorer_charts_container';
+import { ExplorerChartsContainer } from './explorer_charts_container';
 import {
   SelectSeverityUI,
   TableSeverity,
-} from '../components/controls/select_severity/select_severity';
-import type { UrlGeneratorContract } from '../../../../../../src/plugins/share/public';
-import type { TimeBuckets } from '../util/time_buckets';
-import type { TimefilterContract } from '../../../../../../src/plugins/data/public';
-import type { EntityField } from '../../../common/util/anomaly_utils';
-import type { ExplorerChartsData } from './explorer_charts/explorer_charts_container_service';
+} from '../../components/controls/select_severity/select_severity';
+import type { UrlGeneratorContract } from '../../../../../../../src/plugins/share/public';
+import type { TimeBuckets } from '../../util/time_buckets';
+import type { TimefilterContract } from '../../../../../../../src/plugins/data/public';
+import type { EntityField } from '../../../../common/util/anomaly_utils';
+import type { ExplorerChartsData } from './explorer_charts_container_service';
 
 interface ExplorerAnomaliesContainerProps {
   id: string;
@@ -86,6 +86,7 @@ export const ExplorerAnomaliesContainer: FC<ExplorerAnomaliesContainerProps> = (
               timeBuckets,
               timefilter,
               onSelectEntity,
+              forDashboard: true,
             }}
           />
         )}

diff --git a/...s/embeddable_explorer_charts_container.js → ...lorer_charts/explorer_charts_container.js b/...s/embeddable_explorer_charts_container.js → ...lorer_charts/explorer_charts_container.js
@@ -34,10 +34,20 @@ import { withKibana } from '../../../../../../../src/plugins/kibana_react/public
 import { ML_JOB_AGGREGATION } from '../../../../common/constants/aggregation_types';
 import { ExplorerChartsErrorCallOuts } from './explorer_charts_error_callouts';
 import { addItemToRecentlyAccessed } from '../../util/recently_accessed';
+import { EmbeddedMapComponentWrapper } from './explorer_chart_embedded_map';
 const textTooManyBuckets = i18n.translate('xpack.ml.explorer.charts.tooManyBucketsDescription', {
   defaultMessage:
     'This selection contains too many buckets to be displayed. You should shorten the time range of the view or narrow the selection in the timeline.',
 });
+
+const textTooManyBucketsForDashboard = i18n.translate(
+  'xpack.ml.explorer.charts.dashboardTooManyBucketsDescription',
+  {
+    defaultMessage:
+      'This selection contains too many buckets to be displayed. You should shorten the time range of the view.',
+  }
+);
+
 const textViewButton = i18n.translate(
   'xpack.ml.explorer.charts.openInSingleMetricViewerButtonLabel',
   {
@@ -69,6 +79,7 @@ function ExplorerChartContainer({
   timefilter,
   onSelectEntity,
   recentlyAccessed,
+  forDashboard,
 }) {
   const [explorerSeriesLink, setExplorerSeriesLink] = useState('');
 
@@ -142,7 +153,7 @@ function ExplorerChartContainer({
             {tooManyBuckets && (
               <span className="ml-explorer-chart-icon">
                 <EuiIconTip
-                  content={textTooManyBuckets}
+                  content={forDashboard ? textTooManyBucketsForDashboard : textTooManyBuckets}
                   position="top"
                   size="s"
                   type="alert"
@@ -160,7 +171,6 @@ function ExplorerChartContainer({
                   iconType="visLine"
                   size="xs"
                   href={`${basePath}/app/ml${explorerSeriesLink}`}
-                  // @TODO: renable onClick, remove addToRecentlyAccessed dependency cache
                   onClick={addToRecentlyAccessed}
                 >
                   <FormattedMessage id="xpack.ml.explorer.charts.viewLabel" defaultMessage="View" />
@@ -171,6 +181,19 @@ function ExplorerChartContainer({
         </EuiFlexItem>
       </EuiFlexGroup>
       {(() => {
+        if (chartType === CHART_TYPE.GEO_MAP) {
+          return (
+            <MlTooltipComponent>
+              {(tooltipService) => (
+                <EmbeddedMapComponentWrapper
+                  seriesConfig={series}
+                  tooltipService={tooltipService}
+                />
+              )}
+            </MlTooltipComponent>
+          );
+        }
+
         if (
           chartType === CHART_TYPE.EVENT_DISTRIBUTION ||
           chartType === CHART_TYPE.POPULATION_DISTRIBUTION
@@ -221,6 +244,7 @@ export const ExplorerChartsContainerUI = ({
   timeBuckets,
   timefilter,
   onSelectEntity,
+  forDashboard,
 }) => {
   const {
     services: {
@@ -279,6 +303,7 @@ export const ExplorerChartsContainerUI = ({
                 timefilter={timefilter}
                 onSelectEntity={onSelectEntity}
                 recentlyAccessed={recentlyAccessed}
+                forDashboard={forDashboard}
               />
             </EuiFlexItem>
           ))}

diff --git a/.../plugins/ml/public/application/explorer/explorer_charts/explorer_charts_container.test.js b/.../plugins/ml/public/application/explorer/explorer_charts/explorer_charts_container.test.js
@@ -13,7 +13,7 @@ import { I18nProvider } from '@kbn/i18n/react';
 import { chartLimits } from '../../util/chart_utils';
 
 import { getDefaultChartsData } from './explorer_charts_container_service';
-import { ExplorerChartsContainer } from './embeddable_explorer_charts_container';
+import { ExplorerChartsContainer } from './explorer_charts_container';
 
 import { chartData } from './__mocks__/mock_chart_data';
 import seriesConfig from './__mocks__/mock_series_config_filebeat.json';

diff --git a/...plugins/ml/public/embeddables/anomaly_charts/embeddable_anomaly_charts_container.test.tsx b/...plugins/ml/public/embeddables/anomaly_charts/embeddable_anomaly_charts_container.test.tsx
@@ -19,7 +19,7 @@ import { useAnomalyChartsInputResolver } from './use_anomaly_charts_input_resolv
 import { MlDependencies } from '../../application/app';
 import { TriggerContract } from 'src/plugins/ui_actions/public/triggers';
 import { AnomalyChartsEmbeddableInput, AnomalyChartsServices } from '..';
-import { ExplorerAnomaliesContainer } from '../../application/explorer/explorer_charts_container';
+import { ExplorerAnomaliesContainer } from '../../application/explorer/explorer_charts/explorer_anomalies_container';
 import {
   anomalyDetectorServiceMock,
   anomalyExplorerChartsServiceMock,
@@ -34,7 +34,7 @@ jest.mock('./use_anomaly_charts_input_resolver', () => ({
   }),
 }));
 
-jest.mock('../../application/explorer/explorer_charts_container', () => ({
+jest.mock('../../application/explorer/explorer_charts/explorer_anomalies_container', () => ({
   ExplorerAnomaliesContainer: jest.fn(() => {
     return null;
   }),

diff --git a/x-pack/plugins/ml/public/embeddables/anomaly_charts/embeddable_anomaly_charts_container.tsx b/x-pack/plugins/ml/public/embeddables/anomaly_charts/embeddable_anomaly_charts_container.tsx
@@ -19,7 +19,7 @@ import type {
 } from '..';
 import type { EntityField } from '../../../common/util/anomaly_utils';
 
-import { ExplorerAnomaliesContainer } from '../../application/explorer/explorer_charts_container';
+import { ExplorerAnomaliesContainer } from '../../application/explorer/explorer_charts/explorer_anomalies_container';
 import { ML_APP_URL_GENERATOR } from '../../../common/constants/ml_url_generator';
 import { optionValueToThreshold } from '../../application/components/controls/select_severity/select_severity';
 import { ANOMALY_THRESHOLD } from '../../../common';