[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>
This commit is contained in:
ymao1
GitHub
parent
e9e7314c3b
commit
8e3604fe11
|
|
@ -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();
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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": "ディスティネーションインデックスパターンの削除",
|
||||
|
|
|
|||
|
|
@ -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": "删除目标索引模式",
|
||||
|
|
|
|||
Loading…
Reference in a new issue