[DOCS] Refresh rule detail screenshots (#153705)

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

@@ -166,7 +166,8 @@ responses:
 Click the rule name to access a rule details page:
 
 [role="screenshot"]
-image::images/rule-details-alerts-active.png[Rule details page with three alerts]
+image::images/rule-details-alerts-active.png[Rule details page with multiple alerts]
+// NOTE: This is an autogenerated screenshot. Do not edit it directly.
 
 In this example, the rule detects when a site serves more than a threshold number of bytes in a 24 hour period. Four sites are above the threshold. These are called alerts - occurrences of the condition being detected - and the alert name, status, time of detection, and duration of the condition are shown in this view. Alerts come and go from the list depending on whether the rule conditions are met.
 
@@ -182,4 +183,4 @@ You can suppress future actions for a specific alert by turning on the *Mute* to
 
 [role="screenshot"]
 image::images/rule-details-disabling.png[Use the disable toggle to turn off rule checks and clear alerts tracked]
-
+// NOTE: This is an autogenerated screenshot. Do not edit it directly.

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

@@ -11,37 +11,56 @@ 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;
-    const indexThresholdRule = {
-      consumer: 'alerts',
-      name: 'my rule',
-      notifyWhen: 'onActionGroupChange',
-      params: {
-        index: ['.test-index'],
-        timeField: '@timestamp',
-        aggType: 'count',
-        groupBy: 'all',
-        timeWindowSize: 5,
-        timeWindowUnit: 'd',
-        thresholdComparator: '>',
-        threshold: [1000],
-      },
-      ruleTypeId: '.index-threshold',
-      schedule: { interval: '1m' },
-      tags: [],
-      actions: [],
-    };
-
+    let connectorId: string;
     before(async () => {
-      ({ id: ruleId } = await rules.api.createRule(indexThresholdRule));
+      ({ 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 () => {
@@ -71,5 +90,29 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       await snoozeBadge.click();
       await commonScreenshots.takeScreenshot('snooze-panel', screenshotDirectories, 1400, 1024);
     });
+
+    it('rule detail screenshots', async () => {
+      await pageObjects.common.navigateToApp('triggersActions');
+      await pageObjects.header.waitUntilLoadingHasFinished();
+      await testSubjects.setValue('ruleSearchField', ruleName);
+      const rulesList = await testSubjects.find('rulesList');
+      const alertRule = await rulesList.findByCssSelector(`[title="${ruleName}"]`);
+      await alertRule.click();
+      await pageObjects.header.waitUntilLoadingHasFinished();
+      await commonScreenshots.takeScreenshot(
+        'rule-details-alerts-active',
+        screenshotDirectories,
+        1400,
+        1024
+      );
+      const actionsButton = await testSubjects.find('ruleActionsButton');
+      await actionsButton.click();
+      await commonScreenshots.takeScreenshot(
+        'rule-details-disabling',
+        screenshotDirectories,
+        1400,
+        1024
+      );
+    });
   });
 }

x-pack/test/screenshot_creation/apps/response_ops_docs/stack_connectors/connector_types.ts

@@ -14,7 +14,6 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const actions = getService('actions');
   const testSubjects = getService('testSubjects');
   const comboBox = getService('comboBox');
-  const es = getService('es');
   const testIndex = `test-index`;
   const indexDocument =
     `{\n` +
@@ -43,19 +42,6 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
     });
 
     it('index connector screenshots', async () => {
-      await es.indices.create({
-        index: testIndex,
-        body: {
-          mappings: {
-            properties: {
-              date_updated: {
-                type: 'date',
-                format: 'epoch_millis',
-              },
-            },
-          },
-        },
-      });
       await pageObjects.common.navigateToApp('connectors');
       await pageObjects.header.waitUntilLoadingHasFinished();
       await actions.common.openNewConnectorForm('index');
@@ -71,8 +57,5 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       const flyOutCancelButton = await testSubjects.find('euiFlyoutCloseButton');
       await flyOutCancelButton.click();
     });
-    after(async () => {
-      await es.indices.delete({ index: testIndex });
-    });
   });
 }