[8.16] [Security Solution] Fix alerts table grouping severity stats not showing badge (#216738) (#216841)

# Backport This will backport the following commits from `main` to `8.16`: - [[Security Solution] Fix alerts table grouping severity stats not showing badge (#216738)](https://github.com/elastic/kibana/pull/216738)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport)  Co-authored-by: Philippe Oberti <philippe.oberti@elastic.co>
2025-04-23 17:28:26 -04:00 · 2025-04-02 17:53:45 +02:00 · 2025-04-02 17:53:45 +02:00 · a6113352d7
commit a6113352d7
parent 643553661f
2 changed files with 156 additions and 41 deletions
--- a/x-pack/plugins/security_solution/public/detections/components/alerts_table/grouping_settings/group_stats.test.tsx
+++ b/x-pack/plugins/security_solution/public/detections/components/alerts_table/grouping_settings/group_stats.test.tsx
@ -10,70 +10,201 @@ import { getStats } from '.';
 describe('getStats', () => {
  it('returns array of badges which corresponds to the field name', () => {
    const badgesRuleName = getStats('kibana.alert.rule.name', {
-      key: ['Rule name test', 'Some description'],
-      usersCountAggregation: {
-        value: 10,
-      },
+      key: [],
+      severitiesSubAggregation: { buckets: [{ key: 'medium', doc_count: 10 }] },
+      countSeveritySubAggregation: { value: 1 },
+      usersCountAggregation: { value: 3 },
+      hostsCountAggregation: { value: 5 },
      doc_count: 10,
    });

+    expect(badgesRuleName.length).toBe(4);
    expect(
      badgesRuleName.find(
-        (badge) => badge.badge != null && badge.title === 'Users:' && badge.badge.value === 10
+        (badge) => badge.title === 'Severity:' && badge.component != null && badge.badge == null
      )
    ).toBeTruthy();
    expect(
      badgesRuleName.find(
-        (badge) => badge.badge != null && badge.title === 'Alerts:' && badge.badge.value === 10
+        (badge) =>
+          badge.title === 'Users:' &&
+          badge.component == null &&
+          badge.badge != null &&
+          badge.badge.value === 3
+      )
+    ).toBeTruthy();
+    expect(
+      badgesRuleName.find(
+        (badge) =>
+          badge.title === 'Hosts:' &&
+          badge.component == null &&
+          badge.badge != null &&
+          badge.badge.value === 5
+      )
+    ).toBeTruthy();
+    expect(
+      badgesRuleName.find(
+        (badge) =>
+          badge.title === 'Alerts:' &&
+          badge.component == null &&
+          badge.badge != null &&
+          badge.badge.value === 10
      )
    ).toBeTruthy();

    const badgesHostName = getStats('host.name', {
      key: 'Host',
-      rulesCountAggregation: {
-        value: 3,
-      },
+      severitiesSubAggregation: { buckets: [{ key: 'medium', doc_count: 10 }] },
+      countSeveritySubAggregation: { value: 1 },
+      usersCountAggregation: { value: 5 },
+      rulesCountAggregation: { value: 3 },
      doc_count: 2,
    });

+    expect(badgesHostName.length).toBe(4);
    expect(
      badgesHostName.find(
-        (badge) => badge.badge != null && badge.title === 'Rules:' && badge.badge.value === 3
+        (badge) => badge.title === 'Severity:' && badge.component != null && badge.badge == null
+      )
+    ).toBeTruthy();
+    expect(
+      badgesHostName.find(
+        (badge) =>
+          badge.title === 'Users:' &&
+          badge.component == null &&
+          badge.badge != null &&
+          badge.badge.value === 5
+      )
+    ).toBeTruthy();
+    expect(
+      badgesHostName.find(
+        (badge) =>
+          badge.title === 'Rules:' &&
+          badge.component == null &&
+          badge.badge != null &&
+          badge.badge.value === 3
+      )
+    ).toBeTruthy();
+    expect(
+      badgesHostName.find(
+        (badge) =>
+          badge.title === 'Alerts:' &&
+          badge.component == null &&
+          badge.badge != null &&
+          badge.badge.value === 2
      )
    ).toBeTruthy();

    const badgesUserName = getStats('user.name', {
      key: 'User test',
-      hostsCountAggregation: {
-        value: 1,
-      },
+      severitiesSubAggregation: { buckets: [{ key: 'medium', doc_count: 10 }] },
+      countSeveritySubAggregation: { value: 1 },
+      rulesCountAggregation: { value: 2 },
+      hostsCountAggregation: { value: 1 },
      doc_count: 1,
    });
+
+    expect(badgesUserName.length).toBe(4);
    expect(
      badgesUserName.find(
-        (badge) => badge.badge != null && badge.title === `Hosts:` && badge.badge.value === 1
+        (badge) => badge.title === 'Severity:' && badge.component != null && badge.badge == null
+      )
+    ).toBeTruthy();
+    expect(
+      badgesUserName.find(
+        (badge) =>
+          badge.title === 'Hosts:' &&
+          badge.component == null &&
+          badge.badge != null &&
+          badge.badge.value === 1
+      )
+    ).toBeTruthy();
+    expect(
+      badgesUserName.find(
+        (badge) =>
+          badge.title === 'Rules:' &&
+          badge.component == null &&
+          badge.badge != null &&
+          badge.badge.value === 2
+      )
+    ).toBeTruthy();
+    expect(
+      badgesUserName.find(
+        (badge) =>
+          badge.title === 'Alerts:' &&
+          badge.component == null &&
+          badge.badge != null &&
+          badge.badge.value === 1
+      )
+    ).toBeTruthy();
+
+    const badgesSourceIp = getStats('source.ip', {
+      key: 'User test',
+      severitiesSubAggregation: { buckets: [{ key: 'medium', doc_count: 10 }] },
+      countSeveritySubAggregation: { value: 1 },
+      rulesCountAggregation: { value: 16 },
+      hostsCountAggregation: { value: 17 },
+      doc_count: 18,
+    });
+
+    expect(badgesSourceIp.length).toBe(4);
+    expect(
+      badgesSourceIp.find(
+        (badge) => badge.title === 'Severity:' && badge.component != null && badge.badge == null
+      )
+    ).toBeTruthy();
+    expect(
+      badgesSourceIp.find(
+        (badge) =>
+          badge.title === 'Hosts:' &&
+          badge.component == null &&
+          badge.badge != null &&
+          badge.badge.value === 17
+      )
+    ).toBeTruthy();
+    expect(
+      badgesSourceIp.find(
+        (badge) =>
+          badge.title === 'Rules:' &&
+          badge.component == null &&
+          badge.badge != null &&
+          badge.badge.value === 16
+      )
+    ).toBeTruthy();
+    expect(
+      badgesSourceIp.find(
+        (badge) =>
+          badge.title === 'Alerts:' &&
+          badge.component == null &&
+          badge.badge != null &&
+          badge.badge.value === 18
      )
    ).toBeTruthy();
  });

-  it('returns default badges if the field specific does not exist', () => {
+  it('should return default badges if the field specific does not exist', () => {
    const badges = getStats('process.name', {
      key: 'process',
-      rulesCountAggregation: {
-        value: 3,
-      },
+      severitiesSubAggregation: { buckets: [{ key: 'medium', doc_count: 10 }] },
+      countSeveritySubAggregation: { value: 1 },
+      rulesCountAggregation: { value: 3 },
      doc_count: 10,
    });

-    expect(badges.length).toBe(2);
+    expect(badges.length).toBe(3);
    expect(
      badges.find(
-        (badge) => badge.badge != null && badge.title === 'Rules:' && badge.badge.value === 3
+        (badge) => badge.title === 'Severity:' && badge.component != null && badge.badge == null
      )
    ).toBeTruthy();
    expect(
      badges.find(
-        (badge) => badge.badge != null && badge.title === 'Alerts:' && badge.badge.value === 10
+        (badge) => badge.title === 'Rules:' && badge.component == null && badge.badge?.value === 3
+      )
+    ).toBeTruthy();
+    expect(
+      badges.find(
+        (badge) => badge.title === 'Alerts:' && badge.component == null && badge.badge?.value === 10
      )
    ).toBeTruthy();
  });
--- a/x-pack/plugins/security_solution/public/detections/components/alerts_table/grouping_settings/group_stats.tsx
+++ b/x-pack/plugins/security_solution/public/detections/components/alerts_table/grouping_settings/group_stats.tsx
@ -7,7 +7,7 @@

 import { EuiIcon } from '@elastic/eui';
 import React from 'react';
-import type { RawBucket, GroupStatsItem } from '@kbn/grouping';
+import type { GroupStatsItem, RawBucket } from '@kbn/grouping';
 import type { AlertsGroupingAggregation } from './types';
 import * as i18n from '../translations';

@ -77,16 +77,16 @@ export const getStats = (
      ? multiSeverity
      : singleSeverityComponent;

-  const severityStat = !severityComponent
+  const severityStat: GroupStatsItem[] = !severityComponent
    ? []
    : [
        {
          title: i18n.STATS_GROUP_SEVERITY,
-          renderer: severityComponent,
+          component: severityComponent,
        },
      ];

-  const defaultBadges = [
+  const defaultBadges: GroupStatsItem[] = [
    {
      title: i18n.STATS_GROUP_ALERTS,
      badge: {
@ -133,22 +133,6 @@ export const getStats = (
        ...defaultBadges,
      ];
    case 'user.name':
-      return [
-        ...severityStat,
-        {
-          title: i18n.STATS_GROUP_HOSTS,
-          badge: {
-            value: bucket.hostsCountAggregation?.value ?? 0,
-          },
-        },
-        {
-          title: i18n.STATS_GROUP_RULES,
-          badge: {
-            value: bucket.rulesCountAggregation?.value ?? 0,
-          },
-        },
-        ...defaultBadges,
-      ];
    case 'source.ip':
      return [
        ...severityStat,