From e93c6b8d1a187c50867c60fc3a422ff868fbcc62 Mon Sep 17 00:00:00 2001
From: Melissa Alvarez <melissa.alvarez@elastic.co>
Date: Wed, 8 Jan 2020 15:07:14 -0500
Subject: [PATCH] [ML] DF Analytics Results: adds link to docs (#54189)

* add doc links to evaluate panel for analytics jobs

* fix confusion matrix dataGrid label

* internationalize link text
---
 .../evaluate_panel.tsx                        | 55 +++++++++++--------
 .../regression_exploration/evaluate_panel.tsx | 32 ++++++++++-
 2 files changed, 63 insertions(+), 24 deletions(-)

diff --git a/x-pack/legacy/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/classification_exploration/evaluate_panel.tsx b/x-pack/legacy/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/classification_exploration/evaluate_panel.tsx
index 7bb6949db1a99f..68ed2c08d0df18 100644
--- a/x-pack/legacy/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/classification_exploration/evaluate_panel.tsx
+++ b/x-pack/legacy/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/classification_exploration/evaluate_panel.tsx
@@ -8,6 +8,7 @@ import React, { FC, useState, useEffect, Fragment } from 'react';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 import {
+  EuiButtonEmpty,
   EuiDataGrid,
   EuiFlexGroup,
   EuiFlexItem,
@@ -18,6 +19,7 @@ import {
   EuiText,
   EuiTitle,
 } from '@elastic/eui';
+import { metadata } from 'ui/metadata';
 import { ErrorCallout } from '../error_callout';
 import {
   getDependentVar,
@@ -243,7 +245,7 @@ export const EvaluatePanel: FC<Props> = ({ jobConfig, jobStatus, searchQuery })
     <EuiPanel style={{ width: `${panelWidth}px` }}>
       <EuiFlexGroup direction="column" gutterSize="s">
         <EuiFlexItem>
-          <EuiFlexGroup gutterSize="s">
+          <EuiFlexGroup alignItems="center" justifyContent="spaceBetween">
             <EuiFlexItem grow={false}>
               <EuiTitle size="xs">
                 <span>
@@ -260,6 +262,25 @@ export const EvaluatePanel: FC<Props> = ({ jobConfig, jobStatus, searchQuery })
             <EuiFlexItem grow={false}>
               <span>{getTaskStateBadge(jobStatus)}</span>
             </EuiFlexItem>
+            <EuiFlexItem>
+              <EuiSpacer />
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <EuiButtonEmpty
+                target="_blank"
+                iconType="help"
+                iconSide="left"
+                color="primary"
+                href={`https://www.elastic.co/guide/en/machine-learning/${metadata.branch}/ml-dfanalytics-evaluate.html#ml-dfanalytics-classification`}
+              >
+                {i18n.translate(
+                  'xpack.ml.dataframe.analytics.classificationExploration.classificationDocsLink',
+                  {
+                    defaultMessage: 'Classification evaluation docs ',
+                  }
+                )}
+              </EuiButtonEmpty>
+            </EuiFlexItem>
           </EuiFlexGroup>
         </EuiFlexItem>
         {error !== null && (
@@ -327,28 +348,18 @@ export const EvaluatePanel: FC<Props> = ({ jobConfig, jobStatus, searchQuery })
                     <Fragment>
                       <EuiFlexGroup direction="column" justifyContent="center" gutterSize="s">
                         <EuiFlexItem grow={false}>
-                          <EuiFlexGroup>
-                            <EuiFlexItem>
-                              <EuiSpacer />
-                            </EuiFlexItem>
-                            <EuiFlexItem>
-                              <EuiSpacer />
-                            </EuiFlexItem>
-                            <EuiFlexItem>
-                              <EuiFormRow
-                                helpText={i18n.translate(
-                                  'xpack.ml.dataframe.analytics.classificationExploration.confusionMatrixPredictedLabel',
-                                  {
-                                    defaultMessage: 'Predicted label',
-                                  }
-                                )}
-                              >
-                                <Fragment />
-                              </EuiFormRow>
-                            </EuiFlexItem>
-                          </EuiFlexGroup>
+                          <EuiFormRow
+                            helpText={i18n.translate(
+                              'xpack.ml.dataframe.analytics.classificationExploration.confusionMatrixPredictedLabel',
+                              {
+                                defaultMessage: 'Predicted label',
+                              }
+                            )}
+                          >
+                            <Fragment />
+                          </EuiFormRow>
                         </EuiFlexItem>
-                        <EuiFlexItem grow={false} style={{ width: '90%' }}>
+                        <EuiFlexItem grow={false}>
                           <EuiDataGrid
                             aria-label="Data grid demo"
                             columns={columns}
diff --git a/x-pack/legacy/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/regression_exploration/evaluate_panel.tsx b/x-pack/legacy/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/regression_exploration/evaluate_panel.tsx
index a8a015c6ef3455..30744c1a88d830 100644
--- a/x-pack/legacy/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/regression_exploration/evaluate_panel.tsx
+++ b/x-pack/legacy/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/regression_exploration/evaluate_panel.tsx
@@ -7,7 +7,16 @@
 import React, { FC, Fragment, useEffect, useState } from 'react';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
-import { EuiFlexGroup, EuiFlexItem, EuiPanel, EuiSpacer, EuiText, EuiTitle } from '@elastic/eui';
+import {
+  EuiButtonEmpty,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiPanel,
+  EuiSpacer,
+  EuiText,
+  EuiTitle,
+} from '@elastic/eui';
+import { metadata } from 'ui/metadata';
 import { ErrorCallout } from '../error_callout';
 import {
   getValuesFromResponse,
@@ -221,7 +230,7 @@ export const EvaluatePanel: FC<Props> = ({ jobConfig, jobStatus, searchQuery })
 
   return (
     <EuiPanel>
-      <EuiFlexGroup gutterSize="s">
+      <EuiFlexGroup alignItems="center" justifyContent="spaceBetween">
         <EuiFlexItem grow={false}>
           <EuiTitle size="xs">
             <span>
@@ -238,6 +247,25 @@ export const EvaluatePanel: FC<Props> = ({ jobConfig, jobStatus, searchQuery })
         <EuiFlexItem grow={false}>
           <span>{getTaskStateBadge(jobStatus)}</span>
         </EuiFlexItem>
+        <EuiFlexItem>
+          <EuiSpacer />
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiButtonEmpty
+            target="_blank"
+            iconType="help"
+            iconSide="left"
+            color="primary"
+            href={`https://www.elastic.co/guide/en/machine-learning/${metadata.branch}/ml-dfanalytics-evaluate.html#ml-dfanalytics-regression-evaluation`}
+          >
+            {i18n.translate(
+              'xpack.ml.dataframe.analytics.classificationExploration.regressionDocsLink',
+              {
+                defaultMessage: 'Regression evaluation docs ',
+              }
+            )}
+          </EuiButtonEmpty>
+        </EuiFlexItem>
       </EuiFlexGroup>
       <EuiSpacer size="m" />
       <EuiFlexGroup justifyContent="spaceBetween">