Use shareable alert table in overview page

elastic · Sep 5, 2022 · ab66810 · ab66810
1 parent 12d07c5
commit ab66810
Show file tree

Hide file tree

Showing 8 changed files with 66 additions and 28 deletions.
diff --git a/x-pack/plugins/observability/public/pages/alerts/containers/alerts_page/alerts_page.tsx b/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>

diff --git a/x-pack/plugins/observability/public/pages/alerts/containers/alerts_page/constants.ts b/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[] = [];

diff --git a/x-pack/plugins/observability/public/pages/overview/containers/overview_page/constants.ts b/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;
diff --git a/...ck/plugins/observability/public/pages/overview/containers/overview_page/overview_page.tsx b/...ck/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>

diff --git a/...__snapshots__/build_es_query.test.ts.snap → ...__snapshots__/build_es_query.test.ts.snap b/...__snapshots__/build_es_query.test.ts.snap → ...__snapshots__/build_es_query.test.ts.snap
diff --git a/...lerts_page/helpers/build_es_query.test.ts → ...ils/build_es_query/build_es_query.test.ts b/...lerts_page/helpers/build_es_query.test.ts → ...ils/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" }',

diff --git a/...ers/alerts_page/helpers/build_es_query.ts → ...ic/utils/build_es_query/build_es_query.ts b/...ers/alerts_page/helpers/build_es_query.ts → ...ic/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);
 }
diff --git a/...s/containers/alerts_page/helpers/index.ts → ...lity/public/utils/build_es_query/index.ts b/...s/containers/alerts_page/helpers/index.ts → ...lity/public/utils/build_es_query/index.ts