diff --git a/x-pack/plugins/observability_solution/observability/public/pages/alert_details/helpers/get_related_alerts_query.test.ts b/x-pack/plugins/observability_solution/observability/common/utils/alerting/get_related_alerts_query.test.ts similarity index 100% rename from x-pack/plugins/observability_solution/observability/public/pages/alert_details/helpers/get_related_alerts_query.test.ts rename to x-pack/plugins/observability_solution/observability/common/utils/alerting/get_related_alerts_query.test.ts diff --git a/x-pack/plugins/observability_solution/observability/public/pages/alert_details/helpers/get_related_alerts_query.ts b/x-pack/plugins/observability_solution/observability/common/utils/alerting/get_related_alerts_query.ts similarity index 94% rename from x-pack/plugins/observability_solution/observability/public/pages/alert_details/helpers/get_related_alerts_query.ts rename to x-pack/plugins/observability_solution/observability/common/utils/alerting/get_related_alerts_query.ts index c319af70db13f..cb2ad27bc8981 100644 --- a/x-pack/plugins/observability_solution/observability/public/pages/alert_details/helpers/get_related_alerts_query.ts +++ b/x-pack/plugins/observability_solution/observability/common/utils/alerting/get_related_alerts_query.ts @@ -5,7 +5,7 @@ * 2.0. */ -import type { Group } from '../../../../common/typings'; +import type { Group } from '../../typings'; export interface Query { query: string; diff --git a/x-pack/plugins/observability_solution/observability/public/components/custom_threshold/components/alert_details_app_section/alert_details_app_section.test.tsx b/x-pack/plugins/observability_solution/observability/public/components/custom_threshold/components/alert_details_app_section/alert_details_app_section.test.tsx index a98a519a1606a..553ca19787d4f 100644 --- a/x-pack/plugins/observability_solution/observability/public/components/custom_threshold/components/alert_details_app_section/alert_details_app_section.test.tsx +++ b/x-pack/plugins/observability_solution/observability/public/components/custom_threshold/components/alert_details_app_section/alert_details_app_section.test.tsx @@ -78,6 +78,7 @@ jest.mock('../../../../utils/kibana_react', () => ({ describe('AlertDetailsAppSection', () => { const queryClient = new QueryClient(); const mockedSetAlertSummaryFields = jest.fn(); + const mockedSetRelatedAlertsKuery = jest.fn(); const renderComponent = ( alert: Partial = {}, @@ -90,6 +91,7 @@ describe('AlertDetailsAppSection', () => { alert={buildCustomThresholdAlert(alert, alertFields)} rule={buildCustomThresholdRule()} setAlertSummaryFields={mockedSetAlertSummaryFields} + setRelatedAlertsKuery={mockedSetRelatedAlertsKuery} /> @@ -140,6 +142,15 @@ describe('AlertDetailsAppSection', () => { expect(mockedRuleConditionChart.mock.calls[0]).toMatchSnapshot(); }); + it('should set relatedAlertsKuery', async () => { + renderComponent(); + + expect(mockedSetAlertSummaryFields).toBeCalledTimes(2); + expect(mockedSetRelatedAlertsKuery).toHaveBeenLastCalledWith( + '(tags: "tag 1" or tags: "tag 2") or (host.name: "host-1" or kibana.alert.group.value: "host-1")' + ); + }); + it('should render title on condition charts', async () => { const result = renderComponent(); diff --git a/x-pack/plugins/observability_solution/observability/public/components/custom_threshold/components/alert_details_app_section/alert_details_app_section.tsx b/x-pack/plugins/observability_solution/observability/public/components/custom_threshold/components/alert_details_app_section/alert_details_app_section.tsx index 83aa8cf2a35d3..cb7cbd6fca914 100644 --- a/x-pack/plugins/observability_solution/observability/public/components/custom_threshold/components/alert_details_app_section/alert_details_app_section.tsx +++ b/x-pack/plugins/observability_solution/observability/public/components/custom_threshold/components/alert_details_app_section/alert_details_app_section.tsx @@ -32,6 +32,7 @@ import moment from 'moment'; import { LOGS_EXPLORER_LOCATOR_ID, LogsExplorerLocatorParams } from '@kbn/deeplinks-observability'; import { TimeRange } from '@kbn/es-query'; import { getGroupFilters } from '../../../../../common/custom_threshold_rule/helpers/get_group'; +import { getRelatedAlertKuery } from '../../../../../common/utils/alerting/get_related_alerts_query'; import { useLicense } from '../../../../hooks/use_license'; import { useKibana } from '../../../../utils/kibana_react'; import { metricValueFormatter } from '../../../../../common/custom_threshold_rule/metric_value_formatter'; @@ -49,6 +50,7 @@ interface AppSectionProps { alert: CustomThresholdAlert; rule: CustomThresholdRule; setAlertSummaryFields: React.Dispatch>; + setRelatedAlertsKuery: React.Dispatch>; } // eslint-disable-next-line import/no-default-export @@ -56,6 +58,7 @@ export default function AlertDetailsAppSection({ alert, rule, setAlertSummaryFields, + setRelatedAlertsKuery, }: AppSectionProps) { const services = useKibana().services; const { @@ -79,6 +82,7 @@ export default function AlertDetailsAppSection({ const alertStart = alert.fields[ALERT_START]; const alertEnd = alert.fields[ALERT_END]; const groups = alert.fields[ALERT_GROUP]; + const tags = alert.fields.tags; const chartTitleAndTooltip: Array<{ title: string; tooltip: string }> = []; @@ -97,7 +101,6 @@ export default function AlertDetailsAppSection({ icon: 'alert', id: 'custom_threshold_alert_start_annotation', }; - const alertRangeAnnotation: RangeEventAnnotationConfig = { label: `${alertEnd ? 'Alert duration' : 'Active alert'}`, type: 'manual', @@ -109,10 +112,13 @@ export default function AlertDetailsAppSection({ color: chroma(transparentize('#F04E981A', 0.2)).hex().toUpperCase(), id: `custom_threshold_${alertEnd ? 'recovered' : 'active'}_alert_range_annotation`, }; - const annotations: EventAnnotationConfig[] = []; annotations.push(alertStartAnnotation, alertRangeAnnotation); + useEffect(() => { + setRelatedAlertsKuery(getRelatedAlertKuery(tags, groups)); + }, [groups, setRelatedAlertsKuery, tags]); + useEffect(() => { setTimeRange(getPaddedAlertTimeRange(alertStart!, alertEnd)); }, [alertStart, alertEnd]); diff --git a/x-pack/plugins/observability_solution/observability/public/pages/alert_details/alert_details.tsx b/x-pack/plugins/observability_solution/observability/public/pages/alert_details/alert_details.tsx index 00dd03734b9b0..9561dc37b3e7f 100644 --- a/x-pack/plugins/observability_solution/observability/public/pages/alert_details/alert_details.tsx +++ b/x-pack/plugins/observability_solution/observability/public/pages/alert_details/alert_details.tsx @@ -23,7 +23,6 @@ import { ALERT_RULE_UUID, ALERT_STATUS, ALERT_STATUS_UNTRACKED, - ALERT_GROUP, } from '@kbn/rule-data-utils'; import { RuleTypeModel } from '@kbn/triggers-actions-ui-plugin/public'; import { useBreadcrumbs } from '@kbn/observability-shared-plugin/public'; @@ -31,7 +30,6 @@ import dedent from 'dedent'; import { AlertFieldsTable } from '@kbn/alerts-ui-shared'; import { css } from '@emotion/react'; import { omit } from 'lodash'; -import type { Group } from '../../../common/typings'; import { observabilityFeatureId } from '../../../common'; import { RelatedAlerts } from './components/related_alerts'; import { useKibana } from '../../utils/kibana_react'; @@ -98,6 +96,7 @@ export function AlertDetails() { const [alertStatus, setAlertStatus] = useState(); const { euiTheme } = useEuiTheme(); + const [relatedAlertsKuery, setRelatedAlertsKuery] = useState(); const [activeTabId, setActiveTabId] = useState(() => { const searchParams = new URLSearchParams(search); const urlTabId = searchParams.get(ALERT_DETAILS_TAB_URL_STORAGE_KEY); @@ -213,6 +212,7 @@ export function AlertDetails() { rule={rule} timeZone={timeZone} setAlertSummaryFields={setSummaryFields} + setRelatedAlertsKuery={setRelatedAlertsKuery} /> - ), - }, - ]; + content: , + }); + } return ( (); - const alertStart = alert?.fields[ALERT_START]; - const alertEnd = alert?.fields[ALERT_END]; - const alertId = alert?.fields[ALERT_UUID]; + const alertStart = alert.fields[ALERT_START]; + const alertEnd = alert.fields[ALERT_END]; + const alertId = alert.fields[ALERT_UUID]; const defaultQuery = useRef([ { query: `not kibana.alert.uuid: ${alertId}`, language: 'kuery' }, @@ -93,7 +90,7 @@ export function InternalRelatedAlerts({ alert, groups, tags }: Props) { defaultSearchQueries={defaultQuery.current} defaultState={{ ...defaultState, - kuery: getRelatedAlertKuery(tags, groups) ?? '', + kuery, }} />