[Alert details page] Use related alerts logic only for the custom thr…

…eshold rule (#193957) Closes #193943 ### Summary This PR only loads related alerts for the custom threshold rule and only when the related rule has tags or group by fields. For now, we don't show this tab if there is no tag or group and there is a follow-up ticket for discussing the empty state for the related alerts. #### Follow-up work - #193952 - #193942
elastic · Sep 25, 2024 · 387afb7 · 387afb7
1 parent 6c1f18c
commit 387afb7
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 25 deletions.
diff --git a/.../helpers/get_related_alerts_query.test.ts → ...alerting/get_related_alerts_query.test.ts b/.../helpers/get_related_alerts_query.test.ts → ...alerting/get_related_alerts_query.test.ts
diff --git a/...tails/helpers/get_related_alerts_query.ts → ...tils/alerting/get_related_alerts_query.ts b/...tails/helpers/get_related_alerts_query.ts → ...tils/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/.../custom_threshold/components/alert_details_app_section/alert_details_app_section.test.tsx b/.../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<CustomThresholdAlert> = {},
@@ -90,6 +91,7 @@ describe('AlertDetailsAppSection', () => {
             alert={buildCustomThresholdAlert(alert, alertFields)}
             rule={buildCustomThresholdRule()}
             setAlertSummaryFields={mockedSetAlertSummaryFields}
+            setRelatedAlertsKuery={mockedSetRelatedAlertsKuery}
           />
         </QueryClientProvider>
       </IntlProvider>
@@ -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/...nents/custom_threshold/components/alert_details_app_section/alert_details_app_section.tsx b/...nents/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,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 {
@@ -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/...plugins/observability_solution/observability/public/pages/alert_details/alert_details.tsx b/...plugins/observability_solution/observability/public/pages/alert_details/alert_details.tsx
@@ -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';
@@ -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);
@@ -213,6 +212,7 @@ export function AlertDetails() {
               rule={rule}
               timeZone={timeZone}
               setAlertSummaryFields={setSummaryFields}
+              setRelatedAlertsKuery={setRelatedAlertsKuery}
             />
             <EuiSpacer size="l" />
             <AlertHistoryChart
@@ -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

diff --git a/...rvability_solution/observability/public/pages/alert_details/components/related_alerts.tsx b/...rvability_solution/observability/public/pages/alert_details/components/related_alerts.tsx
@@ -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';
@@ -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,
@@ -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' },
@@ -93,7 +90,7 @@ export function InternalRelatedAlerts({ alert, groups, tags }: Props) {
           defaultSearchQueries={defaultQuery.current}
           defaultState={{
             ...defaultState,
-            kuery: getRelatedAlertKuery(tags, groups) ?? '',
+            kuery,
           }}
         />
       </EuiFlexItem>