[APM] Introduce Alerts tab on service overview page

x-pack/plugins/apm/public/components/alerting/service_overview_alerts/alerts_table_status_filter.tsx

@@ -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 { EuiButtonGroup, EuiButtonGroupOptionProps } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import React from 'react';
+import {
+  ALERT_STATUS_ACTIVE,
+  ALERT_STATUS_RECOVERED,
+  ALERT_STATUS,
+} from '@kbn/rule-data-utils';
+export const ALL_ALERTS_FILTER = 'ALL_ALERTS_FILTER';
+
+export type AlertStatusFilterButton =
+  | typeof ALERT_STATUS_ACTIVE
+  | typeof ALERT_STATUS_RECOVERED
+  | typeof ALL_ALERTS_FILTER;
+
+export interface AlertStatusFilterProps {
+  status: AlertStatusFilterButton;
+  onChange: (id: AlertStatusFilterButton) => void;
+}
+
+const options: EuiButtonGroupOptionProps[] = [
+  {
+    id: ALL_ALERTS_FILTER,
+    value: '',
+    label: i18n.translate('xpack.apm.alerts.alertStatusFilter.showAll', {
+      defaultMessage: 'Show all',
+    }),
+    'data-test-subj': 'alert-status-filter-show-all-button',
+  },
+  {
+    id: ALERT_STATUS_ACTIVE,
+    value: `${ALERT_STATUS}: "${ALERT_STATUS_RECOVERED}"`,
+    label: i18n.translate('xpack.apm.alerts.alertStatusFilter.active', {
+      defaultMessage: 'Active',
+    }),
+    'data-test-subj': 'alert-status-filter-active-button',
+  },
+  {
+    id: ALERT_STATUS_RECOVERED,
+    value: `${ALERT_STATUS}: "${ALERT_STATUS_RECOVERED}"`,
+    label: i18n.translate('xpack.apm.alerts.alertStatusFilter.recovered', {
+      defaultMessage: 'Recovered',
+    }),
+    'data-test-subj': 'alert-status-filter-recovered-button',
+  },
+];
+
+export function AlertsTableStatusFilter({
+  status,
+  onChange,
+}: AlertStatusFilterProps) {
+  return (
+    <EuiButtonGroup
+      legend={i18n.translate(
+        'xpack.apm.alerts.alertStatusFilter.button.legend',
+        {
+          defaultMessage: 'Filter by',
+        }
+      )}
+      color="primary"
+      options={options}
+      idSelected={status}
+      onChange={(id: string) => onChange(id as AlertStatusFilterButton)}
+    />
+  );
+}

x-pack/plugins/apm/public/components/app/alerts_overview/index.tsx

@@ -0,0 +1,86 @@
+/*
+ * 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, useMemo } from 'react';
+import { EuiPanel, EuiFlexItem, EuiFlexGroup } from '@elastic/eui';
+import { ALERT_STATUS } from '@kbn/rule-data-utils';
+import { AlertConsumers } from '@kbn/rule-data-utils';
+import { useKibana } from '@kbn/kibana-react-plugin/public';
+import { ApmPluginStartDeps } from '../../../plugin';
+import { useApmParams } from '../../../hooks/use_apm_params';
+import { SERVICE_NAME } from '../../../../common/elasticsearch_fieldnames';
+import { environmentQuery } from '../../../../common/utils/environment_query';
+import {
+  AlertsTableStatusFilter,
+  ALL_ALERTS_FILTER,
+  AlertStatusFilterButton,
+} from '../../alerting/service_overview_alerts/alerts_table_status_filter';
+
+export function AlertsOverview() {
+  const {
+    path: { serviceName },
+    query: { environment },
+  } = useApmParams('/services/{serviceName}/alerts');
+  const { services } = useKibana<ApmPluginStartDeps>();
+  const [alertStatusFilter, setAlertStatusFilter] =
+    useState<AlertStatusFilterButton>(ALL_ALERTS_FILTER);
+
+  const {
+    triggersActionsUi: {
+      getAlertsStateTable: AlertsStateTable,
+      alertsTableConfigurationRegistry,
+    },
+  } = services;
+
+  const alertQuery = useMemo(
+    () => ({
+      bool: {
+        filter: [
+          {
+            term: { [SERVICE_NAME]: serviceName },
+          },
+          ...(alertStatusFilter !== ALL_ALERTS_FILTER
+            ? [
+                {
+                  term: { [ALERT_STATUS]: alertStatusFilter },
+                },
+              ]
+            : []),
+          ...environmentQuery(environment),
+        ],
+      },
+    }),
+    [serviceName, alertStatusFilter, environment]
+  );
+
+  const alertStateProps = {
+    alertsTableConfigurationRegistry,
+    id: 'service-overview-alerts',
+    configurationId: AlertConsumers.OBSERVABILITY,
+    featureIds: [AlertConsumers.APM],
+    query: alertQuery,
+    showExpandToDetails: false,
+  };
+
+  return (
+    <EuiPanel borderRadius="none" hasShadow={false}>
+      <EuiFlexGroup direction="column" gutterSize="s">
+        <EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <AlertsTableStatusFilter
+              status={alertStatusFilter}
+              onChange={setAlertStatusFilter}
+            />
+          </EuiFlexItem>
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <AlertsStateTable {...alertStateProps} />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </EuiPanel>
+  );
+}

x-pack/plugins/apm/public/components/routing/service_detail/index.tsx

@@ -27,6 +27,7 @@ import { ServiceProfiling } from '../../app/service_profiling';
 import { ServiceDependencies } from '../../app/service_dependencies';
 import { ServiceLogs } from '../../app/service_logs';
 import { InfraOverview } from '../../app/infra_overview';
+import { AlertsOverview } from '../../app/alerts_overview';
 import { LatencyAggregationType } from '../../../../common/latency_aggregation_types';
 import { offsetRt } from '../../../../common/comparison_rt';
 import { TimeRangeMetadataContextProvider } from '../../../context/time_range_metadata/time_range_metadata_context';
@@ -286,6 +287,16 @@ export const serviceDetail = {
           showTransactionTypeSelector: false,
         },
       }),
+      '/services/{serviceName}/alerts': page({
+        tab: 'alerts',
+        title: i18n.translate('xpack.apm.views.alerts.title', {
+          defaultMessage: 'Alerts',
+        }),
+        element: <AlertsOverview />,
+        searchBarOptions: {
+          hidden: true,
+        },
+      }),
       '/services/{serviceName}/': {
         element: <RedirectToDefaultServiceRouteView />,
       },

x-pack/plugins/apm/public/components/routing/templates/apm_service_template/index.tsx

@@ -35,6 +35,7 @@ import { SearchBar } from '../../../shared/search_bar';
 import { ServiceIcons } from '../../../shared/service_icons';
 import { ApmMainTemplate } from '../apm_main_template';
 import { AnalyzeDataButton } from './analyze_data_button';
+import { getAlertingCapabilities } from '../../../alerting/get_alerting_capabilities';
 
 type Tab = NonNullable<EuiPageHeaderProps['tabs']>[0] & {
   key:
@@ -47,7 +48,8 @@ type Tab = NonNullable<EuiPageHeaderProps['tabs']>[0] & {
     | 'infrastructure'
     | 'service-map'
     | 'logs'
-    | 'profiling';
+    | 'profiling'
+    | 'alerts';
   hidden?: boolean;
 };
 
@@ -164,7 +166,13 @@ export function isJVMsTabHidden({
 
 function useTabs({ selectedTab }: { selectedTab: Tab['key'] }) {
   const { agentName, runtimeName } = useApmServiceContext();
-  const { config, core } = useApmPluginContext();
+  const { config, core, plugins } = useApmPluginContext();
+  const { capabilities } = core.application;
+  const { isAlertingAvailable, canReadAlerts } = getAlertingCapabilities(
+    plugins,
+    capabilities
+  );
+
   const showInfraTab = core.uiSettings.get<boolean>(enableInfrastructureView);
 
   const router = useApmRouter();
@@ -316,6 +324,17 @@ function useTabs({ selectedTab }: { selectedTab: Tab['key'] }) {
         </EuiFlexGroup>
       ),
     },
+    {
+      key: 'alerts',
+      href: router.link('/services/{serviceName}/alerts', {
+        path: { serviceName },
+        query,
+      }),
+      label: i18n.translate('xpack.apm.home.alertsTabLabel', {
+        defaultMessage: 'Alerts',
+      }),
+      hidden: !(isAlertingAvailable && canReadAlerts),
+    },
   ];
 
   return tabs