Attempt to fix custom_threshold_preview_chart flaky test (#212028)

Fixes #209317

## Summary

Summary of
[Slack](https://elastic.slack.com/archives/C04HT4P1YS3/p1740054800086779)
discussion:

As shown below, we check if the `Create rule` button exists and then we
try to click it:
```
const clickCreateRuleButton = async () => {
    await testSubjects.existOrFail('createRuleButton');
    const createRuleButton = await testSubjects.find('createRuleButton');
    return await createRuleButton.click();
  };
```

It seems something goes wrong during click in this case and even after 2
mins, we don't see the modal:
```
[00:03:11]         │ debg --- retry.tryForTime error: [data-test-subj="ruleTypeModal"] is not displayed
...
[00:05:09]         └- ✖ fail: ObservabilityApp Custom threshold preview chart does render the empty chart only once at bootstrap
```

@dmlemeshko pointed to the implementation that we have for the button
and the fact that we need to first check if the user is authorized to
see this button, and something might have caused the click not to be
successful even though there is no error reported by WebDriver.

```
useEffect(() => {
    setHeaderActions?.([
      ...(authorizedToCreateAnyRules ? [<CreateRuleButton openFlyout={openRuleTypeModal} />] : []),
      <RulesSettingsLink />,
      <RulesListDocLink />,
    ]);
  }, [authorizedToCreateAnyRules]);
```

Long story short, we will add waiting for the global spinner to
hopefully make this test less flaky 🤞🏻

---------

Co-authored-by: Dominique Clarke <[email protected]>

Author: maryam-saeidi

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

@@ -12,6 +12,7 @@ const CUSTOM_THRESHOLD_RULE_TYPE_SELECTOR = 'observability.rules.custom_threshol
 export function ObservabilityAlertsRulesProvider({ getService }: FtrProviderContext) {
   const testSubjects = getService('testSubjects');
   const find = getService('find');
+  const log = getService('log');
 
   const getManageRulesPageHref = async () => {
     const manageRulesPageButton = await testSubjects.find('manageRulesPageButton');
@@ -21,6 +22,7 @@ export function ObservabilityAlertsRulesProvider({ getService }: FtrProviderCont
   const clickCreateRuleButton = async () => {
     await testSubjects.existOrFail('createRuleButton');
     const createRuleButton = await testSubjects.find('createRuleButton');
+    log.debug(`clicking on ${await createRuleButton.getAttribute('innerText')}`);
     return await createRuleButton.click();
   };
 

x-pack/test/observability_functional/apps/observability/pages/alerts/custom_threshold.ts

@@ -18,7 +18,7 @@ export default ({ getService, getPageObjects }: FtrProviderContext) => {
   const logger = getService('log');
   const retry = getService('retry');
   const toasts = getService('toasts');
-  const PageObjects = getPageObjects(['header']);
+  const pageObjects = getPageObjects(['header']);
 
   describe('Custom threshold rule', function () {
     this.tags('includeFirefox');
@@ -49,6 +49,7 @@ export default ({ getService, getPageObjects }: FtrProviderContext) => {
         logger,
       });
       await observability.alerts.common.navigateToRulesPage();
+      await pageObjects.header.waitUntilLoadingHasFinished();
     });
 
     after(async () => {
@@ -59,7 +60,7 @@ export default ({ getService, getPageObjects }: FtrProviderContext) => {
 
     it('shows the custom threshold rule in the observability section', async () => {
       await observability.alerts.rulesPage.clickCreateRuleButton();
-      await PageObjects.header.waitUntilLoadingHasFinished();
+      await pageObjects.header.waitUntilLoadingHasFinished();
       await observability.alerts.rulesPage.clickOnObservabilityCategory();
       await observability.alerts.rulesPage.clickOnCustomThresholdRule();
     });

x-pack/test/observability_functional/apps/observability/pages/alerts/custom_threshold_preview_chart.ts

@@ -8,15 +8,15 @@
 import expect from 'expect';
 import { FtrProviderContext } from '../../../../ftr_provider_context';
 
-export default ({ getService, getPageObject }: FtrProviderContext) => {
-  const common = getPageObject('common');
+export default ({ getService, getPageObjects }: FtrProviderContext) => {
   const esArchiver = getService('esArchiver');
   const testSubjects = getService('testSubjects');
   const kibanaServer = getService('kibanaServer');
   const supertest = getService('supertest');
   const find = getService('find');
   const logger = getService('log');
   const retry = getService('retry');
+  const pageObjects = getPageObjects(['common', 'header']);
 
   describe('Custom threshold preview chart', () => {
     const observability = getService('observability');
@@ -34,6 +34,7 @@ export default ({ getService, getPageObject }: FtrProviderContext) => {
         logger,
       });
       await observability.alerts.common.navigateToRulesPage();
+      await pageObjects.header.waitUntilLoadingHasFinished();
     });
 
     after(async () => {
@@ -46,7 +47,7 @@ export default ({ getService, getPageObject }: FtrProviderContext) => {
       await observability.alerts.rulesPage.clickCreateRuleButton();
       await observability.alerts.rulesPage.clickOnObservabilityCategory();
       await observability.alerts.rulesPage.clickOnCustomThresholdRule();
-      await common.sleep(1000);
+      await pageObjects.common.sleep(1000);
       expect(await find.existsByCssSelector('[data-rendering-count="2"]')).toBe(true);
     });