Add description and documentation link in alert flyout (#81526)

* Add description and documentation URL in alert flyout

* Add unit tests

* Fix type check

* Add horizontal rule

* Design fixes

* Fix uptime alert link

* Fix uptime urls

* Add anchor tag

* Fix jest test failures

* Fix monitoring links

x-pack/examples/alerting_example/public/alert_types/always_firing.tsx

@@ -22,6 +22,7 @@ export function getAlertType(): AlertTypeModel {
     name: 'Always Fires',
     description: 'Alert when called',
     iconClass: 'bolt',
+    documentationUrl: null,
     alertParamsExpression: AlwaysFiringExpression,
     validate: (alertParams: AlwaysFiringParamsProps['alertParams']) => {
       const { instances } = alertParams;

x-pack/examples/alerting_example/public/alert_types/astros.tsx

@@ -47,6 +47,7 @@ export function getAlertType(): AlertTypeModel {
     name: 'People Are In Space Right Now',
     description: 'Alert when people are in space right now',
     iconClass: 'globe',
+    documentationUrl: null,
     alertParamsExpression: PeopleinSpaceExpression,
     validate: (alertParams: PeopleinSpaceParamsProps['alertParams']) => {
       const { outerSpaceCapacity, craft, op } = alertParams;

x-pack/plugins/apm/public/components/alerting/register_apm_alerts.ts

@@ -22,6 +22,9 @@ export function registerApmAlerts(
         'Alert when the number of errors in a service exceeds a defined threshold.',
     }),
     iconClass: 'bell',
+    documentationUrl(docLinks) {
+      return `${docLinks.ELASTIC_WEBSITE_URL}guide/en/kibana/${docLinks.DOC_LINK_VERSION}/apm-alerts.html`;
+    },
     alertParamsExpression: lazy(() => import('./ErrorCountAlertTrigger')),
     validate: () => ({
       errors: [],
@@ -53,6 +56,9 @@ export function registerApmAlerts(
       }
     ),
     iconClass: 'bell',
+    documentationUrl(docLinks) {
+      return `${docLinks.ELASTIC_WEBSITE_URL}guide/en/kibana/${docLinks.DOC_LINK_VERSION}/apm-alerts.html`;
+    },
     alertParamsExpression: lazy(
       () => import('./TransactionDurationAlertTrigger')
     ),
@@ -87,6 +93,9 @@ export function registerApmAlerts(
       }
     ),
     iconClass: 'bell',
+    documentationUrl(docLinks) {
+      return `${docLinks.ELASTIC_WEBSITE_URL}guide/en/kibana/${docLinks.DOC_LINK_VERSION}/apm-alerts.html`;
+    },
     alertParamsExpression: lazy(
       () => import('./TransactionErrorRateAlertTrigger')
     ),
@@ -121,6 +130,9 @@ export function registerApmAlerts(
       }
     ),
     iconClass: 'bell',
+    documentationUrl(docLinks) {
+      return `${docLinks.ELASTIC_WEBSITE_URL}guide/en/kibana/${docLinks.DOC_LINK_VERSION}/apm-alerts.html`;
+    },
     alertParamsExpression: lazy(
       () => import('./TransactionDurationAnomalyAlertTrigger')
     ),

x-pack/plugins/infra/public/alerting/inventory/index.ts

@@ -21,6 +21,9 @@ export function createInventoryMetricAlertType(): AlertTypeModel {
       defaultMessage: 'Alert when the inventory exceeds a defined threshold.',
     }),
     iconClass: 'bell',
+    documentationUrl(docLinks) {
+      return `${docLinks.ELASTIC_WEBSITE_URL}guide/en/observability/${docLinks.DOC_LINK_VERSION}/infrastructure-threshold-alert.html`;
+    },
     alertParamsExpression: React.lazy(() => import('./components/expression')),
     validate: validateMetricThreshold,
     defaultActionMessage: i18n.translate(

x-pack/plugins/infra/public/alerting/log_threshold/log_threshold_alert_type.ts

@@ -19,6 +19,9 @@ export function getAlertType(): AlertTypeModel {
       defaultMessage: 'Alert when the log aggregation exceeds the threshold.',
     }),
     iconClass: 'bell',
+    documentationUrl(docLinks) {
+      return `${docLinks.ELASTIC_WEBSITE_URL}guide/en/observability/${docLinks.DOC_LINK_VERSION}/logs-threshold-alert.html`;
+    },
     alertParamsExpression: React.lazy(() => import('./components/expression_editor/editor')),
     validate: validateExpression,
     defaultActionMessage: i18n.translate(

x-pack/plugins/infra/public/alerting/metric_threshold/index.ts

@@ -21,6 +21,9 @@ export function createMetricThresholdAlertType(): AlertTypeModel {
       defaultMessage: 'Alert when the metrics aggregation exceeds the threshold.',
     }),
     iconClass: 'bell',
+    documentationUrl(docLinks) {
+      return `${docLinks.ELASTIC_WEBSITE_URL}guide/en/observability/${docLinks.DOC_LINK_VERSION}/metrics-threshold-alert.html`;
+    },
     alertParamsExpression: React.lazy(() => import('./components/expression')),
     validate: validateMetricThreshold,
     defaultActionMessage: i18n.translate(

x-pack/plugins/monitoring/public/alerts/cpu_usage_alert/cpu_usage_alert.tsx

@@ -16,6 +16,9 @@ export function createCpuUsageAlertType(): AlertTypeModel {
     name: ALERT_DETAILS[ALERT_CPU_USAGE].label,
     description: ALERT_DETAILS[ALERT_CPU_USAGE].description,
     iconClass: 'bell',
+    documentationUrl(docLinks) {
+      return `${docLinks.ELASTIC_WEBSITE_URL}guide/en/kibana/${docLinks.DOC_LINK_VERSION}/kibana-alerts.html#kibana-alerts-cpu-threshold`;
+    },
     alertParamsExpression: (props: Props) => (
       <Expression {...props} paramDetails={ALERT_DETAILS[ALERT_CPU_USAGE].paramDetails} />
     ),

x-pack/plugins/monitoring/public/alerts/disk_usage_alert/index.tsx

@@ -18,6 +18,9 @@ export function createDiskUsageAlertType(): AlertTypeModel {
     name: ALERT_DETAILS[ALERT_DISK_USAGE].label,
     description: ALERT_DETAILS[ALERT_DISK_USAGE].description,
     iconClass: 'bell',
+    documentationUrl(docLinks) {
+      return `${docLinks.ELASTIC_WEBSITE_URL}guide/en/kibana/${docLinks.DOC_LINK_VERSION}/kibana-alerts.html#kibana-alerts-disk-usage-threshold`;
+    },
     alertParamsExpression: (props: Props) => (
       <Expression {...props} paramDetails={ALERT_DETAILS[ALERT_DISK_USAGE].paramDetails} />
     ),

x-pack/plugins/monitoring/public/alerts/legacy_alert/legacy_alert.tsx

@@ -18,6 +18,9 @@ export function createLegacyAlertTypes(): AlertTypeModel[] {
       name: LEGACY_ALERT_DETAILS[legacyAlert].label,
       description: LEGACY_ALERT_DETAILS[legacyAlert].description,
       iconClass: 'bell',
+      documentationUrl(docLinks) {
+        return `${docLinks.ELASTIC_WEBSITE_URL}guide/en/kibana/${docLinks.DOC_LINK_VERSION}/cluster-alerts.html`;
+      },
       alertParamsExpression: () => (
         <Fragment>
           <EuiSpacer />

x-pack/plugins/monitoring/public/alerts/memory_usage_alert/index.tsx

@@ -18,6 +18,9 @@ export function createMemoryUsageAlertType(): AlertTypeModel {
     name: ALERT_DETAILS[ALERT_MEMORY_USAGE].label,
     description: ALERT_DETAILS[ALERT_MEMORY_USAGE].description,
     iconClass: 'bell',
+    documentationUrl(docLinks) {
+      return `${docLinks.ELASTIC_WEBSITE_URL}guide/en/kibana/${docLinks.DOC_LINK_VERSION}/kibana-alerts.html#kibana-alerts-jvm-memory-threshold`;
+    },
     alertParamsExpression: (props: Props) => (
       <Expression {...props} paramDetails={ALERT_DETAILS[ALERT_MEMORY_USAGE].paramDetails} />
     ),

x-pack/plugins/monitoring/public/alerts/missing_monitoring_data_alert/missing_monitoring_data_alert.tsx

@@ -16,6 +16,9 @@ export function createMissingMonitoringDataAlertType(): AlertTypeModel {
     name: ALERT_DETAILS[ALERT_MISSING_MONITORING_DATA].label,
     description: ALERT_DETAILS[ALERT_MISSING_MONITORING_DATA].description,
     iconClass: 'bell',
+    documentationUrl(docLinks) {
+      return `${docLinks.ELASTIC_WEBSITE_URL}guide/en/kibana/${docLinks.DOC_LINK_VERSION}/kibana-alerts.html#kibana-alerts-missing-monitoring-data`;
+    },
     alertParamsExpression: (props: any) => (
       <Expression
         {...props}

x-pack/plugins/monitoring/public/alerts/thread_pool_rejections_alert/index.tsx

@@ -31,6 +31,9 @@ export function createThreadPoolRejectionsAlertType(
     name: threadPoolAlertDetails.label,
     description: threadPoolAlertDetails.description,
     iconClass: 'bell',
+    documentationUrl(docLinks) {
+      return `${docLinks.ELASTIC_WEBSITE_URL}guide/en/kibana/${docLinks.DOC_LINK_VERSION}/kibana-alerts.html`;
+    },
     alertParamsExpression: (props: Props) => (
       <>
         <EuiSpacer />

x-pack/plugins/triggers_actions_ui/public/application/components/builtin_alert_types/geo_threshold/index.ts

@@ -20,6 +20,8 @@ export function getAlertType(): AlertTypeModel<GeoThresholdAlertParams, AlertsCo
       defaultMessage: 'Alert when an entity enters or leaves a geo boundary.',
     }),
     iconClass: 'globe',
+    // TODO: Add documentation for geo threshold alert
+    documentationUrl: null,
     alertParamsExpression: lazy(() => import('./query_builder')),
     validate: validateExpression,
     requiresAppContext: false,

x-pack/plugins/triggers_actions_ui/public/application/components/builtin_alert_types/threshold/expression.tsx

@@ -281,7 +281,6 @@ export const IndexThresholdAlertTypeExpression: React.FunctionComponent<AlertTyp
           <EuiSpacer />
         </Fragment>
       ) : null}
-      <EuiSpacer size="l" />
       <EuiTitle size="xs">
         <h5>
           <FormattedMessage

x-pack/plugins/triggers_actions_ui/public/application/components/builtin_alert_types/threshold/index.ts

@@ -21,6 +21,9 @@ export function getAlertType(): AlertTypeModel<IndexThresholdAlertParams, Alerts
       defaultMessage: 'Alert when an aggregated query meets the threshold.',
     }),
     iconClass: 'alert',
+    documentationUrl(docLinks) {
+      return `${docLinks.ELASTIC_WEBSITE_URL}guide/en/kibana/${docLinks.DOC_LINK_VERSION}/alert-types.html#alert-type-index-threshold`;
+    },
     alertParamsExpression: lazy(() => import('./expression')),
     validate: validateExpression,
     requiresAppContext: false,

x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_add.test.tsx

@@ -99,6 +99,7 @@ describe('alert_add', () => {
       iconClass: 'test',
       name: 'test-alert',
       description: 'test',
+      documentationUrl: null,
       validate: (): ValidationResult => {
         return { errors: {} };
       },

x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_edit.test.tsx

@@ -52,6 +52,7 @@ describe('alert_edit', () => {
       iconClass: 'test',
       name: 'test-alert',
       description: 'test',
+      documentationUrl: null,
       validate: (): ValidationResult => {
         return { errors: {} };
       },

x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_form.test.tsx

@@ -31,7 +31,8 @@ describe('alert_form', () => {
     id: 'my-alert-type',
     iconClass: 'test',
     name: 'test-alert',
-    description: 'test',
+    description: 'Alert when testing',
+    documentationUrl: 'https://localhost.local/docs',
     validate: (): ValidationResult => {
       return { errors: {} };
     },
@@ -59,6 +60,7 @@ describe('alert_form', () => {
     iconClass: 'test',
     name: 'non edit alert',
     description: 'test',
+    documentationUrl: null,
     validate: (): ValidationResult => {
       return { errors: {} };
     },
@@ -182,6 +184,22 @@ describe('alert_form', () => {
       );
       expect(alertTypeSelectOptions.exists()).toBeFalsy();
     });
+
+    it('renders alert type description', async () => {
+      await setup();
+      wrapper.find('[data-test-subj="my-alert-type-SelectOption"]').first().simulate('click');
+      const alertDescription = wrapper.find('[data-test-subj="alertDescription"]');
+      expect(alertDescription.exists()).toBeTruthy();
+      expect(alertDescription.first().text()).toContain('Alert when testing');
+    });
+
+    it('renders alert type documentation link', async () => {
+      await setup();
+      wrapper.find('[data-test-subj="my-alert-type-SelectOption"]').first().simulate('click');
+      const alertDocumentationLink = wrapper.find('[data-test-subj="alertDocumentationLink"]');
+      expect(alertDocumentationLink.exists()).toBeTruthy();
+      expect(alertDocumentationLink.first().prop('href')).toBe('https://localhost.local/docs');
+    });
   });
 
   describe('alert_form create alert non alerting consumer and producer', () => {
@@ -244,6 +262,7 @@ describe('alert_form', () => {
           iconClass: 'test',
           name: 'test-alert',
           description: 'test',
+          documentationUrl: null,
           validate: (): ValidationResult => {
             return { errors: {} };
           },
@@ -255,6 +274,7 @@ describe('alert_form', () => {
           iconClass: 'test',
           name: 'test-alert',
           description: 'test',
+          documentationUrl: null,
           validate: (): ValidationResult => {
             return { errors: {} };
           },
@@ -423,5 +443,19 @@ describe('alert_form', () => {
       const throttleFieldAfterUpdate = wrapper.find('[data-test-subj="throttleInput"]');
       expect(throttleFieldAfterUpdate.at(1).prop('value')).toEqual(newThrottle);
     });
+
+    it('renders alert type description', async () => {
+      await setup();
+      const alertDescription = wrapper.find('[data-test-subj="alertDescription"]');
+      expect(alertDescription.exists()).toBeTruthy();
+      expect(alertDescription.first().text()).toContain('Alert when testing');
+    });
+
+    it('renders alert type documentation link', async () => {
+      await setup();
+      const alertDocumentationLink = wrapper.find('[data-test-subj="alertDocumentationLink"]');
+      expect(alertDocumentationLink.exists()).toBeTruthy();
+      expect(alertDocumentationLink.first().prop('href')).toBe('https://localhost.local/docs');
+    });
   });
 });

x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_form.tsx

@@ -25,6 +25,8 @@ import {
   EuiHorizontalRule,
   EuiLoadingSpinner,
   EuiEmptyPrompt,
+  EuiLink,
+  EuiText,
 } from '@elastic/eui';
 import { some, filter, map, fold } from 'fp-ts/lib/Option';
 import { pipe } from 'fp-ts/lib/pipeable';
@@ -247,6 +249,33 @@ export const AlertForm = ({
           </EuiFlexItem>
         ) : null}
       </EuiFlexGroup>
+      {alertTypeModel?.description && (
+        <EuiFlexGroup>
+          <EuiFlexItem>
+            <EuiText color="subdued" size="s" data-test-subj="alertDescription">
+              {alertTypeModel.description}&nbsp;
+              {alertTypeModel?.documentationUrl && (
+                <EuiLink
+                  external
+                  target="_blank"
+                  data-test-subj="alertDocumentationLink"
+                  href={
+                    typeof alertTypeModel.documentationUrl === 'function'
+                      ? alertTypeModel.documentationUrl(docLinks)
+                      : alertTypeModel.documentationUrl
+                  }
+                >
+                  <FormattedMessage
+                    id="xpack.triggersActionsUI.sections.alertForm.documentationLabel"
+                    defaultMessage="Documentation"
+                  />
+                </EuiLink>
+              )}
+            </EuiText>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      )}
+      <EuiHorizontalRule />
       {AlertParamsExpressionComponent ? (
         <Suspense fallback={<CenterJustifiedSpinner />}>
           <AlertParamsExpressionComponent

x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/alerts_list.test.tsx

@@ -44,6 +44,7 @@ const alertType = {
   name: 'some alert type',
   description: 'test',
   iconClass: 'test',
+  documentationUrl: null,
   validate: (): ValidationResult => {
     return { errors: {} };
   },

x-pack/plugins/triggers_actions_ui/public/application/type_registry.test.ts

@@ -17,6 +17,7 @@ const getTestAlertType = (id?: string, name?: string, iconClass?: string) => {
     name: name || 'Test alert type',
     description: 'Test description',
     iconClass: iconClass || 'icon',
+    documentationUrl: null,
     validate: (): ValidationResult => {
       return { errors: {} };
     },

x-pack/plugins/triggers_actions_ui/public/types.ts

@@ -176,6 +176,7 @@ export interface AlertTypeModel<AlertParamsType = any, AlertsContextValue = any>
   name: string | JSX.Element;
   description: string;
   iconClass: string;
+  documentationUrl: string | ((docLinks: DocLinksStart) => string) | null;
   validate: (alertParams: AlertParamsType) => ValidationResult;
   alertParamsExpression:
     | React.FunctionComponent<any>

x-pack/plugins/uptime/public/lib/alert_types/__tests__/monitor_status.test.ts

@@ -204,6 +204,7 @@ describe('monitor status alert type', () => {
         "alertParamsExpression": [Function],
         "defaultActionMessage": "Monitor {{state.monitorName}} with url {{{state.monitorUrl}}} is {{state.statusMessage}} from {{state.observerLocation}}. The latest error message is {{{state.latestErrorMessage}}}",
         "description": "Alert when a monitor is down or an availability threshold is breached.",
+        "documentationUrl": [Function],
         "iconClass": "uptimeApp",
         "id": "xpack.uptime.alerts.monitorStatus",
         "name": <FormattedMessage

x-pack/plugins/uptime/public/lib/alert_types/duration_anomaly.tsx

@@ -19,6 +19,9 @@ export const initDurationAnomalyAlertType: AlertTypeInitializer = ({
 }): AlertTypeModel => ({
   id: CLIENT_ALERT_TYPES.DURATION_ANOMALY,
   iconClass: 'uptimeApp',
+  documentationUrl(docLinks) {
+    return `${docLinks.ELASTIC_WEBSITE_URL}guide/en/uptime/${docLinks.DOC_LINK_VERSION}/uptime-alerting.html`;
+  },
   alertParamsExpression: (params: unknown) => (
     <DurationAnomalyAlert core={core} plugins={plugins} params={params} />
   ),

x-pack/plugins/uptime/public/lib/alert_types/monitor_status.tsx

@@ -31,6 +31,9 @@ export const initMonitorStatusAlertType: AlertTypeInitializer = ({
   ),
   description,
   iconClass: 'uptimeApp',
+  documentationUrl(docLinks) {
+    return `${docLinks.ELASTIC_WEBSITE_URL}guide/en/uptime/${docLinks.DOC_LINK_VERSION}/uptime-alerting.html#_monitor_status_alerts`;
+  },
   alertParamsExpression: (params: any) => (
     <MonitorStatusAlert core={core} plugins={plugins} params={params} />
   ),

x-pack/plugins/uptime/public/lib/alert_types/tls.tsx

@@ -15,6 +15,9 @@ const TLSAlert = React.lazy(() => import('./lazy_wrapper/tls_alert'));
 export const initTlsAlertType: AlertTypeInitializer = ({ core, plugins }): AlertTypeModel => ({
   id: CLIENT_ALERT_TYPES.TLS,
   iconClass: 'uptimeApp',
+  documentationUrl(docLinks) {
+    return `${docLinks.ELASTIC_WEBSITE_URL}guide/en/uptime/${docLinks.DOC_LINK_VERSION}/uptime-alerting.html#_tls_alerts`;
+  },
   alertParamsExpression: (params: any) => (
     <TLSAlert core={core} plugins={plugins} params={params} />
   ),

x-pack/test/functional_with_es_ssl/fixtures/plugins/alerts/public/plugin.ts

@@ -31,6 +31,7 @@ export class AlertingFixturePlugin implements Plugin<Setup, Start, AlertingExamp
       name: 'Test Always Firing',
       description: 'Always fires',
       iconClass: 'alert',
+      documentationUrl: null,
       alertParamsExpression: () => React.createElement('div', null, 'Test Always Firing'),
       validate: () => {
         return { errors: {} };
@@ -43,6 +44,7 @@ export class AlertingFixturePlugin implements Plugin<Setup, Start, AlertingExamp
       name: 'Test Noop',
       description: `Doesn't do anything`,
       iconClass: 'alert',
+      documentationUrl: null,
       alertParamsExpression: () => React.createElement('div', null, 'Test Noop'),
       validate: () => {
         return { errors: {} };