[APM] Migrate and fix alert error count tests (#247373)

## Summary

Closes #238521 & #244847

This PR migrates the alerts error count tests from the legacy cypress
framework to the updated Scout framework supported by playwright.

A key point in the migration is this test step

```typescript
await test.step('wait for the rule to be executed', async () => {
  const foundResponse = await apiServices.alerting.rules.find({
    search: RULE_NAME,
    search_fields: ['name'],
    per_page: 1,
    page: 1,
  });
  const alert = foundResponse.data.data.find((obj: any) => obj.name === RULE_NAME);
  expect(alert).toBeDefined();
  await apiServices.alerting.rules.runSoon(alert!.id);
  await apiServices.alerting.waiting.waitForNextExecution(alert!.id);
});
```
As per the comment added in #244847 this step addresses the flakiness we
were running into in the cypress version of these tests. This step will
ensure a rule execution was triggered for the rule created during the
test, in turn ensuring that b y the time the UI test gets to the alert
tab there is an alert to display and the test doesn't timeout awaiting
selector visibility

### Checklist

- [x] [Flaky Test
Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was
used on any tests changed

---------

Co-authored-by: Dzmitry Lemechko <dzmitry.lemechko@elastic.co>

Author: AlejandroFrndz

src/platform/packages/shared/kbn-scout/src/playwright/eui_components/data_grid.ts

@@ -55,7 +55,7 @@ export class EuiDataGridWrapper {
     this.popoverPanel = this.page.locator('div[data-popover-panel="true"]');
   }
 
-  private async ensureGridVisible(): Promise<void> {
+  async ensureGridVisible(): Promise<void> {
     await this.dataGridWrapper.waitFor({ state: 'visible' });
   }
 

src/platform/packages/shared/kbn-scout/src/playwright/fixtures/scope/worker/apis/alerting/index.ts

@@ -413,7 +413,7 @@ export const getAlertingApiHelper = (
         });
       },
 
-      getExecutionLog: async (ruleId: string, spaceId?: string) => {
+      getExecutionLog: async (ruleId: string, spaceId?: string, dateStart = new Date()) => {
         return await measurePerformanceAsync(
           log,
           `alertingApi.rules.getExecutionLog [${ruleId}]`,
@@ -422,6 +422,7 @@ export const getAlertingApiHelper = (
               method: 'GET',
               path: `${buildSpacePath(spaceId)}/internal/alerting/rule/${ruleId}/_execution_log`,
               retries: 3,
+              query: { date_start: dateStart.toISOString() },
             });
             return response.data;
           }
@@ -650,7 +651,12 @@ export const getAlertingApiHelper = (
         );
       },
 
-      waitForNextExecution: async (ruleId: string, spaceId?: string, timeoutMs: number = 30000) => {
+      waitForNextExecution: async (
+        ruleId: string,
+        spaceId?: string,
+        timeoutMs: number = 30000,
+        dateStart: Date = new Date()
+      ) => {
         return await measurePerformanceAsync(
           log,
           `alertingApi.waiting.waitForNextExecution [${ruleId}]`,
@@ -660,6 +666,7 @@ export const getAlertingApiHelper = (
               method: 'GET',
               path: `${buildSpacePath(spaceId)}/internal/alerting/rule/${ruleId}/_execution_log`,
               retries: 3,
+              query: { date_start: dateStart.toISOString() },
             });
             const initialLogData = initialLog.data as any;
             const initialCount = initialLogData.total;
@@ -671,7 +678,8 @@ export const getAlertingApiHelper = (
                   path: `${buildSpacePath(
                     spaceId
                   )}/internal/alerting/rule/${ruleId}/_execution_log`,
-                  retries: 1, // Lower retries for frequent polling operations
+                  retries: 1, // Lower retries for frequent polling operations,
+                  query: { date_start: dateStart.toISOString() },
                 });
                 const logData = executionLog.data as any;
                 return logData.total;

x-pack/solutions/observability/plugins/apm/ftr_e2e/cypress/e2e/alerts/error_count.cy.ts

@@ -221,7 +221,7 @@ export function IsAboveField({
   onChange: (value: number) => void;
   step?: number;
 }) {
-  const [thresholdPopoverOpen, serThresholdPopoverOpen] = useState(false);
+  const [thresholdPopoverOpen, setThresholdPopoverOpen] = useState(false);
   const [isAboveValue, setIsAboveValue] = useState(String(value));
 
   return (
@@ -230,7 +230,7 @@ export function IsAboveField({
       anchorPosition={'downLeft'}
       ownFocus
       closePopover={() => {
-        serThresholdPopoverOpen(false);
+        setThresholdPopoverOpen(false);
       }}
       button={
         <EuiExpression
@@ -241,8 +241,9 @@ export function IsAboveField({
           isInvalid={!isNumeric(isAboveValue)}
           isActive={thresholdPopoverOpen}
           onClick={() => {
-            serThresholdPopoverOpen(true);
+            setThresholdPopoverOpen(true);
           }}
+          data-test-subj="apmIsAboveExpression"
         />
       }
     >

x-pack/solutions/observability/plugins/apm/ftr_e2e/cypress/e2e/alerts/generate_data.ts

@@ -13,7 +13,6 @@ import type {
   BrowserAuthFixture,
 } from '@kbn/scout-oblt';
 import { test as base, createLazyPageObject } from '@kbn/scout-oblt';
-import { AlertsTab } from './page_objects/alerts_tab';
 import { ServiceMapPage } from './page_objects/service_map';
 import { ServiceInventoryPage } from './page_objects/service_inventory';
 import { StorageExplorerPage } from './page_objects/storage_explorer';
@@ -32,6 +31,7 @@ import { ServiceDetailsPage } from './page_objects/service_details/service_detai
 import { DependenciesInventoryPage } from './page_objects/dependencies_inventory';
 import { APM_ROLES } from './constants';
 import { DependencyDetailsPage } from './page_objects/dependency_details/dependency_details';
+import { AlertsControls } from './page_objects/alerts_controls/alerts_controls';
 
 export interface ApmBrowserAuthFixture extends BrowserAuthFixture {
   loginAsApmAllPrivilegesWithoutWriteSettings: () => Promise<void>;
@@ -41,7 +41,6 @@ export interface ApmBrowserAuthFixture extends BrowserAuthFixture {
 
 export interface ExtendedScoutTestFixtures extends ObltTestFixtures {
   pageObjects: ObltPageObjects & {
-    alertsTab: AlertsTab;
     serviceMapPage: ServiceMapPage;
     serviceInventoryPage: ServiceInventoryPage;
     storageExplorerPage: StorageExplorerPage;
@@ -59,6 +58,7 @@ export interface ExtendedScoutTestFixtures extends ObltTestFixtures {
     serviceDetailsPage: ServiceDetailsPage;
     dependenciesInventoryPage: DependenciesInventoryPage;
     dependencyDetailsPage: DependencyDetailsPage;
+    alertsControls: AlertsControls;
   };
   browserAuth: ApmBrowserAuthFixture;
 }
@@ -78,7 +78,6 @@ export const test = base.extend<ExtendedScoutTestFixtures, ObltWorkerFixtures>({
   ) => {
     const extendedPageObjects = {
       ...pageObjects,
-      alertsTab: createLazyPageObject(AlertsTab, page, kbnUrl),
       serviceMapPage: createLazyPageObject(ServiceMapPage, page, kbnUrl),
       serviceInventoryPage: createLazyPageObject(ServiceInventoryPage, page, kbnUrl),
       storageExplorerPage: createLazyPageObject(StorageExplorerPage, page, kbnUrl),
@@ -96,6 +95,7 @@ export const test = base.extend<ExtendedScoutTestFixtures, ObltWorkerFixtures>({
       serviceDetailsPage: createLazyPageObject(ServiceDetailsPage, page, kbnUrl),
       dependenciesInventoryPage: createLazyPageObject(DependenciesInventoryPage, page, kbnUrl),
       dependencyDetailsPage: createLazyPageObject(DependencyDetailsPage, page, kbnUrl),
+      alertsControls: createLazyPageObject(AlertsControls, page),
     };
 
     await use(extendedPageObjects);

x-pack/solutions/observability/plugins/apm/public/components/alerting/utils/fields.tsx

@@ -0,0 +1,60 @@
+/*
+ * 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 type { Locator, ScoutPage } from '@kbn/scout-oblt';
+
+type AddRuleFlyoutStep = 'definition' | 'actions' | 'details';
+
+export class AddRuleFlyout {
+  public readonly flyout: Locator;
+  public readonly saveButton: Locator;
+
+  public readonly isAboveExpression: Locator;
+  public readonly isAboveInput: Locator;
+
+  public readonly scheduleValueInput: Locator;
+  public readonly scheduleUnitSelect: Locator;
+
+  constructor(private readonly page: ScoutPage) {
+    this.flyout = this.page.getByRole('dialog');
+    this.saveButton = this.flyout.getByTestId('ruleFlyoutFooterSaveButton');
+
+    this.isAboveExpression = this.flyout.getByTestId('apmIsAboveExpression');
+    this.isAboveInput = this.flyout.getByTestId('apmIsAboveFieldFieldNumber');
+
+    this.scheduleValueInput = this.flyout.getByTestId('ruleScheduleNumberInput');
+    this.scheduleUnitSelect = this.flyout.getByTestId('ruleScheduleUnitInput');
+  }
+
+  public async waitForErrorCountToLoad() {
+    await this.flyout.getByRole('heading', { name: 'Error count threshold' }).waitFor();
+  }
+
+  public async fillIsAbove(amount: number) {
+    await this.isAboveExpression.click();
+    await this.isAboveInput.fill(amount.toString());
+  }
+
+  public async fillRuleSchedule(value: number, unit: 's' | 'm' | 'h' | 'd') {
+    await this.scheduleValueInput.fill(value.toString());
+    await this.scheduleUnitSelect.selectOption(unit);
+  }
+
+  public async jumpToStep(step: AddRuleFlyoutStep) {
+    await this.page.getByTestId(`ruleFormStep-${step}`).click();
+  }
+
+  public async saveRule(opts: { saveEmptyActions?: boolean } = {}) {
+    await this.saveButton.click();
+
+    if (opts.saveEmptyActions) {
+      await this.page.getByTestId('confirmModalConfirmButton').click();
+    }
+
+    await this.flyout.waitFor({ state: 'hidden' });
+  }
+}

x-pack/solutions/observability/plugins/apm/test/scout/ui/fixtures/index.ts

@@ -0,0 +1,43 @@
+/*
+ * 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 type { Locator, ScoutPage } from '@kbn/scout-oblt';
+import { AddRuleFlyout } from './add_rule_flyout';
+
+export class AlertsControls {
+  public readonly addRuleFlyout: AddRuleFlyout;
+
+  public readonly button: Locator;
+  public readonly contextMenu: Locator;
+
+  public readonly errorCountItem: Locator;
+  public readonly manageRulesItem: Locator;
+
+  constructor(private readonly page: ScoutPage) {
+    this.addRuleFlyout = new AddRuleFlyout(this.page);
+
+    this.button = this.page.getByTestId('apmAlertAndRulesHeaderLink');
+    this.contextMenu = this.page.getByRole('dialog');
+
+    this.errorCountItem = this.contextMenu.getByTestId('apmAlertsMenuItemErrorCount');
+    this.manageRulesItem = this.contextMenu.getByTestId('apmAlertsMenuItemManageRules');
+  }
+
+  public async openContextMenu() {
+    await this.button.click();
+    await this.contextMenu.getByTestId('contextMenuPanelTitle').getByText('Alerts').waitFor();
+  }
+
+  public async openErrorCountFlyout() {
+    await this.errorCountItem.click();
+    await this.addRuleFlyout.waitForErrorCountToLoad();
+  }
+
+  public async goToManageRules() {
+    await this.manageRulesItem.click();
+  }
+}