[RAM] Implement global alerts page (#175143)

Adds a global alerts page to the Stack management section to allow users to browse alerts across different solutions/apps through a unified UX. Refs #166709 Closes #173647 Closes #173650 Closes #173648
elastic · Feb 13, 2024 · 7424285 · 7424285
1 parent dbf5f97
commit 7424285
Show file tree

Hide file tree

Showing 64 changed files with 5,403 additions and 541 deletions.
diff --git a/packages/kbn-rule-data-utils/src/alerts_as_data_rbac.ts b/packages/kbn-rule-data-utils/src/alerts_as_data_rbac.ts
@@ -26,6 +26,7 @@ export const AlertConsumers = {
   ML: 'ml',
   STACK_ALERTS: 'stackAlerts',
   EXAMPLE: 'AlertingExample',
+  MONITORING: 'monitoring',
 } as const;
 export type AlertConsumers = typeof AlertConsumers[keyof typeof AlertConsumers];
 export type STATUS_VALUES = 'open' | 'acknowledged' | 'closed' | 'in-progress'; // TODO: remove 'in-progress' after migration to 'acknowledged'

diff --git a/src/plugins/unified_search/public/__stories__/search_bar.stories.tsx b/src/plugins/unified_search/public/__stories__/search_bar.stories.tsx
@@ -8,7 +8,7 @@
 
 import React from 'react';
 import { action } from '@storybook/addon-actions';
-import type { DataViewBase, Query } from '@kbn/es-query';
+import { DataViewBase, Query } from '@kbn/es-query';
 import { storiesOf } from '@storybook/react';
 import { I18nProvider } from '@kbn/i18n-react';
 import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
@@ -711,4 +711,39 @@ storiesOf('SearchBar', module)
       submitButtonStyle: 'full',
       renderQueryInputAppend: () => <EuiButton onClick={() => {}}>Append</EuiButton>,
     })
+  )
+  .add('with additional query bar menu items', () =>
+    wrapSearchBarInContext({
+      showFilterBar: true,
+      additionalQueryBarMenuItems: {
+        items: [
+          {
+            name: 'Observability rule types',
+            icon: 'logoObservability',
+          },
+          {
+            name: 'Security rule types',
+            icon: 'logoSecurity',
+          },
+          {
+            name: 'Status',
+            panel: 'status-panel',
+          },
+        ],
+        panels: [
+          {
+            id: 'status-panel',
+            title: 'Status',
+            items: [
+              {
+                name: 'Active',
+              },
+              {
+                name: 'Inactive',
+              },
+            ],
+          },
+        ],
+      },
+    })
   );
diff --git a/src/plugins/unified_search/public/query_string_input/query_bar_menu.test.tsx b/src/plugins/unified_search/public/query_string_input/query_bar_menu.test.tsx
@@ -119,6 +119,7 @@ describe('Querybar Menu component', () => {
           ],
         }),
       },
+      additionalQueryBarMenuItems: {},
       queryBarMenuRef: React.createRef(),
     };
   });
@@ -344,4 +345,65 @@ describe('Querybar Menu component', () => {
 
     expect(component.find('[data-test-subj="filter-sets-removeAllFilters"]').length).toBeFalsy();
   });
+
+  it('should render additional menu items', async () => {
+    const newProps: QueryBarMenuProps = {
+      ...props,
+      openQueryBarMenu: true,
+      showFilterBar: true,
+      additionalQueryBarMenuItems: {
+        items: [
+          {
+            name: 'Test additional query bar menu item',
+            'data-test-subj': 'additional-query-bar-menu-item',
+          },
+        ],
+      },
+    };
+    const component = mount(wrapQueryBarMenuComponentInContext(newProps, 'kuery'));
+
+    expect(component.find('[data-test-subj="additional-query-bar-menu-item"]').length).toBeTruthy();
+  });
+
+  it('should render additional menu panels', async () => {
+    const newProps: QueryBarMenuProps = {
+      ...props,
+      openQueryBarMenu: true,
+      showFilterBar: true,
+      additionalQueryBarMenuItems: {
+        items: [
+          {
+            name: 'Go to nested menu',
+            'data-test-subj': 'additional-query-bar-menu-panel-link',
+            panel: 'panel-1',
+          },
+        ],
+        panels: [
+          {
+            id: 'panel-1',
+            title: 'Grouped additional query bar menu items',
+            items: [
+              {
+                name: 'Test additional query bar menu item',
+                'data-test-subj': 'additional-query-bar-nested-menu-item',
+              },
+            ],
+          },
+        ],
+      },
+    };
+    const component = mount(wrapQueryBarMenuComponentInContext(newProps, 'kuery'));
+
+    component
+      .find('[data-test-subj="additional-query-bar-menu-panel-link"]')
+      .first()
+      .simulate('click');
+
+    await waitFor(() => {
+      component.update();
+      expect(
+        component.find('[data-test-subj="additional-query-bar-nested-menu-item"]').length
+      ).toBeTruthy();
+    });
+  });
 });
diff --git a/src/plugins/unified_search/public/query_string_input/query_bar_menu.tsx b/src/plugins/unified_search/public/query_string_input/query_bar_menu.tsx
@@ -26,9 +26,10 @@ import type { DataView } from '@kbn/data-views-plugin/public';
 import type { SavedQueryService, SavedQuery, SavedQueryTimeFilter } from '@kbn/data-plugin/public';
 import { euiThemeVars } from '@kbn/ui-theme';
 import {
-  QueryBarMenuPanel,
   useQueryBarMenuPanels,
   QueryBarMenuPanelsProps,
+  QueryBarMenuPanel,
+  AdditionalQueryBarMenuItems,
 } from './query_bar_menu_panels';
 import { FilterEditorWrapper } from './filter_editor_wrapper';
 import {
@@ -66,6 +67,7 @@ export interface QueryBarMenuProps extends WithCloseFilterEditorConfirmModalProp
   hiddenPanelOptions?: QueryBarMenuPanelsProps['hiddenPanelOptions'];
   onFiltersUpdated?: (filters: Filter[]) => void;
   filters?: Filter[];
+  additionalQueryBarMenuItems: AdditionalQueryBarMenuItems;
   query?: Query;
   savedQuery?: SavedQuery;
   onClearSavedQuery?: () => void;
@@ -100,6 +102,7 @@ function QueryBarMenuComponent({
   toggleFilterBarMenuPopover,
   onFiltersUpdated,
   filters,
+  additionalQueryBarMenuItems,
   query,
   savedQuery,
   onClearSavedQuery,
@@ -164,6 +167,7 @@ function QueryBarMenuComponent({
 
   const panels = useQueryBarMenuPanels({
     filters,
+    additionalQueryBarMenuItems,
     savedQuery,
     language,
     dateRangeFrom,

diff --git a/src/plugins/unified_search/public/query_string_input/query_bar_menu_panels.tsx b/src/plugins/unified_search/public/query_string_input/query_bar_menu_panels.tsx
@@ -25,8 +25,8 @@ import {
   toggleFilterNegated,
   pinFilter,
   unpinFilter,
-  compareFilters,
   COMPARE_ALL_OPTIONS,
+  compareFilters,
 } from '@kbn/es-query';
 import { i18n } from '@kbn/i18n';
 import { METRIC_TYPE } from '@kbn/analytics';
@@ -140,6 +140,10 @@ export const strings = {
     i18n.translate('unifiedSearch.filter.options.filterLanguageLabel', {
       defaultMessage: 'Filter language',
     }),
+  getQuickFiltersLabel: () =>
+    i18n.translate('unifiedSearch.filter.options.quickFiltersLabel', {
+      defaultMessage: 'Quick filters',
+    }),
 };
 
 export enum QueryBarMenuPanel {
@@ -151,8 +155,14 @@ export enum QueryBarMenuPanel {
   selectLanguage = 'selectLanguage',
 }
 
+export interface AdditionalQueryBarMenuItems {
+  items?: EuiContextMenuPanelItemDescriptor[];
+  panels?: EuiContextMenuPanelDescriptor[];
+}
+
 export interface QueryBarMenuPanelsProps {
   filters?: Filter[];
+  additionalQueryBarMenuItems: AdditionalQueryBarMenuItems;
   savedQuery?: SavedQuery;
   language: string;
   dateRangeFrom?: string;
@@ -180,6 +190,7 @@ export interface QueryBarMenuPanelsProps {
 
 export function useQueryBarMenuPanels({
   filters,
+  additionalQueryBarMenuItems,
   savedQuery,
   language,
   dateRangeFrom,
@@ -412,6 +423,11 @@ export function useQueryBarMenuPanels({
       { isSeparator: true }
     );
   }
+
+  if (showFilterBar && additionalQueryBarMenuItems.items?.length) {
+    items.push(...[...additionalQueryBarMenuItems.items, { isSeparator: true } as const]);
+  }
+
   // saved queries actions are only shown when the showQueryInput and showFilterBar is true
   if (showQueryInput && showFilterBar) {
     items.push(...queryAndFiltersRelatedPanels);
@@ -555,7 +571,14 @@ export function useQueryBarMenuPanels({
         />
       ),
     },
-  ];
+    {
+      id: 4,
+      title: strings.getLoadCurrentFilterSetLabel(),
+      width: 400,
+      content: <div>{manageFilterSetComponent}</div>,
+    },
+    ...(additionalQueryBarMenuItems.panels ?? []),
+  ] as EuiContextMenuPanelDescriptor[];
 
   if (hiddenPanelOptions && hiddenPanelOptions.length > 0) {
     panels = panels.map((panel) => ({

diff --git a/src/plugins/unified_search/public/search_bar/create_search_bar.tsx b/src/plugins/unified_search/public/search_bar/create_search_bar.tsx
@@ -256,6 +256,7 @@ export function createSearchBar({
             dataViewPickerOverride={props.dataViewPickerOverride}
             isClearable={props.isClearable}
             placeholder={props.placeholder}
+            additionalQueryBarMenuItems={props.additionalQueryBarMenuItems}
             {...overrideDefaultBehaviors(props)}
             dataViewPickerComponentProps={props.dataViewPickerComponentProps}
             textBasedLanguageModeErrors={props.textBasedLanguageModeErrors}

diff --git a/src/plugins/unified_search/public/search_bar/search_bar.tsx b/src/plugins/unified_search/public/search_bar/search_bar.tsx
@@ -27,6 +27,7 @@ import type { SavedQueryAttributes } from '@kbn/data-plugin/common';
 import { DataView } from '@kbn/data-views-plugin/public';
 
 import { i18n } from '@kbn/i18n';
+import { AdditionalQueryBarMenuItems } from '../query_string_input/query_bar_menu_panels';
 import type { IUnifiedSearchPluginServices } from '../types';
 import { SavedQueryMeta, SaveQueryForm } from '../saved_query_form';
 import { SavedQueryManagementList } from '../saved_query_management';
@@ -64,6 +65,7 @@ export interface SearchBarOwnProps<QT extends AggregateQuery | Query = Query> {
   showDatePicker?: boolean;
   showAutoRefreshOnly?: boolean;
   filters?: Filter[];
+  additionalQueryBarMenuItems?: AdditionalQueryBarMenuItems;
   filtersForSuggestions?: Filter[];
   hiddenFilterPanelOptions?: QueryBarMenuProps['hiddenPanelOptions'];
   prependFilterBar?: React.ReactNode;
@@ -155,6 +157,7 @@ class SearchBarUI<QT extends (Query | AggregateQuery) | Query = Query> extends C
     showSubmitButton: true,
     showAutoRefreshOnly: false,
     filtersForSuggestions: [],
+    additionalQueryBarMenuItems: [],
   };
 
   private services = this.props.kibana.services;
@@ -530,6 +533,7 @@ class SearchBarUI<QT extends (Query | AggregateQuery) | Query = Query> extends C
         openQueryBarMenu={this.state.openQueryBarMenu}
         onFiltersUpdated={this.props.onFiltersUpdated}
         filters={this.props.filters}
+        additionalQueryBarMenuItems={this.props.additionalQueryBarMenuItems ?? {}}
         hiddenPanelOptions={this.props.hiddenFilterPanelOptions}
         query={this.state.query as Query}
         savedQuery={this.props.savedQuery}

diff --git a/x-pack/plugins/translations/translations/fr-FR.json b/x-pack/plugins/translations/translations/fr-FR.json
@@ -40216,7 +40216,6 @@
     "xpack.triggersActionsUI.home.logsTabTitle": "Logs",
     "xpack.triggersActionsUI.home.rulesTabTitle": "Règles",
     "xpack.triggersActionsUI.home.sectionDescription": "Détectez les conditions à l'aide de règles.",
-    "xpack.triggersActionsUI.home.TabTitle": "Alertes (utilisation interne uniquement)",
     "xpack.triggersActionsUI.inspect.modal.closeTitle": "Fermer",
     "xpack.triggersActionsUI.inspect.modal.indexPatternDescription": "Modèle d'indexation qui se connecte aux index Elasticsearch. Ces index peuvent être configurés dans Kibana > Paramètres avancés.",
     "xpack.triggersActionsUI.inspect.modal.indexPatternLabel": "Modèle d'indexation",
@@ -40354,9 +40353,7 @@
     "xpack.triggersActionsUI.sections.alertsSummaryWidget.errorBody": "Une erreur s'est produite lors du chargement du récapitulatif des alertes. Contactez votre administrateur pour obtenir de l'aide.",
     "xpack.triggersActionsUI.sections.alertsSummaryWidget.errorTitle": "Impossible de charger le récapitulatif des alertes",
     "xpack.triggersActionsUI.sections.alertsSummaryWidget.title": "Activité des alertes",
-    "xpack.triggersActionsUI.sections.alertsTable.alertsFlyout.name": "Nom",
     "xpack.triggersActionsUI.sections.alertsTable.alertsFlyout.paginationLabel": "Navigation dans les alertes",
-    "xpack.triggersActionsUI.sections.alertsTable.alertsFlyout.reason": "Raison",
     "xpack.triggersActionsUI.sections.alertsTable.column.actions": "Actions",
     "xpack.triggersActionsUI.sections.alertsTable.title": "Tableau d’alertes",
     "xpack.triggersActionsUI.sections.confirmConnectorEditClose.cancelButtonLabel": "Annuler",

diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
@@ -40208,7 +40208,6 @@
     "xpack.triggersActionsUI.home.logsTabTitle": "ログ",
     "xpack.triggersActionsUI.home.rulesTabTitle": "ルール",
     "xpack.triggersActionsUI.home.sectionDescription": "ルールを使用する条件を検出します。",
-    "xpack.triggersActionsUI.home.TabTitle": "アラート（内部使用のみ）",
     "xpack.triggersActionsUI.inspect.modal.closeTitle": "閉じる",
     "xpack.triggersActionsUI.inspect.modal.indexPatternDescription": "Elasticsearchインデックスに接続したインデックスパターンです。これらのインデックスは Kibana > 高度な設定で構成できます。",
     "xpack.triggersActionsUI.inspect.modal.indexPatternLabel": "インデックスパターン",
@@ -40346,9 +40345,7 @@
     "xpack.triggersActionsUI.sections.alertsSummaryWidget.errorBody": "アラート概要の読み込みエラーが発生しました。ヘルプについては、管理者にお問い合わせください。",
     "xpack.triggersActionsUI.sections.alertsSummaryWidget.errorTitle": "アラート概要を読み込めません",
     "xpack.triggersActionsUI.sections.alertsSummaryWidget.title": "アラートアクティビティ",
-    "xpack.triggersActionsUI.sections.alertsTable.alertsFlyout.name": "名前",
     "xpack.triggersActionsUI.sections.alertsTable.alertsFlyout.paginationLabel": "アラートナビゲーション",
-    "xpack.triggersActionsUI.sections.alertsTable.alertsFlyout.reason": "理由",
     "xpack.triggersActionsUI.sections.alertsTable.column.actions": "アクション",
     "xpack.triggersActionsUI.sections.alertsTable.title": "アラートテーブル",
     "xpack.triggersActionsUI.sections.confirmConnectorEditClose.cancelButtonLabel": "キャンセル",

diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
@@ -40188,7 +40188,6 @@
     "xpack.triggersActionsUI.home.logsTabTitle": "日志",
     "xpack.triggersActionsUI.home.rulesTabTitle": "规则",
     "xpack.triggersActionsUI.home.sectionDescription": "使用规则来检测条件。",
-    "xpack.triggersActionsUI.home.TabTitle": "告警（仅限内部使用）",
     "xpack.triggersActionsUI.inspect.modal.closeTitle": "关闭",
     "xpack.triggersActionsUI.inspect.modal.indexPatternDescription": "连接到 Elasticsearch 索引的索引模式。可以在“Kibana”>“高级设置”中配置这些索引。",
     "xpack.triggersActionsUI.inspect.modal.indexPatternLabel": "索引模式",
@@ -40326,9 +40325,7 @@
     "xpack.triggersActionsUI.sections.alertsSummaryWidget.errorBody": "加载告警摘要时出现错误。请联系您的管理员寻求帮助。",
     "xpack.triggersActionsUI.sections.alertsSummaryWidget.errorTitle": "无法加载告警摘要",
     "xpack.triggersActionsUI.sections.alertsSummaryWidget.title": "告警活动",
-    "xpack.triggersActionsUI.sections.alertsTable.alertsFlyout.name": "名称",
     "xpack.triggersActionsUI.sections.alertsTable.alertsFlyout.paginationLabel": "告警导航",
-    "xpack.triggersActionsUI.sections.alertsTable.alertsFlyout.reason": "原因",
     "xpack.triggersActionsUI.sections.alertsTable.column.actions": "操作",
     "xpack.triggersActionsUI.sections.alertsTable.title": "告警表",
     "xpack.triggersActionsUI.sections.confirmConnectorEditClose.cancelButtonLabel": "取消",

diff --git a/x-pack/plugins/triggers_actions_ui/.storybook/decorator.tsx b/x-pack/plugins/triggers_actions_ui/.storybook/decorator.tsx
@@ -58,8 +58,8 @@ export const StorybookContextDecorator: React.FC<StorybookContextDecoratorProps>
   ExperimentalFeaturesService.init({
     experimentalFeatures: {
       rulesListDatagrid: true,
-      internalAlertsTable: true,
       ruleTagFilter: true,
+      globalAlertsPage: false,
       ruleStatusFilter: true,
       rulesDetailLogs: true,
       ruleUseExecutionStatus: false,

diff --git a/x-pack/plugins/triggers_actions_ui/common/experimental_features.ts b/x-pack/plugins/triggers_actions_ui/common/experimental_features.ts
@@ -13,7 +13,7 @@ export type ExperimentalFeatures = { [K in keyof typeof allowedExperimentalValue
  */
 export const allowedExperimentalValues = Object.freeze({
   rulesListDatagrid: true,
-  internalAlertsTable: false,
+  globalAlertsPage: false,
   ruleTagFilter: true,
   ruleStatusFilter: true,
   rulesDetailLogs: true,

diff --git a/x-pack/plugins/triggers_actions_ui/common/index.ts b/x-pack/plugins/triggers_actions_ui/common/index.ts
@@ -13,4 +13,3 @@ export const BASE_TRIGGERS_ACTIONS_UI_API_PATH = '/internal/triggers_actions_ui'
 export * from './parse_interval';
 export * from './experimental_features';
 export * from './normalized_field_types';
-export * from './alert_config';
diff --git a/...riggers_actions_ui/common/alert_config.ts → ...ugins/triggers_actions_ui/common/utils.ts b/...riggers_actions_ui/common/alert_config.ts → ...ugins/triggers_actions_ui/common/utils.ts
@@ -5,6 +5,4 @@
  * 2.0.
  */
 
-import { AlertConsumers } from '@kbn/rule-data-utils';
-
-export const ALERT_TABLE_GENERIC_CONFIG_ID = `${AlertConsumers.STACK_ALERTS}-generic-alert-table`;
+export const nonNullable = <T>(v: T): v is NonNullable<T> => v != null;
diff --git a/x-pack/plugins/triggers_actions_ui/kibana.jsonc b/x-pack/plugins/triggers_actions_ui/kibana.jsonc
@@ -32,7 +32,7 @@
       "features",
       "home",
       "spaces",
-      "serverless",
+      "serverless"
     ],
     "requiredBundles": [
       "alerting",

diff --git a/x-pack/plugins/triggers_actions_ui/public/application/alert_table_config_registry.test.ts b/x-pack/plugins/triggers_actions_ui/public/application/alert_table_config_registry.test.ts
@@ -169,16 +169,16 @@ describe('getAlertConfigIdPerRuleTypes()', () => {
       'o11y-metric-threshold',
       'ml-alerts-table',
     ]);
-    expect(configId).toEqual('stackAlerts-generic-alert-table');
+    expect(configId).toEqual('stackAlerts-generic-alerts-table');
   });
 
   test('should return the generic config ID if empty ruleTypeIds match with a configuration', () => {
     const configId = alertTableConfigRegistry.getAlertConfigIdPerRuleTypes([]);
-    expect(configId).toEqual('stackAlerts-generic-alert-table');
+    expect(configId).toEqual('stackAlerts-generic-alerts-table');
   });
 
   test('should return the generic config ID if an unknown ruleTypeId match with NO configuration', () => {
     const configId = alertTableConfigRegistry.getAlertConfigIdPerRuleTypes(['unknown-threshold']);
-    expect(configId).toEqual('stackAlerts-generic-alert-table');
+    expect(configId).toEqual('stackAlerts-generic-alerts-table');
   });
 });