From 59dae3defde6b7186be7e6d55b33c25e4e58060b Mon Sep 17 00:00:00 2001
From: Lisa Cawley <lcawley@elastic.co>
Date: Tue, 8 Jun 2021 09:37:50 -0700
Subject: [PATCH] [ML] Add popover help in Single Metric Viewer (#101446)

---
 .../timeseriesexplorer/timeseriesexplorer.js  | 112 ++++++++++--------
 .../timeseriesexplorer_help_popover.tsx       |  64 ++++++++++
 2 files changed, 125 insertions(+), 51 deletions(-)
 create mode 100644 x-pack/plugins/ml/public/application/timeseriesexplorer/timeseriesexplorer_help_popover.tsx

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 && (
             <div>
               <div className="results-container">
-                <EuiTitle className="panel-title">
-                  <h2 style={{ display: 'inline' }}>
-                    <span>
-                      {i18n.translate('xpack.ml.timeSeriesExplorer.singleTimeSeriesAnalysisTitle', {
-                        defaultMessage: 'Single time series analysis of {functionLabel}',
-                        values: { functionLabel: chartDetails.functionLabel },
-                      })}
-                    </span>
-                    &nbsp;
-                    {chartDetails.entityData.count === 1 && (
-                      <span className="entity-count-text">
-                        {chartDetails.entityData.entities.length > 0 && '('}
-                        {chartDetails.entityData.entities
-                          .map((entity) => {
-                            return `${entity.fieldName}: ${entity.fieldValue}`;
-                          })
-                          .join(', ')}
-                        {chartDetails.entityData.entities.length > 0 && ')'}
-                      </span>
-                    )}
-                    {chartDetails.entityData.count !== 1 && (
-                      <span className="entity-count-text">
-                        {chartDetails.entityData.entities.map((countData, i) => {
-                          return (
-                            <Fragment key={countData.fieldName}>
-                              {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 ? ', ' : ''}
-                            </Fragment>
-                          );
-                        })}
+                <EuiFlexGroup gutterSize="xs" alignItems="center">
+                  <EuiTitle className="panel-title">
+                    <h2 style={{ display: 'inline' }}>
+                      <span>
+                        {i18n.translate(
+                          'xpack.ml.timeSeriesExplorer.singleTimeSeriesAnalysisTitle',
+                          {
+                            defaultMessage: 'Single time series analysis of {functionLabel}',
+                            values: { functionLabel: chartDetails.functionLabel },
+                          }
+                        )}
                       </span>
-                    )}
-                  </h2>
-                </EuiTitle>
-
+                      &nbsp;
+                      {chartDetails.entityData.count === 1 && (
+                        <span className="entity-count-text">
+                          {chartDetails.entityData.entities.length > 0 && '('}
+                          {chartDetails.entityData.entities
+                            .map((entity) => {
+                              return `${entity.fieldName}: ${entity.fieldValue}`;
+                            })
+                            .join(', ')}
+                          {chartDetails.entityData.entities.length > 0 && ')'}
+                        </span>
+                      )}
+                      {chartDetails.entityData.count !== 1 && (
+                        <span className="entity-count-text">
+                          {chartDetails.entityData.entities.map((countData, i) => {
+                            return (
+                              <Fragment key={countData.fieldName}>
+                                {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 ? ', ' : ''}
+                              </Fragment>
+                            );
+                          })}
+                        </span>
+                      )}
+                    </h2>
+                  </EuiTitle>
+                  <EuiFlexItem grow={false}>
+                    <TimeSeriesExplorerHelpPopover />
+                  </EuiFlexItem>
+                </EuiFlexGroup>
                 <EuiFlexGroup style={{ float: 'right' }}>
                   {showModelBoundsCheckbox && (
                     <EuiFlexItem grow={false}>
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 (
+    <HelpPopover
+      anchorPosition="upCenter"
+      button={
+        <HelpPopoverButton
+          onClick={() => {
+            setIsPopoverOpen(!isPopoverOpen);
+          }}
+        />
+      }
+      closePopover={() => setIsPopoverOpen(false)}
+      isOpen={isPopoverOpen}
+      title={i18n.translate('xpack.ml.timeSeriesExplorer.popoverTitle', {
+        defaultMessage: 'Single time series analysis',
+      })}
+    >
+      <p>
+        <FormattedMessage
+          id="xpack.ml.timeSeriesExplorer.popoverBasicExplanation"
+          defaultMessage="This chart illustrates the actual data values over time for a specific detector. You can examine an event by sliding the time selector and changing its length. For the most accurate view, set the zoom size to auto."
+        />
+      </p>
+      <p>
+        <FormattedMessage
+          id="xpack.ml.timeSeriesExplorer.popoverAnomalyExplanation"
+          defaultMessage="An anomaly score is calculated for each bucket time interval, with a value from 0 to 100. Anomalous events are highlighted in colors that indicate their severity. If an anomaly is depicted with a cross symbol instead of a dot, it has a medium or high multi-bucket impact. This extra analysis can catch anomalies even when they fall within the bounds of expected behavior."
+        />
+      </p>
+      <p>
+        <FormattedMessage
+          id="xpack.ml.timeSeriesExplorer.popoverForecastExplanation"
+          defaultMessage="If you create a forecast, predicted data values are added to the chart. A shaded area around these values represents the confidence level; as you forecast further into the future, the confidence level generally decreases."
+        />
+      </p>
+      <p>
+        <FormattedMessage
+          id="xpack.ml.timeSeriesExplorer.popoverAnnotationsExplanation"
+          defaultMessage="You can also optionally annotate your job results by drag-selecting a period of time in the chart and adding a description. Some annotations are generated automatically to indicate noteworthy occurrences."
+        />
+      </p>
+      <p>
+        <FormattedMessage
+          id="xpack.ml.timeSeriesExplorer.popoverModelPlotExplanation"
+          defaultMessage="If model plot is enabled, you can optionally show model bounds, which are represented by a shaded area in the chart. As the job analyzes more data, it learns to more closely predict the expected patterns of behavior."
+        />
+      </p>
+    </HelpPopover>
+  );
+};