diff --git a/x-pack/plugins/ml/public/application/timeseriesexplorer/timeseriesexplorer.js b/x-pack/plugins/ml/public/application/timeseriesexplorer/timeseriesexplorer.js
index c2b806abcf286..b6b63d7713b85 100644
--- a/x-pack/plugins/ml/public/application/timeseriesexplorer/timeseriesexplorer.js
+++ b/x-pack/plugins/ml/public/application/timeseriesexplorer/timeseriesexplorer.js
@@ -33,6 +33,7 @@ import {
EuiBadge,
} from '@elastic/eui';
import { ResizeChecker } from '../../../../../../src/plugins/kibana_utils/public';
+import { TimeSeriesExplorerHelpPopover } from './timeseriesexplorer_help_popover';
import { ANOMALIES_TABLE_DEFAULT_QUERY_SIZE } from '../../../common/constants/search';
import {
@@ -1083,58 +1084,67 @@ export class TimeSeriesExplorer extends React.Component {
hasResults === true && (
-
-
-
- {i18n.translate('xpack.ml.timeSeriesExplorer.singleTimeSeriesAnalysisTitle', {
- defaultMessage: 'Single time series analysis of {functionLabel}',
- values: { functionLabel: chartDetails.functionLabel },
- })}
-
-
- {chartDetails.entityData.count === 1 && (
-
- {chartDetails.entityData.entities.length > 0 && '('}
- {chartDetails.entityData.entities
- .map((entity) => {
- return `${entity.fieldName}: ${entity.fieldValue}`;
- })
- .join(', ')}
- {chartDetails.entityData.entities.length > 0 && ')'}
-
- )}
- {chartDetails.entityData.count !== 1 && (
-
- {chartDetails.entityData.entities.map((countData, i) => {
- return (
-
- {i18n.translate(
- 'xpack.ml.timeSeriesExplorer.countDataInChartDetailsDescription',
- {
- defaultMessage:
- '{openBrace}{cardinalityValue} distinct {fieldName} {cardinality, plural, one {} other { values}}{closeBrace}',
- values: {
- openBrace: i === 0 ? '(' : '',
- closeBrace:
- i === chartDetails.entityData.entities.length - 1 ? ')' : '',
- cardinalityValue:
- countData.cardinality === 0
- ? allValuesLabel
- : countData.cardinality,
- cardinality: countData.cardinality,
- fieldName: countData.fieldName,
- },
- }
- )}
- {i !== chartDetails.entityData.entities.length - 1 ? ', ' : ''}
-
- );
- })}
+
+
+
+
+ {i18n.translate(
+ 'xpack.ml.timeSeriesExplorer.singleTimeSeriesAnalysisTitle',
+ {
+ defaultMessage: 'Single time series analysis of {functionLabel}',
+ values: { functionLabel: chartDetails.functionLabel },
+ }
+ )}
- )}
-
-
-
+
+ {chartDetails.entityData.count === 1 && (
+
+ {chartDetails.entityData.entities.length > 0 && '('}
+ {chartDetails.entityData.entities
+ .map((entity) => {
+ return `${entity.fieldName}: ${entity.fieldValue}`;
+ })
+ .join(', ')}
+ {chartDetails.entityData.entities.length > 0 && ')'}
+
+ )}
+ {chartDetails.entityData.count !== 1 && (
+
+ {chartDetails.entityData.entities.map((countData, i) => {
+ return (
+
+ {i18n.translate(
+ 'xpack.ml.timeSeriesExplorer.countDataInChartDetailsDescription',
+ {
+ defaultMessage:
+ '{openBrace}{cardinalityValue} distinct {fieldName} {cardinality, plural, one {} other { values}}{closeBrace}',
+ values: {
+ openBrace: i === 0 ? '(' : '',
+ closeBrace:
+ i === chartDetails.entityData.entities.length - 1
+ ? ')'
+ : '',
+ cardinalityValue:
+ countData.cardinality === 0
+ ? allValuesLabel
+ : countData.cardinality,
+ cardinality: countData.cardinality,
+ fieldName: countData.fieldName,
+ },
+ }
+ )}
+ {i !== chartDetails.entityData.entities.length - 1 ? ', ' : ''}
+
+ );
+ })}
+
+ )}
+
+
+
+
+
+
{showModelBoundsCheckbox && (
diff --git a/x-pack/plugins/ml/public/application/timeseriesexplorer/timeseriesexplorer_help_popover.tsx b/x-pack/plugins/ml/public/application/timeseriesexplorer/timeseriesexplorer_help_popover.tsx
new file mode 100644
index 0000000000000..59249791f0078
--- /dev/null
+++ b/x-pack/plugins/ml/public/application/timeseriesexplorer/timeseriesexplorer_help_popover.tsx
@@ -0,0 +1,64 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { useState } from 'react';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n/react';
+import { HelpPopover, HelpPopoverButton } from '../components/help_popover/help_popover';
+
+export const TimeSeriesExplorerHelpPopover = () => {
+ const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+
+ return (
+ {
+ setIsPopoverOpen(!isPopoverOpen);
+ }}
+ />
+ }
+ closePopover={() => setIsPopoverOpen(false)}
+ isOpen={isPopoverOpen}
+ title={i18n.translate('xpack.ml.timeSeriesExplorer.popoverTitle', {
+ defaultMessage: 'Single time series analysis',
+ })}
+ >
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};