Add description and documentation URL in alert flyout

elastic · Nov 4, 2020 · 0099766 · 0099766
1 parent ae3f4f5
commit 0099766
Show file tree

Hide file tree

Showing 23 changed files with 92 additions and 0 deletions.
diff --git a/x-pack/plugins/apm/public/components/alerting/register_apm_alerts.ts b/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')
  ),

diff --git a/x-pack/plugins/infra/public/alerting/inventory/index.ts b/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(

diff --git a/x-pack/plugins/infra/public/alerting/log_threshold/log_threshold_alert_type.ts b/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(

diff --git a/x-pack/plugins/infra/public/alerting/metric_threshold/index.ts b/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(

diff --git a/x-pack/plugins/monitoring/public/alerts/cpu_usage_alert/cpu_usage_alert.tsx b/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} />
  ),

diff --git a/x-pack/plugins/monitoring/public/alerts/disk_usage_alert/index.tsx b/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`;
+ },
  alertParamsExpression: (props: Props) => (
  <Expression {...props} paramDetails={ALERT_DETAILS[ALERT_DISK_USAGE].paramDetails} />
  ),

diff --git a/x-pack/plugins/monitoring/public/alerts/legacy_alert/legacy_alert.tsx b/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}/kibana-alerts.html`;
+ },
  alertParamsExpression: () => (
  <Fragment>
  <EuiSpacer />

diff --git a/x-pack/plugins/monitoring/public/alerts/memory_usage_alert/index.tsx b/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`;
+ },
  alertParamsExpression: (props: Props) => (
  <Expression {...props} paramDetails={ALERT_DETAILS[ALERT_MEMORY_USAGE].paramDetails} />
  ),

diff --git a/.../monitoring/public/alerts/missing_monitoring_data_alert/missing_monitoring_data_alert.tsx b/.../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`;
+ },
  alertParamsExpression: (props: any) => (
  <Expression
  {...props}

diff --git a/x-pack/plugins/monitoring/public/alerts/thread_pool_rejections_alert/index.tsx b/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 />

diff --git a/...ggers_actions_ui/public/application/components/builtin_alert_types/geo_threshold/index.ts b/...ggers_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,

diff --git a/.../triggers_actions_ui/public/application/components/builtin_alert_types/threshold/index.ts b/.../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,

diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_add.test.tsx b/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: {} };
  },

diff --git a/...ck/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_edit.test.tsx b/...ck/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: {} };
  },

diff --git a/...ck/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_form.test.tsx b/...ck/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_form.test.tsx
@@ -32,6 +32,7 @@ describe('alert_form', () => {
  iconClass: 'test',
  name: 'test-alert',
  description: 'test',
+ documentationUrl: null,
  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: {} };
  },
@@ -244,6 +246,7 @@ describe('alert_form', () => {
  iconClass: 'test',
  name: 'test-alert',
  description: 'test',
+ documentationUrl: null,
  validate: (): ValidationResult => {
  return { errors: {} };
  },
@@ -255,6 +258,7 @@ describe('alert_form', () => {
  iconClass: 'test',
  name: 'test-alert',
  description: 'test',
+ documentationUrl: null,
  validate: (): ValidationResult => {
  return { errors: {} };
  },

diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_form.tsx b/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">{alertTypeModel.description}</EuiText>
+ </EuiFlexItem>
+ </EuiFlexGroup>
+ )}
+ {alertTypeModel?.documentationUrl && (
+ <EuiFlexGroup>
+ <EuiFlexItem>
+ <EuiLink
+ external
+ target="_blank"
+ href={
+ typeof alertTypeModel.documentationUrl === 'function'
+ ? alertTypeModel.documentationUrl(docLinks)
+ : alertTypeModel.documentationUrl
+ }
+ >
+ <FormattedMessage
+ id="xpack.triggersActionsUI.sections.alertForm.documentationLabel"
+ defaultMessage="Documentation"
+ />
+ </EuiLink>
+ </EuiFlexItem>
+ </EuiFlexGroup>
+ )}
  {AlertParamsExpressionComponent ? (
  <Suspense fallback={<CenterJustifiedSpinner />}>
  <AlertParamsExpressionComponent

diff --git a/...iggers_actions_ui/public/application/sections/alerts_list/components/alerts_list.test.tsx b/...iggers_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: {} };
  },

diff --git a/x-pack/plugins/triggers_actions_ui/public/application/type_registry.test.ts b/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: {} };
  },

diff --git a/x-pack/plugins/triggers_actions_ui/public/types.ts b/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>

diff --git a/x-pack/plugins/uptime/public/lib/alert_types/__tests__/monitor_status.test.ts b/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

diff --git a/x-pack/plugins/uptime/public/lib/alert_types/duration_anomaly.tsx b/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/observability/${docLinks.DOC_LINK_VERSION}/duration-anomaly-alert.html`;
+ },
  alertParamsExpression: (params: unknown) => (
  <DurationAnomalyAlert core={core} plugins={plugins} params={params} />
  ),

diff --git a/x-pack/plugins/uptime/public/lib/alert_types/monitor_status.tsx b/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/observability/${docLinks.DOC_LINK_VERSION}/monitor-status-alert.html`;
+ },
  alertParamsExpression: (params: any) => (
  <MonitorStatusAlert core={core} plugins={plugins} params={params} />
  ),

diff --git a/x-pack/plugins/uptime/public/lib/alert_types/tls.tsx b/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/observability/${docLinks.DOC_LINK_VERSION}/tls-certificate-alert.html`;
+ },
  alertParamsExpression: (params: any) => (
  <TLSAlert core={core} plugins={plugins} params={params} />
  ),