[Actionable observability] Fix observability overview functional test (…

…#145828)

Fixes #140507

This issue was fixed in the refactoring that I've done
[here](https://github.com/elastic/kibana/pull/143840/files#diff-ab4cbe22bf9a1c9bbaf3a3cb32b5aa5b0c8b8e33c34b88ed3c99dbde6fedadb9L236).
Now we only send request when a filter changes not on every render.
(More info in the ticket)

[Flaky test runner
link](https://buildkite.com/elastic/kibana-flaky-test-suite-runner/builds?branch=refs%2Fpull%2F145828%2Fhead)

test/functional/services/common/test_subjects.ts

@@ -72,6 +72,20 @@ export class TestSubjects extends FtrService {
     }
   }
 
+  /**
+   * Get a promise that resolves when an element no longer exists, if the element does exist
+   * it will wait until the element does not exist. If we wait until the timeout and the element
+   * still exists the promise will reject.
+   *
+   * This method is intended to quickly assert that an element does not exist. Its
+   * 2.5 second timeout responds quickly.
+   *
+   * When `options.timeout` is not passed the `timeouts.waitForExists` config is used as
+   * the timeout. The default value for that config is currently 2.5 seconds.
+   *
+   * If the element is hidden but still in the DOM it is treated as "existing", unless `options.allowHidden`
+   * is set to `true`.
+   */
   public async missingOrFail(selector: string, options: ExistsOptions = {}): Promise<void | never> {
     const { timeout = this.WAIT_FOR_EXISTS_TIME, allowHidden = false } = options;
 

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

@@ -15,7 +15,7 @@ const DATE_WITH_DATA = {
 
 const ALERTS_TITLE = 'Alerts';
 const ALERTS_ACCORDION_SELECTOR = `accordion-${ALERTS_TITLE}`;
-const ALERTS_SECTION_BUTTON_SELECTOR = `button[aria-controls="${ALERTS_TITLE}"]`;
+const ALERTS_SECTION_BUTTON_CSS_SELECTOR = `[data-test-subj=${ALERTS_ACCORDION_SELECTOR}] button.euiAccordion__button`;
 const ALERTS_TABLE_NO_DATA_SELECTOR = 'alertsStateTableEmptyState';
 const ALERTS_TABLE_WITH_DATA_SELECTOR = 'alertsTable';
 const ALERTS_TABLE_LOADING_SELECTOR = 'internalAlertsPageLoading';
@@ -25,7 +25,7 @@ export function ObservabilityOverviewCommonProvider({
   getService,
 }: FtrProviderContext) {
   const find = getService('find');
-  const pageObjects = getPageObjects(['common']);
+  const pageObjects = getPageObjects(['common', 'header']);
   const testSubjects = getService('testSubjects');
   const retry = getService('retry');
 
@@ -39,12 +39,13 @@ export function ObservabilityOverviewCommonProvider({
   };
 
   const navigateToOverviewPage = async () => {
-    return await pageObjects.common.navigateToUrlWithBrowserHistory(
+    await pageObjects.common.navigateToUrlWithBrowserHistory(
       'observability',
       '/overview',
       undefined,
       { ensureCurrentUrl: false }
     );
+    await pageObjects.header.waitUntilLoadingHasFinished();
   };
 
   const waitForAlertsAccordionToAppear = async () => {
@@ -54,15 +55,12 @@ export function ObservabilityOverviewCommonProvider({
   };
 
   const waitForAlertsTableLoadingToDisappear = async () => {
-    await retry.try(async () => {
-      await testSubjects.missingOrFail(ALERTS_TABLE_LOADING_SELECTOR, { timeout: 10000 });
-    });
+    await testSubjects.missingOrFail(ALERTS_TABLE_LOADING_SELECTOR, { timeout: 30_000 });
   };
 
   const openAlertsSection = async () => {
     await waitForAlertsAccordionToAppear();
-    const alertSectionButton = await find.byCssSelector(ALERTS_SECTION_BUTTON_SELECTOR);
-    return await alertSectionButton.click();
+    await find.clickByCssSelector(ALERTS_SECTION_BUTTON_CSS_SELECTOR);
   };
 
   const openAlertsSectionAndWaitToAppear = async () => {

x-pack/test/observability_functional/apps/observability/pages/overview/alert_table.ts

@@ -10,12 +10,10 @@ import { FtrProviderContext } from '../../../../ftr_provider_context';
 
 const ALL_ALERTS = 10;
 
-export default ({ getPageObjects, getService }: FtrProviderContext) => {
-  const PageObjects = getPageObjects(['header']);
+export default ({ getService }: FtrProviderContext) => {
   const esArchiver = getService('esArchiver');
 
-  // Failing: See https://github.com/elastic/kibana/issues/140507
-  describe.skip('Observability overview', function () {
+  describe('Observability overview', function () {
     this.tags('includeFirefox');
 
     const observability = getService('observability');
@@ -32,7 +30,6 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
     describe('Without alerts', function () {
       it('navigate and open alerts section', async () => {
         await observability.overview.common.navigateToOverviewPage();
-        await PageObjects.header.waitUntilLoadingHasFinished();
         await observability.overview.common.openAlertsSectionAndWaitToAppear();
       });
 
@@ -46,7 +43,6 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
     describe('With alerts', function () {
       it('navigate and open alerts section', async () => {
         await observability.overview.common.navigateToOverviewPageWithAlerts();
-        await PageObjects.header.waitUntilLoadingHasFinished();
         await observability.overview.common.openAlertsSectionAndWaitToAppear();
       });