[APM] Alerting: Add global option to create all alert types

x-pack/plugins/apm/public/components/app/ServiceDetails/AlertIntegrations/AlertingFlyout/index.tsx → x-pack/plugins/apm/public/components/alerting/AlertingFlyout/index.tsx

@@ -4,8 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 import React from 'react';
-import { AlertType } from '../../../../../../common/alert_types';
-import { AlertAdd } from '../../../../../../../triggers_actions_ui/public';
+import { AlertType } from '../../../../common/alert_types';
+import { AlertAdd } from '../../../../../triggers_actions_ui/public';
 
 type AlertAddProps = React.ComponentProps<typeof AlertAdd>;
 

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

@@ -34,11 +34,17 @@ export function ServiceAlertTrigger(props: Props) {
 
   useEffect(() => {
     // we only want to run this on mount to set default values
-    setAlertProperty('name', `${alertTypeName} | ${params.serviceName}`);
-    setAlertProperty('tags', [
-      'apm',
-      `service.name:${params.serviceName}`.toLowerCase(),
-    ]);
+
+    const alertName = params.serviceName
+      ? `${alertTypeName} | ${params.serviceName}`
+      : alertTypeName;
+    setAlertProperty('name', alertName);
+
+    const tags = ['apm'];
+    if (params.serviceName) {
+      tags.push(`service.name:${params.serviceName}`.toLowerCase());
+    }
+    setAlertProperty('tags', tags);
     Object.keys(params).forEach((key) => {
       setAlertParams(key, params[key]);
     });

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

@@ -90,16 +90,16 @@ export function TransactionDurationAlertTrigger(props: Props) {
 
   const fields = [
     <ServiceField value={serviceName} />,
-    <EnvironmentField
-      currentValue={params.environment}
-      options={environmentOptions}
-      onChange={(e) => setAlertParams('environment', e.target.value)}
-    />,
     <TransactionTypeField
       currentValue={params.transactionType}
       options={transactionTypes.map((key) => ({ text: key, value: key }))}
       onChange={(e) => setAlertParams('transactionType', e.target.value)}
     />,
+    <EnvironmentField
+      currentValue={params.environment}
+      options={environmentOptions}
+      onChange={(e) => setAlertParams('environment', e.target.value)}
+    />,
     <PopoverExpression
       value={params.aggregationType}
       title={i18n.translate('xpack.apm.transactionDurationAlertTrigger.when', {

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

@@ -32,8 +32,8 @@ import {
 interface Params {
   windowSize: number;
   windowUnit: string;
-  serviceName: string;
-  transactionType: string;
+  serviceName?: string;
+  transactionType?: string;
   environment: string;
   anomalySeverityType:
     | ANOMALY_SEVERITY.CRITICAL
@@ -55,16 +55,14 @@ export function TransactionDurationAnomalyAlertTrigger(props: Props) {
   const { serviceName } = useParams<{ serviceName?: string }>();
   const { start, end } = urlParams;
   const { environmentOptions } = useEnvironments({ serviceName, start, end });
-  const supportedTransactionTypes = transactionTypes.filter((transactionType) =>
-    [TRANSACTION_PAGE_LOAD, TRANSACTION_REQUEST].includes(transactionType)
-  );
 
-  if (!supportedTransactionTypes.length || !serviceName) {
+  if (serviceName && !transactionTypes.length) {
     return null;
   }
 
-  // 'page-load' for RUM, 'request' otherwise
-  const transactionType = supportedTransactionTypes[0];
+  const transactionType = transactionTypes.find(
+    (type) => type === urlParams.transactionType
+  );
 
   const defaults: Params = {
     windowSize: 15,

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

@@ -43,7 +43,7 @@ export function TransactionErrorRateAlertTrigger(props: Props) {
   const { start, end, transactionType } = urlParams;
   const { environmentOptions } = useEnvironments({ serviceName, start, end });
 
-  if (!transactionTypes.length || !serviceName) {
+  if (serviceName && !transactionTypes.length) {
     return null;
   }
 
@@ -62,16 +62,16 @@ export function TransactionErrorRateAlertTrigger(props: Props) {
 
   const fields = [
     <ServiceField value={serviceName} />,
-    <EnvironmentField
-      currentValue={params.environment}
-      options={environmentOptions}
-      onChange={(e) => setAlertParams('environment', e.target.value)}
-    />,
     <TransactionTypeField
       currentValue={params.transactionType}
       options={transactionTypes.map((key) => ({ text: key, value: key }))}
       onChange={(e) => setAlertParams('transactionType', e.target.value)}
     />,
+    <EnvironmentField
+      currentValue={params.environment}
+      options={environmentOptions}
+      onChange={(e) => setAlertParams('environment', e.target.value)}
+    />,
     <IsAboveField
       value={params.threshold}
       unit="%"

x-pack/plugins/apm/public/components/alerting/fields.test.tsx

@@ -0,0 +1,61 @@
+/*
+ * 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 React from 'react';
+import { ServiceField, TransactionTypeField } from './fields';
+import { act, fireEvent, render } from '@testing-library/react';
+import { expectTextsInDocument } from '../../utils/testHelpers';
+
+describe('alerting fields', () => {
+  describe('Service Fiels', () => {
+    it('renders with value', () => {
+      const component = render(<ServiceField value="foo" />);
+      expectTextsInDocument(component, ['foo']);
+    });
+    it('renders with All when value is not defined', () => {
+      const component = render(<ServiceField />);
+      expectTextsInDocument(component, ['All']);
+    });
+  });
+  describe('Transaction Type Field', () => {
+    it('renders select field when multiple options available', () => {
+      const options = [
+        { text: 'Foo', value: 'foo' },
+        { text: 'Bar', value: 'bar' },
+      ];
+      const { getByText, getByTestId } = render(
+        <TransactionTypeField currentValue="Foo" options={options} />
+      );
+
+      act(() => {
+        fireEvent.click(getByText('Foo'));
+      });
+
+      const selectBar = getByTestId('transactionTypeField');
+      expect(selectBar instanceof HTMLSelectElement).toBeTruthy();
+      const selectOptions = (selectBar as HTMLSelectElement).options;
+      expect(selectOptions.length).toEqual(2);
+      expect(
+        Object.values(selectOptions).map((option) => option.value)
+      ).toEqual(['foo', 'bar']);
+    });
+    it('renders read-only field when single option available', () => {
+      const options = [{ text: 'Bar', value: 'bar' }];
+      const component = render(
+        <TransactionTypeField currentValue="Bar" options={options} />
+      );
+      expectTextsInDocument(component, ['Bar']);
+    });
+    it('renders read-only All option when no option available', () => {
+      const component = render(<TransactionTypeField currentValue="" />);
+      expectTextsInDocument(component, ['All']);
+    });
+
+    it('renders current value when available', () => {
+      const component = render(<TransactionTypeField currentValue="foo" />);
+      expectTextsInDocument(component, ['foo']);
+    });
+  });
+});

x-pack/plugins/apm/public/components/alerting/fields.tsx

@@ -11,13 +11,17 @@ import { EuiSelectOption } from '@elastic/eui';
 import { getEnvironmentLabel } from '../../../common/environment_filter_values';
 import { PopoverExpression } from './ServiceAlertTrigger/PopoverExpression';
 
+const ALL_OPTION = i18n.translate('xpack.apm.alerting.fields.all_option', {
+  defaultMessage: 'All',
+});
+
 export function ServiceField({ value }: { value?: string }) {
   return (
     <EuiExpression
       description={i18n.translate('xpack.apm.alerting.fields.service', {
         defaultMessage: 'Service',
       })}
-      value={value}
+      value={value || ALL_OPTION}
     />
   );
 }
@@ -61,13 +65,16 @@ export function TransactionTypeField({
     defaultMessage: 'Type',
   });
 
-  if (!options || options.length === 1) {
-    return <EuiExpression description={label} value={currentValue} />;
+  if (!options || options.length <= 1) {
+    return (
+      <EuiExpression description={label} value={currentValue || ALL_OPTION} />
+    );
   }
 
   return (
     <PopoverExpression value={currentValue} title={label}>
       <EuiSelect
+        data-test-subj="transactionTypeField"
         value={currentValue}
         options={options}
         onChange={onChange}

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

@@ -0,0 +1,32 @@
+/*
+ * 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 { Capabilities } from 'kibana/public';
+import { ApmPluginSetupDeps } from '../../plugin';
+
+export const getAlertingCapabilities = (
+  plugins: ApmPluginSetupDeps,
+  capabilities: Capabilities
+) => {
+  const canReadAlerts = !!capabilities.apm['alerting:show'];
+  const canSaveAlerts = !!capabilities.apm['alerting:save'];
+  const isAlertingPluginEnabled = 'alerts' in plugins;
+  const isAlertingAvailable =
+    isAlertingPluginEnabled && (canReadAlerts || canSaveAlerts);
+  const isMlPluginEnabled = 'ml' in plugins;
+  const canReadAnomalies = !!(
+    isMlPluginEnabled &&
+    capabilities.ml.canAccessML &&
+    capabilities.ml.canGetJobs
+  );
+
+  return {
+    isAlertingAvailable,
+    canReadAlerts,
+    canSaveAlerts,
+    canReadAnomalies,
+  };
+};