[Alert details page] [Custom threshold] Change title of condition cha…

…rts (elastic#175865) Resolves elastic#174249 - Updates title of condition charts on Custom threshold alert details page - In case chart title length is more than 120 chars, title is shortened with `...` at end - Tooltip shows full title <img width="1254" alt="Screenshot 2024-01-30 at 10 19 35" src="https://github.com/elastic/kibana/assets/69037875/41cfe6d5-5bd4-41f7-a91f-c2f3bd25943d"> <img width="1259" alt="Screenshot 2024-01-30 at 10 19 49" src="https://github.com/elastic/kibana/assets/69037875/a9d76bf5-7f94-445e-98bf-e3763d03bdb3"> <img width="1272" alt="Screenshot 2024-01-30 at 10 26 52" src="https://github.com/elastic/kibana/assets/69037875/642153b1-a8c2-4992-b3fd-187ffe385ca2">
ashokaditya · Feb 7, 2024 · 8287a0a · 8287a0a
1 parent 3c97692
commit 8287a0a
Show file tree

Hide file tree

Showing 3 changed files with 134 additions and 6 deletions.
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
@@ -86,7 +86,7 @@ describe('AlertDetailsAppSection', () => {
   it('should render rule and alert data', async () => {
     const result = renderComponent();
 
-    expect((await result.findByTestId('thresholdAlertOverviewSection')).children.length).toBe(3);
+    expect((await result.findByTestId('thresholdAlertOverviewSection')).children.length).toBe(6);
     expect(result.getByTestId('thresholdRule-2000-2500')).toBeTruthy();
   });
 
@@ -148,7 +148,30 @@ describe('AlertDetailsAppSection', () => {
       { ['kibana.alert.end']: '2023-03-28T14:40:00.000Z' }
     );
 
-    expect(alertDetailsAppSectionComponent.getAllByTestId('RuleConditionChart').length).toBe(3);
+    expect(alertDetailsAppSectionComponent.getAllByTestId('RuleConditionChart').length).toBe(6);
     expect(mockedRuleConditionChart.mock.calls[0]).toMatchSnapshot();
   });
+
+  it('should render title on condition charts', async () => {
+    const result = renderComponent();
+
+    expect(result.getByTestId('chartTitle-0').textContent).toBe(
+      'Equation result for count (all documents)'
+    );
+    expect(result.getByTestId('chartTitle-1').textContent).toBe(
+      'Equation result for max (system.cpu.user.pct)'
+    );
+    expect(result.getByTestId('chartTitle-2').textContent).toBe(
+      'Equation result for min (system.memory.used.pct)'
+    );
+    expect(result.getByTestId('chartTitle-3').textContent).toBe(
+      'Equation result for min (system.memory.used.pct) + min (system.memory.used.pct) + min (system.memory.used.pct) + min (system.memory.used.pct...'
+    );
+    expect(result.getByTestId('chartTitle-4').textContent).toBe(
+      'Equation result for min (system.memory.used.pct) + min (system.memory.used.pct)'
+    );
+    expect(result.getByTestId('chartTitle-5').textContent).toBe(
+      'Equation result for min (system.memory.used.pct) + min (system.memory.used.pct) + min (system.memory.used.pct)'
+    );
+  });
 });
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
@@ -17,6 +17,9 @@ import {
   EuiSpacer,
   EuiText,
   EuiTitle,
+  EuiToolTip,
+  useEuiTheme,
+  transparentize,
 } from '@elastic/eui';
 import { Rule, RuleTypeParams } from '@kbn/alerting-plugin/common';
 import { getPaddedAlertTimeRange } from '@kbn/observability-get-padded-alert-time-range-util';
@@ -35,7 +38,6 @@ import type {
   RangeEventAnnotationConfig,
 } from '@kbn/event-annotation-common';
 import moment from 'moment';
-import { transparentize, useEuiTheme } from '@elastic/eui';
 import { useLicense } from '../../../../hooks/use_license';
 import { useKibana } from '../../../../utils/kibana_react';
 import { metricValueFormatter } from '../../../../../common/custom_threshold_rule/metric_value_formatter';
@@ -44,6 +46,7 @@ import {
   AlertParams,
   CustomThresholdAlertFields,
   CustomThresholdRuleTypeParams,
+  MetricExpression,
 } from '../../types';
 import { TIME_LABELS } from '../criterion_preview_chart/criterion_preview_chart';
 import { Threshold } from '../custom_threshold';
@@ -64,6 +67,44 @@ interface AppSectionProps {
   setAlertSummaryFields: React.Dispatch<React.SetStateAction<AlertSummaryField[] | undefined>>;
 }
 
+const CHART_TITLE_LIMIT = 120;
+
+const equationResultText = i18n.translate('xpack.observability.customThreshold.alertChartTitle', {
+  defaultMessage: 'Equation result for ',
+});
+
+const generateChartTitleAndTooltip = (criterion: MetricExpression) => {
+  const metricNameResolver: Record<string, string> = {};
+
+  criterion.metrics.forEach(
+    (metric) =>
+      (metricNameResolver[metric.name] = `${metric.aggType} (${
+        metric.field ? metric.field : metric.filter ? metric.filter : 'all documents'
+      })`)
+  );
+
+  let equation = criterion.equation
+    ? criterion.equation
+    : criterion.metrics.map((m) => m.name).join(' + ');
+
+  Object.keys(metricNameResolver)
+    .sort()
+    .reverse()
+    .forEach((metricName) => {
+      equation = equation.replaceAll(metricName, metricNameResolver[metricName]);
+    });
+
+  const chartTitle =
+    equation.length > CHART_TITLE_LIMIT
+      ? `${equation.substring(0, CHART_TITLE_LIMIT)}...`
+      : equation;
+
+  return {
+    tooltip: `${equationResultText}${equation}`,
+    title: `${equationResultText}${chartTitle}`,
+  };
+};
+
 // eslint-disable-next-line import/no-default-export
 export default function AlertDetailsAppSection({
   alert,
@@ -89,6 +130,12 @@ export default function AlertDetailsAppSection({
   const groups = alert.fields[ALERT_GROUP];
   const tags = alert.fields[TAGS];
 
+  const chartTitleAndTooltip: Array<{ title: string; tooltip: string }> = [];
+
+  ruleParams.criteria.forEach((criterion) => {
+    chartTitleAndTooltip.push(generateChartTitleAndTooltip(criterion));
+  });
+
   const alertStartAnnotation: PointInTimeEventAnnotationConfig = {
     label: 'Alert',
     type: 'manual',
@@ -182,9 +229,11 @@ export default function AlertDetailsAppSection({
       {ruleParams.criteria.map((criterion, index) => (
         <EuiFlexItem key={`criterion-${index}`}>
           <EuiPanel hasBorder hasShadow={false}>
-            <EuiTitle size="xs">
-              <h4>{criterion.label || 'CUSTOM'} </h4>
-            </EuiTitle>
+            <EuiToolTip content={chartTitleAndTooltip[index].tooltip}>
+              <EuiTitle size="xs">
+                <h4 data-test-subj={`chartTitle-${index}`}>{chartTitleAndTooltip[index].title}</h4>
+              </EuiTitle>
+            </EuiToolTip>
             <EuiText size="s" color="subdued">
               <FormattedMessage
                 id="xpack.observability.customThreshold.rule.alertDetailsAppSection.criterion.subtitle"

diff --git a/...k/plugins/observability/public/components/custom_threshold/mocks/custom_threshold_rule.ts b/...k/plugins/observability/public/components/custom_threshold/mocks/custom_threshold_rule.ts
@@ -103,6 +103,62 @@ export const buildCustomThresholdRule = (
           timeSize: 15,
           timeUnit: 'm',
         },
+        {
+          comparator: Comparator.GT,
+          metrics: [
+            {
+              name: 'A',
+              aggType: Aggregators.MIN,
+              field: 'system.memory.used.pct',
+            },
+          ],
+          threshold: [0.8],
+          timeSize: 15,
+          timeUnit: 'm',
+          equation:
+            'A + A + A + A + A + A + A + A + A + A + A + A + A + A + A + A + A + A + A + A + A',
+        },
+        {
+          comparator: Comparator.GT,
+          metrics: [
+            {
+              name: 'C',
+              aggType: Aggregators.MIN,
+              field: 'system.memory.used.pct',
+            },
+            {
+              name: 'D',
+              aggType: Aggregators.MIN,
+              field: 'system.memory.used.pct',
+            },
+          ],
+          threshold: [0.8],
+          timeSize: 15,
+          timeUnit: 'm',
+        },
+        {
+          comparator: Comparator.GT,
+          metrics: [
+            {
+              name: 'CAD',
+              aggType: Aggregators.MIN,
+              field: 'system.memory.used.pct',
+            },
+            {
+              name: 'CADE',
+              aggType: Aggregators.MIN,
+              field: 'system.memory.used.pct',
+            },
+            {
+              name: 'ADE',
+              aggType: Aggregators.MIN,
+              field: 'system.memory.used.pct',
+            },
+          ],
+          threshold: [0.8],
+          timeSize: 15,
+          timeUnit: 'm',
+        },
       ],
       searchConfiguration: {
         query: {