[DOCS] Automate Observability rules screenshots (elastic#162101)

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

@@ -43,6 +43,7 @@ export default function ({ getPageObject, getService, loadTestFile }: FtrProvide
     loadTestFile(require.resolve('./stack_cases'));
     loadTestFile(require.resolve('./stack_connectors'));
     loadTestFile(require.resolve('./maintenance_windows'));
+    loadTestFile(require.resolve('./observability_alerting'));
     loadTestFile(require.resolve('./observability_cases'));
     loadTestFile(require.resolve('./security_cases'));
   });

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

@@ -0,0 +1,114 @@
+/*
+ * 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';
+
+export const metricThresholdRuleName = 'network metric packets';
+export const inventoryRuleName = 'CPU';
+
+export default function ({ loadTestFile, getService }: FtrProviderContext) {
+  const browser = getService('browser');
+  const actions = getService('actions');
+  const rules = getService('rules');
+  const emailConnectorName = 'Email connector 1';
+
+  describe('observability alerting', function () {
+    let mtRuleId: string;
+    let invRuleId: string;
+    let emailConnectorId: string;
+    before(async () => {
+      await browser.setWindowSize(1920, 1080);
+      ({ 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',
+      }));
+      ({ 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: emailConnectorId,
+            params: {
+              level: 'info',
+            },
+          },
+        ],
+      }));
+      ({ id: invRuleId } = await rules.api.createRule({
+        consumer: 'alerts',
+        name: inventoryRuleName,
+        notifyWhen: 'onActionGroupChange',
+        params: {
+          nodeType: 'host',
+          criteria: [
+            {
+              comparator: '>',
+              threshold: [80],
+              timeSize: 3,
+              timeUnit: 'm',
+              metric: 'cpu',
+            },
+          ],
+          sourceId: 'default',
+        },
+        ruleTypeId: 'metrics.alert.inventory.threshold',
+        schedule: { interval: '1m' },
+        actions: [
+          {
+            group: 'metrics.inventory_threshold.fired',
+            id: emailConnectorId,
+            params: {
+              level: 'info',
+            },
+          },
+        ],
+      }));
+    });
+
+    after(async () => {
+      await rules.api.deleteRule(mtRuleId);
+      await rules.api.deleteRule(invRuleId);
+      await rules.api.deleteAllRules();
+      await actions.api.deleteConnector(emailConnectorId);
+      await actions.api.deleteAllConnectors();
+    });
+
+    loadTestFile(require.resolve('./list_view'));
+    loadTestFile(require.resolve('./inventory_rule'));
+    loadTestFile(require.resolve('./metric_threshold_rule'));
+  });
+}

x-pack/test/screenshot_creation/apps/response_ops_docs/observability_alerting/inventory_rule.ts

@@ -0,0 +1,49 @@
+/*
+ * 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 { inventoryRuleName } from '.';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
+  const commonScreenshots = getService('commonScreenshots');
+  const observability = getService('observability');
+  const pageObjects = getPageObjects(['common', 'header']);
+  const screenshotDirectories = ['response_ops_docs', 'observability_alerting'];
+  const testSubjects = getService('testSubjects');
+
+  describe('inventory rule', function () {
+    it('rule detail screenshots', async () => {
+      await observability.alerts.common.navigateToRulesPage();
+      await pageObjects.header.waitUntilLoadingHasFinished();
+      await testSubjects.setValue('ruleSearchField', inventoryRuleName);
+      const rulesList = await testSubjects.find('rulesList');
+      const alertRule = await rulesList.findByCssSelector(`[title="${inventoryRuleName}"]`);
+      await alertRule.click();
+      const actionsButton = await testSubjects.find('actions');
+      await actionsButton.click();
+      const editButton = await testSubjects.find('editRuleButton');
+      await editButton.click();
+      const runWhen = await testSubjects.find('addNewActionConnectorActionGroup-0');
+      await runWhen.click();
+      /* Reposition so that the connector details are visible */
+      await testSubjects.scrollIntoView('alertActionAccordion-0');
+      await commonScreenshots.takeScreenshot(
+        'infrastructure-threshold-run-when-selection',
+        screenshotDirectories,
+        1400,
+        1024
+      );
+      await testSubjects.click('messageAddVariableButton');
+      await commonScreenshots.takeScreenshot(
+        'infrastructure-threshold-alert-default-message',
+        screenshotDirectories,
+        1400,
+        1024
+      );
+    });
+  });
+}

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

@@ -0,0 +1,33 @@
+/*
+ * 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 { inventoryRuleName } from '.';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
+  const browser = getService('browser');
+  const commonScreenshots = getService('commonScreenshots');
+  const observability = getService('observability');
+  const pageObjects = getPageObjects(['common', 'header']);
+  const screenshotDirectories = ['response_ops_docs', 'observability_alerting'];
+  const testSubjects = getService('testSubjects');
+
+  describe('list view', function () {
+    it('observability rules list screenshot', async () => {
+      await observability.alerts.common.navigateToRulesPage();
+      await pageObjects.header.waitUntilLoadingHasFinished();
+      await testSubjects.setValue('ruleSearchField', inventoryRuleName);
+      await browser.pressKeys(browser.keys.ENTER);
+      await commonScreenshots.takeScreenshot(
+        'create-alerts-manage-rules',
+        screenshotDirectories,
+        1400,
+        1024
+      );
+    });
+  });
+}

x-pack/test/screenshot_creation/apps/response_ops_docs/observability_alerting/metric_threshold_rule.ts

@@ -0,0 +1,63 @@
+/*
+ * 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 commonScreenshots = getService('commonScreenshots');
+  const observability = getService('observability');
+  const pageObjects = getPageObjects(['common', 'header']);
+  const screenshotDirectories = ['response_ops_docs', 'observability_alerting'];
+  const testSubjects = getService('testSubjects');
+
+  describe('metric threshold rule', function () {
+    it('rule detail screenshots', async () => {
+      await observability.alerts.common.navigateToRulesPage();
+      await pageObjects.header.waitUntilLoadingHasFinished();
+      await testSubjects.setValue('ruleSearchField', metricThresholdRuleName);
+      const rulesList = await testSubjects.find('rulesList');
+      const alertRule = await rulesList.findByCssSelector(`[title="${metricThresholdRuleName}"]`);
+      await alertRule.click();
+      const actionsButton = await testSubjects.find('actions');
+      await actionsButton.click();
+      const editButton = await testSubjects.find('editRuleButton');
+      await editButton.click();
+      const runWhen = await testSubjects.find('addNewActionConnectorActionGroup-0');
+      await runWhen.click();
+      /* Reposition so that the connector details are visible */
+      await testSubjects.scrollIntoView('alertActionAccordion-0');
+      await commonScreenshots.takeScreenshot(
+        'metrics-threshold-run-when-selection',
+        screenshotDirectories,
+        1400,
+        1024
+      );
+      const notifyWhen = await testSubjects.find('notifyWhenSelect');
+      await notifyWhen.click();
+      const customInterval = await testSubjects.find('onThrottleInterval');
+      await customInterval.click();
+      const actionFrequency = await testSubjects.find('summaryOrPerRuleSelect');
+      await actionFrequency.click();
+      const actionSummary = await testSubjects.find('actionNotifyWhen-option-summary');
+      await actionSummary.click();
+      await commonScreenshots.takeScreenshot(
+        'action-alert-summary',
+        screenshotDirectories,
+        1400,
+        1024
+      );
+      await testSubjects.click('messageAddVariableButton');
+      await commonScreenshots.takeScreenshot(
+        'metrics-threshold-alert-default-message',
+        screenshotDirectories,
+        1400,
+        1024
+      );
+    });
+  });
+}