[AO] - Add functional tests for the new Rules page

x-pack/plugins/observability/public/pages/alerts/components/rule_stats/rule_stats.tsx

@@ -147,7 +147,7 @@ export const renderRuleStats = (
     snoozedStatsComponent,
     errorStatsComponent,
     <Divider />,
-    <EuiButtonEmpty href={manageRulesHref}>
+    <EuiButtonEmpty data-test-subj="manageRulesPageButton" href={manageRulesHref}>
       {i18n.translate('xpack.observability.alerts.manageRulesButtonLabel', {
         defaultMessage: 'Manage Rules',
       })}

x-pack/plugins/observability/public/pages/rules/components/prompts/no_permission_prompt.tsx

@@ -13,6 +13,7 @@ export function NoPermissionPrompt() {
   return (
     <EuiPageTemplate
       template="centeredContent"
+      data-test-subj="noPermissionPrompt"
       pageContentProps={{
         paddingSize: 'none',
         role: null, // For passing a11y tests in EUI docs only

x-pack/plugins/observability/public/pages/rules/components/rules_table.tsx

@@ -42,7 +42,7 @@ export function RulesTable({
     [onPageChange, onSortChange]
   );
   return (
-    <section data-test-subj="rulesList">
+    <section>
       <EuiSpacer size="xs" />
       <>
         <EuiSpacer size="xs" />

x-pack/plugins/observability/public/pages/rules/index.tsx

@@ -234,6 +234,7 @@ function RulesPage() {
         field: 'enabled',
         name: STATUS_COLUMN_TITLE,
         sortable: true,
+        'data-test-subj': 'rulesTableCell-ContextStatus',
         render: (_enabled: boolean, item: RuleTableItem) => {
           return triggersActionsUi.getRuleStatusDropdown({
             rule: item,

x-pack/plugins/triggers_actions_ui/public/application/sections/rules_list/components/rule_status_dropdown.tsx

@@ -292,11 +292,13 @@ const RuleStatusMenu: React.FunctionComponent<RuleStatusMenuProps> = ({
           name: ENABLED,
           icon: isEnabled && !isSnoozed ? 'check' : 'empty',
           onClick: enableRule,
+          'data-test-subj': 'statusDropdownEnabledItem',
         },
         {
           name: DISABLED,
           icon: !isEnabled ? 'check' : 'empty',
           onClick: disableRule,
+          'data-test-subj': 'statusDropdownDisabledItem',
         },
         {
           name: snoozeButtonTitle,

x-pack/test/functional/services/observability/alerts/common.ts

@@ -48,6 +48,15 @@ export function ObservabilityAlertsCommonProvider({
     );
   };
 
+  const navigateToRulesPage = async () => {
+    return await pageObjects.common.navigateToUrlWithBrowserHistory(
+      'observability',
+      '/alerts/rules',
+      '?',
+      { ensureCurrentUrl: false }
+    );
+  };
+
   const navigateWithoutFilter = async () => {
     return await pageObjects.common.navigateToUrlWithBrowserHistory(
       'observability',
@@ -326,5 +335,6 @@ export function ObservabilityAlertsCommonProvider({
     viewRuleDetailsLinkClick,
     getAlertsFlyoutViewRuleDetailsLinkOrFail,
     getRuleStatValue,
+    navigateToRulesPage,
   };
 }

x-pack/test/functional/services/observability/alerts/index.ts

@@ -8,17 +8,20 @@
 import { ObservabilityAlertsPaginationProvider } from './pagination';
 import { ObservabilityAlertsCommonProvider } from './common';
 import { ObservabilityAlertsAddToCaseProvider } from './add_to_case';
+import { ObservabilityAlertsRulesProvider } from './rules_page';
 
 import { FtrProviderContext } from '../../../ftr_provider_context';
 
 export function ObservabilityAlertsProvider(context: FtrProviderContext) {
   const common = ObservabilityAlertsCommonProvider(context);
   const pagination = ObservabilityAlertsPaginationProvider(context);
   const addToCase = ObservabilityAlertsAddToCaseProvider(context);
+  const rulesPage = ObservabilityAlertsRulesProvider(context);
 
   return {
     common,
     pagination,
     addToCase,
+    rulesPage,
   };
 }

x-pack/test/functional/services/observability/alerts/rules_page.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
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+import { FtrProviderContext } from '../../../ftr_provider_context';
+
+export function ObservabilityAlertsRulesProvider({ getService }: FtrProviderContext) {
+  const testSubjects = getService('testSubjects');
+
+  const getManageRulesPageHref = async () => {
+    const manageRulesPageButton = await testSubjects.find('manageRulesPageButton');
+    return manageRulesPageButton.getAttribute('href');
+  };
+
+  const clickCreateRuleButton = async () => {
+    const createRuleButton = await testSubjects.find('createRuleButton');
+    return createRuleButton.click();
+  };
+
+  const clickRuleStatusDropDownMenu = async () => testSubjects.click('statusDropdown');
+
+  const clickDisableFromDropDownMenu = async () => testSubjects.click('statusDropdownDisabledItem');
+
+  return {
+    getManageRulesPageHref,
+    clickCreateRuleButton,
+    clickRuleStatusDropDownMenu,
+    clickDisableFromDropDownMenu,
+  };
+}

x-pack/test/observability_functional/apps/observability/alerts/rules_page.ts

@@ -0,0 +1,177 @@
+/*
+ * 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 expect from '@kbn/expect';
+import { FtrProviderContext } from '../../../ftr_provider_context';
+
+export default ({ getService }: FtrProviderContext) => {
+  const esArchiver = getService('esArchiver');
+  const testSubjects = getService('testSubjects');
+  const supertest = getService('supertest');
+  const find = getService('find');
+  const retry = getService('retry');
+  const RULE_ENDPOINT = '/api/alerting/rule';
+
+  async function createRule(rule: any): Promise<string> {
+    const ruleResponse = await supertest.post(RULE_ENDPOINT).set('kbn-xsrf', 'foo').send(rule);
+    expect(ruleResponse.status).to.eql(200);
+    return ruleResponse.body.id;
+  }
+  async function deleteRuleById(ruleId: string) {
+    const ruleResponse = await supertest
+      .delete(`${RULE_ENDPOINT}/${ruleId}`)
+      .set('kbn-xsrf', 'foo');
+    expect(ruleResponse.status).to.eql(204);
+    return true;
+  }
+
+  const getRulesList = async (tableRows: any[]) => {
+    const rows = [];
+    for (const euiTableRow of tableRows) {
+      const $ = await euiTableRow.parseDomContent();
+      rows.push({
+        name: $.findTestSubjects('rulesTableCell-name').find('a').text(),
+        enabled: $.findTestSubjects('rulesTableCell-ContextStatus').find('button').attr('title'),
+      });
+    }
+    return rows;
+  };
+
+  describe('Observability Rules page', function () {
+    this.tags('includeFirefox');
+
+    const observability = getService('observability');
+
+    before(async () => {
+      await esArchiver.load('x-pack/test/functional/es_archives/observability/alerts');
+      await esArchiver.load('x-pack/test/functional/es_archives/infra/metrics_and_logs');
+      await observability.alerts.common.navigateWithoutFilter();
+    });
+
+    after(async () => {
+      await esArchiver.unload('x-pack/test/functional/es_archives/observability/alerts');
+      await esArchiver.unload('x-pack/test/functional/es_archives/infra/metrics_and_logs');
+    });
+
+    describe('Feature flag', () => {
+      // Related to the config inside x-pack/test/observability_functional/with_rac_write.config.ts
+      it('Link point to O11y Rules pages by default or when "xpack.observability.unsafe.rules.enabled: true"', async () => {
+        const manageRulesPageHref = await observability.alerts.rulesPage.getManageRulesPageHref();
+        expect(new URL(manageRulesPageHref).pathname).equal('/app/observability/alerts/rules');
+      });
+    });
+
+    describe('Create rule button', () => {
+      it('Show Create Rule flyout when Create Rule button is clicked', async () => {
+        await observability.alerts.common.navigateToRulesPage();
+        await retry.waitFor(
+          'Create Rule button is visible',
+          async () => await testSubjects.exists('createRuleButton')
+        );
+        await observability.alerts.rulesPage.clickCreateRuleButton();
+        await retry.waitFor(
+          'Create Rule flyout is visible',
+          async () => await testSubjects.exists('addRuleFlyoutTitle')
+        );
+      });
+    });
+
+    describe('Rules table', () => {
+      let uptimeRuleId: string;
+      let logThresholdRuleId: string;
+      before(async () => {
+        const uptimeRule = {
+          params: {
+            search: '',
+            numTimes: 5,
+            timerangeUnit: 'm',
+            timerangeCount: 15,
+            shouldCheckStatus: true,
+            shouldCheckAvailability: true,
+            availability: { range: 30, rangeUnit: 'd', threshold: '99' },
+          },
+          consumer: 'alerts',
+          schedule: { interval: '1m' },
+          tags: [],
+          name: 'uptime',
+          rule_type_id: 'xpack.uptime.alerts.monitorStatus',
+          notify_when: 'onActionGroupChange',
+          actions: [],
+        };
+        const logThresholdRule = {
+          params: {
+            timeSize: 5,
+            timeUnit: 'm',
+            count: { value: 75, comparator: 'more than' },
+            criteria: [{ field: 'log.level', comparator: 'equals', value: 'error' }],
+          },
+          consumer: 'alerts',
+          schedule: { interval: '1m' },
+          tags: [],
+          name: 'error-log',
+          rule_type_id: 'logs.alert.document.count',
+          notify_when: 'onActionGroupChange',
+          actions: [],
+        };
+        uptimeRuleId = await createRule(uptimeRule);
+        logThresholdRuleId = await createRule(logThresholdRule);
+        await observability.alerts.common.navigateToRulesPage();
+      });
+      after(async () => {
+        await deleteRuleById(uptimeRuleId);
+        await deleteRuleById(logThresholdRuleId);
+      });
+
+      it('shows the rules table ', async () => {
+        await testSubjects.existOrFail('rulesList');
+        await testSubjects.waitForDeleted('centerJustifiedSpinner');
+        const tableRows = await find.allByCssSelector('.euiTableRow');
+        const rows = await getRulesList(tableRows);
+        expect(rows.length).to.be(2);
+        expect(rows[0].name).to.be('error-log');
+        expect(rows[0].enabled).to.be('Enabled');
+        expect(rows[1].name).to.be('uptime');
+        expect(rows[1].enabled).to.be('Enabled');
+      });
+
+      it('changes the rule status to "disabled"', async () => {
+        await testSubjects.existOrFail('rulesList');
+        await observability.alerts.rulesPage.clickRuleStatusDropDownMenu();
+        await observability.alerts.rulesPage.clickDisableFromDropDownMenu();
+        await retry.waitFor('The rule to be disabled', async () => {
+          const tableRows = await find.allByCssSelector('.euiTableRow');
+          const rows = await getRulesList(tableRows);
+          expect(rows[0].enabled).to.be('Disabled');
+          return true;
+        });
+      });
+    });
+
+    describe('User permissions', () => {
+      it('shows the Create Rule button when user has permissions', async () => {
+        await observability.alerts.common.navigateToRulesPage();
+        await retry.waitFor(
+          'Create rule button',
+          async () => await testSubjects.exists('createRuleButton')
+        );
+      });
+
+      it(`shows the no permission prompt when the user has no permissions`, async () => {
+        await observability.users.setTestUserRole(
+          observability.users.defineBasicObservabilityRole({
+            logs: ['read'],
+          })
+        );
+        await observability.alerts.common.navigateToRulesPage();
+        await retry.waitFor(
+          'No permissions prompt',
+          async () => await testSubjects.exists('noPermissionPrompt')
+        );
+      });
+    });
+  });
+};

x-pack/test/observability_functional/apps/observability/index.ts

@@ -19,5 +19,6 @@ export default function ({ loadTestFile }: FtrProviderContext) {
     loadTestFile(require.resolve('./alerts/table_storage'));
     loadTestFile(require.resolve('./exploratory_view'));
     loadTestFile(require.resolve('./feature_controls'));
+    loadTestFile(require.resolve('./alerts/rules_page'));
   });
 }