Add KQL filtering in APM rules

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

@@ -17,6 +17,8 @@ export const errorCountParamsSchema = schema.object({
   environment: schema.string(),
   groupBy: schema.maybe(schema.arrayOf(schema.string())),
   errorGroupingKey: schema.maybe(schema.string()),
+  useKqlFilter: schema.maybe(schema.boolean()),
+  kqlFilter: schema.maybe(schema.string()),
 });
 
 export const transactionDurationParamsSchema = schema.object({
@@ -33,6 +35,8 @@ export const transactionDurationParamsSchema = schema.object({
   ]),
   environment: schema.string(),
   groupBy: schema.maybe(schema.arrayOf(schema.string())),
+  useKqlFilter: schema.maybe(schema.boolean()),
+  kqlFilter: schema.maybe(schema.string()),
 });
 
 export const anomalyParamsSchema = schema.object({
@@ -58,6 +62,8 @@ export const transactionErrorRateParamsSchema = schema.object({
   serviceName: schema.maybe(schema.string()),
   environment: schema.string(),
   groupBy: schema.maybe(schema.arrayOf(schema.string())),
+  useKqlFilter: schema.maybe(schema.boolean()),
+  kqlFilter: schema.maybe(schema.string()),
 });
 
 type ErrorCountParamsType = TypeOf<typeof errorCountParamsSchema>;

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

@@ -11,7 +11,7 @@ import { CoreStart } from '@kbn/core/public';
 import { createKibanaReactContext } from '@kbn/kibana-react-plugin/public';
 import { TIME_UNITS } from '@kbn/triggers-actions-ui-plugin/public';
 import { __IntlProvider as IntlProvider } from '@kbn/i18n-react';
-import { RuleParams, ErrorCountRuleType } from '.';
+import { ErrorCountRuleParams, ErrorCountRuleType } from '.';
 import { ENVIRONMENT_ALL } from '../../../../../common/environment_filter_values';
 import { createCallApmApi } from '../../../../services/rest/create_call_apm_api';
 import { AlertMetadata } from '../../utils/helper';
@@ -22,10 +22,15 @@ const coreMock = {
   uiSettings: { get: () => {} },
 } as unknown as CoreStart;
 
-const KibanaReactContext = createKibanaReactContext(coreMock);
+const KibanaReactContext = createKibanaReactContext({
+  ...coreMock,
+  dataViews: {
+    create: async () => {},
+  },
+});
 
 interface Args {
-  ruleParams: RuleParams;
+  ruleParams: ErrorCountRuleParams;
   metadata?: AlertMetadata;
 }
 
@@ -54,7 +59,7 @@ export const CreatingInApmFromInventory: Story<Args> = ({
   ruleParams,
   metadata,
 }) => {
-  const [params, setParams] = useState<RuleParams>(ruleParams);
+  const [params, setParams] = useState<ErrorCountRuleParams>(ruleParams);
 
   function setRuleParams(property: string, value: any) {
     setParams({ ...params, [property]: value });
@@ -83,7 +88,7 @@ export const CreatingInApmFromService: Story<Args> = ({
   ruleParams,
   metadata,
 }) => {
-  const [params, setParams] = useState<RuleParams>(ruleParams);
+  const [params, setParams] = useState<ErrorCountRuleParams>(ruleParams);
 
   function setRuleParams(property: string, value: any) {
     setParams({ ...params, [property]: value });
@@ -112,7 +117,7 @@ export const EditingInStackManagement: Story<Args> = ({
   ruleParams,
   metadata,
 }) => {
-  const [params, setParams] = useState<RuleParams>(ruleParams);
+  const [params, setParams] = useState<ErrorCountRuleParams>(ruleParams);
 
   function setRuleParams(property: string, value: any) {
     setParams({ ...params, [property]: value });
@@ -142,7 +147,7 @@ export const CreatingInStackManagement: Story<Args> = ({
   ruleParams,
   metadata,
 }) => {
-  const [params, setParams] = useState<RuleParams>(ruleParams);
+  const [params, setParams] = useState<ErrorCountRuleParams>(ruleParams);
 
   function setRuleParams(property: string, value: any) {
     setParams({ ...params, [property]: value });

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

@@ -16,6 +16,7 @@ import {
 } from '@kbn/triggers-actions-ui-plugin/public';
 import { EuiFormRow } from '@elastic/eui';
 import { EuiSpacer } from '@elastic/eui';
+import { EuiSwitchEvent } from '@elastic/eui';
 import { ENVIRONMENT_ALL } from '../../../../../common/environment_filter_values';
 import { asInteger } from '../../../../../common/utils/formatters';
 import {
@@ -46,19 +47,22 @@ import {
   LoadingState,
   NoDataState,
 } from '../../ui_components/chart_preview/chart_preview_helper';
+import { ApmRuleKqlFilter } from '../../ui_components/apm_rule_kql_filter';
 
-export interface RuleParams {
+export interface ErrorCountRuleParams {
   windowSize?: number;
   windowUnit?: TIME_UNITS;
   threshold?: number;
   serviceName?: string;
   environment?: string;
   groupBy?: string[] | undefined;
   errorGroupingKey?: string;
+  useKqlFilter?: boolean;
+  kqlFilter?: string;
 }
 
 interface Props {
-  ruleParams: RuleParams;
+  ruleParams: ErrorCountRuleParams;
   metadata?: AlertMetadata;
   setRuleParams: (key: string, value: any) => void;
   setRuleProperty: (key: string, value: any) => void;
@@ -101,6 +105,7 @@ export function ErrorCountRuleType(props: Props) {
                 start,
                 end,
                 groupBy: params.groupBy,
+                kqlFilter: params.kqlFilter,
               },
             },
           }
@@ -114,6 +119,7 @@ export function ErrorCountRuleType(props: Props) {
       params.serviceName,
       params.errorGroupingKey,
       params.groupBy,
+      params.kqlFilter,
     ]
   );
 
@@ -124,7 +130,7 @@ export function ErrorCountRuleType(props: Props) {
     [setRuleParams]
   );
 
-  const fields = [
+  const filterFields = [
     <ServiceField
       currentValue={params.serviceName}
       onChange={(value) => {
@@ -150,7 +156,9 @@ export function ErrorCountRuleType(props: Props) {
       onChange={(value) => setRuleParams('errorGroupingKey', value)}
       serviceName={params.serviceName}
     />,
+  ];
 
+  const criteriaFields = [
     <IsAboveField
       value={params.threshold}
       unit={i18n.translate('xpack.apm.errorCountRuleType.errors', {
@@ -174,6 +182,11 @@ export function ErrorCountRuleType(props: Props) {
     />,
   ];
 
+  const fields = [
+    ...(!ruleParams.useKqlFilter ? filterFields : []),
+    ...criteriaFields,
+  ];
+
   const errorCountChartPreview = data?.errorCountChartPreview;
   const series = errorCountChartPreview?.series ?? [];
   const hasData = series.length > 0;
@@ -227,12 +240,31 @@ export function ErrorCountRuleType(props: Props) {
     </>
   );
 
+  const onToggleKqlFilter = (e: EuiSwitchEvent) => {
+    setRuleParams('serviceName', undefined);
+    setRuleParams('errorGroupingKey', undefined);
+    setRuleParams('environment', ENVIRONMENT_ALL.value);
+    setRuleParams('kqlFilter', undefined);
+    setRuleParams('useKqlFilter', e.target.checked);
+  };
+
+  const kqlFilter = (
+    <>
+      <ApmRuleKqlFilter
+        ruleParams={ruleParams}
+        setRuleParams={setRuleParams}
+        onToggleKqlFilter={onToggleKqlFilter}
+      />
+    </>
+  );
+
   return (
     <ApmRuleParamsContainer
       minimumWindowSize={{ value: 5, unit: TIME_UNITS.MINUTE }}
       defaultParams={params}
       fields={fields}
       groupAlertsBy={groupAlertsBy}
+      kqlFilter={kqlFilter}
       setRuleParams={setRuleParams}
       setRuleProperty={setRuleProperty}
       chartPreview={chartPreview}

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

@@ -9,7 +9,7 @@ import { Story } from '@storybook/react';
 import React, { ComponentType, useState } from 'react';
 import { CoreStart } from '@kbn/core/public';
 import { createKibanaReactContext } from '@kbn/kibana-react-plugin/public';
-import { RuleParams, TransactionDurationRuleType } from '.';
+import { TransactionDurationRuleParams, TransactionDurationRuleType } from '.';
 import { AggregationType } from '../../../../../common/rules/apm_rule_types';
 import { AlertMetadata } from '../../utils/helper';
 import { ENVIRONMENT_ALL } from '../../../../../common/environment_filter_values';
@@ -19,7 +19,7 @@ const KibanaReactContext = createKibanaReactContext({
 } as unknown as Partial<CoreStart>);
 
 interface Args {
-  ruleParams: RuleParams;
+  ruleParams: TransactionDurationRuleParams;
   metadata?: AlertMetadata;
 }
 
@@ -43,7 +43,8 @@ export const CreatingInApmServiceOverview: Story<Args> = ({
   ruleParams,
   metadata,
 }) => {
-  const [params, setParams] = useState<RuleParams>(ruleParams);
+  const [params, setParams] =
+    useState<TransactionDurationRuleParams>(ruleParams);
 
   function setRuleParams(property: string, value: any) {
     setParams({ ...params, [property]: value });
@@ -80,7 +81,8 @@ export const CreatingInStackManagement: Story<Args> = ({
   ruleParams,
   metadata,
 }) => {
-  const [params, setParams] = useState<RuleParams>(ruleParams);
+  const [params, setParams] =
+    useState<TransactionDurationRuleParams>(ruleParams);
 
   function setRuleParams(property: string, value: any) {
     setParams({ ...params, [property]: value });

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

@@ -17,6 +17,7 @@ import {
 } from '@kbn/triggers-actions-ui-plugin/public';
 import { EuiFormRow } from '@elastic/eui';
 import { EuiSpacer } from '@elastic/eui';
+import { EuiSwitchEvent } 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';
@@ -53,8 +54,9 @@ import {
   LoadingState,
   NoDataState,
 } from '../../ui_components/chart_preview/chart_preview_helper';
+import { ApmRuleKqlFilter } from '../../ui_components/apm_rule_kql_filter';
 
-export interface RuleParams {
+export interface TransactionDurationRuleParams {
   aggregationType: AggregationType;
   environment: string;
   threshold: number;
@@ -64,6 +66,8 @@ export interface RuleParams {
   windowSize: number;
   windowUnit: string;
   groupBy?: string[] | undefined;
+  useKqlFilter?: boolean;
+  kqlFilter?: string;
 }
 
 const TRANSACTION_ALERT_AGGREGATION_TYPES: Record<AggregationType, string> = {
@@ -82,7 +86,7 @@ const TRANSACTION_ALERT_AGGREGATION_TYPES: Record<AggregationType, string> = {
 };
 
 interface Props {
-  ruleParams: RuleParams;
+  ruleParams: TransactionDurationRuleParams;
   metadata?: AlertMetadata;
   setRuleParams: (key: string, value: any) => void;
   setRuleProperty: (key: string, value: any) => void;
@@ -131,6 +135,7 @@ export function TransactionDurationRuleType(props: Props) {
                 start,
                 end,
                 groupBy: params.groupBy,
+                kqlFilter: params.kqlFilter,
               },
             },
           }
@@ -146,6 +151,7 @@ export function TransactionDurationRuleType(props: Props) {
       params.windowSize,
       params.windowUnit,
       params.groupBy,
+      params.kqlFilter,
     ]
   );
 
@@ -186,7 +192,7 @@ export function TransactionDurationRuleType(props: Props) {
     [setRuleParams]
   );
 
-  const fields = [
+  const filterFields = [
     <ServiceField
       allowAll={false}
       currentValue={params.serviceName}
@@ -219,6 +225,9 @@ export function TransactionDurationRuleType(props: Props) {
       onChange={(value) => setRuleParams('transactionName', value)}
       serviceName={params.serviceName}
     />,
+  ];
+
+  const criteriaFields = [
     <PopoverExpression
       value={params.aggregationType}
       title={i18n.translate('xpack.apm.transactionDurationRuleType.when', {
@@ -261,6 +270,11 @@ export function TransactionDurationRuleType(props: Props) {
     />,
   ];
 
+  const fields = [
+    ...(!ruleParams.useKqlFilter ? filterFields : []),
+    ...criteriaFields,
+  ];
+
   const groupAlertsBy = (
     <>
       <EuiFormRow
@@ -295,13 +309,33 @@ export function TransactionDurationRuleType(props: Props) {
     </>
   );
 
+  const onToggleKqlFilter = (e: EuiSwitchEvent) => {
+    setRuleParams('serviceName', undefined);
+    setRuleParams('transactionType', undefined);
+    setRuleParams('transactionName', undefined);
+    setRuleParams('environment', ENVIRONMENT_ALL.value);
+    setRuleParams('kqlFilter', undefined);
+    setRuleParams('useKqlFilter', e.target.checked);
+  };
+
+  const kqlFilter = (
+    <>
+      <ApmRuleKqlFilter
+        ruleParams={ruleParams}
+        setRuleParams={setRuleParams}
+        onToggleKqlFilter={onToggleKqlFilter}
+      />
+    </>
+  );
+
   return (
     <ApmRuleParamsContainer
       minimumWindowSize={{ value: 5, unit: TIME_UNITS.MINUTE }}
       chartPreview={chartPreview}
       defaultParams={params}
       fields={fields}
       groupAlertsBy={groupAlertsBy}
+      kqlFilter={kqlFilter}
       setRuleParams={setRuleParams}
       setRuleProperty={setRuleProperty}
     />

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

@@ -9,7 +9,7 @@ import { Story } from '@storybook/react';
 import React, { ComponentType, useState } from 'react';
 import { CoreStart } from '@kbn/core/public';
 import { createKibanaReactContext } from '@kbn/kibana-react-plugin/public';
-import { RuleParams, TransactionErrorRateRuleType } from '.';
+import { ErrorRateRuleParams, TransactionErrorRateRuleType } from '.';
 import { AlertMetadata } from '../../utils/helper';
 import { ENVIRONMENT_ALL } from '../../../../../common/environment_filter_values';
 
@@ -18,7 +18,7 @@ const KibanaReactContext = createKibanaReactContext({
 } as unknown as Partial<CoreStart>);
 
 interface Args {
-  ruleParams: RuleParams;
+  ruleParams: ErrorRateRuleParams;
   metadata?: AlertMetadata;
 }
 
@@ -42,7 +42,7 @@ export const CreatingInApmServiceOverview: Story<Args> = ({
   ruleParams,
   metadata,
 }) => {
-  const [params, setParams] = useState<RuleParams>(ruleParams);
+  const [params, setParams] = useState<ErrorRateRuleParams>(ruleParams);
 
   function setRuleParams(property: string, value: any) {
     setParams({ ...params, [property]: value });
@@ -78,7 +78,7 @@ export const CreatingInStackManagement: Story<Args> = ({
   ruleParams,
   metadata,
 }) => {
-  const [params, setParams] = useState<RuleParams>(ruleParams);
+  const [params, setParams] = useState<ErrorRateRuleParams>(ruleParams);
 
   function setRuleParams(property: string, value: any) {
     setParams({ ...params, [property]: value });