[8.7] [DOCS] Automate two rule management screenshots (#155566) (#155738)

# Backport

This will backport the following commits from `main` to `8.7`:
- [[DOCS] Automate two rule management screenshots
(#155566)](https://github.com/elastic/kibana/pull/155566)

<!--- Backport version: 8.9.7 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Lisa
Cawley","email":"lcawley@elastic.co"},"sourceCommit":{"committedDate":"2023-04-25T15:11:22Z","message":"[DOCS]
Automate two rule management screenshots
(#155566)","sha":"fb68f2075ad148e9d7eafc0e5778d5a720bb64d5","branchLabelMapping":{"^v8.8.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","Team:ResponseOps","docs","Feature:Alerting/RulesManagement","backport:prev-minor","v8.8.0"],"number":155566,"url":"https://github.com/elastic/kibana/pull/155566","mergeCommit":{"message":"[DOCS]
Automate two rule management screenshots
(#155566)","sha":"fb68f2075ad148e9d7eafc0e5778d5a720bb64d5"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v8.8.0","labelRegex":"^v8.8.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/155566","number":155566,"mergeCommit":{"message":"[DOCS]
Automate two rule management screenshots
(#155566)","sha":"fb68f2075ad148e9d7eafc0e5778d5a720bb64d5"}}]}]
BACKPORT-->

docs/user/alerting/create-and-manage-rules.asciidoc

@@ -45,10 +45,10 @@ to re-open the flyout and change the rule properties.
 
 Depending on the {kib} app and context, you might be prompted to choose the type of rule to create. Some apps will preselect the type of rule for you.
 
-Each rule type provides its own way of defining the conditions to detect, but an expression formed by a series of clauses is a common pattern. For example, in an index threshold rule, the `WHEN` clause enables you to select an aggregation operation to apply to a numeric field.
+Each rule type provides its own way of defining the conditions to detect, but an expression formed by a series of clauses is a common pattern. For example, in a metric threshold rule, the `WHEN` clause enables you to select an aggregation operation to apply to a numeric field.
 
 [role="screenshot"]
-image::images/rule-flyout-rule-conditions.png[UI for defining rule conditions on an index threshold rule,500]
+image::images/rule-flyout-rule-conditions.png[UI for defining rule conditions on a metric threshold rule,500]
 // NOTE: This is an autogenerated screenshot. Do not edit it directly.
 
 All rules must have a check interval, which defines how often to evaluate the rule conditions. Checks are queued; they run as close to the defined value as capacity allows.
@@ -67,7 +67,7 @@ Each action uses a connector, which provides connection information for a {kib}
 After you select a connector, set the action frequency. If the rule type supports alert summaries, you can choose to create a summary of alerts on each check interval or on a custom interval. For example, if you create a metrics threshold rule, you can send email notifications that summarize the new, ongoing, and recovered alerts each day:
 
 [role="screenshot"]
-image::images/rule-flyout-action-summary.png[UI for defining rule conditions on an index threshold rule,500]
+image::images/rule-flyout-action-summary.png[UI for defining rule conditions on a metric threshold rule,500]
 
 TIP: If you choose a custom action interval, it cannot be shorter than the rule's check interval.
 
@@ -75,6 +75,7 @@ Alternatively, you can set the action frequency such that the action runs for ea
 
 [role="screenshot"]
 image::images/rule-flyout-action-details.png[UI for defining an email action,500]
+// NOTE: This is an autogenerated screenshot. Do not edit it directly.
 
 Each connector enables different action properties. For example, an email connector enables you to set the recipients, the subject, and a message body in markdown format. For more information about connectors, refer to <<action-types>>.
 
@@ -107,6 +108,7 @@ To view the list of variables available for your rule, click the "add rule varia
 
 [role="screenshot"]
 image::images/rule-flyout-action-variables.png[Passing rule values to an action,500]
+// NOTE: This is an autogenerated screenshot. Do not edit it directly.
 
 For more information about common action variables, refer to <<rule-action-variables>>.
 

x-pack/plugins/infra/public/alerting/metric_threshold/components/expression_row.tsx

@@ -225,6 +225,7 @@ export const ExpressionRow: React.FC<ExpressionRowProps> = (props) => {
           <EuiButtonIcon
             iconType={isExpanded ? 'arrowDown' : 'arrowRight'}
             onClick={toggleRowState}
+            data-test-subj="expandRow"
             aria-label={i18n.translate('xpack.infra.metrics.alertFlyout.expandRowLabel', {
               defaultMessage: 'Expand row.',
             })}

x-pack/test/screenshot_creation/apps/response_ops_docs/stack_alerting/index.ts

@@ -7,29 +7,102 @@
 
 import { FtrProviderContext } from '../../../ftr_provider_context';
 
+export const indexThresholdRuleName = 'kibana sites - low bytes';
+export const metricThresholdRuleName = 'network metric packets';
+
 export default function ({ loadTestFile, getService }: FtrProviderContext) {
   const browser = getService('browser');
   const actions = getService('actions');
   const rules = getService('rules');
 
   describe('stack alerting', function () {
+    let itRuleId: string;
+    let mtRuleId: string;
+    let serverLogConnectorId: string;
     before(async () => {
       await browser.setWindowSize(1920, 1080);
-      await actions.api.createConnector({
-        name: 'server-log-connector',
+      ({ id: serverLogConnectorId } = await actions.api.createConnector({
+        name: 'my-server-log-connector',
         config: {},
         secrets: {},
         connectorTypeId: '.server-log',
-      });
+      }));
+      ({ id: itRuleId } = await rules.api.createRule({
+        consumer: 'alerts',
+        name: indexThresholdRuleName,
+        notifyWhen: 'onActionGroupChange',
+        params: {
+          index: ['kibana_sample_data_logs'],
+          timeField: '@timestamp',
+          aggType: 'sum',
+          aggField: 'bytes',
+          groupBy: 'top',
+          termField: 'host.keyword',
+          termSize: 4,
+          timeWindowSize: 24,
+          timeWindowUnit: 'h',
+          thresholdComparator: '>',
+          threshold: [4200],
+        },
+        ruleTypeId: '.index-threshold',
+        schedule: { interval: '1m' },
+        actions: [
+          {
+            group: 'threshold met',
+            id: serverLogConnectorId,
+            params: {
+              level: 'info',
+              message: 'Test',
+            },
+          },
+        ],
+      }));
+      ({ id: mtRuleId } = await rules.api.createRule({
+        consumer: 'infrastructure',
+        name: metricThresholdRuleName,
+        notifyWhen: 'onActionGroupChange',
+        params: {
+          criteria: [
+            {
+              aggType: 'max',
+              comparator: '>',
+              threshold: [0],
+              timeSize: 3,
+              timeUnit: 's',
+              metric: 'network.packets',
+            },
+          ],
+          sourceId: 'default',
+          alertOnNoData: false,
+          alertOnGroupDisappear: false,
+          groupBy: ['network.name'],
+        },
+        ruleTypeId: 'metrics.alert.threshold',
+        schedule: { interval: '1m' },
+        actions: [
+          {
+            group: 'metrics.threshold.fired',
+            id: serverLogConnectorId,
+            params: {
+              level: 'info',
+              message: 'Test Metric Threshold rule',
+            },
+          },
+        ],
+      }));
     });
 
     after(async () => {
+      await rules.api.deleteRule(itRuleId);
+      await rules.api.deleteRule(mtRuleId);
       await rules.api.deleteAllRules();
+      await actions.api.deleteConnector(serverLogConnectorId);
       await actions.api.deleteAllConnectors();
     });
 
     loadTestFile(require.resolve('./list_view'));
     loadTestFile(require.resolve('./index_threshold_rule'));
+    loadTestFile(require.resolve('./metrics_threshold_rule'));
     loadTestFile(require.resolve('./tracking_containment_rule'));
   });
 }

x-pack/test/screenshot_creation/apps/response_ops_docs/stack_alerting/list_view.ts

@@ -6,63 +6,15 @@
  */
 
 import { FtrProviderContext } from '../../../ftr_provider_context';
+import { indexThresholdRuleName } from '.';
 
 export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const commonScreenshots = getService('commonScreenshots');
   const screenshotDirectories = ['response_ops_docs', 'stack_alerting'];
   const pageObjects = getPageObjects(['common', 'header']);
-  const actions = getService('actions');
-  const rules = getService('rules');
   const testSubjects = getService('testSubjects');
-  const ruleName = 'kibana sites - low bytes';
 
   describe('list view', function () {
-    let ruleId: string;
-    let connectorId: string;
-    before(async () => {
-      ({ id: connectorId } = await actions.api.createConnector({
-        name: 'my-server-log-connector',
-        config: {},
-        secrets: {},
-        connectorTypeId: '.server-log',
-      }));
-      ({ id: ruleId } = await rules.api.createRule({
-        consumer: 'alerts',
-        name: ruleName,
-        notifyWhen: 'onActionGroupChange',
-        params: {
-          index: ['kibana_sample_data_logs'],
-          timeField: '@timestamp',
-          aggType: 'sum',
-          aggField: 'bytes',
-          groupBy: 'top',
-          termField: 'host.keyword',
-          termSize: 4,
-          timeWindowSize: 24,
-          timeWindowUnit: 'h',
-          thresholdComparator: '>',
-          threshold: [4200],
-        },
-        ruleTypeId: '.index-threshold',
-        schedule: { interval: '1m' },
-        actions: [
-          {
-            group: 'threshold met',
-            id: connectorId,
-            params: {
-              level: 'info',
-              message: 'Test',
-            },
-          },
-        ],
-      }));
-    });
-
-    after(async () => {
-      await rules.api.deleteRule(ruleId);
-      await actions.api.deleteConnector(connectorId);
-    });
-
     it('rules list screenshot', async () => {
       await pageObjects.common.navigateToApp('triggersActions');
       await pageObjects.header.waitUntilLoadingHasFinished();
@@ -94,9 +46,9 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
     it('rule detail screenshots', async () => {
       await pageObjects.common.navigateToApp('triggersActions');
       await pageObjects.header.waitUntilLoadingHasFinished();
-      await testSubjects.setValue('ruleSearchField', ruleName);
+      await testSubjects.setValue('ruleSearchField', indexThresholdRuleName);
       const rulesList = await testSubjects.find('rulesList');
-      const alertRule = await rulesList.findByCssSelector(`[title="${ruleName}"]`);
+      const alertRule = await rulesList.findByCssSelector(`[title="${indexThresholdRuleName}"]`);
       await alertRule.click();
       await pageObjects.header.waitUntilLoadingHasFinished();
       await commonScreenshots.takeScreenshot(
@@ -114,23 +66,5 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
         1024
       );
     });
-
-    it('rule conditions screenshots', async () => {
-      await pageObjects.common.navigateToApp('triggersActions');
-      await pageObjects.header.waitUntilLoadingHasFinished();
-      await testSubjects.setValue('ruleSearchField', ruleName);
-      const actionPanel = await testSubjects.find('collapsedItemActions');
-      await actionPanel.click();
-      const editRuleMenu = await testSubjects.find('editRule');
-      await editRuleMenu.click();
-      await testSubjects.scrollIntoView('intervalInput');
-      await pageObjects.header.waitUntilLoadingHasFinished();
-      await commonScreenshots.takeScreenshot(
-        'rule-flyout-rule-conditions',
-        screenshotDirectories,
-        1400,
-        1500
-      );
-    });
   });
 }

x-pack/test/screenshot_creation/apps/response_ops_docs/stack_alerting/metrics_threshold_rule.ts

@@ -0,0 +1,91 @@
+/*
+ * 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 { FtrProviderContext } from '../../../ftr_provider_context';
+import { metricThresholdRuleName } from '.';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
+  const actions = getService('actions');
+  const browser = getService('browser');
+  const commonScreenshots = getService('commonScreenshots');
+  const testSubjects = getService('testSubjects');
+  const pageObjects = getPageObjects(['common', 'header']);
+  const screenshotDirectories = ['response_ops_docs', 'stack_alerting'];
+  const emailConnectorName = 'Email connector 1';
+
+  describe('metric threshold rule', function () {
+    let emailConnectorId: string;
+    before(async () => {
+      ({ id: emailConnectorId } = await actions.api.createConnector({
+        name: emailConnectorName,
+        config: {
+          service: 'other',
+          from: 'bob@example.com',
+          host: 'some.non.existent.com',
+          port: 25,
+        },
+        secrets: {
+          user: 'bob',
+          password: 'supersecret',
+        },
+        connectorTypeId: '.email',
+      }));
+    });
+
+    after(async () => {
+      await actions.api.deleteConnector(emailConnectorId);
+    });
+
+    it('example metric threshold rule conditions and actions', async () => {
+      await pageObjects.common.navigateToApp('triggersActions');
+      await pageObjects.header.waitUntilLoadingHasFinished();
+      await testSubjects.setValue('ruleSearchField', metricThresholdRuleName);
+      await browser.pressKeys(browser.keys.ENTER);
+      const actionPanel = await testSubjects.find('collapsedItemActions');
+      await actionPanel.click();
+      const editRuleMenu = await testSubjects.find('editRule');
+      await editRuleMenu.click();
+      const expandExpression = await testSubjects.find('expandRow');
+      await expandExpression.click();
+      await pageObjects.header.waitUntilLoadingHasFinished();
+      await commonScreenshots.takeScreenshot(
+        'rule-flyout-rule-conditions',
+        screenshotDirectories,
+        1400,
+        1500
+      );
+
+      const serverLogAction = await testSubjects.find('alertActionAccordion-0');
+      const removeConnectorButton = await serverLogAction.findByCssSelector(
+        '[aria-label="Delete"]'
+      );
+      await removeConnectorButton.click();
+
+      await testSubjects.click('.email-alerting-ActionTypeSelectOption');
+      await testSubjects.scrollIntoView('addAlertActionButton');
+      await commonScreenshots.takeScreenshot(
+        'rule-flyout-action-details',
+        screenshotDirectories,
+        1400,
+        1024
+      );
+      await testSubjects.scrollIntoView('addAlertActionButton');
+      await testSubjects.click('messageAddVariableButton');
+      await commonScreenshots.takeScreenshot(
+        'rule-flyout-action-variables',
+        screenshotDirectories,
+        1400,
+        1024
+      );
+
+      const cancelEditButton = await testSubjects.find('cancelSaveEditedRuleButton');
+      await cancelEditButton.click();
+      const confirmCancelButton = await testSubjects.find('confirmModalConfirmButton');
+      await confirmCancelButton.click();
+    });
+  });
+}