[Actionable Observability] Integrate the shareable alert table in the Overview Page

x-pack/plugins/observability/public/pages/alerts/containers/alerts_page/alerts_page.tsx

@@ -14,7 +14,6 @@ import useAsync from 'react-use/lib/useAsync';
 import { useKibana } from '@kbn/kibana-react-plugin/public';
 import { loadRuleAggregations } from '@kbn/triggers-actions-ui-plugin/public';
 import { AlertConsumers, AlertStatus } from '@kbn/rule-data-utils';
-import { buildEsQuery } from './helpers';
 import { AlertStatusFilterButton } from '../../../../../common/typings';
 import { useGetUserCasesPermissions } from '../../../../hooks/use_get_user_cases_permissions';
 import { observabilityFeatureId } from '../../../../../common';
@@ -23,6 +22,7 @@ import { useAlertIndexNames } from '../../../../hooks/use_alert_index_names';
 import { useHasData } from '../../../../hooks/use_has_data';
 import { usePluginContext } from '../../../../hooks/use_plugin_context';
 import { getNoDataConfig } from '../../../../utils/no_data_config';
+import { buildEsQuery } from '../../../../utils/build_es_query';
 import { LoadingObservability } from '../../../overview';
 import {
   Provider,
@@ -35,6 +35,7 @@ import { renderRuleStats } from '../../components/rule_stats';
 import { ObservabilityAppServices } from '../../../../application/types';
 import {
   ALERT_STATUS_REGEX,
+  ALERTS_PER_PAGE,
   ALERTS_TABLE_ID,
   BASE_ALERT_REGEX,
   NO_INDEX_PATTERNS,
@@ -144,11 +145,6 @@ function AlertsPage() {
     ];
   }, [indexNames]);
 
-  const timeRange = {
-    to: rangeTo,
-    from: rangeFrom,
-  };
-
   const onRefresh = () => {
     setRefreshNow(new Date().getTime());
   };
@@ -264,9 +260,15 @@ function AlertsPage() {
                 AlertConsumers.LOGS,
                 AlertConsumers.UPTIME,
               ]}
-              query={buildEsQuery(timeRange, kuery)}
+              query={buildEsQuery(
+                {
+                  to: rangeTo,
+                  from: rangeFrom,
+                },
+                kuery
+              )}
               showExpandToDetails={false}
-              pageSize={50}
+              pageSize={ALERTS_PER_PAGE}
               refreshNow={refreshNow}
             />
           </CasesContext>

x-pack/plugins/observability/public/pages/alerts/containers/alerts_page/constants.ts

@@ -9,7 +9,8 @@ import { DataViewBase } from '@kbn/es-query';
 import { ALERT_STATUS } from '@kbn/rule-data-utils';
 
 export const ALERTS_PAGE_ID = 'alerts-o11y';
-export const ALERTS_TABLE_ID = 'xpack.observability.alerts.table';
+export const ALERTS_PER_PAGE = 50;
+export const ALERTS_TABLE_ID = 'xpack.observability.alerts.alert.table';
 
 const regExpEscape = (str: string) => str.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
 export const NO_INDEX_PATTERNS: DataViewBase[] = [];

x-pack/plugins/observability/public/pages/overview/containers/overview_page/constants.ts

@@ -7,5 +7,6 @@
 
 export const CAPABILITIES_KEYS = ['logs', 'infrastructure', 'apm', 'uptime'];
 
+export const ALERTS_TABLE_ID = 'xpack.observability.overview.alert.table';
 export const ALERT_TABLE_STATE_STORAGE_KEY = 'xpack.observability.overview.alert.tableState';
 export const ALERTS_PER_PAGE = 10;

x-pack/plugins/observability/public/pages/overview/containers/overview_page/overview_page.tsx

@@ -4,12 +4,14 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
+
 import {
   EuiButton,
   EuiButtonEmpty,
   EuiFlexGroup,
   EuiFlexItem,
   EuiFlyout,
+  EuiFlyoutSize,
   EuiFlyoutBody,
   EuiFlyoutHeader,
   EuiHorizontalRule,
@@ -21,7 +23,7 @@ import {
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { useKibana } from '@kbn/kibana-react-plugin/public';
-import { Storage } from '@kbn/kibana-utils-plugin/public';
+import { AlertConsumers } from '@kbn/rule-data-utils';
 import React, { useMemo, useRef, useCallback, useState, useEffect } from 'react';
 
 import { calculateBucketSize } from './helpers';
@@ -38,10 +40,9 @@ import { useBreadcrumbs } from '../../../../hooks/use_breadcrumbs';
 import { useFetcher } from '../../../../hooks/use_fetcher';
 import { useHasData } from '../../../../hooks/use_has_data';
 import { usePluginContext } from '../../../../hooks/use_plugin_context';
-import { useAlertIndexNames } from '../../../../hooks/use_alert_index_names';
+import { buildEsQuery } from '../../../../utils/build_es_query';
 import { getNewsFeed } from '../../../../services/get_news_feed';
 import { DataSections, LoadingObservability } from '../../components';
-import { AlertsTableTGrid } from '../../../alerts/containers/alerts_table_t_grid/alerts_table_t_grid';
 import { SectionContainer } from '../../../../components/app/section';
 import { ObservabilityAppServices } from '../../../../application/types';
 import { useGetUserCasesPermissions } from '../../../../hooks/use_get_user_cases_permissions';
@@ -51,7 +52,7 @@ import { ObservabilityStatusProgress } from '../../../../components/app/observab
 import { ObservabilityStatus } from '../../../../components/app/observability_status';
 import { useGuidedSetupProgress } from '../../../../hooks/use_guided_setup_progress';
 import { useObservabilityTourContext } from '../../../../components/shared/tour';
-import { CAPABILITIES_KEYS, ALERT_TABLE_STATE_STORAGE_KEY, ALERTS_PER_PAGE } from './constants';
+import { CAPABILITIES_KEYS, ALERTS_PER_PAGE, ALERTS_TABLE_ID } from './constants';
 
 export function OverviewPage() {
   const trackMetric = useUiTracker({ app: 'observability-overview' });
@@ -65,12 +66,13 @@ export function OverviewPage() {
     },
   ]);
   const [isFlyoutVisible, setIsFlyoutVisible] = useState(false);
+  const [refreshNow, setRefreshNow] = useState<number>();
 
-  const indexNames = useAlertIndexNames();
   const {
     cases,
     http,
     application: { capabilities },
+    triggersActionsUi: { alertsTableConfigurationRegistry, getAlertsStateTable: AlertsStateTable },
   } = useKibana<ObservabilityAppServices>().services;
 
   const { ObservabilityPageTemplate } = usePluginContext();
@@ -94,10 +96,6 @@ export function OverviewPage() {
     [absoluteStart, absoluteEnd]
   );
 
-  const setRefetch = useCallback((ref) => {
-    refetch.current = ref;
-  }, []);
-
   const handleGuidedSetupClick = useCallback(() => {
     if (isGuidedSetupProgressDismissed) {
       trackMetric({ metric: 'guided_setup_view_details_after_dismiss' });
@@ -107,6 +105,7 @@ export function OverviewPage() {
   }, [trackMetric, isGuidedSetupProgressDismissed, hideGuidedSetupTour]);
 
   const onTimeRangeRefresh = useCallback(() => {
+    setRefreshNow(new Date().getTime());
     return refetch.current && refetch.current();
   }, []);
 
@@ -173,14 +172,24 @@ export function OverviewPage() {
                 permissions={userCasesPermissions}
                 features={{ alerts: { sync: false } }}
               >
-                <AlertsTableTGrid
-                  setRefetch={setRefetch}
-                  rangeFrom={relativeStart}
-                  rangeTo={relativeEnd}
-                  indexNames={indexNames}
-                  itemsPerPage={ALERTS_PER_PAGE}
-                  stateStorageKey={ALERT_TABLE_STATE_STORAGE_KEY}
-                  storage={new Storage(window.localStorage)}
+                <AlertsStateTable
+                  alertsTableConfigurationRegistry={alertsTableConfigurationRegistry}
+                  configurationId={AlertConsumers.OBSERVABILITY}
+                  id={ALERTS_TABLE_ID}
+                  flyoutSize={'s' as EuiFlyoutSize}
+                  featureIds={[
+                    AlertConsumers.APM,
+                    AlertConsumers.INFRASTRUCTURE,
+                    AlertConsumers.LOGS,
+                    AlertConsumers.UPTIME,
+                  ]}
+                  query={buildEsQuery({
+                    from: relativeStart,
+                    to: relativeEnd,
+                  })}
+                  showExpandToDetails={false}
+                  pageSize={ALERTS_PER_PAGE}
+                  refreshNow={refreshNow}
                 />
               </CasesContext>
             </SectionContainer>

x-pack/plugins/observability/public/pages/alerts/containers/alerts_page/helpers/build_es_query.test.ts → x-pack/plugins/observability/public/utils/build_es_query/build_es_query.test.ts

@@ -19,6 +19,9 @@ describe('buildEsQuery', () => {
       timeRange: defaultTimeRange,
       kuery: '',
     },
+    {
+      timeRange: defaultTimeRange,
+    },
     {
       timeRange: defaultTimeRange,
       kuery: 'nestedField: { child: "something" }',

x-pack/plugins/observability/public/pages/alerts/containers/alerts_page/helpers/build_es_query.ts → x-pack/plugins/observability/public/utils/build_es_query/build_es_query.ts

@@ -9,13 +9,14 @@ import { buildEsQuery as kbnBuildEsQuery, TimeRange } from '@kbn/es-query';
 import { TIMESTAMP } from '@kbn/rule-data-utils';
 import { getTime } from '@kbn/data-plugin/common';
 
-export function buildEsQuery(timeRange: TimeRange, kuery: string) {
+export function buildEsQuery(timeRange: TimeRange, kuery?: string) {
   const timeFilter =
     timeRange &&
     getTime(undefined, timeRange, {
       fieldName: TIMESTAMP,
     });
   const filtersToUse = [...(timeFilter ? [timeFilter] : [])];
+  const queryToUse = kuery ? { query: kuery, language: 'kuery' } : [];
 
-  return kbnBuildEsQuery(undefined, { query: kuery, language: 'kuery' }, filtersToUse);
+  return kbnBuildEsQuery(undefined, queryToUse, filtersToUse);
 }

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

@@ -8,13 +8,16 @@
 import { FtrProviderContext } from '../../ftr_provider_context';
 import { ObservabilityUsersProvider } from './users';
 import { ObservabilityAlertsProvider } from './alerts';
+import { ObservabilityOverviewProvider } from './overview';
 
 export function ObservabilityProvider(context: FtrProviderContext) {
   const alerts = ObservabilityAlertsProvider(context);
   const users = ObservabilityUsersProvider(context);
+  const overview = ObservabilityOverviewProvider(context);
 
   return {
     alerts,
     users,
+    overview,
   };
 }

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

@@ -0,0 +1,73 @@
+/*
+ * 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 { FtrProviderContext } from '../../../ftr_provider_context';
+
+// Based on the x-pack/test/functional/es_archives/observability/alerts archive.
+const DATE_WITH_DATA = {
+  rangeFrom: '2021-10-18T13:36:22.109Z',
+  rangeTo: '2021-10-20T13:36:22.109Z',
+};
+
+const ALERTS_SECTION_SELECTOR = 'Alerts';
+const ALERTS_TABLE_NO_DATA_SELECTOR = 'alertsStateTableEmptyState';
+const ALERTS_TABLE_WITH_DATA_SELECTOR = 'alertsTable';
+
+export function ObservabilityOverviewCommonProvider({
+  getPageObjects,
+  getService,
+}: FtrProviderContext) {
+  const find = getService('find');
+  const pageObjects = getPageObjects(['common']);
+  const testSubjects = getService('testSubjects');
+  const retry = getService('retry');
+
+  const navigateToOverviewPageWithAlerts = async () => {
+    return await pageObjects.common.navigateToUrlWithBrowserHistory(
+      'observability',
+      '/overview',
+      `?rangeFrom=${DATE_WITH_DATA.rangeFrom}&rangeTo=${DATE_WITH_DATA.rangeTo}`,
+      { ensureCurrentUrl: false }
+    );
+  };
+
+  const navigateToOverviewPage = async () => {
+    return await pageObjects.common.navigateToUrlWithBrowserHistory(
+      'observability',
+      '/overview',
+      undefined,
+      { ensureCurrentUrl: false }
+    );
+  };
+
+  const openAlertsSection = async () => {
+    return await (
+      await find.byCssSelector(`button[aria-controls="${ALERTS_SECTION_SELECTOR}"]`)
+    ).click();
+  };
+
+  const openAlertsSectionAndWaitToAppear = async () => {
+    await openAlertsSection();
+    await retry.waitFor('alerts table to appear', async () => {
+      return (
+        (await testSubjects.exists(ALERTS_TABLE_NO_DATA_SELECTOR)) ||
+        (await testSubjects.exists(ALERTS_TABLE_WITH_DATA_SELECTOR))
+      );
+    });
+  };
+
+  const getAlertsTableNoDataOrFail = async () => {
+    return await testSubjects.existOrFail(ALERTS_TABLE_NO_DATA_SELECTOR);
+  };
+
+  return {
+    getAlertsTableNoDataOrFail,
+    navigateToOverviewPageWithAlerts,
+    navigateToOverviewPage,
+    openAlertsSectionAndWaitToAppear,
+  };
+}

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

@@ -0,0 +1,18 @@
+/*
+ * 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 { ObservabilityOverviewCommonProvider } from './common';
+
+import { FtrProviderContext } from '../../../ftr_provider_context';
+
+export function ObservabilityOverviewProvider(context: FtrProviderContext) {
+  const common = ObservabilityOverviewCommonProvider(context);
+
+  return {
+    common,
+  };
+}

x-pack/test/observability_functional/apps/observability/index.ts

@@ -10,13 +10,14 @@ import { FtrProviderContext } from '../../ftr_provider_context';
 export default function ({ loadTestFile }: FtrProviderContext) {
   describe('ObservabilityApp', function () {
     loadTestFile(require.resolve('./pages/alerts'));
-    loadTestFile(require.resolve('./pages/cases/case_details'));
     loadTestFile(require.resolve('./pages/alerts/add_to_case'));
     loadTestFile(require.resolve('./pages/alerts/alert_status'));
     loadTestFile(require.resolve('./pages/alerts/pagination'));
     loadTestFile(require.resolve('./pages/alerts/rule_stats'));
     loadTestFile(require.resolve('./pages/alerts/state_synchronization'));
     loadTestFile(require.resolve('./pages/alerts/table_storage'));
+    loadTestFile(require.resolve('./pages/cases/case_details'));
+    loadTestFile(require.resolve('./pages/overview/alert_table'));
     loadTestFile(require.resolve('./exploratory_view'));
     loadTestFile(require.resolve('./feature_controls'));
     loadTestFile(require.resolve('./pages/rules_page'));

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

@@ -30,7 +30,7 @@ export default ({ getService }: FtrProviderContext) => {
       await esArchiver.load('x-pack/test/functional/es_archives/observability/alerts');
       const setup = async () => {
         await observability.alerts.common.setKibanaTimeZoneToUTC();
-        await observability.alerts.common.navigateToTimeWithData();
+        await observability.alerts.common.navigateWithoutFilter();
       };
       await setup();
     });

x-pack/test/observability_functional/apps/observability/pages/cases/case_details.ts

@@ -17,7 +17,7 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
   const find = getService('find');
   const PageObjects = getPageObjects(['common', 'header']);
 
-  describe('Cases', () => {
+  describe('Observability cases', () => {
     before(async () => {
       await esArchiver.load('x-pack/test/functional/es_archives/observability/alerts');
       await esArchiver.load('x-pack/test/functional/es_archives/infra/metrics_and_logs');
@@ -56,6 +56,7 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
 
       after(async () => {
         await cases.api.deleteAllCases();
+        await observability.users.restoreDefaultTestUserRole();
       });
 
       it('should link to observability rule pages in case details', async () => {