[Security Solution] Alerts Treemap and Multi-Dimensional Alert Grouping

x-pack/plugins/security_solution/cypress/integration/detection_alerts/changing_alert_status.spec.ts

@@ -20,12 +20,14 @@ import {
   waitForAlerts,
   markAcknowledgedFirstAlert,
   goToAcknowledgedAlerts,
+  clearGroupByTopInput,
   closeAlerts,
   closeFirstAlert,
   goToClosedAlerts,
   goToOpenedAlerts,
   openAlerts,
   openFirstAlert,
+  selectCountTable,
 } from '../../tasks/alerts';
 import { createCustomRuleEnabled } from '../../tasks/api_calls/rules';
 import { cleanKibana, deleteAlertsAndRules } from '../../tasks/common';
@@ -53,6 +55,8 @@ describe('Changing alert status', () => {
       cy.get(SELECTED_ALERTS).should('have.text', `Selected 3 alerts`);
       closeAlerts();
       waitForAlerts();
+      selectCountTable();
+      clearGroupByTopInput();
     });
 
     it('Open one alert when more than one closed alerts are selected', () => {
@@ -110,6 +114,8 @@ describe('Changing alert status', () => {
       createCustomRuleEnabled(getNewRule());
       visit(ALERTS_URL);
       waitForAlertsToPopulate();
+      selectCountTable();
+      clearGroupByTopInput();
     });
     it('Mark one alert as acknowledged when more than one open alerts are selected', () => {
       cy.get(ALERTS_COUNT)
@@ -148,6 +154,8 @@ describe('Changing alert status', () => {
       createCustomRuleEnabled(getNewRule(), '1', '100m', 100);
       visit(ALERTS_URL);
       waitForAlertsToPopulate();
+      selectCountTable();
+      clearGroupByTopInput();
     });
     it('Closes and opens alerts', () => {
       const numberOfAlertsToBeClosed = 3;
@@ -298,6 +306,8 @@ describe('Changing alert status', () => {
       createCustomRuleEnabled(getNewRule());
       visit(ALERTS_URL);
       waitForAlertsToPopulate();
+      selectCountTable();
+      clearGroupByTopInput();
     });
     it('Mark one alert as acknowledged when more than one open alerts are selected', () => {
       cy.get(ALERTS_COUNT)

x-pack/plugins/security_solution/cypress/screens/alerts.ts

@@ -33,6 +33,8 @@ export const ALERTS_COUNT =
 export const ALERTS_TREND_SIGNAL_RULE_NAME_PANEL =
   '[data-test-subj="render-content-kibana.alert.rule.name"]';
 
+export const CHART_SELECT = '[data-test-subj="chartSelect"]';
+
 export const CLOSE_ALERT_BTN = '[data-test-subj="close-alert-status"]';
 
 export const CLOSE_SELECTED_ALERTS_BTN = '[data-test-subj="close-alert-status"]';
@@ -45,6 +47,8 @@ export const EMPTY_ALERT_TABLE = '[data-test-subj="tGridEmptyState"]';
 
 export const EXPAND_ALERT_BTN = '[data-test-subj="expand-event"]';
 
+export const GROUP_BY_TOP_INPUT = '[data-test-subj="groupByTop"] [data-test-subj="comboBoxInput"]';
+
 export const HOST_NAME = '[data-test-subj^=formatted-field][data-test-subj$=host\\.name]';
 
 export const ACKNOWLEDGED_ALERTS_FILTER_BTN = '[data-test-subj="acknowledgedAlerts"]';
@@ -74,6 +78,8 @@ export const RULE_NAME = '[data-test-subj^=formatted-field][data-test-subj$=rule
 
 export const SELECTED_ALERTS = '[data-test-subj="selectedShowBulkActionsButton"]';
 
+export const SELECT_TABLE = '[data-test-subj="table"]';
+
 export const SEND_ALERT_TO_TIMELINE_BTN = '[data-test-subj="send-alert-to-timeline-button"]';
 
 export const SEVERITY = '[data-test-subj^=formatted-field][data-test-subj$=severity]';

x-pack/plugins/security_solution/cypress/tasks/alerts.ts

@@ -9,17 +9,20 @@ import {
   ADD_EXCEPTION_BTN,
   ALERT_RISK_SCORE_HEADER,
   ALERT_CHECKBOX,
+  CHART_SELECT,
   CLOSE_ALERT_BTN,
   CLOSE_SELECTED_ALERTS_BTN,
   CLOSED_ALERTS_FILTER_BTN,
   EXPAND_ALERT_BTN,
+  GROUP_BY_TOP_INPUT,
   ACKNOWLEDGED_ALERTS_FILTER_BTN,
   LOADING_ALERTS_PANEL,
   MANAGE_ALERT_DETECTION_RULES_BTN,
   MARK_ALERT_ACKNOWLEDGED_BTN,
   OPEN_ALERT_BTN,
   OPENED_ALERTS_FILTER_BTN,
   SEND_ALERT_TO_TIMELINE_BTN,
+  SELECT_TABLE,
   TAKE_ACTION_POPOVER_BTN,
   TIMELINE_CONTEXT_MENU_BTN,
 } from '../screens/alerts';
@@ -65,7 +68,6 @@ export const closeAlerts = () => {
 
 export const expandFirstAlertActions = () => {
   cy.get(TIMELINE_CONTEXT_MENU_BTN).should('be.visible');
-  cy.get(TIMELINE_CONTEXT_MENU_BTN).find('svg').should('have.attr', 'data-is-loaded');
   cy.get(TIMELINE_CONTEXT_MENU_BTN).first().click({ force: true });
 };
 
@@ -125,6 +127,16 @@ export const openAlerts = () => {
   cy.get(OPEN_ALERT_BTN).click();
 };
 
+export const selectCountTable = () => {
+  cy.get(CHART_SELECT).click({ force: true });
+  cy.get(SELECT_TABLE).click();
+};
+
+export const clearGroupByTopInput = () => {
+  cy.get(GROUP_BY_TOP_INPUT).focus();
+  cy.get(GROUP_BY_TOP_INPUT).type('{backspace}');
+};
+
 export const goToAcknowledgedAlerts = () => {
   cy.get(ACKNOWLEDGED_ALERTS_FILTER_BTN).click();
   cy.get(REFRESH_BUTTON).should('not.have.attr', 'aria-label', 'Needs updating');

x-pack/plugins/security_solution/cypress/tasks/rule_details.ts

@@ -99,9 +99,9 @@ export const goToExceptionsTab = () => {
 };
 
 export const editException = () => {
-  cy.get(EXCEPTION_ITEM_ACTIONS_BUTTON).click();
+  cy.get(EXCEPTION_ITEM_ACTIONS_BUTTON).click({ force: true });
 
-  cy.get(EDIT_EXCEPTION_BTN).click();
+  cy.get(EDIT_EXCEPTION_BTN).click({ force: true });
 };
 
 export const removeException = () => {

x-pack/plugins/security_solution/public/common/components/alerts_treemap/index.test.tsx

@@ -0,0 +1,68 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+
+import { TestProviders } from '../../mock';
+import {
+  mockAlertSearchResponse,
+  mockNoDataAlertSearchResponse,
+} from './lib/mocks/mock_alert_search_response';
+import * as i18n from './translations';
+import type { Props } from '.';
+import { AlertsTreemap } from '.';
+
+const defaultProps: Props = {
+  data: mockAlertSearchResponse,
+  maxBuckets: 1000,
+  minChartHeight: 370,
+  stackByField0: 'kibana.alert.rule.name',
+  stackByField1: 'host.name',
+};
+
+describe('AlertsTreemap', () => {
+  describe('when the response has data', () => {
+    beforeEach(() => {
+      render(
+        <TestProviders>
+          <AlertsTreemap {...defaultProps} />
+        </TestProviders>
+      );
+    });
+
+    test('it renders the treemap', () => {
+      expect(screen.getByTestId('treemap').querySelector('.echChart')).toBeInTheDocument();
+    });
+
+    test('it renders the legend', () => {
+      expect(screen.getByTestId('draggable-legend')).toBeInTheDocument();
+    });
+  });
+
+  describe('when the response does NOT have data', () => {
+    beforeEach(() => {
+      render(
+        <TestProviders>
+          <AlertsTreemap {...defaultProps} data={mockNoDataAlertSearchResponse} />
+        </TestProviders>
+      );
+    });
+
+    test('it does NOT render the treemap', () => {
+      expect(screen.queryByTestId('treemap')).not.toBeInTheDocument();
+    });
+
+    test('it does NOT render the legend', () => {
+      expect(screen.queryByTestId('draggable-legend')).not.toBeInTheDocument();
+    });
+
+    test('it renders the "no data" message', () => {
+      expect(screen.getByText(i18n.NO_DATA_LABEL)).toBeInTheDocument();
+    });
+  });
+});