[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
2021-10-26 11:55:51 +02:00 · 2021-10-26 11:55:51 +02:00 · 060bd41810
parent 0b2d3b7033
commit 060bd41810
7 changed files with 62 additions and 29 deletions
--- 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');
    });
  });
 });
--- 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 [
      <LineAnnotation
        dataValues={[
          {
            dataValue: start,
-            details: formatted.reason,
+            details,
            header,
          },
        ]}
--- a/x-pack/plugins/observability/public/pages/alerts/alerts_disclaimer.tsx
+++ b/x-pack/plugins/observability/public/pages/alerts/alerts_disclaimer.tsx
@ -0,0 +1,37 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { EuiLink, EuiCallOut } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n/react';
+
+export function AlertsDisclaimer() {
+  return (
+    <EuiCallOut
+      title={i18n.translate('xpack.observability.alertsDisclaimerTitle', {
+        defaultMessage: 'Alert history is currently an experimental feature within observability',
+      })}
+      color="warning"
+      iconType="beaker"
+    >
+      <FormattedMessage
+        id="xpack.observability.alertsDisclaimerText"
+        defaultMessage="This functionality may change or be removed completely in a future release. We value your {feedback} as we work to add new capabilities. "
+        values={{
+          feedback: (
+            <EuiLink href="https://discuss.elastic.co/c/observability/82" target="_blank">
+              {i18n.translate('xpack.observability.alertsDisclaimerLinkText', {
+                defaultMessage: 'feedback',
+              })}
+            </EuiLink>
+          ),
+        }}
+      />
+    </EuiCallOut>
+  );
+}
--- 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 (
    <EuiFlyout onClose={onClose} size="s" data-test-subj="alertsFlyout">
      <EuiFlyoutHeader>
+        <ExperimentalBadge />
+        <EuiSpacer size="s" />
        <EuiTitle size="m" data-test-subj="alertsFlyoutTitle">
          <h2>{alertData.fields[ALERT_RULE_NAME]}</h2>
        </EuiTitle>
--- 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() {
    >
      <EuiFlexGroup direction="column" gutterSize="s">
        <EuiFlexItem>
-          <EuiCallOut
-            title={i18n.translate('xpack.observability.alertsDisclaimerTitle', {
-              defaultMessage: 'Experimental',
-            })}
-            color="warning"
-            iconType="beaker"
-          >
-            <p>
-              {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 ',
-              })}
-              <EuiLink href={prepend('/app/management/insightsAndAlerting/triggersActions/alerts')}>
-                {i18n.translate('xpack.observability.alertsDisclaimerLinkText', {
-                  defaultMessage: 'Rules and Connectors settings.',
-                })}
-              </EuiLink>
-            </p>
-          </EuiCallOut>
+          <AlertsDisclaimer />
        </EuiFlexItem>
        <EuiFlexItem>
          <AlertsSearchBar
--- a/x-pack/plugins/translations/translations/ja-JP.json
+++ b/x-pack/plugins/translations/translations/ja-JP.json
@ -6956,7 +6956,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": "期間",
--- 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": "持续时间",