Register alerts tables configuration

x-pack/plugins/apm/public/components/alerting/register_alerts_tables_configurations.tsx

@@ -0,0 +1,40 @@
+/*
+ * 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 type { AlertsTableConfigurationRegistryContract } from '@kbn/triggers-actions-ui-plugin/public';
+export const registerAlertsTableConfiguration = (
+  registry: AlertsTableConfigurationRegistryContract
+) => {
+  if (registry.has('apm')) {
+    return;
+  }
+  registry.register({
+    id: 'apm',
+    columns: [
+      {
+        id: '@timestamp',
+        displayAsText: '@timestamp', //todo intern
+        initialWidth: 250,
+      },
+      {
+        id: 'event.action',
+        displayAsText: 'Alert status',
+        initialWidth: 150,
+      },
+
+      {
+        id: 'kibana.alert.duration.us',
+        displayAsText: 'Duration',
+        initialWidth: 150,
+      },
+      {
+        id: 'kibana.alert.reason',
+        displayAsText: 'Reason',
+      },
+    ],
+  });
+};

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

@@ -4,13 +4,70 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
-import { EuiPanel } from '@elastic/eui';
+
 import React from 'react';
+import { EuiPanel } from '@elastic/eui';
+import { rangeQuery } from '@kbn/observability-plugin/server';
+import { AlertsTableFlyoutState } from '@kbn/triggers-actions-ui-plugin/public';
+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 { useTimeRange } from '../../../hooks/use_time_range';
+import { SERVICE_NAME } from '../../../../common/elasticsearch_fieldnames';
 
 export function AlertsOverview() {
+  const {
+    path: { serviceName },
+    query: { rangeFrom, rangeTo },
+  } = useApmParams('/services/{serviceName}/alerts');
+
+  const { start, end } = useTimeRange({ rangeFrom, rangeTo });
+
+  console.log(start);
+  console.log(end);
+
+  const { services } = useKibana<ApmPluginStartDeps>();
+
+  console.log('serviceName', serviceName);
+  const {
+    triggersActionsUi: {
+      getAlertsStateTable,
+      alertsTableConfigurationRegistry,
+    },
+  } = services;
+
+  const alertStateProps = {
+    alertsTableConfigurationRegistry,
+    id: 'apm',
+    configurationId: 'apm',
+    featureIds: [AlertConsumers.APM],
+    flyoutState: AlertsTableFlyoutState.external,
+    query: {
+      bool: {
+        filter: [
+          {
+            term: {
+              [SERVICE_NAME]: serviceName,
+            },
+          },
+          {
+            range: {
+              ['@timestamp']: {
+                gte: start,
+                lte: end,
+              },
+            },
+          },
+          // ...rangeQuery(start, end),
+        ],
+      },
+    },
+    showExpandToDetails: false,
+  };
   return (
     <EuiPanel borderRadius="none" hasShadow={false}>
-      "Alert should be places here"
+      {getAlertsStateTable(alertStateProps)}
     </EuiPanel>
   );
 }

x-pack/plugins/apm/public/plugin.ts

@@ -51,6 +51,7 @@ import { enableServiceGroups } from '@kbn/observability-plugin/public';
 import { InfraClientStartExports } from '@kbn/infra-plugin/public';
 import { DataViewsPublicPluginStart } from '@kbn/data-views-plugin/public';
 import { registerApmAlerts } from './components/alerting/register_apm_alerts';
+import { registerAlertsTableConfiguration } from './components/alerting/register_alerts_tables_configurations';
 import {
   getApmEnrollmentFlyoutData,
   LazyApmCustomAssetsExtension,
@@ -312,6 +313,10 @@ export class ApmPlugin implements Plugin<ApmPluginSetup, ApmPluginStart> {
           core.getStartServices(),
         ]);
 
+        // Register alerts metadata
+        const { alertsTableConfigurationRegistry } = plugins.triggersActionsUi;
+        registerAlertsTableConfiguration(alertsTableConfigurationRegistry);
+
         return renderApp({
           coreStart,
           pluginsSetup: pluginSetupDeps,