Add alert grouping functionality to the observability alerts page

packages/kbn-alerts-grouping/src/components/alerts_grouping.tsx

@@ -56,7 +56,9 @@ const NextLevel = ({
  return children(nextGroupingFilters)!;
 };
 
-const AlertsGroupingInternal = (props: AlertsGroupingProps) => {
+const AlertsGroupingInternal = <T extends Record<string, unknown>>(
+ props: AlertsGroupingProps<T>
+) => {
  const {
  groupingId,
  services,
@@ -194,7 +196,7 @@ const AlertsGroupingInternal = (props: AlertsGroupingProps) => {
  };
 
  return (
- <AlertsGroupingLevel
+ <AlertsGroupingLevel<T>
  {...props}
  getGrouping={getGrouping}
  groupingLevel={level}
@@ -275,10 +277,13 @@ const AlertsGroupingInternal = (props: AlertsGroupingProps) => {
  * );
  * ```
  */
-export const AlertsGrouping = memo((props: AlertsGroupingProps) => {
- return (
- <AlertsGroupingContextProvider>
- <AlertsGroupingInternal {...props} />
- </AlertsGroupingContextProvider>
- );
-});
+const typedMemo: <T>(c: T) => T = memo;
+export const AlertsGrouping = typedMemo(
+ <T extends Record<string, unknown>>(props: AlertsGroupingProps<T>) => {
+ return (
+ <AlertsGroupingContextProvider>
+ <AlertsGroupingInternal {...props} />
+ </AlertsGroupingContextProvider>
+ );
+ }
+);

packages/kbn-alerts-grouping/src/components/alerts_grouping_level.tsx

@@ -40,7 +40,8 @@ const DEFAULT_FILTERS: Filter[] = [];
 /**
  * Renders an alerts grouping level
  */
-export const AlertsGroupingLevel = memo(
+const typedMemo: <T>(c: T) => T = memo;
+export const AlertsGroupingLevel = typedMemo(
  <T extends Record<string, unknown> = {}>({
  featureIds,
  defaultFilters = DEFAULT_FILTERS,

x-pack/plugins/observability_solution/observability/public/components/alerts_table/alerts/get_alerts_page_table_configuration.tsx

@@ -12,17 +12,29 @@ import {
  AlertsTableConfigurationRegistry,
  RenderCustomActionsRowArgs,
 } from '@kbn/triggers-actions-ui-plugin/public/types';
-import { casesFeatureId, observabilityFeatureId } from '../../../../common';
+import { DataViewsServicePublic } from '@kbn/data-views-plugin/public/types';
+import { HttpSetup } from '@kbn/core-http-browser';
+import { NotificationsStart } from '@kbn/core-notifications-browser';
+import {
+ casesFeatureId,
+ observabilityAlertFeatureIds,
+ observabilityFeatureId,
+} from '../../../../common';
 import { AlertActions } from '../../../pages/alerts/components/alert_actions';
 import { useGetAlertFlyoutComponents } from '../../alerts_flyout/use_get_alert_flyout_components';
 import type { ObservabilityRuleTypeRegistry } from '../../../rules/create_observability_rule_type_registry';
+import { ALERTS_PAGE_ALERTS_TABLE_CONFIG_ID } from '../../../constants';
 import type { ConfigSchema } from '../../../plugin';
 import { getRenderCellValue } from '../common/render_cell_value';
 import { getColumns } from '../common/get_columns';
+import { getPersistentControlsHook } from './get_peristent_controls';
 
 export const getAlertsPageTableConfiguration = (
  observabilityRuleTypeRegistry: ObservabilityRuleTypeRegistry,
- config: ConfigSchema
+ config: ConfigSchema,
+ dataViews: DataViewsServicePublic,
+ http: HttpSetup,
+ notifications: NotificationsStart
 ): AlertsTableConfigurationRegistry => {
  const renderCustomActionsRow = (props: RenderCustomActionsRowArgs) => {
  return (
@@ -34,7 +46,7 @@ export const getAlertsPageTableConfiguration = (
  );
  };
  return {
- id: observabilityFeatureId,
+ id: ALERTS_PAGE_ALERTS_TABLE_CONFIG_ID,
  cases: { featureId: casesFeatureId, owner: [observabilityFeatureId] },
  columns: getColumns({ showRuleName: true }),
  getRenderCellValue,
@@ -53,6 +65,15 @@ export const getAlertsPageTableConfiguration = (
  return { header, body, footer };
  },
  ruleTypeIds: observabilityRuleTypeRegistry.list(),
+ usePersistentControls: getPersistentControlsHook({
+ groupingId: ALERTS_PAGE_ALERTS_TABLE_CONFIG_ID,
+ featureIds: observabilityAlertFeatureIds,
+ services: {
+ dataViews,
+ http,
+ notifications,
+ },
+ }),
  showInspectButton: true,
  };
 };

x-pack/plugins/observability_solution/observability/public/components/alerts_table/alerts/get_peristent_controls.ts

@@ -0,0 +1,68 @@
+/*
+ * 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 { useMemo, useCallback } from 'react';
+import { type AlertsGroupingProps, useAlertsGroupingState } from '@kbn/alerts-grouping';
+import { useAlertDataView } from '@kbn/alerts-ui-shared';
+import { useGetGroupSelectorStateless } from '@kbn/grouping/src/hooks/use_get_group_selector';
+import { AlertConsumers } from '@kbn/rule-data-utils';
+import { AlertsByGroupingAgg } from '../types';
+
+interface GetPersistentControlsParams {
+ groupingId: string;
+ featureIds: AlertConsumers[];
+ maxGroupingLevels?: number;
+ services: Pick<
+ AlertsGroupingProps<AlertsByGroupingAgg>['services'],
+ 'dataViews' | 'http' | 'notifications'
+ >;
+}
+
+export const getPersistentControlsHook =
+ ({
+ groupingId,
+ featureIds,
+ maxGroupingLevels = 3,
+ services: { dataViews, http, notifications },
+ }: GetPersistentControlsParams) =>
+ () => {
+ const { grouping, updateGrouping } = useAlertsGroupingState(groupingId);
+
+ const onGroupChange = useCallback(
+ (selectedGroups: string[]) => {
+ updateGrouping({
+ activeGroups: grouping.activeGroups.filter((g) => g !== 'none').concat(selectedGroups),
+ });
+ },
+ [grouping, updateGrouping]
+ );
+
+ const { dataViews: alertDataViews } = useAlertDataView({
+ featureIds,
+ dataViewsService: dataViews,
+ http,
+ toasts: notifications.toasts,
+ });
+
+ const dataView = useMemo(() => alertDataViews?.[0], [alertDataViews]);
+
+ const groupSelector = useGetGroupSelectorStateless({
+ groupingId,
+ onGroupChange,
+ fields: dataView?.fields ?? [],
+ defaultGroupingOptions: grouping.options.filter(
+ (option) => !grouping.activeGroups.includes(option.key)
+ ),
+ maxGroupingLevels,
+ });
+
+ return useMemo(() => {
+ return {
+ right: groupSelector,
+ };
+ }, [groupSelector]);
+ };

x-pack/plugins/observability_solution/observability/public/components/alerts_table/observability/get_alerts_page_table_configuration.tsx

@@ -0,0 +1,58 @@
+/*
+ * 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 { SortOrder } from '@elastic/elasticsearch/lib/api/typesWithBodyKey';
+import { ALERT_START, AlertConsumers } from '@kbn/rule-data-utils';
+import {
+ AlertsTableConfigurationRegistry,
+ RenderCustomActionsRowArgs,
+} from '@kbn/triggers-actions-ui-plugin/public/types';
+import { casesFeatureId, observabilityFeatureId } from '../../../../common';
+import { AlertActions } from '../../../pages/alerts/components/alert_actions';
+import { useGetAlertFlyoutComponents } from '../../alerts_flyout/use_get_alert_flyout_components';
+import type { ObservabilityRuleTypeRegistry } from '../../../rules/create_observability_rule_type_registry';
+import type { ConfigSchema } from '../../../plugin';
+import { getRenderCellValue } from '../common/render_cell_value';
+import { getColumns } from '../common/get_columns';
+
+export const getObservabilityTableConfiguration = (
+ observabilityRuleTypeRegistry: ObservabilityRuleTypeRegistry,
+ config: ConfigSchema
+): AlertsTableConfigurationRegistry => {
+ const renderCustomActionsRow = (props: RenderCustomActionsRowArgs) => {
+ return (
+ <AlertActions
+ {...props}
+ config={config}
+ observabilityRuleTypeRegistry={observabilityRuleTypeRegistry}
+ />
+ );
+ };
+ return {
+ id: AlertConsumers.OBSERVABILITY,
+ cases: { featureId: casesFeatureId, owner: [observabilityFeatureId] },
+ columns: getColumns({ showRuleName: true }),
+ getRenderCellValue,
+ sort: [
+ {
+ [ALERT_START]: {
+ order: 'desc' as SortOrder,
+ },
+ },
+ ],
+ useActionsColumn: () => ({
+ renderCustomActionsRow,
+ }),
+ useInternalFlyout: () => {
+ const { header, body, footer } = useGetAlertFlyoutComponents(observabilityRuleTypeRegistry);
+ return { header, body, footer };
+ },
+ ruleTypeIds: observabilityRuleTypeRegistry.list(),
+ showInspectButton: true,
+ };
+};

x-pack/plugins/observability_solution/observability/public/components/alerts_table/register_alerts_table_configuration.tsx

@@ -6,22 +6,39 @@
  */
 
 import { AlertTableConfigRegistry } from '@kbn/triggers-actions-ui-plugin/public/application/alert_table_config_registry';
+import type { DataViewsServicePublic } from '@kbn/data-views-plugin/public/types';
+import { HttpSetup } from '@kbn/core-http-browser';
+import { NotificationsStart } from '@kbn/core-notifications-browser';
 import type { ConfigSchema } from '../../plugin';
 import { ObservabilityRuleTypeRegistry } from '../..';
 import { getAlertsPageTableConfiguration } from './alerts/get_alerts_page_table_configuration';
 import { getRuleDetailsTableConfiguration } from './rule_details/get_rule_details_table_configuration';
 import { getSloAlertsTableConfiguration } from './slo/get_slo_alerts_table_configuration';
+import { getObservabilityTableConfiguration } from './observability/get_alerts_page_table_configuration';
 
 export const registerAlertsTableConfiguration = (
  alertTableConfigRegistry: AlertTableConfigRegistry,
  observabilityRuleTypeRegistry: ObservabilityRuleTypeRegistry,
- config: ConfigSchema
+ config: ConfigSchema,
+ dataViews: DataViewsServicePublic,
+ http: HttpSetup,
+ notifications: NotificationsStart
 ) => {
- // Alert page
- const alertsPageAlertsTableConfig = getAlertsPageTableConfiguration(
+ // Observability table
+ const observabilityAlertsTableConfig = getObservabilityTableConfiguration(
  observabilityRuleTypeRegistry,
  config
  );
+ alertTableConfigRegistry.register(observabilityAlertsTableConfig);
+
+ // Alerts page
+ const alertsPageAlertsTableConfig = getAlertsPageTableConfiguration(
+ observabilityRuleTypeRegistry,
+ config,
+ dataViews,
+ http,
+ notifications
+ );
  alertTableConfigRegistry.register(alertsPageAlertsTableConfig);
 
  // Rule details page

x-pack/plugins/observability_solution/observability/public/components/alerts_table/types.ts

@@ -0,0 +1,36 @@
+/*
+ * 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 interface BucketItem {
+ key: string;
+ doc_count: number;
+}
+
+export interface AlertsByGroupingAgg extends Record<string, unknown> {
+ groupByFields: {
+ doc_count_error_upper_bound: number;
+ sum_other_doc_count: number;
+ buckets: BucketItem[];
+ };
+ ruleTags: {
+ doc_count_error_upper_bound: number;
+ sum_other_doc_count: number;
+ buckets: BucketItem[];
+ };
+ rulesCountAggregation?: {
+ value: number;
+ };
+ sourceCountAggregation?: {
+ value: number;
+ };
+ groupsCount: {
+ value: number;
+ };
+ unitsCount: {
+ value: number;
+ };
+}

x-pack/plugins/observability_solution/observability/public/components/tags.tsx

@@ -10,38 +10,53 @@ import React, { useState } from 'react';
 import { EuiBadge, EuiPopover } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 
-export function Tags({ tags }: { tags: string[] }) {
+export function Tags({
+ tags,
+ color,
+ size = 3,
+ oneLine = false,
+}: {
+ tags: string[];
+ color?: string;
+ size?: number;
+ oneLine?: boolean;
+}) {
  const [isMoreTagsOpen, setIsMoreTagsOpen] = useState(false);
- const onMoreTagsClick = () => setIsMoreTagsOpen((isPopoverOpen) => !isPopoverOpen);
+ const onMoreTagsClick = (e: any) => {
+ e.stopPropagation();
+ setIsMoreTagsOpen((isPopoverOpen) => !isPopoverOpen);
+ };
  const closePopover = () => setIsMoreTagsOpen(false);
- const moreTags = tags.length > 3 && (
+ const moreTags = tags.length > size && (
  <EuiBadge
  key="more"
  onClick={onMoreTagsClick}
- onClickAriaLabel={i18n.translate(
- 'xpack.observability.alertDetails.alertSummaryField.moreTags.ariaLabel',
- {
- defaultMessage: 'more tags badge',
- }
- )}
+ onClickAriaLabel={i18n.translate('xpack.observability.component.tags.moreTags.ariaLabel', {
+ defaultMessage: 'more tags badge',
+ })}
+ color={color}
  >
  <FormattedMessage
- id="xpack.observability.alertDetails.alertSummaryField.moreTags"
+ id="xpack.observability.component.tags.moreTags"
  defaultMessage="+{number} more"
- values={{ number: tags.length - 3 }}
+ values={{ number: tags.length - size }}
  />
  </EuiBadge>
  );
 
  return (
  <>
- {tags.slice(0, 3).map((tag) => (
- <EuiBadge key={tag}>{tag}</EuiBadge>
+ {tags.slice(0, size).map((tag) => (
+ <EuiBadge key={tag} color={color}>
+ {tag}
+ </EuiBadge>
  ))}
- <br />
+ {oneLine ? ' ' : <br />}
  <EuiPopover button={moreTags} isOpen={isMoreTagsOpen} closePopover={closePopover}>
- {tags.slice(3).map((tag) => (
- <EuiBadge key={tag}>{tag}</EuiBadge>
+ {tags.slice(size).map((tag) => (
+ <EuiBadge key={tag} color={color}>
+ {tag}
+ </EuiBadge>
  ))}
  </EuiPopover>
  </>

x-pack/plugins/observability_solution/observability/public/constants.ts

@@ -8,4 +8,5 @@
 export const DEFAULT_INTERVAL = '60s';
 export const DEFAULT_DATE_FORMAT = 'YYYY-MM-DD HH:mm';
 
+export const ALERTS_PAGE_ALERTS_TABLE_CONFIG_ID = `alerts-page-alerts-table`;
 export const RULE_DETAILS_ALERTS_TABLE_CONFIG_ID = `rule-details-alerts-table`;