From 8e3604fe117275c5d06276612cf6c3edd99460b0 Mon Sep 17 00:00:00 2001 From: ymao1 Date: Mon, 10 May 2021 14:46:01 -0400 Subject: [PATCH] [Alerting UI] Fixing behavior when trying to render an Index Threshold visualization with invalid data (#99518) * Showing error message not object. Removing error toaster * Updating unit tests * Fixing i18n Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> --- .../threshold/visualization.test.tsx | 28 +++++++++++++++++-- .../alert_types/threshold/visualization.tsx | 23 ++++++--------- .../translations/translations/ja-JP.json | 1 - .../translations/translations/zh-CN.json | 1 - 4 files changed, 35 insertions(+), 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 index 34239d8a3f890..8434e5ba17dcc 100644 --- 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 index 0d7ed390f20c7..d959bf19c7cd8 100644 --- 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 = ({ groupBy, threshold, } = alertParams; - const { http, notifications, uiSettings } = useKibana().services; + const { http, uiSettings } = useKibana().services; const [loadingState, setLoadingState] = useState(null); - const [error, setError] = useState(undefined); + const [hasError, setHasError] = useState(false); + const [errorMessage, setErrorMessage] = useState(undefined); const [visualizationData, setVisualizationData] = useState>(); const [startVisualizationAt, setStartVisualizationAt] = useState(new Date()); @@ -153,16 +153,11 @@ export const ThresholdVisualization: React.FunctionComponent = ({ 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 = ({ ); } - if (error) { + if (hasError) { return ( @@ -232,7 +227,7 @@ export const ThresholdVisualization: React.FunctionComponent = ({ color="danger" iconType="alert" > - {error} + {errorMessage} ); diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json index c432809355e0f..75f5c8c901807 100644 --- 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 index 46117f739f985..2b562f4cd4410 100644 --- 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": "删除目标索引模式",