From 060bd418102078ef2f822bd200638964c44f34a9 Mon Sep 17 00:00:00 2001 From: mgiota Date: Tue, 26 Oct 2021 11:55:51 +0200 Subject: [PATCH] [RAC]: add experimental badge to alerts (#116090) * [RAC]: add experimental badge to alerts * combine feedback disclaimer into one text * create a reusable AlertsDisclaimer component * apend more details text to the apm alert * fix failing i18n tests * remove basePath from url * fix failing unit tests * fix unit tests * add experimental to the alert annotation * i18n for experimental text * reuse ExperimentalBadge for the flyout and refactor AlertsDisclaimer --- .../helper/get_alert_annotations.test.tsx | 10 ++--- .../charts/helper/get_alert_annotations.tsx | 15 +++++++- .../public/pages/alerts/alerts_disclaimer.tsx | 37 +++++++++++++++++++ .../pages/alerts/alerts_flyout/index.tsx | 3 ++ .../public/pages/alerts/index.tsx | 24 ++---------- .../translations/translations/ja-JP.json | 1 - .../translations/translations/zh-CN.json | 1 - 7 files changed, 62 insertions(+), 29 deletions(-) create mode 100644 x-pack/plugins/observability/public/pages/alerts/alerts_disclaimer.tsx diff --git a/x-pack/plugins/apm/public/components/shared/charts/helper/get_alert_annotations.test.tsx b/x-pack/plugins/apm/public/components/shared/charts/helper/get_alert_annotations.test.tsx index 4573e8e5a174..a3ab10ea6514 100644 --- a/x-pack/plugins/apm/public/components/shared/charts/helper/get_alert_annotations.test.tsx +++ b/x-pack/plugins/apm/public/components/shared/charts/helper/get_alert_annotations.test.tsx @@ -110,7 +110,7 @@ describe('getAlertAnnotations', () => { setSelectedAlertId, theme, })![0].props.dataValues[0].header - ).toEqual('Alert'); + ).toEqual('Alert - Experimental'); }); it('uses the reason in the annotation details', () => { @@ -123,7 +123,7 @@ describe('getAlertAnnotations', () => { setSelectedAlertId, theme, })![0].props.dataValues[0].details - ).toEqual('a good reason'); + ).toEqual('a good reason. Click to see more details.'); }); describe('with no formatter', () => { @@ -140,7 +140,7 @@ describe('getAlertAnnotations', () => { setSelectedAlertId, theme, })![0].props.dataValues[0].details - ).toEqual(alert[ALERT_RULE_NAME]![0]); + ).toEqual(`${alert[ALERT_RULE_NAME]![0]}. Click to see more details.`); }); }); @@ -191,7 +191,7 @@ describe('getAlertAnnotations', () => { setSelectedAlertId, theme, })![0].props.dataValues[0].header - ).toEqual('Warning Alert'); + ).toEqual('Warning Alert - Experimental'); }); }); @@ -224,7 +224,7 @@ describe('getAlertAnnotations', () => { setSelectedAlertId, theme, })![0].props.dataValues[0].header - ).toEqual('Critical Alert'); + ).toEqual('Critical Alert - Experimental'); }); }); }); diff --git a/x-pack/plugins/apm/public/components/shared/charts/helper/get_alert_annotations.tsx b/x-pack/plugins/apm/public/components/shared/charts/helper/get_alert_annotations.tsx index f4c47a9247e7..038269d3cefd 100644 --- a/x-pack/plugins/apm/public/components/shared/charts/helper/get_alert_annotations.tsx +++ b/x-pack/plugins/apm/public/components/shared/charts/helper/get_alert_annotations.tsx @@ -122,7 +122,13 @@ export function getAlertAnnotations({ const end = start + parsed[ALERT_DURATION]! / 1000; const severityLevel = parsed[ALERT_SEVERITY]; const color = getAlertColor({ severityLevel, theme }); - const header = getAlertHeader({ severityLevel }); + const experimentalLabel = i18n.translate( + 'xpack.apm.alertAnnotationTooltipExperimentalText', + { defaultMessage: 'Experimental' } + ); + const header = `${getAlertHeader({ + severityLevel, + })} - ${experimentalLabel}`; const formatter = getFormatter(parsed[ALERT_RULE_TYPE_ID]!); const formatted = { link: undefined, @@ -133,13 +139,18 @@ export function getAlertAnnotations({ }) ?? {}), }; const isSelected = uuid === selectedAlertId; + const moreDetails = i18n.translate( + 'xpack.apm.alertAnnotationTooltipMoreDetailsText', + { defaultMessage: 'Click to see more details.' } + ); + const details = `${formatted.reason}. ${moreDetails}`; return [ + + {i18n.translate('xpack.observability.alertsDisclaimerLinkText', { + defaultMessage: 'feedback', + })} + + ), + }} + /> + + ); +} diff --git a/x-pack/plugins/observability/public/pages/alerts/alerts_flyout/index.tsx b/x-pack/plugins/observability/public/pages/alerts/alerts_flyout/index.tsx index 7171daa4a56e..034b7522b913 100644 --- a/x-pack/plugins/observability/public/pages/alerts/alerts_flyout/index.tsx +++ b/x-pack/plugins/observability/public/pages/alerts/alerts_flyout/index.tsx @@ -46,6 +46,7 @@ import { asDuration } from '../../../../common/utils/formatters'; import type { ObservabilityRuleTypeRegistry } from '../../../rules/create_observability_rule_type_registry'; import { parseAlert } from '../parse_alert'; import { AlertStatusIndicator } from '../../../components/shared/alert_status_indicator'; +import { ExperimentalBadge } from '../../../components/shared/experimental_badge'; type AlertsFlyoutProps = { alert?: TopAlert; @@ -137,6 +138,8 @@ export function AlertsFlyout({ return ( + +

{alertData.fields[ALERT_RULE_NAME]}

 diff --git a/x-pack/plugins/observability/public/pages/alerts/index.tsx b/x-pack/plugins/observability/public/pages/alerts/index.tsx index e8b550ac353a..a3c060f5dc5d 100644 --- a/x-pack/plugins/observability/public/pages/alerts/index.tsx +++ b/x-pack/plugins/observability/public/pages/alerts/index.tsx @@ -5,7 +5,8 @@ * 2.0. */ -import { EuiButtonEmpty, EuiCallOut, EuiFlexGroup, EuiFlexItem, EuiLink } from '@elastic/eui'; +import { EuiButtonEmpty, EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; + import { IndexPatternBase } from '@kbn/es-query'; import { i18n } from '@kbn/i18n'; import React, { useCallback, useRef } from 'react'; @@ -26,6 +27,7 @@ import { AlertsTableTGrid } from './alerts_table_t_grid'; import { Provider, alertsPageStateContainer, useAlertsPageStateContainer } from './state_container'; import './styles.scss'; import { WorkflowStatusFilter } from './workflow_status_filter'; +import { AlertsDisclaimer } from './alerts_disclaimer'; export interface TopAlert { fields: ParsedTechnicalFields; @@ -177,25 +179,7 @@ function AlertsPage() { > - -

- {i18n.translate('xpack.observability.alertsDisclaimerText', { - defaultMessage: - 'This page shows an experimental list of alerts. The data might not be accurate. All alerts are available in the ', - })} - - {i18n.translate('xpack.observability.alertsDisclaimerLinkText', { - defaultMessage: 'Rules and Connectors settings.', - })} - -

- + 75", "xpack.observability.alertsDisclaimerLinkText": "アラートとアクション", - "xpack.observability.alertsDisclaimerText": "このページには実験アラートビューが表示されます。ここに表示されるデータは、アラートを正確に表していない可能性があります。アラートの非実験リストは、スタック管理のアラートとアクション設定にあります。", "xpack.observability.alertsDisclaimerTitle": "実験的", "xpack.observability.alertsFlyout.actualValueLabel": "実際の値", "xpack.observability.alertsFlyout.durationLabel": "期間", diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json index 1de08dd3bbd3..dc43b75b5d1e 100644 --- a/x-pack/plugins/translations/translations/zh-CN.json +++ b/x-pack/plugins/translations/translations/zh-CN.json @@ -7013,7 +7013,6 @@ "xpack.observability.alerts.manageRulesButtonLabel": "管理规则", "xpack.observability.alerts.searchBarPlaceholder": "kibana.alert.evaluation.threshold > 75", "xpack.observability.alertsDisclaimerLinkText": "告警和操作", - "xpack.observability.alertsDisclaimerText": "此页面显示实验性告警视图。此处显示的数据可能无法准确表示告警。在“堆栈管理”的“告警和操作”中提供了告警的非实验性列表。", "xpack.observability.alertsDisclaimerTitle": "实验性", "xpack.observability.alertsFlyout.actualValueLabel": "实际值", "xpack.observability.alertsFlyout.durationLabel": "持续时间",