[Response Ops] Alerts table

x-pack/plugins/rule_registry/common/index.ts

@@ -5,5 +5,9 @@
  * 2.0.
  */
 export { parseTechnicalFields, type ParsedTechnicalFields } from './parse_technical_fields';
-export type { RuleRegistrySearchRequest, RuleRegistrySearchResponse } from './search_strategy';
+export type {
+  RuleRegistrySearchRequest,
+  RuleRegistrySearchResponse,
+  RuleRegistrySearchRequestPagination,
+} from './search_strategy';
 export { BASE_RAC_ALERTS_API_PATH } from './constants';

x-pack/plugins/triggers_actions_ui/common/experimental_features.ts

@@ -13,6 +13,7 @@ export type ExperimentalFeatures = typeof allowedExperimentalValues;
  */
 export const allowedExperimentalValues = Object.freeze({
   rulesListDatagrid: true,
+  internalAlertsTable: false,
   rulesDetailLogs: true,
 });
 

x-pack/plugins/triggers_actions_ui/public/application/app.tsx

@@ -59,7 +59,7 @@ export const renderApp = (deps: TriggersAndActionsUiServices) => {
 
 export const App = ({ deps }: { deps: TriggersAndActionsUiServices }) => {
   const { savedObjects, uiSettings, theme$ } = deps;
-  const sections: Section[] = ['rules', 'connectors'];
+  const sections: Section[] = ['rules', 'connectors', 'alerts'];
   const isDarkMode = useObservable<boolean>(uiSettings.get$('theme:darkMode'));
 
   const sectionsRegex = sections.join('|');

x-pack/plugins/triggers_actions_ui/public/application/constants/index.ts

@@ -13,12 +13,13 @@ export {
 } from '../../../../alerting/common';
 export { BASE_ACTION_API_PATH, INTERNAL_BASE_ACTION_API_PATH } from '../../../../actions/common';
 
-export type Section = 'connectors' | 'rules';
+export type Section = 'connectors' | 'rules' | 'alerts';
 
 export const routeToHome = `/`;
 export const routeToConnectors = `/connectors`;
 export const routeToRules = `/rules`;
 export const routeToRuleDetails = `/rule/:ruleId`;
+export const routeToInternalAlerts = `/alerts`;
 export const legacyRouteToRules = `/alerts`;
 export const legacyRouteToRuleDetails = `/alert/:alertId`;
 

x-pack/plugins/triggers_actions_ui/public/application/home.test.tsx

@@ -10,11 +10,20 @@ import { RouteComponentProps, Router } from 'react-router-dom';
 import { createMemoryHistory, createLocation } from 'history';
 import { mountWithIntl } from '@kbn/test-jest-helpers';
 import TriggersActionsUIHome, { MatchParams } from './home';
+import { hasShowActionsCapability } from './lib/capabilities';
 import { useKibana } from '../common/lib/kibana';
+import { getIsExperimentalFeatureEnabled } from '../common/get_experimental_features';
 jest.mock('../common/lib/kibana');
+jest.mock('../common/get_experimental_features');
+jest.mock('./lib/capabilities');
 const useKibanaMock = useKibana as jest.Mocked<typeof useKibana>;
 
 describe('home', () => {
+  beforeEach(() => {
+    (hasShowActionsCapability as jest.Mock).mockClear();
+    (getIsExperimentalFeatureEnabled as jest.Mock).mockClear();
+  });
+
   it('renders the documentation link', async () => {
     const props: RouteComponentProps<MatchParams> = {
       history: createMemoryHistory(),
@@ -40,4 +49,38 @@ describe('home', () => {
       'https://www.elastic.co/guide/en/kibana/mocked-test-branch/create-and-manage-rules.html'
     );
   });
+
+  it('hides the internal alerts table route if the config is not set', async () => {
+    (hasShowActionsCapability as jest.Mock).mockImplementation(() => {
+      return true;
+    });
+    const props: RouteComponentProps<MatchParams> = {
+      history: createMemoryHistory(),
+      location: createLocation('/'),
+      match: {
+        isExact: true,
+        path: `/connectorss`,
+        url: '',
+        params: {
+          section: 'connectors',
+        },
+      },
+    };
+
+    let home = mountWithIntl(<TriggersActionsUIHome {...props} />);
+
+    // Just rules/connectors
+    expect(home.find('.euiTab__content').length).toBe(2);
+
+    (getIsExperimentalFeatureEnabled as jest.Mock).mockImplementation((feature: string) => {
+      if (feature === 'internalAlertsTable') {
+        return true;
+      }
+      return false;
+    });
+
+    home = mountWithIntl(<TriggersActionsUIHome {...props} />);
+    // alerts now too!
+    expect(home.find('.euiTab__content').length).toBe(3);
+  });
 });

x-pack/plugins/triggers_actions_ui/public/application/home.tsx

@@ -6,11 +6,12 @@
  */
 
 import React, { lazy, useEffect } from 'react';
-import { Route, RouteComponentProps, Switch } from 'react-router-dom';
+import { Route, RouteComponentProps, Switch, Redirect } from 'react-router-dom';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { EuiSpacer, EuiButtonEmpty, EuiPageHeader } from '@elastic/eui';
 
-import { Section, routeToConnectors, routeToRules } from './constants';
+import { getIsExperimentalFeatureEnabled } from '../common/get_experimental_features';
+import { Section, routeToConnectors, routeToRules, routeToInternalAlerts } from './constants';
 import { getAlertingSectionBreadcrumb } from './lib/breadcrumb';
 import { getCurrentDocTitle } from './lib/doc_title';
 import { hasShowActionsCapability } from './lib/capabilities';
@@ -24,6 +25,7 @@ const ActionsConnectorsList = lazy(
   () => import('./sections/actions_connectors_list/components/actions_connectors_list')
 );
 const RulesList = lazy(() => import('./sections/rules_list/components/rules_list'));
+const AlertsPage = lazy(() => import('./sections/alerts_table/alerts_page'));
 
 export interface MatchParams {
   section: Section;
@@ -38,9 +40,11 @@ export const TriggersActionsUIHome: React.FunctionComponent<RouteComponentProps<
   const {
     chrome,
     application: { capabilities },
+
     setBreadcrumbs,
     docLinks,
   } = useKibana().services;
+  const isInternalAlertsTableEnabled = getIsExperimentalFeatureEnabled('internalAlertsTable');
 
   const canShowActions = hasShowActionsCapability(capabilities);
   const tabs: Array<{
@@ -67,6 +71,18 @@ export const TriggersActionsUIHome: React.FunctionComponent<RouteComponentProps<
     });
   }
 
+  if (isInternalAlertsTableEnabled) {
+    tabs.push({
+      id: 'alerts',
+      name: (
+        <FormattedMessage
+          id="xpack.triggersActionsUI.home.TabTitle"
+          defaultMessage="Alerts (Internal use only)"
+        />
+      ),
+    });
+  }
+
   const onSectionChange = (newSection: Section) => {
     history.push(`/${newSection}`);
   };
@@ -134,6 +150,15 @@ export const TriggersActionsUIHome: React.FunctionComponent<RouteComponentProps<
               path={routeToRules}
               component={suspendedComponentWithProps(RulesList, 'xl')}
             />
+            {isInternalAlertsTableEnabled ? (
+              <Route
+                exact
+                path={routeToInternalAlerts}
+                component={suspendedComponentWithProps(AlertsPage, 'xl')}
+              />
+            ) : (
+              <Redirect to={routeToRules} />
+            )}
           </Switch>
         </HealthCheck>
       </HealthContextProvider>

x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_table/alerts_page/README.md

@@ -0,0 +1 @@
+Note: This entire folder is meant for internal, testing purposes and is not exposed to users.

x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_table/alerts_page/alerts_page.tsx

@@ -0,0 +1,195 @@
+/*
+ * 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 React, { useState, useCallback, useEffect } from 'react';
+import { get } from 'lodash';
+import {
+  EuiDataGridCellValueElementProps,
+  EuiDataGridControlColumn,
+  EuiFlexItem,
+  EuiFlexGroup,
+  EuiSpacer,
+  EuiProgress,
+} from '@elastic/eui';
+import * as estypes from '@elastic/elasticsearch/lib/api/typesWithBodyKey';
+import { AlertConsumers } from '@kbn/rule-data-utils';
+import {
+  RuleRegistrySearchRequest,
+  RuleRegistrySearchResponse,
+  RuleRegistrySearchRequestPagination,
+} from '../../../../../../rule_registry/common';
+import { AlertsTable } from '../alerts_table';
+import { useKibana } from '../../../../common/lib/kibana';
+import { AbortError } from '../../../../../../../../src/plugins/kibana_utils/common';
+import { AlertsData } from '../../../../types';
+
+const consumers = [
+  AlertConsumers.APM,
+  AlertConsumers.LOGS,
+  AlertConsumers.UPTIME,
+  AlertConsumers.INFRASTRUCTURE,
+];
+
+const defaultPagination = {
+  pageSize: 10,
+  pageIndex: 0,
+};
+
+const defaultSort: estypes.SortCombinations[] = [
+  {
+    'event.action': {
+      order: 'asc',
+    },
+  },
+];
+
+const AlertsPage: React.FunctionComponent = () => {
+  const { data, notifications } = useKibana().services;
+  const [showCheckboxes] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isInitializing, setIsInitializing] = useState(true);
+  const [alertsCount, setAlertsCount] = useState(0);
+  const [alerts, setAlerts] = useState<AlertsData[]>([]);
+  const [sort, setSort] = useState<estypes.SortCombinations[]>(defaultSort);
+  const [pagination, setPagination] = useState(defaultPagination);
+
+  const onPageChange = (_pagination: RuleRegistrySearchRequestPagination) => {
+    setPagination(_pagination);
+  };
+  const onSortChange = (_sort: Array<{ id: string; direction: 'asc' | 'desc' }>) => {
+    setSort(
+      _sort.map(({ id, direction }) => {
+        return {
+          [id]: {
+            order: direction,
+          },
+        };
+      })
+    );
+  };
+
+  const asyncSearch = useCallback(() => {
+    setIsLoading(true);
+    const abortController = new AbortController();
+    const request: RuleRegistrySearchRequest = {
+      featureIds: consumers,
+      sort,
+      pagination,
+    };
+    data.search
+      .search<RuleRegistrySearchRequest, RuleRegistrySearchResponse>(request, {
+        strategy: 'privateRuleRegistryAlertsSearchStrategy',
+        abortSignal: abortController.signal,
+      })
+      .subscribe({
+        next: (res) => {
+          const alertsResponse = res.rawResponse.hits.hits.map(
+            (hit) => hit.fields as unknown as AlertsData
+          ) as AlertsData[];
+          setAlerts(alertsResponse);
+          const total = !isNaN(res.rawResponse.hits.total as number)
+            ? (res.rawResponse.hits.total as number)
+            : (res.rawResponse.hits.total as estypes.SearchTotalHits).value ?? 0;
+          setAlertsCount(total);
+          setIsLoading(false);
+        },
+        error: (e) => {
+          if (e instanceof AbortError) {
+            notifications.toasts.addWarning({
+              title: e.message,
+            });
+          } else {
+            notifications.toasts.addDanger({
+              title: 'Failed to run search',
+              text: e.message,
+            });
+          }
+          setIsLoading(false);
+        },
+      });
+    setIsInitializing(false);
+  }, [data.search, notifications.toasts, sort, pagination]);
+
+  useEffect(() => {
+    asyncSearch();
+  }, [asyncSearch]);
+
+  const useFetchAlertsData = () => {
+    return {
+      activePage: pagination.pageIndex,
+      alerts,
+      alertsCount,
+      isInitializing,
+      isLoading,
+      getInspectQuery: () => ({ request: {}, response: {} }),
+      onColumnsChange: (columns: EuiDataGridControlColumn[]) => {},
+      onPageChange,
+      onSortChange,
+      refresh: () => {
+        asyncSearch();
+      },
+    };
+  };
+
+  const tableProps = {
+    consumers,
+    bulkActions: [],
+    columns: [
+      {
+        id: 'event.action',
+        displayAsText: 'Alert status',
+        initialWidth: 150,
+      },
+      {
+        id: '@timestamp',
+        displayAsText: 'Last updated',
+        initialWidth: 250,
+      },
+      {
+        id: 'kibana.alert.duration.us',
+        displayAsText: 'Duration',
+        initialWidth: 150,
+      },
+      {
+        id: 'kibana.alert.reason',
+        displayAsText: 'Reason',
+      },
+    ],
+    deletedEventIds: [],
+    disabledCellActions: [],
+    pageSize: defaultPagination.pageSize,
+    pageSizeOptions: [2, 5, 10, 20, 50, 100],
+    leadingControlColumns: [],
+    renderCellValue: (rcvProps: EuiDataGridCellValueElementProps) => {
+      const { columnId, visibleRowIndex } = rcvProps as EuiDataGridCellValueElementProps & {
+        visibleRowIndex: number;
+      };
+      const value = (get(alerts[visibleRowIndex], columnId) ?? [])[0];
+      return value ?? 'N/A';
+    },
+    showCheckboxes,
+    trailingControlColumns: [],
+    useFetchAlertsData,
+    'data-test-subj': 'internalAlertsPage',
+  };
+
+  return (
+    <section>
+      <h1>THIS IS AN INTERNAL TEST PAGE</h1>
+      <EuiSpacer />
+      <EuiFlexGroup>
+        <EuiFlexItem grow={true}>
+          {isLoading && (
+            <EuiProgress size="xs" color="accent" data-test-subj="internalAlertsPageLoading" />
+          )}
+          <AlertsTable {...tableProps} />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </section>
+  );
+};
+
+export { AlertsPage };

x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_table/alerts_page/index.ts

@@ -0,0 +1,9 @@
+/*
+ * 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 { AlertsPage } from './alerts_page';
+// eslint-disable-next-line import/no-default-export
+export { AlertsPage as default };