Add basic functional tests for uptime alert flyouts.

x-pack/plugins/uptime/public/components/overview/alerts/settings_message_expression_popover.tsx

@@ -30,6 +30,7 @@ export const SettingsMessageExpressionPopover: React.FC<SettingsMessageExpressio
   const [isOpen, setIsOpen] = useState(false);
   return (
     <EuiPopover
+      data-test-subj={`xpack.uptime.alerts.tls.expressionPopover.${id}`}
       id={id}
       anchorPosition="downLeft"
       button={

x-pack/test/functional/page_objects/uptime_page.ts

@@ -29,6 +29,10 @@ export function UptimePageProvider({ getPageObjects, getService }: FtrProviderCo
       }
     }
 
+    public async goToUptimeOverview() {
+      return navigation.goToUptime();
+    }
+
     public async goToUptimeOverviewAndLoadData(
       dateStart: string,
       dateEnd: string,

x-pack/test/functional/services/uptime/alerts.ts

@@ -23,6 +23,16 @@ export function UptimeAlertsProvider({ getService }: FtrProviderContext) {
     async openMonitorStatusAlertType(alertType: string) {
       return testSubjects.click(`xpack.uptime.alerts.${alertType}-SelectOption`, 5000);
     },
+    async assertTlsFieldExists(id: string) {
+      return testSubjects.existOrFail(`xpack.uptime.alerts.tls.expressionPopover.${id}`, {
+        timeout: 15 * 1000,
+      });
+    },
+    async assertMonitorStatusFlyoutSearchBarExists() {
+      return testSubjects.existOrFail('xpack.uptime.alerts.monitorStatus.filterBar', {
+        timeout: 15 * 1000,
+      });
+    },
     async setAlertTags(tags: string[]) {
       for (let i = 0; i < tags.length; i += 1) {
         await testSubjects.click('comboBoxSearchInput', 5000);

x-pack/test/functional_with_es_ssl/apps/uptime/flyout_loads.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;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default ({ getPageObjects, getService }: FtrProviderContext) => {
+  describe('uptime alert flyout', () => {
+    const pageObjects = getPageObjects(['common', 'uptime']);
+    const uptimeService = getService('uptime');
+    const browserService = getService('browser');
+
+    afterEach(async () => browserService.refresh());
+
+    it('can open status flyout', async () => {
+      await pageObjects.uptime.goToUptimeOverview();
+      await uptimeService.alerts.openFlyout('monitorStatus');
+      await uptimeService.alerts.assertMonitorStatusFlyoutSearchBarExists();
+    });
+
+    it('can open tls flyout', async () => {
+      await pageObjects.uptime.goToUptimeOverview();
+      await uptimeService.alerts.openFlyout('tls');
+      await Promise.all([
+        uptimeService.alerts.assertTlsFieldExists('expiration'),
+        uptimeService.alerts.assertTlsFieldExists('age'),
+      ]);
+    });
+  });
+};

x-pack/test/functional_with_es_ssl/apps/uptime/index.ts

@@ -22,6 +22,7 @@ export default ({ getService, loadTestFile }: FtrProviderContext) => {
       after(async () => await esArchiver.unload(ARCHIVE));
 
       loadTestFile(require.resolve('./alert_flyout'));
+      loadTestFile(require.resolve('./flyout_loads'));
     });
   });
 };