[RAC] [Observability] Expand Observability alerts page functional tests

x-pack/plugins/observability/public/pages/alerts/alerts_flyout/index.tsx

@@ -127,9 +127,9 @@ export function AlertsFlyout({
   ];
 
   return (
-    <EuiFlyout onClose={onClose} size="s">
+    <EuiFlyout onClose={onClose} size="s" data-test-subj="alertsFlyout">
       <EuiFlyoutHeader>
-        <EuiTitle size="m">
+        <EuiTitle size="m" data-test-subj="alertsFlyoutTitle">
           <h2>{alertData.fields[ALERT_RULE_NAME]}</h2>
         </EuiTitle>
         <EuiSpacer size="s" />
@@ -141,13 +141,27 @@ export function AlertsFlyout({
           compressed={true}
           type="responsiveColumn"
           listItems={overviewListItems}
+          titleProps={
+            {
+              'data-test-subj': 'alertsFlyoutDescriptionListTitle',
+            } as any // NOTE / TODO: This "any" is a temporary workaround: https://github.com/elastic/eui/issues/5148
+          }
+          descriptionProps={
+            {
+              'data-test-subj': 'alertsFlyoutDescriptionListDescription',
+            } as any // NOTE / TODO: This "any" is a temporary workaround: https://github.com/elastic/eui/issues/5148
+          }
         />
       </EuiFlyoutBody>
       {alertData.link && !isInApp && (
         <EuiFlyoutFooter>
           <EuiFlexGroup justifyContent="flexEnd">
             <EuiFlexItem grow={false}>
-              <EuiButton href={prepend && prepend(alertData.link)} fill>
+              <EuiButton
+                href={prepend && prepend(alertData.link)}
+                data-test-subj="alertsFlyoutViewInAppButton"
+                fill
+              >
                 View in app
               </EuiButton>
             </EuiFlexItem>

x-pack/plugins/observability/public/pages/alerts/alerts_table_t_grid.tsx

@@ -254,6 +254,7 @@ function ObservabilityActions({
             iconType="expand"
             color="text"
             onClick={() => setFlyoutAlert(alert)}
+            data-test-subj="openFlyoutButton"
           />
         </EuiFlexItem>
         <EuiFlexItem>

x-pack/plugins/timelines/public/components/t_grid/shared/index.tsx

@@ -51,7 +51,7 @@ export const TGridEmpty: React.FC<{ height?: keyof typeof heights }> = ({ height
   const { http } = useKibana<CoreStart>().services;
 
   return (
-    <EuiPanel color="subdued">
+    <EuiPanel color="subdued" data-test-subj="tGridEmptyState">
       <EuiFlexGroup style={{ height: heights[height] }} alignItems="center" justifyContent="center">
         <EuiFlexItem grow={false}>
           <EuiPanel hasBorder={true} style={panelStyle}>

x-pack/test/functional/es_archives/observability/alerts/mappings.json

@@ -65,8 +65,12 @@
                     }
                   }
                 },
-                "id": {
-                  "type": "keyword"
+                "instance": {
+                  "properties": {
+                    "id": {
+                      "type": "keyword"
+                    }
+                  }
                 },
                 "reason": {
                   "type": "keyword"
@@ -325,8 +329,12 @@
                     }
                   }
                 },
-                "id": {
-                  "type": "keyword"
+                "instance": {
+                  "properties": {
+                    "id": {
+                      "type": "keyword"
+                    }
+                  }
                 },
                 "reason": {
                   "type": "keyword"
@@ -561,8 +569,12 @@
                     }
                   }
                 },
-                "id": {
-                  "type": "keyword"
+                "instance": {
+                  "properties": {
+                    "id": {
+                      "type": "keyword"
+                    }
+                  }
                 },
                 "reason": {
                   "type": "keyword"

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

@@ -0,0 +1,129 @@
+/*
+ * 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 querystring from 'querystring';
+import { FtrProviderContext } from '../../ftr_provider_context';
+import { WebElementWrapper } from '../../../../../test/functional/services/lib/web_element_wrapper';
+
+// Based on the x-pack/test/functional/es_archives/observability/alerts archive.
+const DATE_WITH_DATA = {
+  rangeFrom: '2021-09-01T13:36:22.109Z',
+  rangeTo: '2021-09-03T13:36:22.109Z',
+};
+
+const ALERTS_FLYOUT_SELECTOR = 'alertsFlyout';
+
+export function ObservabilityAlertsProvider({ getPageObjects, getService }: FtrProviderContext) {
+  const testSubjects = getService('testSubjects');
+  const flyoutService = getService('flyout');
+  const pageObjects = getPageObjects(['common']);
+  const retry = getService('retry');
+
+  const navigateToTimeWithData = async () => {
+    return await pageObjects.common.navigateToUrlWithBrowserHistory(
+      'observability',
+      '/alerts',
+      `?${querystring.stringify(DATE_WITH_DATA)}`
+    );
+  };
+
+  const getTableCells = async () => {
+    // NOTE: This isn't ideal, but EuiDataGrid doesn't really have the concept of "rows"
+    return await testSubjects.findAll('dataGridRowCell');
+  };
+
+  const getTableOrFail = async () => {
+    return await testSubjects.existOrFail('events-viewer-panel');
+  };
+
+  const getNoDataStateOrFail = async () => {
+    return await testSubjects.existOrFail('tGridEmptyState');
+  };
+
+  // Query Bar
+  const getQueryBar = async () => {
+    return await testSubjects.find('queryInput');
+  };
+
+  const getQuerySubmitButton = async () => {
+    return await testSubjects.find('querySubmitButton');
+  };
+
+  const clearQueryBar = async () => {
+    return await (await getQueryBar()).clearValueWithKeyboard({ charByChar: true });
+  };
+
+  const typeInQueryBar = async (query: string) => {
+    return await (await getQueryBar()).type(query);
+  };
+
+  const submitQuery = async (query: string) => {
+    await typeInQueryBar(query);
+    return await (await getQuerySubmitButton()).click();
+  };
+
+  // Flyout
+  const getOpenFlyoutButton = async () => {
+    return await testSubjects.find('openFlyoutButton');
+  };
+
+  const openAlertsFlyout = async () => {
+    await (await getOpenFlyoutButton()).click();
+    await retry.waitFor(
+      'flyout open',
+      async () => await testSubjects.exists(ALERTS_FLYOUT_SELECTOR, { timeout: 2500 })
+    );
+  };
+
+  const getAlertsFlyout = async () => {
+    return await testSubjects.find(ALERTS_FLYOUT_SELECTOR);
+  };
+
+  const getAlertsFlyoutOrFail = async () => {
+    return await testSubjects.existOrFail(ALERTS_FLYOUT_SELECTOR);
+  };
+
+  const getAlertsFlyoutTitle = async () => {
+    return await testSubjects.find('alertsFlyoutTitle');
+  };
+
+  const closeAlertsFlyout = async () => {
+    return await flyoutService.close(ALERTS_FLYOUT_SELECTOR);
+  };
+
+  const getAlertsFlyoutViewInAppButtonOrFail = async () => {
+    return await testSubjects.existOrFail('alertsFlyoutViewInAppButton');
+  };
+
+  const getAlertsFlyoutDescriptionListTitles = async (): Promise<WebElementWrapper[]> => {
+    const flyout = await getAlertsFlyout();
+    return await testSubjects.findAllDescendant('alertsFlyoutDescriptionListTitle', flyout);
+  };
+
+  const getAlertsFlyoutDescriptionListDescriptions = async (): Promise<WebElementWrapper[]> => {
+    const flyout = await getAlertsFlyout();
+    return await testSubjects.findAllDescendant('alertsFlyoutDescriptionListDescription', flyout);
+  };
+
+  return {
+    clearQueryBar,
+    typeInQueryBar,
+    submitQuery,
+    getTableCells,
+    getTableOrFail,
+    getNoDataStateOrFail,
+    openAlertsFlyout,
+    getAlertsFlyout,
+    getAlertsFlyoutTitle,
+    closeAlertsFlyout,
+    navigateToTimeWithData,
+    getAlertsFlyoutOrFail,
+    getAlertsFlyoutViewInAppButtonOrFail,
+    getAlertsFlyoutDescriptionListTitles,
+    getAlertsFlyoutDescriptionListDescriptions,
+  };
+}

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

@@ -7,11 +7,14 @@
 
 import { FtrProviderContext } from '../../ftr_provider_context';
 import { ObservabilityUsersProvider } from './users';
+import { ObservabilityAlertsProvider } from './alerts';
 
 export function ObservabilityProvider(context: FtrProviderContext) {
   const users = ObservabilityUsersProvider(context);
+  const alerts = ObservabilityAlertsProvider(context);
 
   return {
     users,
+    alerts,
   };
 }