From 846300d5b60b4f2420aa65816dc5312d831e3eba Mon Sep 17 00:00:00 2001
From: Melissa Alvarez <melissa.alvarez@elastic.co>
Date: Thu, 24 Sep 2020 15:44:26 -0400
Subject: [PATCH] [ML] DF Analytics exploration: ensure search bar still
 visible when error caused by search bar query (#78356)

* show querybar on search error so user can search again

* check errorMessage defined. update translation name
---
 .../components/data_grid/data_grid.tsx        | 48 ++++++++++++++-----
 .../exploration_results_table.tsx             | 45 +----------------
 .../outlier_exploration.tsx                   | 31 ++----------
 .../translations/translations/ja-JP.json      |  2 -
 .../translations/translations/zh-CN.json      |  2 -
 5 files changed, 41 insertions(+), 87 deletions(-)

diff --git a/x-pack/plugins/ml/public/application/components/data_grid/data_grid.tsx b/x-pack/plugins/ml/public/application/components/data_grid/data_grid.tsx
index 6aad5d53c3a3..1949a3c33916 100644
--- a/x-pack/plugins/ml/public/application/components/data_grid/data_grid.tsx
+++ b/x-pack/plugins/ml/public/application/components/data_grid/data_grid.tsx
@@ -188,6 +188,40 @@ export const DataGrid: FC<Props> = memo(
       );
     }
 
+    let errorCallout;
+
+    if (status === INDEX_STATUS.ERROR) {
+      // if it's a searchBar syntax error leave the table visible so they can try again
+      if (errorMessage && !errorMessage.includes('failed to create query')) {
+        errorCallout = (
+          <EuiCallOut
+            title={i18n.translate('xpack.ml.dataframe.analytics.exploration.querySyntaxError', {
+              defaultMessage:
+                'An error occurred loading the index data. Please ensure your query syntax is valid.',
+            })}
+            color="danger"
+            iconType="cross"
+          >
+            <p>{errorMessage}</p>
+          </EuiCallOut>
+        );
+      } else {
+        errorCallout = (
+          <EuiCallOut
+            title={i18n.translate('xpack.ml.dataGrid.indexDataError', {
+              defaultMessage: 'An error occurred loading the index data.',
+            })}
+            color="danger"
+            iconType="cross"
+          >
+            <EuiCodeBlock language="json" fontSize="s" paddingSize="s" isCopyable>
+              {errorMessage}
+            </EuiCodeBlock>
+          </EuiCallOut>
+        );
+      }
+    }
+
     return (
       <div data-test-subj={`${dataTestSubj} ${status === INDEX_STATUS.ERROR ? 'error' : 'loaded'}`}>
         {isWithHeader(props) && (
@@ -211,19 +245,9 @@ export const DataGrid: FC<Props> = memo(
             </EuiFlexItem>
           </EuiFlexGroup>
         )}
-        {status === INDEX_STATUS.ERROR && (
+        {errorCallout !== undefined && (
           <div data-test-subj={`${dataTestSubj} error`}>
-            <EuiCallOut
-              title={i18n.translate('xpack.ml.dataGrid.indexDataError', {
-                defaultMessage: 'An error occurred loading the index data.',
-              })}
-              color="danger"
-              iconType="cross"
-            >
-              <EuiCodeBlock language="json" fontSize="s" paddingSize="s" isCopyable>
-                {errorMessage}
-              </EuiCodeBlock>
-            </EuiCallOut>
+            {errorCallout}
             <EuiSpacer size="m" />
           </div>
         )}
diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/exploration_results_table/exploration_results_table.tsx b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/exploration_results_table/exploration_results_table.tsx
index 84b1c4241aaf..07a15b01fca9 100644
--- a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/exploration_results_table/exploration_results_table.tsx
+++ b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/exploration_results_table/exploration_results_table.tsx
@@ -6,15 +6,7 @@
 
 import React, { Fragment, FC, useEffect, useState } from 'react';
 import { i18n } from '@kbn/i18n';
-import {
-  EuiCallOut,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiFormRow,
-  EuiPanel,
-  EuiSpacer,
-  EuiText,
-} from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiFormRow, EuiPanel, EuiSpacer, EuiText } from '@elastic/eui';
 
 import { IndexPattern } from '../../../../../../../../../../src/plugins/data/public';
 
@@ -25,7 +17,6 @@ import { getToastNotifications } from '../../../../../util/dependency_cache';
 import {
   DataFrameAnalyticsConfig,
   MAX_COLUMNS,
-  INDEX_STATUS,
   SEARCH_SIZE,
   defaultSearchQuery,
   getAnalysisType,
@@ -95,43 +86,11 @@ export const ExplorationResultsTable: FC<Props> = React.memo(
     );
 
     const docFieldsCount = classificationData.columnsWithCharts.length;
-    const {
-      columnsWithCharts,
-      errorMessage,
-      status,
-      tableItems,
-      visibleColumns,
-    } = classificationData;
+    const { columnsWithCharts, tableItems, visibleColumns } = classificationData;
 
     if (jobConfig === undefined || classificationData === undefined) {
       return null;
     }
-    // if it's a searchBar syntax error leave the table visible so they can try again
-    if (status === INDEX_STATUS.ERROR && !errorMessage.includes('failed to create query')) {
-      return (
-        <EuiPanel grow={false}>
-          <EuiFlexGroup gutterSize="s">
-            <EuiFlexItem grow={false}>
-              <ExplorationTitle title={title} />
-            </EuiFlexItem>
-            {jobStatus !== undefined && (
-              <EuiFlexItem grow={false}>
-                <span>{getTaskStateBadge(jobStatus)}</span>
-              </EuiFlexItem>
-            )}
-          </EuiFlexGroup>
-          <EuiCallOut
-            title={i18n.translate('xpack.ml.dataframe.analytics.regressionExploration.indexError', {
-              defaultMessage: 'An error occurred loading the index data.',
-            })}
-            color="danger"
-            iconType="cross"
-          >
-            <p>{errorMessage}</p>
-          </EuiCallOut>
-        </EuiPanel>
-      );
-    }
 
     return (
       <EuiPanel
diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/outlier_exploration/outlier_exploration.tsx b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/outlier_exploration/outlier_exploration.tsx
index 2b1c40f0eb73..e165ee54acab 100644
--- a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/outlier_exploration/outlier_exploration.tsx
+++ b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/outlier_exploration/outlier_exploration.tsx
@@ -8,14 +8,7 @@ import React, { useState, FC } from 'react';
 
 import { i18n } from '@kbn/i18n';
 
-import {
-  EuiCallOut,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiHorizontalRule,
-  EuiPanel,
-  EuiSpacer,
-} from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiHorizontalRule, EuiPanel, EuiSpacer } from '@elastic/eui';
 
 import {
   useColorRange,
@@ -27,7 +20,7 @@ import { DataGrid } from '../../../../../components/data_grid';
 import { SavedSearchQuery } from '../../../../../contexts/ml';
 import { getToastNotifications } from '../../../../../util/dependency_cache';
 
-import { defaultSearchQuery, useResultsViewConfig, INDEX_STATUS } from '../../../../common';
+import { defaultSearchQuery, useResultsViewConfig } from '../../../../common';
 
 import { getTaskStateBadge } from '../../../analytics_management/components/analytics_list/use_columns';
 
@@ -54,7 +47,7 @@ export const OutlierExploration: FC<ExplorationProps> = React.memo(({ jobId }) =
   const [searchQuery, setSearchQuery] = useState<SavedSearchQuery>(defaultSearchQuery);
   const outlierData = useOutlierData(indexPattern, jobConfig, searchQuery);
 
-  const { columnsWithCharts, errorMessage, status, tableItems } = outlierData;
+  const { columnsWithCharts, tableItems } = outlierData;
 
   const colorRange = useColorRange(
     COLOR_RANGE.BLUE,
@@ -62,24 +55,6 @@ export const OutlierExploration: FC<ExplorationProps> = React.memo(({ jobId }) =
     jobConfig !== undefined ? getFeatureCount(jobConfig.dest.results_field, tableItems) : 1
   );
 
-  // if it's a searchBar syntax error leave the table visible so they can try again
-  if (status === INDEX_STATUS.ERROR && !errorMessage.includes('failed to create query')) {
-    return (
-      <EuiPanel grow={false}>
-        <ExplorationTitle title={explorationTitle} />
-        <EuiCallOut
-          title={i18n.translate('xpack.ml.dataframe.analytics.exploration.indexError', {
-            defaultMessage: 'An error occurred loading the index data.',
-          })}
-          color="danger"
-          iconType="cross"
-        >
-          <p>{errorMessage}</p>
-        </EuiCallOut>
-      </EuiPanel>
-    );
-  }
-
   return (
     <EuiPanel data-test-subj="mlDFAnalyticsOutlierExplorationTablePanel">
       {jobConfig !== undefined && needsDestIndexPattern && (
diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
index 42e695788448..505affb4f419 100644
--- a/x-pack/plugins/translations/translations/ja-JP.json
+++ b/x-pack/plugins/translations/translations/ja-JP.json
@@ -10780,7 +10780,6 @@
     "xpack.ml.dataframe.analytics.exploration.colorRangeLegendTitle": "機能影響スコア",
     "xpack.ml.dataframe.analytics.exploration.experimentalBadgeLabel": "実験的",
     "xpack.ml.dataframe.analytics.exploration.experimentalBadgeTooltipContent": "データフレーム分析は実験段階の機能です。フィードバックをお待ちしています。",
-    "xpack.ml.dataframe.analytics.exploration.indexError": "インデックスデータの読み込み中にエラーが発生しました。",
     "xpack.ml.dataframe.analytics.exploration.jobIdTitle": "外れ値検出ジョブID {jobId}",
     "xpack.ml.dataframe.analytics.exploration.title": "分析の探索",
     "xpack.ml.dataframe.analytics.explorationResults.documentsShownHelpText": "予測があるドキュメントを示す",
@@ -10796,7 +10795,6 @@
     "xpack.ml.dataframe.analytics.regressionExploration.generalizationFilterText": ".学習データをフィルタリングしています。",
     "xpack.ml.dataframe.analytics.regressionExploration.huberLinkText": "Pseudo Huber損失関数",
     "xpack.ml.dataframe.analytics.regressionExploration.huberText": "{wikiLink}",
-    "xpack.ml.dataframe.analytics.regressionExploration.indexError": "インデックスデータの読み込み中にエラーが発生しました。",
     "xpack.ml.dataframe.analytics.regressionExploration.meanSquaredErrorText": "平均二乗エラー",
     "xpack.ml.dataframe.analytics.regressionExploration.meanSquaredErrorTooltipContent": "回帰分析モデルの実行の効果を測定します。真値と予測値の間の差異の二乗平均合計。",
     "xpack.ml.dataframe.analytics.regressionExploration.msleText": "平均二乗対数誤差",
diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
index 394acbf65d1b..3bca7ea36661 100644
--- a/x-pack/plugins/translations/translations/zh-CN.json
+++ b/x-pack/plugins/translations/translations/zh-CN.json
@@ -10786,7 +10786,6 @@
     "xpack.ml.dataframe.analytics.exploration.colorRangeLegendTitle": "功能影响分数",
     "xpack.ml.dataframe.analytics.exploration.experimentalBadgeLabel": "实验性",
     "xpack.ml.dataframe.analytics.exploration.experimentalBadgeTooltipContent": "数据帧分析为实验功能。我们很乐意听取您的反馈意见。",
-    "xpack.ml.dataframe.analytics.exploration.indexError": "加载索引数据时出错。",
     "xpack.ml.dataframe.analytics.exploration.jobIdTitle": "离群值检测作业 ID {jobId}",
     "xpack.ml.dataframe.analytics.exploration.title": "分析浏览",
     "xpack.ml.dataframe.analytics.explorationResults.documentsShownHelpText": "正在显示有相关预测存在的文档",
@@ -10802,7 +10801,6 @@
     "xpack.ml.dataframe.analytics.regressionExploration.generalizationFilterText": ".筛留训练数据。",
     "xpack.ml.dataframe.analytics.regressionExploration.huberLinkText": "Pseudo Huber 损失函数",
     "xpack.ml.dataframe.analytics.regressionExploration.huberText": "{wikiLink}",
-    "xpack.ml.dataframe.analytics.regressionExploration.indexError": "加载索引数据时出错。",
     "xpack.ml.dataframe.analytics.regressionExploration.meanSquaredErrorText": "均方误差",
     "xpack.ml.dataframe.analytics.regressionExploration.meanSquaredErrorTooltipContent": "度量回归分析模型的表现。真实值与预测值之差的平均平方和。",
     "xpack.ml.dataframe.analytics.regressionExploration.msleText": "均方根对数误差",