[ResponseOps][Alerts] Create embeddable alerts table plugin (#213909)

## Summary Creates a wrapper plugin around the alerts table, that registers a basic alerts table embeddable panel for dashboards. > [!NOTE] > This PR is a preparation work for the [embeddable alerts table](https://github.com/elastic/kibana/issues/197483). The feature is disabled for end-users while waiting for other dependent PRs to be integrated with this, and uses a partially hard-coded table configuration for testing purposes. The final panel will be fully configurable by the user. ## Verification steps 1. Uncomment this line 4d49e98b4d/x-pack/platform/plugins/shared/embeddable_alerts_table/public/plugin.ts (L34) (I'm using a comment to avoid polluting the embeddable examples app with this panel for a short time) 2. Create one or more ES Query rules that fire alerts 3. Visit the Dashboards page and create a dashboard, then enter edit mode 4. Click "Add panel" 5. Under "Visualizations" choose "Alerts table" 6. Check that the table panel was created correctly 6.1. Shows any alerts fired by the ES Query rule(s) 6.2. Check that the table adapts correctly to the panel when resizing, and all normal interactions with the alerts table work correctly (adding/removing fields, opening alerts in flyouts, using row/bulk actions) 6.3. Check that panels respond to the global time filter (only time filters, not KQL search or filters) 6.4. Check that panels respond to individual time filters (⛭ icon > Apply custom time range) 11. Create a role with access to dashboards but without any alerting capability and a user assigned to that role 12. Repeat steps 3 and 4, and verify that the "Alerts table" option isn't available under "Visualizations" 13. Add any alerting capability to the role, such as Management > Stack rules 14. Repeat steps 3 and 4, and verify that the "Alerts table" is available again ## References Closes #203611 ### Checklist - [x] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md) --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
2025-04-24 01:38:56 -04:00 · 2025-03-21 11:02:54 +01:00 · 2025-03-21 11:02:54 +01:00 · 4aab9d4c48
commit 4aab9d4c48
parent 35588ecdbb
25 changed files with 586 additions and 9 deletions
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -1648,6 +1648,7 @@ module.exports = {
        'x-pack/platform/plugins/shared/stack_alerts/**/*.{ts, tsx}',
        'x-pack/platform/plugins/shared/stack_connectors/**/*.{ts, tsx}',
        'x-pack/platform/plugins/shared/triggers_actions_ui/**/*.{ts, tsx}',
+        'x-pack/platform/plugins/shared/embeddable_alerts_table/**/*.{ts,tsx}',
      ],
      rules: {
        '@typescript-eslint/consistent-type-imports': 'error',
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@ -897,6 +897,7 @@ x-pack/platform/plugins/shared/cloud @elastic/kibana-core
 x-pack/platform/plugins/shared/dashboard_enhanced @elastic/kibana-presentation
 x-pack/platform/plugins/shared/data_quality @elastic/obs-ux-logs-team
 x-pack/platform/plugins/shared/dataset_quality @elastic/obs-ux-logs-team
+x-pack/platform/plugins/shared/embeddable_alerts_table @elastic/response-ops
 x-pack/platform/plugins/shared/embeddable_enhanced @elastic/kibana-presentation
 x-pack/platform/plugins/shared/encrypted_saved_objects @elastic/kibana-security
 x-pack/platform/plugins/shared/entity_manager @elastic/obs-entities
--- a/package.json
+++ b/package.json
@ -479,6 +479,7 @@
    "@kbn/elastic-assistant-plugin": "link:x-pack/solutions/security/plugins/elastic_assistant",
    "@kbn/elasticsearch-client-plugin": "link:src/platform/test/plugin_functional/plugins/elasticsearch_client_plugin",
    "@kbn/elasticsearch-client-xpack-plugin": "link:x-pack/test/plugin_api_integration/plugins/elasticsearch_client",
+    "@kbn/embeddable-alerts-table-plugin": "link:x-pack/platform/plugins/shared/embeddable_alerts_table",
    "@kbn/embeddable-enhanced-plugin": "link:x-pack/platform/plugins/shared/embeddable_enhanced",
    "@kbn/embeddable-examples-plugin": "link:examples/embeddable_examples",
    "@kbn/embeddable-plugin": "link:src/platform/plugins/shared/embeddable",
--- a/packages/kbn-optimizer/limits.yml
+++ b/packages/kbn-optimizer/limits.yml
@ -39,6 +39,7 @@ pageLoadAssetSize:
  discoverEnhanced: 42730
  discoverShared: 17111
  embeddable: 24000
+  embeddableAlertsTable: 19615
  embeddableEnhanced: 22107
  enterpriseSearch: 66810
  entityManager: 17175
--- a/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/alerts_page/components/alert_actions_cell.tsx
+++ b/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/alerts_page/components/alert_actions_cell.tsx
@ -1,8 +1,10 @@
 /*
 * 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.
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
 */

 import {
@ -15,8 +17,8 @@ import {

 import React, { useMemo, useState } from 'react';
 import { i18n } from '@kbn/i18n';
-import { DefaultAlertActions } from '@kbn/response-ops-alerts-table/components/default_alert_actions';
-import type { GetAlertsTableProp } from '@kbn/response-ops-alerts-table/types';
+import { DefaultAlertActions } from './default_alert_actions';
+import type { GetAlertsTableProp } from '../types';

 const actionsToolTip = i18n.translate('xpack.triggersActionsUI.alertsTable.moreActionsTextLabel', {
  defaultMessage: 'More actions',
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@ -818,6 +818,8 @@
      "@kbn/elasticsearch-client-plugin/*": ["src/platform/test/plugin_functional/plugins/elasticsearch_client_plugin/*"],
      "@kbn/elasticsearch-client-xpack-plugin": ["x-pack/test/plugin_api_integration/plugins/elasticsearch_client"],
      "@kbn/elasticsearch-client-xpack-plugin/*": ["x-pack/test/plugin_api_integration/plugins/elasticsearch_client/*"],
+      "@kbn/embeddable-alerts-table-plugin": ["x-pack/platform/plugins/shared/embeddable_alerts_table"],
+      "@kbn/embeddable-alerts-table-plugin/*": ["x-pack/platform/plugins/shared/embeddable_alerts_table/*"],
      "@kbn/embeddable-enhanced-plugin": ["x-pack/platform/plugins/shared/embeddable_enhanced"],
      "@kbn/embeddable-enhanced-plugin/*": ["x-pack/platform/plugins/shared/embeddable_enhanced/*"],
      "@kbn/embeddable-examples-plugin": ["examples/embeddable_examples"],
--- a/x-pack/platform/plugins/private/translations/translations/fr-FR.json
+++ b/x-pack/platform/plugins/private/translations/translations/fr-FR.json
@ -46773,7 +46773,6 @@
    "xpack.transform.wizard.previousStepButton": "Précédent",
    "xpack.triggersActionsUI.alerts.breadcrumbTitle": "Alertes",
    "xpack.triggersActionsUI.alertsSearchBar.placeholder": "Alertes de recherche (par exemple, kibana.alert.evaluation.threshold > 75)",
-    "xpack.triggersActionsUI.alertsTable.moreActionsTextLabel": "Plus d'actions",
    "xpack.triggersActionsUI.appName": "Règles",
    "xpack.triggersActionsUI.cases.label": "Cas",
    "xpack.triggersActionsUI.checkRuleTypeEnabled.ruleTypeDisabledByLicenseMessage": "Ce type de règle requiert une licence {minimumLicenseRequired}.",
--- a/x-pack/platform/plugins/private/translations/translations/ja-JP.json
+++ b/x-pack/platform/plugins/private/translations/translations/ja-JP.json
@ -46739,7 +46739,6 @@
    "xpack.transform.wizard.previousStepButton": "前へ",
    "xpack.triggersActionsUI.alerts.breadcrumbTitle": "アラート",
    "xpack.triggersActionsUI.alertsSearchBar.placeholder": "検索アラート（例：kibana.alert.evaluation.threshold > 75）",
-    "xpack.triggersActionsUI.alertsTable.moreActionsTextLabel": "さらにアクションを表示",
    "xpack.triggersActionsUI.appName": "ルール",
    "xpack.triggersActionsUI.cases.label": "ケース",
    "xpack.triggersActionsUI.checkRuleTypeEnabled.ruleTypeDisabledByLicenseMessage": "このルールタイプには{minimumLicenseRequired}ライセンスが必要です。",
--- a/x-pack/platform/plugins/private/translations/translations/zh-CN.json
+++ b/x-pack/platform/plugins/private/translations/translations/zh-CN.json
@ -46812,7 +46812,6 @@
    "xpack.transform.wizard.previousStepButton": "上一步",
    "xpack.triggersActionsUI.alerts.breadcrumbTitle": "告警",
    "xpack.triggersActionsUI.alertsSearchBar.placeholder": "搜索告警（例如 kibana.alert.evaluation.threshold > 75）",
-    "xpack.triggersActionsUI.alertsTable.moreActionsTextLabel": "更多操作",
    "xpack.triggersActionsUI.appName": "规则",
    "xpack.triggersActionsUI.cases.label": "案例",
    "xpack.triggersActionsUI.checkRuleTypeEnabled.ruleTypeDisabledByLicenseMessage": "此规则类型需要{minimumLicenseRequired}许可证。",
--- a/x-pack/platform/plugins/shared/embeddable_alerts_table/README.md
+++ b/x-pack/platform/plugins/shared/embeddable_alerts_table/README.md
@ -0,0 +1,3 @@
+# Embeddable alerts table
+
+Embeddable wrapper for the alerts table
--- a/x-pack/platform/plugins/shared/embeddable_alerts_table/jest.config.js
+++ b/x-pack/platform/plugins/shared/embeddable_alerts_table/jest.config.js
@ -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.
+ */
+
+module.exports = {
+  preset: '@kbn/test',
+  rootDir: '../../../../..',
+  roots: ['<rootDir>/x-pack/platform/plugins/shared/embeddable_alerts_table'],
+  coverageDirectory:
+    '<rootDir>/target/kibana-coverage/jest/x-pack/platform/plugins/shared/embeddable_alerts_table',
+  coverageReporters: ['text', 'html'],
+  collectCoverageFrom: [
+    '<rootDir>/x-pack/platform/plugins/shared/embeddable_alerts_table/{common,public,server}/**/*.{ts,tsx}',
+  ],
+};
--- a/x-pack/platform/plugins/shared/embeddable_alerts_table/kibana.jsonc
+++ b/x-pack/platform/plugins/shared/embeddable_alerts_table/kibana.jsonc
@ -0,0 +1,30 @@
+{
+  "type": "plugin",
+  "id": "@kbn/embeddable-alerts-table-plugin",
+  "owner": [
+    "@elastic/response-ops"
+  ],
+  "group": "platform",
+  "visibility": "shared",
+  "plugin": {
+    "id": "embeddableAlertsTable",
+    "browser": true,
+    "server": false,
+    "configPath": [
+      "xpack",
+      "embeddable_alerts_table"
+    ],
+    "description": "Embeddable wrapper for the alerts table",
+    "requiredPlugins": [
+      "embeddable",
+      "navigation",
+      "uiActions",
+      "data",
+      "fieldFormats",
+      "licensing",
+      "cases",
+      "kibanaUtils"
+    ],
+    "optionalPlugins": []
+  }
+}
--- a/x-pack/platform/plugins/shared/embeddable_alerts_table/public/actions/add_alerts_table_action.test.ts
+++ b/x-pack/platform/plugins/shared/embeddable_alerts_table/public/actions/add_alerts_table_action.test.ts
@ -0,0 +1,49 @@
+/*
+ * 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 { coreMock } from '@kbn/core/public/mocks';
+import { getMockPresentationContainer } from '@kbn/presentation-containers/mocks';
+import { fetchRuleTypes } from '@kbn/alerts-ui-shared/src/common/apis/fetch_rule_types';
+
+import { getAddAlertsTableAction } from './add_alerts_table_action';
+import { ALERTS_FEATURE_ID } from '@kbn/alerts-ui-shared/src/common/constants';
+import type { RuleType } from '@kbn/triggers-actions-ui-types';
+
+const core = coreMock.createStart();
+const mockPresentationContainer = getMockPresentationContainer();
+
+jest.mock('@kbn/alerts-ui-shared/src/common/apis/fetch_rule_types');
+const mockFetchRuleTypes = jest.mocked(fetchRuleTypes);
+
+describe('getAddAlertsTableAction', () => {
+  it('should be compatible only when the user has access to at least one rule type', async () => {
+    const ruleTypes = [
+      { authorizedConsumers: { [ALERTS_FEATURE_ID]: { all: true } } },
+    ] as unknown as Array<RuleType<string, string>>;
+    mockFetchRuleTypes.mockResolvedValue(ruleTypes);
+
+    const action = getAddAlertsTableAction({ http: core.http });
+
+    const isCompatible = await action.isCompatible!({
+      embeddable: mockPresentationContainer,
+    });
+
+    expect(isCompatible).toBeTruthy();
+  });
+
+  it("should not be compatible when the user doesn't have access to any rule type", async () => {
+    const ruleTypes = [] as unknown as Array<RuleType<string, string>>;
+    mockFetchRuleTypes.mockResolvedValue(ruleTypes);
+
+    const action = getAddAlertsTableAction({ http: core.http });
+
+    const isCompatible = await action.isCompatible!({
+      embeddable: mockPresentationContainer,
+    });
+
+    expect(isCompatible).toBeFalsy();
+  });
+});
--- a/x-pack/platform/plugins/shared/embeddable_alerts_table/public/actions/add_alerts_table_action.ts
+++ b/x-pack/platform/plugins/shared/embeddable_alerts_table/public/actions/add_alerts_table_action.ts
@ -0,0 +1,65 @@
+/*
+ * 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 { ADD_PANEL_VISUALIZATION_GROUP } from '@kbn/embeddable-plugin/public';
+import { fetchRuleTypes } from '@kbn/alerts-ui-shared/src/common/apis/fetch_rule_types';
+import { ALERTS_FEATURE_ID } from '@kbn/alerts-ui-shared/src/common/constants';
+import { apiIsPresentationContainer } from '@kbn/presentation-containers';
+import { IncompatibleActionError } from '@kbn/ui-actions-plugin/public';
+import { i18n } from '@kbn/i18n';
+import type { CoreStart } from '@kbn/core/public';
+import type { ActionDefinition } from '@kbn/ui-actions-plugin/public/actions';
+import type { EmbeddableApiContext } from '@kbn/presentation-publishing';
+import { ADD_ALERTS_TABLE_ACTION_ID, EMBEDDABLE_ALERTS_TABLE_ID } from '../constants';
+
+const checkRuleTypesPermissions = async (http: CoreStart['http']) => {
+  try {
+    const ruleTypes = await fetchRuleTypes({ http });
+    if (!ruleTypes.length) {
+      // If no rule types we should not show the action.
+      return false;
+    }
+    const isAuthorized = ruleTypes.some((ruleType) => {
+      const alertsConsumer = ruleType.authorizedConsumers[ALERTS_FEATURE_ID];
+      return alertsConsumer?.all || alertsConsumer?.read;
+    });
+    if (isAuthorized) {
+      // If at least one rule type is authorized we should show the action
+      return true;
+    }
+    return false;
+  } catch (error) {
+    return false;
+  }
+};
+
+export const getAddAlertsTableAction = ({
+  http,
+}: {
+  http: CoreStart['http'];
+}): ActionDefinition<EmbeddableApiContext> => ({
+  id: ADD_ALERTS_TABLE_ACTION_ID,
+  grouping: [ADD_PANEL_VISUALIZATION_GROUP],
+  getIconType: () => 'bell',
+  isCompatible: async ({ embeddable }) => {
+    const hasAccessToAnyRuleTypes = await checkRuleTypesPermissions(http);
+    return apiIsPresentationContainer(embeddable) && hasAccessToAnyRuleTypes;
+  },
+  execute: async ({ embeddable }) => {
+    if (!apiIsPresentationContainer(embeddable)) throw new IncompatibleActionError();
+    await embeddable.addNewPanel(
+      {
+        panelType: EMBEDDABLE_ALERTS_TABLE_ID,
+      },
+      true
+    );
+  },
+  getDisplayName: () =>
+    i18n.translate('xpack.embeddableAlertsTable.ariaLabel', {
+      defaultMessage: 'Alerts table',
+    }),
+});
--- a/x-pack/platform/plugins/shared/embeddable_alerts_table/public/actions/register_add_alerts_table_action.ts
+++ b/x-pack/platform/plugins/shared/embeddable_alerts_table/public/actions/register_add_alerts_table_action.ts
@ -0,0 +1,25 @@
+/*
+ * 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 { CoreStart } from '@kbn/core/public';
+import type { EmbeddableApiContext } from '@kbn/presentation-publishing';
+import { ADD_PANEL_TRIGGER } from '@kbn/ui-actions-plugin/public';
+import type { UiActionsStart } from '@kbn/ui-actions-plugin/public';
+import { ADD_ALERTS_TABLE_ACTION_ID } from '../constants';
+
+export interface AddAlertsTableActionDeps {
+  http: CoreStart['http'];
+  uiActions: UiActionsStart;
+}
+
+export const registerAddAlertsTableAction = ({ http, uiActions }: AddAlertsTableActionDeps) => {
+  uiActions.registerActionAsync<EmbeddableApiContext>(ADD_ALERTS_TABLE_ACTION_ID, async () => {
+    const { getAddAlertsTableAction } = await import('./add_alerts_table_action');
+    return getAddAlertsTableAction({ http });
+  });
+  uiActions.attachAction(ADD_PANEL_TRIGGER, ADD_ALERTS_TABLE_ACTION_ID);
+};
--- a/x-pack/platform/plugins/shared/embeddable_alerts_table/public/constants.ts
+++ b/x-pack/platform/plugins/shared/embeddable_alerts_table/public/constants.ts
@ -0,0 +1,12 @@
+/*
+ * 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.
+ */
+
+export const PLUGIN_ID = 'embeddableAlertsTable';
+export const PLUGIN_NAME = 'Embeddable alerts table';
+export const EMBEDDABLE_ALERTS_TABLE_ID = 'alerts_table';
+export const ADD_ALERTS_TABLE_ACTION_ID = 'add_alerts_table';
+export const LOCAL_STORAGE_KEY_PREFIX = 'embeddable-alerts-table';
--- a/x-pack/platform/plugins/shared/embeddable_alerts_table/public/factories/alerts_table_embeddable_factory.test.tsx
+++ b/x-pack/platform/plugins/shared/embeddable_alerts_table/public/factories/alerts_table_embeddable_factory.test.tsx
@ -0,0 +1,89 @@
+/*
+ * 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.
+ */
+
+// Write a test that verifies that the `AlertsTableEmbeddable` component renders the `AlertsTable` component with the correct props.
+
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import type { EmbeddableAlertsTablePublicStartDependencies } from '../types';
+import { coreMock } from '@kbn/core/public/mocks';
+import { getAlertsTableEmbeddableFactory } from './alerts_table_embeddable_factory';
+import { LOCAL_STORAGE_KEY_PREFIX } from '../constants';
+
+const core = coreMock.createStart();
+jest.mock('@kbn/response-ops-alerts-table', () => ({
+  AlertsTable: jest.fn(() => <div data-test-subj="alertsTable" />),
+}));
+const { AlertsTable: mockAlertsTable } = jest.requireMock('@kbn/response-ops-alerts-table');
+
+const uuid = 'test-uuid';
+
+describe('getEmbeddableAlertsTableFactory', () => {
+  const factory = getAlertsTableEmbeddableFactory(
+    core,
+    {} as EmbeddableAlertsTablePublicStartDependencies
+  );
+
+  it('renders AlertsTable with correct props', async () => {
+    const { Component } = await factory.buildEmbeddable(
+      {
+        timeRange: {
+          from: '2025-01-01T00:00:00.000Z',
+          to: '2025-01-01T01:00:00.000Z',
+        },
+        title: 'Test embeddable alerts table',
+      },
+      (apiRegistration) => apiRegistration as any,
+      uuid,
+      // These are unused by our factory
+      {} as any,
+      () => ({} as any),
+      {} as any
+    );
+
+    render(<Component />);
+
+    expect(screen.getByTestId('alertsTable')).toBeInTheDocument();
+    expect(mockAlertsTable).toHaveBeenCalledWith(
+      expect.objectContaining({
+        id: `${LOCAL_STORAGE_KEY_PREFIX}-${uuid}`,
+        // Hard-coded for now
+        ruleTypeIds: ['.es-query'],
+        query: {
+          bool: {
+            minimum_should_match: 1,
+            should: [
+              {
+                range: {
+                  'kibana.alert.time_range': {
+                    format: 'strict_date_optional_time',
+                    gte: '2025-01-01T00:00:00.000Z',
+                    lte: '2025-01-01T01:00:00.000Z',
+                  },
+                },
+              },
+              {
+                range: {
+                  '@timestamp': {
+                    format: 'strict_date_optional_time',
+                    gte: '2025-01-01T00:00:00.000Z',
+                    lte: '2025-01-01T01:00:00.000Z',
+                  },
+                },
+              },
+            ],
+          },
+        },
+        showAlertStatusWithFlapping: true,
+        toolbarVisibility: {
+          showFullScreenSelector: false,
+        },
+      }),
+      {}
+    );
+  });
+});
--- a/x-pack/platform/plugins/shared/embeddable_alerts_table/public/factories/alerts_table_embeddable_factory.tsx
+++ b/x-pack/platform/plugins/shared/embeddable_alerts_table/public/factories/alerts_table_embeddable_factory.tsx
@ -0,0 +1,112 @@
+/*
+ * 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 from 'react';
+import type { CoreStart } from '@kbn/core-lifecycle-browser';
+import type { ReactEmbeddableFactory } from '@kbn/embeddable-plugin/public';
+import {
+  initializeTimeRange,
+  initializeTitleManager,
+  useFetchContext,
+} from '@kbn/presentation-publishing';
+import { AlertsTable } from '@kbn/response-ops-alerts-table';
+import { AlertActionsCell } from '@kbn/response-ops-alerts-table/components/alert_actions_cell';
+import { getTime } from '@kbn/data-plugin/common';
+import { ALERT_TIME_RANGE, TIMESTAMP } from '@kbn/rule-data-utils';
+import { BehaviorSubject } from 'rxjs';
+import type { EmbeddableAlertsTablePublicStartDependencies } from '../types';
+import { EMBEDDABLE_ALERTS_TABLE_ID, LOCAL_STORAGE_KEY_PREFIX } from '../constants';
+import type {
+  EmbeddableAlertsTableApi,
+  EmbeddableAlertsTableRuntimeState,
+  EmbeddableAlertsTableSerializedState,
+} from '../types';
+
+export const getAlertsTableEmbeddableFactory = (
+  core: CoreStart,
+  deps: EmbeddableAlertsTablePublicStartDependencies
+): ReactEmbeddableFactory<
+  EmbeddableAlertsTableSerializedState,
+  EmbeddableAlertsTableRuntimeState,
+  EmbeddableAlertsTableApi
+> => ({
+  type: EMBEDDABLE_ALERTS_TABLE_ID,
+  deserializeState: (state) => {
+    return state.rawState;
+  },
+  buildEmbeddable: async (state, buildApi, uuid) => {
+    const timeRange = initializeTimeRange(state);
+    const titleManager = initializeTitleManager(state);
+    const queryLoading$ = new BehaviorSubject<boolean | undefined>(true);
+    const { data, fieldFormats, licensing } = deps;
+    const { http, application, notifications, settings } = core;
+    const api = buildApi(
+      {
+        ...timeRange.api,
+        ...titleManager.api,
+        dataLoading$: queryLoading$,
+        serializeState: () => {
+          return {
+            rawState: { ...titleManager.serialize(), ...timeRange.serialize() },
+          };
+        },
+      },
+      { ...titleManager.comparators, ...timeRange.comparators }
+    );
+
+    return {
+      api,
+      Component: () => {
+        const { timeRange: selectedTimeRange } = useFetchContext(api);
+
+        return (
+          <AlertsTable
+            id={`${LOCAL_STORAGE_KEY_PREFIX}-${uuid}`}
+            // Showing es query alerts for testing purposes
+            // This will be replaced by the actual filters chosen by the user at creation time
+            ruleTypeIds={['.es-query']}
+            query={
+              // Inlined time range bool query for testing purposes
+              // This will be moved to a dedicated function to combine all filters
+              selectedTimeRange
+                ? {
+                    bool: {
+                      minimum_should_match: 1,
+                      should: [
+                        getTime(undefined, selectedTimeRange, {
+                          fieldName: ALERT_TIME_RANGE,
+                        })!.query,
+                        getTime(undefined, selectedTimeRange, {
+                          fieldName: TIMESTAMP,
+                        })!.query,
+                      ],
+                    },
+                  }
+                : {}
+            }
+            showAlertStatusWithFlapping
+            renderActionsCell={AlertActionsCell}
+            toolbarVisibility={{
+              // Disabling the fullscreen selector since Dashboard panels
+              // can be maximized on their own
+              showFullScreenSelector: false,
+            }}
+            services={{
+              data,
+              http,
+              notifications,
+              fieldFormats,
+              application,
+              licensing,
+              settings,
+            }}
+          />
+        );
+      },
+    };
+  },
+});
--- a/x-pack/platform/plugins/shared/embeddable_alerts_table/public/factories/register_alerts_table_embeddable_factory.ts
+++ b/x-pack/platform/plugins/shared/embeddable_alerts_table/public/factories/register_alerts_table_embeddable_factory.ts
@ -0,0 +1,27 @@
+/*
+ * 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 { CoreSetup } from '@kbn/core/public';
+import type { EmbeddableSetup } from '@kbn/embeddable-plugin/public';
+import type { EmbeddableAlertsTablePublicStartDependencies } from '../types';
+import { EMBEDDABLE_ALERTS_TABLE_ID } from '../constants';
+
+export interface RegisterAlertsTableEmbeddableFactoryParams {
+  embeddable: EmbeddableSetup;
+  core: CoreSetup<EmbeddableAlertsTablePublicStartDependencies>;
+}
+
+export const registerAlertsTableEmbeddableFactory = ({
+  embeddable,
+  core,
+}: RegisterAlertsTableEmbeddableFactoryParams) => {
+  embeddable.registerReactEmbeddableFactory(EMBEDDABLE_ALERTS_TABLE_ID, async () => {
+    const [coreStart, deps] = await core.getStartServices();
+    const { getAlertsTableEmbeddableFactory } = await import('./alerts_table_embeddable_factory');
+    return getAlertsTableEmbeddableFactory(coreStart, deps);
+  });
+};
--- a/x-pack/platform/plugins/shared/embeddable_alerts_table/public/index.ts
+++ b/x-pack/platform/plugins/shared/embeddable_alerts_table/public/index.ts
@ -0,0 +1,14 @@
+/*
+ * 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 { EmbeddableAlertsTablePlugin } from './plugin';
+
+export function plugin() {
+  return new EmbeddableAlertsTablePlugin();
+}
+
+export type { EmbeddableAlertsTablePublicSetup, EmbeddableAlertsTablePublicStart } from './types';
--- a/x-pack/platform/plugins/shared/embeddable_alerts_table/public/plugin.ts
+++ b/x-pack/platform/plugins/shared/embeddable_alerts_table/public/plugin.ts
@ -0,0 +1,41 @@
+/*
+ * 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 { CoreSetup, CoreStart, Plugin } from '@kbn/core/public';
+import { registerAlertsTableEmbeddableFactory } from './factories/register_alerts_table_embeddable_factory';
+import type {
+  EmbeddableAlertsTablePublicSetup,
+  EmbeddableAlertsTablePublicStart,
+  EmbeddableAlertsTablePublicSetupDependencies,
+  EmbeddableAlertsTablePublicStartDependencies,
+} from './types';
+
+export class EmbeddableAlertsTablePlugin
+  implements
+    Plugin<
+      EmbeddableAlertsTablePublicSetup,
+      EmbeddableAlertsTablePublicStart,
+      EmbeddableAlertsTablePublicSetupDependencies,
+      EmbeddableAlertsTablePublicStartDependencies
+    >
+{
+  public setup(
+    core: CoreSetup<EmbeddableAlertsTablePublicStartDependencies>,
+    { embeddable }: EmbeddableAlertsTablePublicSetupDependencies
+  ) {
+    registerAlertsTableEmbeddableFactory({ embeddable, core });
+    return {};
+  }
+
+  public start({ http }: CoreStart, { uiActions }: EmbeddableAlertsTablePublicStartDependencies) {
+    // Waiting for other dependent PRs to be merged to enable this
+    // registerAddAlertsTableAction({ http, uiActions });
+    return {};
+  }
+
+  public stop() {}
+}
--- a/x-pack/platform/plugins/shared/embeddable_alerts_table/public/types.ts
+++ b/x-pack/platform/plugins/shared/embeddable_alerts_table/public/types.ts
@ -0,0 +1,48 @@
+/*
+ * 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 { DataPublicPluginStart } from '@kbn/data-plugin/public/types';
+import type { DefaultEmbeddableApi, EmbeddableSetup } from '@kbn/embeddable-plugin/public';
+import type { FieldFormatsRegistry } from '@kbn/field-formats-plugin/common';
+import type {
+  PublishesDataLoading,
+  SerializedTimeRange,
+  SerializedTitles,
+} from '@kbn/presentation-publishing';
+import type { UiActionsStart } from '@kbn/ui-actions-plugin/public';
+import type { CasesPublicStart } from '@kbn/cases-plugin/public';
+import type { CoreStart } from '@kbn/core/public';
+import type { LicensingPluginStart } from '@kbn/licensing-plugin/public';
+import type { SettingsStart } from '@kbn/core-ui-settings-browser';
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface EmbeddableAlertsTablePublicSetup {}
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface EmbeddableAlertsTablePublicStart {}
+
+export interface EmbeddableAlertsTablePublicSetupDependencies {
+  embeddable: EmbeddableSetup;
+}
+
+export interface EmbeddableAlertsTablePublicStartDependencies {
+  uiActions: UiActionsStart;
+  data: DataPublicPluginStart;
+  http: CoreStart['http'];
+  notifications: CoreStart['notifications'];
+  fieldFormats: FieldFormatsRegistry;
+  application: CoreStart['application'];
+  licensing: LicensingPluginStart;
+  settings: SettingsStart;
+  cases: CasesPublicStart;
+}
+
+export type EmbeddableAlertsTableSerializedState = SerializedTitles & SerializedTimeRange;
+
+export type EmbeddableAlertsTableRuntimeState = EmbeddableAlertsTableSerializedState;
+
+export type EmbeddableAlertsTableApi = DefaultEmbeddableApi<EmbeddableAlertsTableSerializedState> &
+  PublishesDataLoading;
--- a/x-pack/platform/plugins/shared/embeddable_alerts_table/tsconfig.json
+++ b/x-pack/platform/plugins/shared/embeddable_alerts_table/tsconfig.json
@ -0,0 +1,35 @@
+{
+  "extends": "../../../../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "target/types"
+  },
+  "include": [
+    "index.ts",
+    "common/**/*.ts",
+    "public/**/*.ts",
+    "public/**/*.tsx",
+    "server/**/*.ts",
+    "../../typings/**/*"
+  ],
+  "exclude": [
+    "target/**/*"
+  ],
+  "kbn_references": [
+    "@kbn/i18n",
+    "@kbn/core",
+    "@kbn/presentation-containers",
+    "@kbn/presentation-publishing",
+    "@kbn/ui-actions-plugin",
+    "@kbn/embeddable-plugin",
+    "@kbn/alerts-ui-shared",
+    "@kbn/core-lifecycle-browser",
+    "@kbn/response-ops-alerts-table",
+    "@kbn/data-plugin",
+    "@kbn/field-formats-plugin",
+    "@kbn/cases-plugin",
+    "@kbn/licensing-plugin",
+    "@kbn/core-ui-settings-browser",
+    "@kbn/rule-data-utils",
+    "@kbn/triggers-actions-ui-types",
+  ]
+}
--- a/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/alerts_page/components/stack_alerts_page.tsx
+++ b/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/alerts_page/components/stack_alerts_page.tsx
@ -24,7 +24,7 @@ import { alertProducersData } from '@kbn/response-ops-alerts-table/constants';
 import { alertsTableQueryClient } from '@kbn/response-ops-alerts-table/query_client';
 import { defaultAlertsTableSort } from '@kbn/response-ops-alerts-table/configuration';
 import { AlertsTableSupportedConsumers } from '@kbn/response-ops-alerts-table/types';
-import { AlertActionsCell } from './alert_actions_cell';
+import { AlertActionsCell } from '@kbn/response-ops-alerts-table/components/alert_actions_cell';
 import { ALERTS_PAGE_ID } from '../../../../common/constants';
 import { QuickFiltersMenuItem } from '../../alerts_search_bar/quick_filters';
 import { NoPermissionPrompt } from '../../../components/prompts/no_permission_prompt';
--- a/yarn.lock
+++ b/yarn.lock
@ -5314,6 +5314,10 @@
  version "0.0.0"
  uid ""

+"@kbn/embeddable-alerts-table-plugin@link:x-pack/platform/plugins/shared/embeddable_alerts_table":
+  version "0.0.0"
+  uid ""
+
 "@kbn/embeddable-enhanced-plugin@link:x-pack/platform/plugins/shared/embeddable_enhanced":
  version "0.0.0"
  uid ""