[Alerting UI] Fixing behavior when trying to render an Index Threshol…

…d visualization with invalid data (#99518) * Showing error message not object. Removing error toaster * Updating unit tests * Fixing i18n Co-authored-by: Kibana Machine <[email protected]>
elastic · May 10, 2021 · 8e3604f · 8e3604f
1 parent e9e7314
commit 8e3604f
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 18 deletions.
diff --git a/x-pack/plugins/stack_alerts/public/alert_types/threshold/visualization.test.tsx b/x-pack/plugins/stack_alerts/public/alert_types/threshold/visualization.test.tsx
@@ -163,17 +163,41 @@ describe('ThresholdVisualization', () => {
     expect(wrapper.find(LineAnnotation)).toHaveLength(1);
   });
 
-  test('renders error message when getting visualization fails', async () => {
+  test('renders error callout with message when getting visualization fails', async () => {
     const errorMessage = 'oh no';
-    getThresholdAlertVisualizationData.mockImplementation(() => Promise.reject(errorMessage));
+    getThresholdAlertVisualizationData.mockImplementation(() =>
+      Promise.reject(new Error(errorMessage))
+    );
     const wrapper = await setup();
 
+    await act(async () => {
+      await nextTick();
+      wrapper.update();
+    });
+
     expect(wrapper.find('[data-test-subj="errorCallout"]').exists()).toBeTruthy();
     expect(wrapper.find('[data-test-subj="errorCallout"]').first().text()).toBe(
       `Cannot load alert visualization${errorMessage}`
     );
   });
 
+  test('renders error callout even when unable to get message from error', async () => {
+    getThresholdAlertVisualizationData.mockImplementation(() =>
+      Promise.reject(new Error(undefined))
+    );
+    const wrapper = await setup();
+
+    await act(async () => {
+      await nextTick();
+      wrapper.update();
+    });
+
+    expect(wrapper.find('[data-test-subj="errorCallout"]').exists()).toBeTruthy();
+    expect(wrapper.find('[data-test-subj="errorCallout"]').first().text()).toBe(
+      `Cannot load alert visualization`
+    );
+  });
+
   test('renders no data message when visualization results are empty', async () => {
     getThresholdAlertVisualizationData.mockImplementation(() => Promise.resolve({ results: [] }));
     const wrapper = await setup();

diff --git a/x-pack/plugins/stack_alerts/public/alert_types/threshold/visualization.tsx b/x-pack/plugins/stack_alerts/public/alert_types/threshold/visualization.tsx
@@ -7,7 +7,6 @@
 
 import React, { Fragment, useEffect, useState } from 'react';
 import { IUiSettingsClient, HttpSetup } from 'kibana/public';
-import { i18n } from '@kbn/i18n';
 import { interval } from 'rxjs';
 import {
   AnnotationDomainType,
@@ -130,9 +129,10 @@ export const ThresholdVisualization: React.FunctionComponent<Props> = ({
     groupBy,
     threshold,
   } = alertParams;
-  const { http, notifications, uiSettings } = useKibana().services;
+  const { http, uiSettings } = useKibana().services;
   const [loadingState, setLoadingState] = useState<LoadingStateType | null>(null);
-  const [error, setError] = useState<undefined | Error>(undefined);
+  const [hasError, setHasError] = useState<boolean>(false);
+  const [errorMessage, setErrorMessage] = useState<undefined | string>(undefined);
   const [visualizationData, setVisualizationData] = useState<Record<string, MetricResult[]>>();
   const [startVisualizationAt, setStartVisualizationAt] = useState<Date>(new Date());
 
@@ -153,16 +153,11 @@ export const ThresholdVisualization: React.FunctionComponent<Props> = ({
         setVisualizationData(
           await getVisualizationData(alertWithoutActions, visualizeOptions, http!)
         );
+        setHasError(false);
+        setErrorMessage(undefined);
       } catch (e) {
-        if (notifications) {
-          notifications.toasts.addDanger({
-            title: i18n.translate(
-              'xpack.stackAlerts.threshold.ui.visualization.unableToLoadVisualizationMessage',
-              { defaultMessage: 'Unable to load visualization' }
-            ),
-          });
-        }
-        setError(e);
+        setHasError(true);
+        setErrorMessage(e?.body?.message || e?.message);
       } finally {
         setLoadingState(LoadingStateType.Idle);
       }
@@ -216,7 +211,7 @@ export const ThresholdVisualization: React.FunctionComponent<Props> = ({
     );
   }
 
-  if (error) {
+  if (hasError) {
     return (
       <Fragment>
         <EuiSpacer size="l" />
@@ -232,7 +227,7 @@ export const ThresholdVisualization: React.FunctionComponent<Props> = ({
           color="danger"
           iconType="alert"
         >
-          {error}
+          {errorMessage}
         </EuiCallOut>
       </Fragment>
     );

diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
@@ -22991,7 +22991,6 @@
     "xpack.stackAlerts.threshold.ui.visualization.loadingAlertVisualizationDescription": "アラートビジュアライゼーションを読み込み中…",
     "xpack.stackAlerts.threshold.ui.visualization.thresholdPreviewChart.dataDoesNotExistTextMessage": "時間範囲とフィルターが正しいことを確認してください。",
     "xpack.stackAlerts.threshold.ui.visualization.thresholdPreviewChart.noDataTitle": "このクエリに一致するデータはありません",
-    "xpack.stackAlerts.threshold.ui.visualization.unableToLoadVisualizationMessage": "ビジュアライゼーションを読み込めません",
     "xpack.timelines.placeholder": "プラグイン：{name} タイムライン：{timelineId}",
     "xpack.transform.actionDeleteTransform.bulkDeleteDestinationIndexTitle": "ディスティネーションインデックスの削除",
     "xpack.transform.actionDeleteTransform.bulkDeleteDestIndexPatternTitle": "ディスティネーションインデックスパターンの削除",

diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
@@ -23352,7 +23352,6 @@
     "xpack.stackAlerts.threshold.ui.visualization.loadingAlertVisualizationDescription": "正在加载告警可视化……",
     "xpack.stackAlerts.threshold.ui.visualization.thresholdPreviewChart.dataDoesNotExistTextMessage": "确认您的时间范围和筛选正确。",
     "xpack.stackAlerts.threshold.ui.visualization.thresholdPreviewChart.noDataTitle": "没有数据匹配此查询",
-    "xpack.stackAlerts.threshold.ui.visualization.unableToLoadVisualizationMessage": "无法加载可视化",
     "xpack.timelines.placeholder": "插件：{name} 时间线：{timelineId}",
     "xpack.transform.actionDeleteTransform.bulkDeleteDestinationIndexTitle": "删除目标索引",
     "xpack.transform.actionDeleteTransform.bulkDeleteDestIndexPatternTitle": "删除目标索引模式",