-
Notifications
You must be signed in to change notification settings - Fork 8.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add alert grouping functionality to the observability alerts page #189958
Changes from all commits
a1eb6ce
e08a2a6
b788b66
2bba4c9
3c368d1
d26fe4e
48596ee
631a4d8
1a57f84
288ce39
f19cf45
1af6ae1
38ab838
6b7b242
a4d5dd0
0a312d6
a13dccf
1263565
d83aecb
d06e0d9
4e354b2
fd2d043
e8165da
e0da06b
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,66 @@ | ||
/* | ||
* 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 { useAlertsDataView } from '@kbn/alerts-ui-shared/src/common/hooks/use_alerts_data_view'; | ||
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 { dataView } = useAlertsDataView({ | ||
featureIds, | ||
dataViewsService: dataViews, | ||
http, | ||
toasts: notifications.toasts, | ||
}); | ||
|
||
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]); | ||
}; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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, | ||
}; | ||
}; |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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( | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I registered a new alerts table with an observability ID, which is used on other applications as well. (Basically, this already existed) |
||
observabilityRuleTypeRegistry, | ||
config | ||
); | ||
alertTableConfigRegistry.register(observabilityAlertsTableConfig); | ||
|
||
// Alerts page | ||
const alertsPageAlertsTableConfig = getAlertsPageTableConfiguration( | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This is the new table with grouping, only for the alerts page for now. |
||
observabilityRuleTypeRegistry, | ||
config, | ||
dataViews, | ||
http, | ||
notifications | ||
); | ||
alertTableConfigRegistry.register(alertsPageAlertsTableConfig); | ||
|
||
// Rule details page | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; | ||
}; | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
it's already specified in query so why needed as separate filter?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Alert grouping component accepts filters, not queries, but we use queries in other places. Maybe, in the future, we can refactor places that we use query and use filter instead.