[8.x] [Alert details page] Use related alerts logic only for the cust…

…om threshold rule (#193957) (#193991) # Backport This will backport the following commits from `main` to `8.x`: - [[Alert details page] Use related alerts logic only for the custom threshold rule (#193957)](#193957)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Maryam Saeidi <[email protected]>
elastic · Sep 25, 2024 · 24bec01 · 24bec01
1 parent c7b153c
commit 24bec01
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>