Skip to content

[Alert details page] Use related alerts logic only for the custom threshold rule #193957

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.

Sign up for GitHub

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

Merged
maryam-saeidi merged 7 commits into from
Sep 25, 2024
Merged

[Alert details page] Use related alerts logic only for the custom threshold rule #193957

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
d5dd88c
Only load related alerts for the custom threshold rule (if there is t…
maryam-saeidi Sep 25, 2024
3960555
Fix test
maryam-saeidi Sep 25, 2024
9cbf1c4
Add test
maryam-saeidi Sep 25, 2024
8b50733
Remove unused vars
maryam-saeidi Sep 25, 2024
b96a1d9
Remove unused vars
maryam-saeidi Sep 25, 2024
400cfae
Only render related alerts when there is alert and relatedAlertsKuery
maryam-saeidi Sep 25, 2024
ca841ab
Merge branch 'main' into 193943-ct-related-alerts
maryam-saeidi Sep 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
0 .../helpers/get_related_alerts_query.test.ts → ...alerting/get_related_alerts_query.test.ts
View file
Open in desktop
File renamed without changes.
2 changes: 1 addition & 1 deletion ...tails/helpers/get_related_alerts_query.ts → ...tils/alerting/get_related_alerts_query.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
* 2.0.
*/

import type { Group } from '../../../../common/typings';
import type { Group } from '../../typings';

export interface Query {
query: string;
Expand Down
11 changes: 11 additions & 0 deletions .../custom_threshold/components/alert_details_app_section/alert_details_app_section.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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<CustomThresholdAlert> = {},
Expand All @@ -90,6 +91,7 @@ describe('AlertDetailsAppSection', () => {
alert={buildCustomThresholdAlert(alert, alertFields)}
rule={buildCustomThresholdRule()}
setAlertSummaryFields={mockedSetAlertSummaryFields}
setRelatedAlertsKuery={mockedSetRelatedAlertsKuery}
/>
</QueryClientProvider>
</IntlProvider>
Expand Down Expand Up @@ -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();

Expand Down
10 changes: 8 additions & 2 deletions ...nents/custom_threshold/components/alert_details_app_section/alert_details_app_section.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -49,13 +50,15 @@ interface AppSectionProps {
alert: CustomThresholdAlert;
rule: CustomThresholdRule;
setAlertSummaryFields: React.Dispatch<React.SetStateAction<AlertSummaryField[] | undefined>>;
setRelatedAlertsKuery: React.Dispatch<React.SetStateAction<string | undefined>>;
}

// eslint-disable-next-line import/no-default-export
export default function AlertDetailsAppSection({
alert,
rule,
setAlertSummaryFields,
setRelatedAlertsKuery,
}: AppSectionProps) {
const services = useKibana().services;
const {
Expand All @@ -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 }> = [];

Expand All @@ -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',
Expand All @@ -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]);
Comment on lines +118 to +120
Copy link
Copy Markdown
Contributor

@kdelemme kdelemme Sep 25, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we need to check for empty groups or tags array? Or that's not possible?

Copy link
Copy Markdown
Member Author

@maryam-saeidi maryam-saeidi Sep 25, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This will be handled in getRelatedAlertKuery:

getRelatedAlertKuery = (tags?: string[], groups?: Group[])


useEffect(() => {
setTimeRange(getPaddedAlertTimeRange(alertStart!, alertEnd));
}, [alertStart, alertEnd]);
Expand Down
21 changes: 9 additions & 12 deletions ...plugins/observability_solution/observability/public/pages/alert_details/alert_details.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,15 +23,13 @@ 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';
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';
Expand Down Expand Up @@ -98,6 +96,7 @@ export function AlertDetails() {
const [alertStatus, setAlertStatus] = useState<AlertStatus>();
const { euiTheme } = useEuiTheme();

const [relatedAlertsKuery, setRelatedAlertsKuery] = useState<string>();
const [activeTabId, setActiveTabId] = useState<TabId>(() => {
const searchParams = new URLSearchParams(search);
const urlTabId = searchParams.get(ALERT_DETAILS_TAB_URL_STORAGE_KEY);
Expand Down Expand Up @@ -213,6 +212,7 @@ export function AlertDetails() {
rule={rule}
timeZone={timeZone}
setAlertSummaryFields={setSummaryFields}
setRelatedAlertsKuery={setRelatedAlertsKuery}
/>
<EuiSpacer size="l" />
<AlertHistoryChart
Expand Down Expand Up @@ -258,21 +258,18 @@ export function AlertDetails() {
'data-test-subj': 'metadataTab',
content: metadataTab,
},
{
];

if (relatedAlertsKuery && alertDetail?.formatted) {
tabs.push({
id: RELATED_ALERTS_TAB_ID,
name: i18n.translate('xpack.observability.alertDetails.tab.relatedAlertsLabel', {
defaultMessage: 'Related Alerts',
}),
'data-test-subj': 'relatedAlertsTab',
content: (
<RelatedAlerts
alert={alertDetail?.formatted}
tags={alertDetail?.formatted.fields.tags}
groups={alertDetail?.formatted.fields[ALERT_GROUP] as Group[]}
/>
),
},
];
content: <RelatedAlerts alert={alertDetail.formatted} kuery={relatedAlertsKuery} />,
});
}

return (
<ObservabilityPageTemplate
Expand Down
17 changes: 7 additions & 10 deletions ...rvability_solution/observability/public/pages/alert_details/components/related_alerts.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@ import {
AlertSearchBarContainerState,
DEFAULT_STATE,
} from '../../../components/alert_search_bar/containers/state_container';
import type { Group } from '../../../../common/typings';
import { ObservabilityAlertSearchbarWithUrlSync } from '../../../components/alert_search_bar/alert_search_bar_with_url_sync';
import { renderGroupPanel } from '../../../components/alerts_table/grouping/render_group_panel';
import { getGroupStats } from '../../../components/alerts_table/grouping/get_group_stats';
Expand All @@ -36,22 +35,20 @@ import { usePluginContext } from '../../../hooks/use_plugin_context';
import { useKibana } from '../../../utils/kibana_react';
import { buildEsQuery } from '../../../utils/build_es_query';
import { mergeBoolQueries } from '../../alerts/helpers/merge_bool_queries';
import { getRelatedAlertKuery } from '../helpers/get_related_alerts_query';

const ALERTS_PER_PAGE = 50;
const RELATED_ALERTS_SEARCH_BAR_ID = 'related-alerts-search-bar-o11y';
const ALERTS_TABLE_ID = 'xpack.observability.related.alerts.table';

interface Props {
alert?: TopAlert;
groups?: Group[];
tags?: string[];
alert: TopAlert;
kuery: string;
}

const defaultState: AlertSearchBarContainerState = { ...DEFAULT_STATE, status: 'active' };
const DEFAULT_FILTERS: Filter[] = [];

export function InternalRelatedAlerts({ alert, groups, tags }: Props) {
export function InternalRelatedAlerts({ alert, kuery }: Props) {
const kibanaServices = useKibana().services;
const {
http,
Expand All @@ -65,9 +62,9 @@ export function InternalRelatedAlerts({ alert, groups, tags }: Props) {
});

const [esQuery, setEsQuery] = useState<{ bool: BoolQuery }>();
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[]>([
{ query: `not kibana.alert.uuid: ${alertId}`, language: 'kuery' },
Expand All @@ -93,7 +90,7 @@ export function InternalRelatedAlerts({ alert, groups, tags }: Props) {
defaultSearchQueries={defaultQuery.current}
defaultState={{
...defaultState,
kuery: getRelatedAlertKuery(tags, groups) ?? '',
kuery,
}}
/>
</EuiFlexItem>
Expand Down