[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/duration.ts → x-pack/plugins/apm/common/utils/formatters/duration.ts

@@ -8,7 +8,7 @@ import { i18n } from '@kbn/i18n';
 import moment from 'moment';
 import { memoize } from 'lodash';
 import { NOT_AVAILABLE_LABEL } from '../../../common/i18n';
-import { asDecimal, asInteger } from './formatters';
+import { asDecimalOrInteger, asInteger } from './formatters';
 import { TimeUnit } from './datetime';
 import { Maybe } from '../../../typings/common';
 
@@ -31,14 +31,6 @@ export type TimeFormatter = (
 
 type TimeFormatterBuilder = (max: number) => TimeFormatter;
 
-function asDecimalOrInteger(value: number) {
-  // exact 0 or above 10 should not have decimal
-  if (value === 0 || value >= 10) {
-    return asInteger(value);
-  }
-  return asDecimal(value);
-}
-
 function getUnitLabelAndConvertedValue(
   unitKey: DurationTimeUnit,
   value: number

x-pack/plugins/apm/common/utils/formatters/formatters.test.ts

@@ -0,0 +1,52 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+import { asPercent, asDecimalOrInteger } from './formatters';
+
+describe('formatters', () => {
+  describe('asPercent', () => {
+    it('formats as integer when number is above 10', () => {
+      expect(asPercent(3725, 10000, 'n/a')).toEqual('37%');
+    });
+
+    it('adds a decimal when value is below 10', () => {
+      expect(asPercent(0.092, 1)).toEqual('9.2%');
+    });
+
+    it('formats when numerator is 0', () => {
+      expect(asPercent(0, 1, 'n/a')).toEqual('0%');
+    });
+
+    it('returns fallback when denominator is undefined', () => {
+      expect(asPercent(3725, undefined, 'n/a')).toEqual('n/a');
+    });
+
+    it('returns fallback when denominator is 0 ', () => {
+      expect(asPercent(3725, 0, 'n/a')).toEqual('n/a');
+    });
+
+    it('returns fallback when numerator or denominator is NaN', () => {
+      expect(asPercent(3725, NaN, 'n/a')).toEqual('n/a');
+      expect(asPercent(NaN, 10000, 'n/a')).toEqual('n/a');
+    });
+  });
+
+  describe('asDecimalOrInteger', () => {
+    it('formats as integer when number equals to 0 ', () => {
+      expect(asDecimalOrInteger(0)).toEqual('0');
+    });
+    it('formats as integer when number is above or equals 10 ', () => {
+      expect(asDecimalOrInteger(10)).toEqual('10');
+      expect(asDecimalOrInteger(15)).toEqual('15');
+    });
+    it('formats as decimal when number is below 10 ', () => {
+      expect(asDecimalOrInteger(0.25435632645)).toEqual('0.3');
+      expect(asDecimalOrInteger(1)).toEqual('1.0');
+      expect(asDecimalOrInteger(3.374329704990765)).toEqual('3.4');
+      expect(asDecimalOrInteger(5)).toEqual('5.0');
+      expect(asDecimalOrInteger(9)).toEqual('9.0');
+    });
+  });
+});

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

@@ -23,3 +23,32 @@ 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%');
+}
+
+export function asDecimalOrInteger(value: number) {
+  // exact 0 or above 10 should not have decimal
+  if (value === 0 || value >= 10) {
+    return asInteger(value);
+  }
+  return asDecimal(value);
+}

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.interval\\}\\}`,
+      }
+    ),
   });
 
   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.interval\\}\\}`,
+      }
+    ),
   });
 
   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.interval\\}\\}`,
+      }
+    ),
   });
 
   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';