Alert creation and freeform selection (#111883) (#113444)

Allow selecting any service name, transaction type (where appropriate), and environment when creating and editing rules, both in APM and Stack Management.

- Create /internal/apm/suggestions endpoint that uses `terms_enum`
- Use combo box for environment, service name, and transaction type with suggestions endpoint on all alerts
- Remove "Go to APM" callouts on new alert creation
- Wrap calls to `createCallApmApi` in alert triggers with `useEffect`
- Use `getEnvironmentLabel` for value in environment field expression
- Make all `AlertParams` fields optional (except in latency threshold alert)
- Add e2e tests for creating an alert
- Remove `NewAlertEmptyPrompt` component and `isNewApmRuleFromStackManagement` helper
- Replace `maxServiceEnvironments` and `maxServiceSelections` config options with `maxSuggestions` advanced setting.


![CleanShot 2021-09-28 at 10 35 58](https://user-images.githubusercontent.com/9912/135119948-e247615a-d235-4feb-b197-b803f165ad1e.gif)

Fixes #106786

Co-authored-by: Nathan L Smith <[email protected]>

src/plugins/kibana_usage_collection/server/collectors/management/schema.ts

@@ -416,12 +416,12 @@ export const stackManagementSchema: MakeSchemaFrom<UsageStats> = {
     type: 'text',
     _meta: { description: 'Non-default value of setting.' },
   },
-  'apm:enableSignificantTerms': {
+  'observability:enableInspectEsQueries': {
     type: 'boolean',
     _meta: { description: 'Non-default value of setting.' },
   },
-  'observability:enableInspectEsQueries': {
-    type: 'boolean',
+  'observability:maxSuggestions': {
+    type: 'integer',
     _meta: { description: 'Non-default value of setting.' },
   },
   'banners:placement': {

src/plugins/kibana_usage_collection/server/collectors/management/types.ts

@@ -35,8 +35,8 @@ export interface UsageStats {
   'discover:showMultiFields': boolean;
   'discover:maxDocFieldsDisplayed': number;
   'securitySolution:rulesTableRefresh': string;
-  'apm:enableSignificantTerms': boolean;
   'observability:enableInspectEsQueries': boolean;
+  'observability:maxSuggestions': number;
   'visualize:enableLabs': boolean;
   'visualization:heatmap:maxBuckets': number;
   'visualization:colorMapping': string;

src/plugins/telemetry/schema/oss_plugins.json

@@ -7772,14 +7772,14 @@
             "description": "Non-default value of setting."
           }
         },
-        "apm:enableSignificantTerms": {
+        "observability:enableInspectEsQueries": {
           "type": "boolean",
           "_meta": {
             "description": "Non-default value of setting."
           }
         },
-        "observability:enableInspectEsQueries": {
-          "type": "boolean",
+        "observability:maxSuggestions": {
+          "type": "integer",
           "_meta": {
             "description": "Non-default value of setting."
           }

x-pack/plugins/apm/ftr_e2e/cypress/integration/power_user/rules/error_count.spec.ts

@@ -0,0 +1,108 @@
+/*
+ * 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.
+ */
+
+describe('Rules', () => {
+  describe('Error count', () => {
+    const ruleName = 'Error count threshold';
+    const comboBoxInputSelector =
+      '.euiPopover__panel-isOpen [data-test-subj=comboBoxSearchInput]';
+    const confirmModalButtonSelector =
+      '.euiModal button[data-test-subj=confirmModalConfirmButton]';
+    const deleteButtonSelector =
+      '[data-test-subj=deleteActionHoverButton]:first';
+    const editButtonSelector = '[data-test-subj=editActionHoverButton]:first';
+
+    describe('when created from APM', () => {
+      describe('when created from Service Inventory', () => {
+        before(() => {
+          cy.loginAsPowerUser();
+        });
+
+        it('creates and updates a rule', () => {
+          // Create a rule in APM
+          cy.visit('/app/apm/services');
+          cy.contains('Alerts and rules').click();
+          cy.contains('Error count').click();
+          cy.contains('Create threshold rule').click();
+
+          // Change the environment to "testing"
+          cy.contains('Environment All').click();
+          cy.get(comboBoxInputSelector).type('testing{enter}');
+
+          // Save, with no actions
+          cy.contains('button:not(:disabled)', 'Save').click();
+          cy.get(confirmModalButtonSelector).click();
+
+          cy.contains(`Created rule "${ruleName}`);
+
+          // Go to Stack Management
+          cy.contains('Alerts and rules').click();
+          cy.contains('Manage rules').click();
+
+          // Edit the rule, changing the environment to "All"
+          cy.get(editButtonSelector).click();
+          cy.contains('Environment testing').click();
+          cy.get(comboBoxInputSelector).type('All{enter}');
+          cy.contains('button:not(:disabled)', 'Save').click();
+
+          cy.contains(`Updated '${ruleName}'`);
+
+          // Wait for the table to be ready for next edit click
+          cy.get('.euiBasicTable').not('.euiBasicTable-loading');
+
+          // Ensure the rule now shows "All" for the environment
+          cy.get(editButtonSelector).click();
+          cy.contains('Environment All');
+          cy.contains('button', 'Cancel').click();
+
+          // Delete the rule
+          cy.get(deleteButtonSelector).click();
+          cy.get(confirmModalButtonSelector).click();
+
+          // Ensure the table is empty
+          cy.contains('Create your first rule');
+        });
+      });
+    });
+
+    describe('when created from Stack management', () => {
+      before(() => {
+        cy.loginAsPowerUser();
+      });
+
+      it('creates a rule', () => {
+        // Go to stack management
+        cy.visit('/app/management/insightsAndAlerting/triggersActions/rules');
+
+        // Create a rule
+        cy.contains('button', 'Create rule').click();
+        cy.get('[name=name]').type(ruleName);
+        cy.contains('.euiFlyout button', ruleName).click();
+
+        // Change the environment to "testing"
+        cy.contains('Environment All').click();
+        cy.get(comboBoxInputSelector).type('testing{enter}');
+
+        // Save, with no actions
+        cy.contains('button:not(:disabled)', 'Save').click();
+        cy.get(confirmModalButtonSelector).click();
+
+        cy.contains(`Created rule "${ruleName}`);
+
+        // Wait for the table to be ready for next delete click
+        cy.get('.euiBasicTable').not('.euiBasicTable-loading');
+
+        // Delete the rule
+        cy.get(deleteButtonSelector).click();
+        cy.get(confirmModalButtonSelector).click();
+
+        // Ensure the table is empty
+        cy.contains('Create your first rule');
+      });
+    });
+  });
+});

x-pack/plugins/apm/public/components/alerting/error_count_alert_trigger/error_count_alert_trigger.stories.tsx

@@ -0,0 +1,152 @@
+/*
+ * 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 { Meta, Story } from '@storybook/react';
+import React, { useState } from 'react';
+import { AlertParams, ErrorCountAlertTrigger } from '.';
+import { CoreStart } from '../../../../../../../src/core/public';
+import { createKibanaReactContext } from '../../../../../../../src/plugins/kibana_react/public';
+import { ENVIRONMENT_ALL } from '../../../../common/environment_filter_values';
+import { AlertMetadata } from '../helper';
+
+const KibanaReactContext = createKibanaReactContext({
+  notifications: { toasts: { add: () => {} } },
+} as unknown as Partial<CoreStart>);
+
+interface Args {
+  alertParams: AlertParams;
+  metadata?: AlertMetadata;
+}
+
+const stories: Meta<{}> = {
+  title: 'alerting/ErrorCountAlertTrigger',
+  component: ErrorCountAlertTrigger,
+  decorators: [
+    (StoryComponent) => {
+      return (
+        <KibanaReactContext.Provider>
+          <div style={{ width: 400 }}>
+            <StoryComponent />
+          </div>
+        </KibanaReactContext.Provider>
+      );
+    },
+  ],
+};
+export default stories;
+
+export const CreatingInApmFromInventory: Story<Args> = ({
+  alertParams,
+  metadata,
+}) => {
+  const [params, setParams] = useState<AlertParams>(alertParams);
+
+  function setAlertParams(property: string, value: any) {
+    setParams({ ...params, [property]: value });
+  }
+
+  return (
+    <ErrorCountAlertTrigger
+      alertParams={params}
+      metadata={metadata}
+      setAlertParams={setAlertParams}
+      setAlertProperty={() => {}}
+    />
+  );
+};
+CreatingInApmFromInventory.args = {
+  alertParams: {},
+  metadata: {
+    end: '2021-09-10T14:14:04.789Z',
+    environment: ENVIRONMENT_ALL.value,
+    serviceName: undefined,
+    start: '2021-09-10T13:59:00.000Z',
+  },
+};
+
+export const CreatingInApmFromService: Story<Args> = ({
+  alertParams,
+  metadata,
+}) => {
+  const [params, setParams] = useState<AlertParams>(alertParams);
+
+  function setAlertParams(property: string, value: any) {
+    setParams({ ...params, [property]: value });
+  }
+
+  return (
+    <ErrorCountAlertTrigger
+      alertParams={params}
+      metadata={metadata}
+      setAlertParams={setAlertParams}
+      setAlertProperty={() => {}}
+    />
+  );
+};
+CreatingInApmFromService.args = {
+  alertParams: {},
+  metadata: {
+    end: '2021-09-10T14:14:04.789Z',
+    environment: 'testEnvironment',
+    serviceName: 'testServiceName',
+    start: '2021-09-10T13:59:00.000Z',
+  },
+};
+
+export const EditingInStackManagement: Story<Args> = ({
+  alertParams,
+  metadata,
+}) => {
+  const [params, setParams] = useState<AlertParams>(alertParams);
+
+  function setAlertParams(property: string, value: any) {
+    setParams({ ...params, [property]: value });
+  }
+
+  return (
+    <ErrorCountAlertTrigger
+      alertParams={params}
+      metadata={metadata}
+      setAlertParams={setAlertParams}
+      setAlertProperty={() => {}}
+    />
+  );
+};
+EditingInStackManagement.args = {
+  alertParams: {
+    environment: 'testEnvironment',
+    serviceName: 'testServiceName',
+    threshold: 25,
+    windowSize: 1,
+    windowUnit: 'm',
+  },
+  metadata: undefined,
+};
+
+export const CreatingInStackManagement: Story<Args> = ({
+  alertParams,
+  metadata,
+}) => {
+  const [params, setParams] = useState<AlertParams>(alertParams);
+
+  function setAlertParams(property: string, value: any) {
+    setParams({ ...params, [property]: value });
+  }
+
+  return (
+    <ErrorCountAlertTrigger
+      alertParams={params}
+      metadata={metadata}
+      setAlertParams={setAlertParams}
+      setAlertProperty={() => {}}
+    />
+  );
+};
+CreatingInStackManagement.args = {
+  alertParams: {},
+  metadata: undefined,
+};

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

@@ -0,0 +1,19 @@
+/*
+ * 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 { render } from '@testing-library/react';
+import React from 'react';
+import * as stories from './error_count_alert_trigger.stories';
+import { composeStories } from '@storybook/testing-react';
+
+const { CreatingInApmFromService } = composeStories(stories);
+
+describe('ErrorCountAlertTrigger', () => {
+  it('renders', () => {
+    expect(() => render(<CreatingInApmFromService />)).not.toThrowError();
+  });
+});