[APM] Add default message to alerts.

x-pack/plugins/apm/public/utils/formatters/__test__/datetime.test.ts → x-pack/plugins/apm/common/utils/formatters/datetime.test.ts

@@ -8,7 +8,7 @@ import {
   asRelativeDateTimeRange,
   asAbsoluteDateTime,
   getDateDifference,
-} from '../datetime';
+} from './datetime';
 
 describe('date time formatters', () => {
   beforeAll(() => {

x-pack/plugins/apm/public/utils/formatters/__test__/duration.test.ts → x-pack/plugins/apm/common/utils/formatters/duration.test.ts

@@ -3,7 +3,7 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-import { asDuration, toMicroseconds, asMillisecondDuration } from '../duration';
+import { asDuration, toMicroseconds, asMillisecondDuration } from './duration';
 
 describe('duration formatters', () => {
   describe('asDuration', () => {

x-pack/plugins/apm/public/utils/formatters/formatters.ts → x-pack/plugins/apm/common/utils/formatters/formatters.ts

@@ -23,3 +23,24 @@ export function tpmUnit(type?: string) {
         defaultMessage: 'tpm',
       });
 }
+
+export function asPercent(
+  numerator: number,
+  denominator: number | undefined,
+  fallbackResult = ''
+) {
+  if (!denominator || isNaN(numerator)) {
+    return fallbackResult;
+  }
+
+  const decimal = numerator / denominator;
+
+  // 33.2 => 33%
+  // 3.32 => 3.3%
+  // 0 => 0%
+  if (Math.abs(decimal) >= 0.1 || decimal === 0) {
+    return numeral(decimal).format('0%');
+  }
+
+  return numeral(decimal).format('0.0%');
+}

x-pack/plugins/apm/public/utils/formatters/__test__/size.test.ts → x-pack/plugins/apm/common/utils/formatters/size.test.ts

@@ -3,7 +3,7 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-import { getFixedByteFormatter, asDynamicBytes } from '../size';
+import { getFixedByteFormatter, asDynamicBytes } from './size';
 
 describe('size formatters', () => {
   describe('byte formatting', () => {

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

@@ -23,6 +23,17 @@ export function registerApmAlerts(
       errors: [],
     }),
     requiresAppContext: true,
+    defaultActionMessage: i18n.translate(
+      'xpack.apm.alertTypes.errorCount.defaultActionMessage',
+      {
+        defaultMessage: `\\{\\{alertName\\}\\} alert is firing because of the following conditions:
+
+- Service name: \\{\\{context.serviceName\\}\\}
+- Environment: \\{\\{context.environment\\}\\}
+- Threshold: \\{\\{context.threshold\\}\\} errors
+- Triggered value: \\{\\{context.triggerValue\\}\\} errors over the last \\{\\{context.intervalSize\\}\\}\\{\\{context.intervalUnit\\}\\}`,
+      }
+    ),
   });
 
   alertTypeRegistry.register({
@@ -38,6 +49,18 @@ export function registerApmAlerts(
       errors: [],
     }),
     requiresAppContext: true,
+    defaultActionMessage: i18n.translate(
+      'xpack.apm.alertTypes.transactionDuration.defaultActionMessage',
+      {
+        defaultMessage: `\\{\\{alertName\\}\\} alert is firing because of the following conditions:
+
+- Service name: \\{\\{context.serviceName\\}\\}
+- Type: \\{\\{context.transactionType\\}\\}
+- Environment: \\{\\{context.environment\\}\\}
+- Threshold: \\{\\{context.threshold\\}\\}ms
+- Triggered value: \\{\\{context.triggerValue\\}\\} over the last \\{\\{context.intervalSize\\}\\}\\{\\{context.intervalUnit\\}\\}`,
+      }
+    ),
   });
 
   alertTypeRegistry.register({
@@ -53,6 +76,18 @@ export function registerApmAlerts(
       errors: [],
     }),
     requiresAppContext: true,
+    defaultActionMessage: i18n.translate(
+      'xpack.apm.alertTypes.transactionErrorRate.defaultActionMessage',
+      {
+        defaultMessage: `\\{\\{alertName\\}\\} alert is firing because of the following conditions:
+
+- Service name: \\{\\{context.serviceName\\}\\}
+- Type: \\{\\{context.transactionType\\}\\}
+- Environment: \\{\\{context.environment\\}\\}
+- Threshold: \\{\\{context.threshold\\}\\}%
+- Triggered value: \\{\\{context.triggerValue\\}\\}% of errors over the last \\{\\{context.intervalSize\\}\\}\\{\\{context.intervalUnit\\}\\}`,
+      }
+    ),
   });
 
   alertTypeRegistry.register({
@@ -68,5 +103,18 @@ export function registerApmAlerts(
       errors: [],
     }),
     requiresAppContext: true,
+    defaultActionMessage: i18n.translate(
+      'xpack.apm.alertTypes.transactionDurationAnomaly.defaultActionMessage',
+      {
+        defaultMessage: `\\{\\{alertName\\}\\} alert is firing because of the following conditions:
+
+- Service name: \\{\\{context.serviceName\\}\\}
+- Type: \\{\\{context.transactionType\\}\\}
+- Environment: \\{\\{context.environment\\}\\}
+- Severity threshold: \\{\\{context.threshold\\}\\}
+- Severity value: \\{\\{context.thresholdValue\\}\\}
+`,
+      }
+    ),
   });
 }

x-pack/plugins/apm/public/components/app/ErrorGroupDetails/Distribution/index.tsx

@@ -12,7 +12,7 @@ import d3 from 'd3';
 import { scaleUtc } from 'd3-scale';
 import { mean } from 'lodash';
 import React from 'react';
-import { asRelativeDateTimeRange } from '../../../../utils/formatters';
+import { asRelativeDateTimeRange } from '../../../../../common/utils/formatters';
 import { getTimezoneOffsetInMs } from '../../../shared/charts/CustomPlot/getTimezoneOffsetInMs';
 // @ts-expect-error
 import Histogram from '../../../shared/charts/Histogram';

x-pack/plugins/apm/public/components/app/ServiceMap/Popover/AnomalyDetection.tsx

@@ -20,7 +20,7 @@ import {
 } from '../../../../../common/service_health_status';
 import { useTheme } from '../../../../hooks/useTheme';
 import { fontSize, px } from '../../../../style/variables';
-import { asInteger, asDuration } from '../../../../utils/formatters';
+import { asInteger, asDuration } from '../../../../../common/utils/formatters';
 import { MLJobLink } from '../../../shared/Links/MachineLearningLinks/MLJobLink';
 import { popoverWidth } from '../cytoscapeOptions';
 import { TRANSACTION_REQUEST } from '../../../../../common/transaction_types';

x-pack/plugins/apm/public/components/app/ServiceMap/Popover/ServiceStatsList.tsx

@@ -8,9 +8,12 @@ import { i18n } from '@kbn/i18n';
 import { isNumber } from 'lodash';
 import React from 'react';
 import styled from 'styled-components';
-import { asPercent } from '../../../../../common/utils/formatters';
+import {
+  asDuration,
+  asPercent,
+  tpmUnit,
+} from '../../../../../common/utils/formatters';
 import { ServiceNodeStats } from '../../../../../common/service_map';
-import { asDuration, tpmUnit } from '../../../../utils/formatters';
 
 export const ItemRow = styled('tr')`
   line-height: 2;

x-pack/plugins/apm/public/components/app/ServiceNodeOverview/index.tsx

@@ -13,15 +13,18 @@ import {
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import styled from 'styled-components';
-import { asPercent } from '../../../../common/utils/formatters';
+import {
+  asDynamicBytes,
+  asInteger,
+  asPercent,
+} from '../../../../common/utils/formatters';
 import { UNIDENTIFIED_SERVICE_NODES_LABEL } from '../../../../common/i18n';
 import { SERVICE_NODE_NAME_MISSING } from '../../../../common/service_nodes';
 import { Projection } from '../../../../common/projections';
 import { LocalUIFilters } from '../../shared/LocalUIFilters';
 import { useUrlParams } from '../../../hooks/useUrlParams';
 import { ManagedTable, ITableColumn } from '../../shared/ManagedTable';
 import { useFetcher } from '../../../hooks/useFetcher';
-import { asDynamicBytes, asInteger } from '../../../utils/formatters';
 import { ServiceNodeMetricOverviewLink } from '../../shared/Links/apm/ServiceNodeMetricOverviewLink';
 import { truncate, px, unit } from '../../../style/variables';
 

x-pack/plugins/apm/public/components/app/ServiceOverview/ServiceList/index.tsx

@@ -11,12 +11,15 @@ import styled from 'styled-components';
 import { ValuesType } from 'utility-types';
 import { orderBy } from 'lodash';
 import { ServiceHealthStatus } from '../../../../../common/service_health_status';
-import { asPercent } from '../../../../../common/utils/formatters';
+import {
+  asPercent,
+  asDecimal,
+  asMillisecondDuration,
+} from '../../../../../common/utils/formatters';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { ServiceListAPIResponse } from '../../../../../server/lib/services/get_services';
 import { NOT_AVAILABLE_LABEL } from '../../../../../common/i18n';
 import { fontSizes, px, truncate, unit } from '../../../../style/variables';
-import { asDecimal, asMillisecondDuration } from '../../../../utils/formatters';
 import { ManagedTable, ITableColumn } from '../../../shared/ManagedTable';
 import { EnvironmentBadge } from '../../../shared/EnvironmentBadge';
 import { TransactionOverviewLink } from '../../../shared/Links/apm/TransactionOverviewLink';

x-pack/plugins/apm/public/components/app/TraceOverview/TraceList.tsx

@@ -10,8 +10,8 @@ import React from 'react';
 import styled from 'styled-components';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { TransactionGroup } from '../../../../server/lib/transaction_groups/fetcher';
+import { asMillisecondDuration } from '../../../../common/utils/formatters';
 import { fontSizes, truncate } from '../../../style/variables';
-import { asMillisecondDuration } from '../../../utils/formatters';
 import { EmptyMessage } from '../../shared/EmptyMessage';
 import { ImpactBar } from '../../shared/ImpactBar';
 import { ITableColumn, ManagedTable } from '../../shared/ManagedTable';

x-pack/plugins/apm/public/components/app/TransactionDetails/Distribution/index.tsx

@@ -10,12 +10,12 @@ import d3 from 'd3';
 import { isEmpty } from 'lodash';
 import React, { useCallback } from 'react';
 import { ValuesType } from 'utility-types';
+import { getDurationFormatter } from '../../../../../common/utils/formatters';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { TransactionDistributionAPIResponse } from '../../../../../server/lib/transactions/distribution';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { DistributionBucket } from '../../../../../server/lib/transactions/distribution/get_buckets';
 import { IUrlParams } from '../../../../context/UrlParamsContext/types';
-import { getDurationFormatter } from '../../../../utils/formatters';
 // @ts-expect-error
 import Histogram from '../../../shared/charts/Histogram';
 import { EmptyMessage } from '../../../shared/EmptyMessage';

x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/WaterfallItem.tsx

@@ -9,9 +9,9 @@ import styled from 'styled-components';
 
 import { EuiIcon, EuiText, EuiTitle, EuiToolTip } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
+import { asDuration } from '../../../../../../../common/utils/formatters';
 import { isRumAgentName } from '../../../../../../../common/agent_name';
 import { px, unit, units } from '../../../../../../style/variables';
-import { asDuration } from '../../../../../../utils/formatters';
 import { ErrorCount } from '../../ErrorCount';
 import { IWaterfallItem } from './waterfall_helpers/waterfall_helpers';
 import { ErrorOverviewLink } from '../../../../../shared/Links/apm/ErrorOverviewLink';

x-pack/plugins/apm/public/components/app/TransactionOverview/TransactionList/index.tsx

@@ -10,8 +10,11 @@ import React, { useMemo } from 'react';
 import styled from 'styled-components';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { TransactionGroup } from '../../../../../server/lib/transaction_groups/fetcher';
+import {
+  asDecimal,
+  asMillisecondDuration,
+} from '../../../../../common/utils/formatters';
 import { fontFamilyCode, truncate } from '../../../../style/variables';
-import { asDecimal, asMillisecondDuration } from '../../../../utils/formatters';
 import { ImpactBar } from '../../../shared/ImpactBar';
 import { ITableColumn, ManagedTable } from '../../../shared/ManagedTable';
 import { LoadingStatePrompt } from '../../../shared/LoadingStatePrompt';

x-pack/plugins/apm/public/components/shared/Summary/DurationSummaryItem.tsx

@@ -6,8 +6,8 @@
 import React from 'react';
 import { i18n } from '@kbn/i18n';
 import { EuiToolTip, EuiText } from '@elastic/eui';
+import { asDuration } from '../../../../common/utils/formatters';
 import { PercentOfParent } from '../../app/TransactionDetails/WaterfallWithSummmary/PercentOfParent';
-import { asDuration } from '../../../utils/formatters';
 
 interface Props {
   duration: number;

x-pack/plugins/apm/public/components/shared/TimestampTooltip/index.tsx

@@ -6,7 +6,10 @@
 import React from 'react';
 import { EuiToolTip } from '@elastic/eui';
 import moment from 'moment-timezone';
-import { asAbsoluteDateTime, TimeUnit } from '../../../utils/formatters';
+import {
+  asAbsoluteDateTime,
+  TimeUnit,
+} from '../../../../common/utils/formatters';
 
 interface Props {
   /**

x-pack/plugins/apm/public/components/shared/charts/CustomPlot/AnnotationsPlot.tsx

@@ -13,11 +13,11 @@ import {
   EuiText,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
+import { asAbsoluteDateTime } from '../../../../../common/utils/formatters';
 import { useTheme } from '../../../../hooks/useTheme';
 import { Maybe } from '../../../../../typings/common';
 import { Annotation } from '../../../../../common/annotations';
 import { PlotValues, SharedPlot } from './plotUtils';
-import { asAbsoluteDateTime } from '../../../../utils/formatters';
 
 interface Props {
   annotations: Annotation[];

x-pack/plugins/apm/public/components/shared/charts/Histogram/__test__/Histogram.test.js

@@ -9,16 +9,16 @@ import React from 'react';
 import d3 from 'd3';
 import { HistogramInner } from '../index';
 import response from './response.json';
-import {
-  getDurationFormatter,
-  asInteger,
-} from '../../../../../utils/formatters';
 import {
   disableConsoleWarning,
   toJson,
   mountWithTheme,
 } from '../../../../../utils/testHelpers';
 import { getFormattedBuckets } from '../../../../app/TransactionDetails/Distribution/index';
+import {
+  asInteger,
+  getDurationFormatter,
+} from '../../../../../../common/utils/formatters';
 
 describe('Histogram', () => {
   let mockConsole;

x-pack/plugins/apm/public/components/shared/charts/MetricsChart/index.tsx

@@ -5,18 +5,18 @@
  */
 import { EuiTitle } from '@elastic/eui';
 import React from 'react';
-import { asPercent } from '../../../../../common/utils/formatters';
-// eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import { GenericMetricsChart } from '../../../../../server/lib/metrics/transform_metrics_chart';
-// @ts-expect-error
-import CustomPlot from '../CustomPlot';
 import {
+  asPercent,
   asDecimal,
   asInteger,
   asDynamicBytes,
   getFixedByteFormatter,
   asDuration,
-} from '../../../../utils/formatters';
+} from '../../../../../common/utils/formatters';
+// eslint-disable-next-line @kbn/eslint/no-restricted-paths
+import { GenericMetricsChart } from '../../../../../server/lib/metrics/transform_metrics_chart';
+// @ts-expect-error
+import CustomPlot from '../CustomPlot';
 import { Coordinate } from '../../../../../typings/timeseries';
 import { isValidCoordinateValue } from '../../../../utils/isValidCoordinateValue';
 import { useChartsSync } from '../../../../hooks/useChartsSync';

x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/AgentMarker.tsx

@@ -7,9 +7,9 @@
 import React from 'react';
 import { EuiToolTip } from '@elastic/eui';
 import styled from 'styled-components';
+import { asDuration } from '../../../../../../common/utils/formatters';
 import { useTheme } from '../../../../../hooks/useTheme';
 import { px, units } from '../../../../../style/variables';
-import { asDuration } from '../../../../../utils/formatters';
 import { Legend } from '../../Legend';
 import { AgentMark } from '../../../../app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Marks/get_agent_marks';
 

x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/ErrorMarker.tsx

@@ -7,14 +7,14 @@
 import React, { useState } from 'react';
 import { EuiPopover, EuiText } from '@elastic/eui';
 import styled from 'styled-components';
+import { asDuration } from '../../../../../../common/utils/formatters';
 import { useTheme } from '../../../../../hooks/useTheme';
 import {
   TRACE_ID,
   TRANSACTION_ID,
 } from '../../../../../../common/elasticsearch_fieldnames';
 import { useUrlParams } from '../../../../../hooks/useUrlParams';
 import { px, unit, units } from '../../../../../style/variables';
-import { asDuration } from '../../../../../utils/formatters';
 import { ErrorMark } from '../../../../app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Marks/get_error_marks';
 import { ErrorDetailLink } from '../../../Links/apm/ErrorDetailLink';
 import { Legend, Shape } from '../../Legend';

x-pack/plugins/apm/public/components/shared/charts/Timeline/TimelineAxis.tsx

@@ -8,9 +8,9 @@ import React, { ReactNode } from 'react';
 import { inRange } from 'lodash';
 import { Sticky } from 'react-sticky';
 import { XAxis, XYPlot } from 'react-vis';
+import { getDurationFormatter } from '../../../../../common/utils/formatters';
 import { useTheme } from '../../../../hooks/useTheme';
 import { px } from '../../../../style/variables';
-import { getDurationFormatter } from '../../../../utils/formatters';
 import { Mark } from './';
 import { LastTickValue } from './LastTickValue';
 import { Marker } from './Marker';