Add group-by to APM Latency threshold rule

x-pack/plugins/apm/common/rules/schema.ts

@@ -29,6 +29,9 @@ export const transactionDurationParamsSchema = schema.object({
     schema.literal(AggregationType.P99),
   ]),
   environment: schema.string(),
+  groupBy: schema.maybe(
+    schema.oneOf([schema.string(), schema.arrayOf(schema.string())])
+  ),
 });
 
 export const anomalyParamsSchema = schema.object({

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

@@ -0,0 +1,45 @@
+/*
+ * 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 { getGroupByTerms } from './get_groupby_terms';
+
+describe('get terms fields based on group-by', () => {
+  it('returns single terms field', () => {
+    const ruleParams = { groupBy: 'service.name' };
+    const terms = getGroupByTerms(ruleParams.groupBy);
+    expect(terms).toEqual([
+      { field: 'service.name', missing: 'SERVICE_NAME_NOT_DEFINED' },
+    ]);
+  });
+
+  it('returns multiple terms fields', () => {
+    const ruleParams = {
+      groupBy: [
+        'service.name',
+        'service.environment',
+        'transaction.type',
+        'transaction.name',
+      ],
+    };
+    const terms = getGroupByTerms(ruleParams.groupBy);
+    expect(terms).toEqual([
+      { field: 'service.name', missing: 'SERVICE_NAME_NOT_DEFINED' },
+      {
+        field: 'service.environment',
+        missing: 'SERVICE_ENVIRONMENT_NOT_DEFINED',
+      },
+      { field: 'transaction.type', missing: 'TRANSACTION_TYPE_NOT_DEFINED' },
+      { field: 'transaction.name', missing: 'TRANSACTION_NAME_NOT_DEFINED' },
+    ]);
+  });
+
+  it('returns an empty array', () => {
+    const ruleParams = { groupBy: undefined };
+    const terms = getGroupByTerms(ruleParams.groupBy);
+    expect(terms).toEqual([]);
+  });
+});

x-pack/plugins/apm/common/utils/get_groupby_terms.ts

@@ -0,0 +1,15 @@
+/*
+ * 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.
+ */
+
+export const getGroupByTerms = (groupBy: string[] | string | undefined) => {
+  return (groupBy ? [groupBy] : []).flat().map((group) => {
+    return {
+      field: group,
+      missing: group.replaceAll('.', '_').toUpperCase().concat('_NOT_DEFINED'),
+    };
+  });
+};

x-pack/plugins/apm/public/components/alerting/rule_types/transaction_duration_rule_type/index.tsx

@@ -8,13 +8,15 @@
 import { EuiSelect } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { defaults, map, omit } from 'lodash';
-import React, { useEffect } from 'react';
+import React, { useCallback, useEffect } from 'react';
 import { CoreStart } from '@kbn/core/public';
 import { useKibana } from '@kbn/kibana-react-plugin/public';
 import {
   ForLastExpression,
   TIME_UNITS,
 } from '@kbn/triggers-actions-ui-plugin/public';
+import { EuiFormRow } from '@elastic/eui';
+import { EuiSpacer } from '@elastic/eui';
 import { AggregationType } from '../../../../../common/rules/apm_rule_types';
 import { ENVIRONMENT_ALL } from '../../../../../common/environment_filter_values';
 import { getDurationFormatter } from '../../../../../common/utils/formatters';
@@ -34,6 +36,7 @@ import {
 import { AlertMetadata, getIntervalAndTimeRange } from '../../utils/helper';
 import { ApmRuleParamsContainer } from '../../ui_components/apm_rule_params_container';
 import { PopoverExpression } from '../../ui_components/popover_expression';
+import { APMRuleGroupBy } from '../../ui_components/apm_rule_group_by';
 
 export interface RuleParams {
   aggregationType: AggregationType;
@@ -43,6 +46,7 @@ export interface RuleParams {
   transactionType: string;
   windowSize: number;
   windowUnit: string;
+  groupBy?: string | string[] | undefined;
 }
 
 const TRANSACTION_ALERT_AGGREGATION_TYPES: Record<AggregationType, string> = {
@@ -142,6 +146,13 @@ export function TransactionDurationRuleType(props: Props) {
     />
   );
 
+  const onGroupByChange = useCallback(
+    (group: string[] | string | null) => {
+      setRuleParams('groupBy', group && group.length ? group : '');
+    },
+    [setRuleParams]
+  );
+
   const fields = [
     <ServiceField
       allowAll={false}
@@ -206,12 +217,38 @@ export function TransactionDurationRuleType(props: Props) {
     />,
   ];
 
+  const groupAlertsBy = (
+    <>
+      <EuiFormRow
+        label={i18n.translate('xpack.apm.ruleFlyout.createAlertPerText', {
+          defaultMessage: 'Group alerts by',
+        })}
+        helpText={i18n.translate(
+          'xpack.apm.ruleFlyout.createAlertPerHelpText',
+          {
+            defaultMessage:
+              'Create an alert for every unique value. For example: "transaction.name". By default, alert is created for every unique service.name, service.environment and transaction.type.',
+          }
+        )}
+        fullWidth
+        display="rowCompressed"
+      >
+        <APMRuleGroupBy
+          onChange={onGroupByChange}
+          options={{ groupBy: ruleParams.groupBy }}
+        />
+      </EuiFormRow>
+      <EuiSpacer size="m" />
+    </>
+  );
+
   return (
     <ApmRuleParamsContainer
       minimumWindowSize={{ value: 5, unit: TIME_UNITS.MINUTE }}
       chartPreview={chartPreview}
       defaultParams={params}
       fields={fields}
+      groupAlertsBy={groupAlertsBy}
       setRuleParams={setRuleParams}
       setRuleProperty={setRuleProperty}
     />

x-pack/plugins/apm/public/components/alerting/ui_components/apm_rule_group_by.tsx

@@ -0,0 +1,82 @@
+/*
+ * 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 { EuiComboBox } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import React, { useCallback } from 'react';
+import {
+  SERVICE_ENVIRONMENT,
+  SERVICE_NAME,
+  TRANSACTION_NAME,
+} from '../../../../common/es_fields/apm';
+import { TRANSACTION_TYPE } from './alert_details_app_section/types';
+
+interface Props {
+  options: { groupBy: string[] | string | undefined };
+  onChange: (groupBy: string | null | string[]) => void;
+  errorOptions?: string[];
+}
+
+const preSelectedFields: string[] = [
+  SERVICE_NAME,
+  SERVICE_ENVIRONMENT,
+  TRANSACTION_TYPE,
+];
+
+const fields: string[] = [TRANSACTION_NAME];
+
+export function APMRuleGroupBy({ options, onChange, errorOptions }: Props) {
+  const handleChange = useCallback(
+    (selectedOptions: Array<{ label: string }>) => {
+      const groupByOption = selectedOptions.map((option) => option.label);
+      onChange(
+        groupByOption.filter((group) => !preSelectedFields.includes(group))
+      );
+    },
+    [onChange]
+  );
+
+  const selectedOptions = [
+    ...preSelectedFields.map((field) => ({
+      label: field,
+      color: 'lightgray',
+    })),
+    ...(Array.isArray(options.groupBy)
+      ? options.groupBy.map((field) => ({
+          label: field,
+          color: errorOptions?.includes(field) ? 'danger' : undefined,
+        }))
+      : options.groupBy
+      ? [
+          {
+            label: options.groupBy,
+            color: errorOptions?.includes(options.groupBy)
+              ? 'danger'
+              : undefined,
+          },
+        ]
+      : []),
+  ];
+
+  return (
+    <EuiComboBox
+      data-test-subj="apmRule-groupBy"
+      placeholder={i18n.translate('xpack.apm.ruleFlyout.groupByLabel', {
+        defaultMessage: 'Everything',
+      })}
+      aria-label={i18n.translate('xpack.apm.ruleFlyout.groupByAriaLabel', {
+        defaultMessage: 'Graph per',
+      })}
+      fullWidth
+      singleSelection={false}
+      selectedOptions={selectedOptions}
+      options={fields.map((field) => ({ label: field }))}
+      onChange={handleChange}
+      isClearable={true}
+    />
+  );
+}

x-pack/plugins/apm/public/components/alerting/ui_components/apm_rule_params_container/index.tsx

@@ -24,13 +24,15 @@ interface Props {
   setRuleProperty: (key: string, value: any) => void;
   defaultParams: Record<string, any>;
   fields: React.ReactNode[];
+  groupAlertsBy?: React.ReactNode;
   chartPreview?: React.ReactNode;
   minimumWindowSize?: MinimumWindowSize;
 }
 
 export function ApmRuleParamsContainer(props: Props) {
   const {
     fields,
+    groupAlertsBy,
     setRuleParams,
     defaultParams,
     chartPreview,
@@ -72,6 +74,7 @@ export function ApmRuleParamsContainer(props: Props) {
 
       {chartPreview}
       <EuiSpacer size="m" />
+      {groupAlertsBy}
     </>
   );
 }