[Security Solution] [Trigger Actions] Alert Table Refactoring (#149128)

## Summary This PR replaces the existing `Alert Table` used in Security solution & cases with that of `triggers-actions-ui`. Ideally, this PR does make any changes to the functionality of the product and from user perspective. Nothing should Change. ‼️ Note for @elastic/security-threat-hunting-explore : This PR makes no changes to the table used in Host/Users page. ## Things to test and changes - @elastic/actionable-observability - The changes in observability plugin are done to accommodate the changes in the API of `triggers-actions-ui` alert table. - Requesting you to do desk-testing this PR once by using Alert Table as you do on the daily basis. - @elastic/response-ops - changes have been done in API as `security-solution` needed some parameters/values to achieve the parity in the functionality as compared to the current alert Table. --------- Co-authored-by: Xavier Mouligneau <[email protected]> Co-authored-by: kibanamachine <[email protected]>
elastic · Feb 22, 2023 · fe04a4c · fe04a4c
1 parent 3c262bb
commit fe04a4c
Show file tree

Hide file tree

Showing 126 changed files with 4,503 additions and 1,007 deletions.
diff --git a/x-pack/plugins/cases/public/components/case_view/components/case_view_alerts.test.tsx b/x-pack/plugins/cases/public/components/case_view/components/case_view_alerts.test.tsx
@@ -45,7 +45,7 @@ describe('Case View Page activity tab', () => {
     await waitFor(async () => {
       expect(getAlertsStateTableMock).toHaveBeenCalledWith({
         alertsTableConfigurationRegistry: expect.anything(),
-        configurationId: 'securitySolution',
+        configurationId: 'securitySolution-case',
         featureIds: ['siem', 'observability'],
         id: 'case-details-alerts-securitySolution',
         query: {

diff --git a/x-pack/plugins/cases/public/components/case_view/components/case_view_alerts.tsx b/x-pack/plugins/cases/public/components/case_view/components/case_view_alerts.tsx
@@ -39,9 +39,12 @@ export const CaseViewAlerts = ({ caseData }: CaseViewAlertsProps) => {
   const { isLoading: isLoadingAlertFeatureIds, data: alertFeatureIds } =
     useGetFeatureIds(alertRegistrationContexts);
 
+  const configId =
+    caseData.owner === SECURITY_SOLUTION_OWNER ? `${caseData.owner}-case` : caseData.owner;
+
   const alertStateProps = {
     alertsTableConfigurationRegistry: triggersActionsUi.alertsTableConfigurationRegistry,
-    configurationId: caseData.owner,
+    configurationId: configId,
     id: `case-details-alerts-${caseData.owner}`,
     flyoutSize: (alertFeatureIds?.includes('siem') ? 'm' : 's') as EuiFlyoutSize,
     featureIds: alertFeatureIds ?? [],

diff --git a/x-pack/plugins/observability/public/config/register_alerts_table_configuration.tsx b/x-pack/plugins/observability/public/config/register_alerts_table_configuration.tsx
@@ -8,8 +8,9 @@
 import type { GetRenderCellValue } from '@kbn/triggers-actions-ui-plugin/public';
 import { TIMESTAMP } from '@kbn/rule-data-utils';
 import { SortOrder } from '@elastic/elasticsearch/lib/api/typesWithBodyKey';
+import { AlertsTableConfigurationRegistry } from '@kbn/triggers-actions-ui-plugin/public/types';
 import { casesFeatureId, observabilityFeatureId } from '../../common';
-import { useBulkAddToCaseActions } from '../hooks/use_alert_bulk_case_actions';
+import { useBulkAddToCaseTriggerActions } from '../hooks/use_alert_bulk_case_actions';
 import { TopAlert, useToGetInternalFlyout } from '../pages/alerts';
 import { getRenderCellValue } from '../pages/alerts/components/render_cell_value';
 import { addDisplayNames } from '../pages/alerts/containers/alerts_table/add_display_names';
@@ -21,7 +22,7 @@ import type { ConfigSchema } from '../plugin';
 const getO11yAlertsTableConfiguration = (
   observabilityRuleTypeRegistry: ObservabilityRuleTypeRegistry,
   config: ConfigSchema
-) => ({
+): AlertsTableConfigurationRegistry => ({
   id: observabilityFeatureId,
   casesFeatureId,
   columns: alertO11yColumns.map(addDisplayNames),
@@ -36,7 +37,7 @@ const getO11yAlertsTableConfiguration = (
     },
   ],
   useActionsColumn: getRowActions(observabilityRuleTypeRegistry, config),
-  useBulkActions: useBulkAddToCaseActions,
+  useBulkActions: useBulkAddToCaseTriggerActions,
   useInternalFlyout: () => {
     const { header, body, footer } = useToGetInternalFlyout(observabilityRuleTypeRegistry);
     return { header, body, footer };

diff --git a/x-pack/plugins/observability/public/hooks/use_alert_bulk_case_actions.ts b/x-pack/plugins/observability/public/hooks/use_alert_bulk_case_actions.ts
@@ -70,3 +70,12 @@ export const useBulkAddToCaseActions = ({ onClose, onSuccess }: UseAddToCaseActi
     selectCaseModal,
   ]);
 };
+
+/*
+ * Wrapper hook to support trigger actions
+ * registry props for the alert table
+ *
+ * */
+export const useBulkAddToCaseTriggerActions = () => {
+  return useBulkAddToCaseActions({});
+};
diff --git a/x-pack/plugins/security_solution/common/constants.ts b/x-pack/plugins/security_solution/common/constants.ts
@@ -12,7 +12,6 @@
  * https://mariusschulz.com/blog/literal-type-widening-in-typescript
  * Please follow this convention when adding to this file
  */
-
 export const APP_ID = 'securitySolution' as const;
 export const APP_UI_ID = 'securitySolutionUI' as const;
 export const CASES_FEATURE_ID = 'securitySolutionCases' as const;
@@ -499,3 +498,17 @@ export const DEFAULT_DETECTION_PAGE_FILTERS = [
     fieldName: 'host.name',
   },
 ];
+
+/** This local storage key stores the `Grid / Event rendered view` selection */
+export const ALERTS_TABLE_VIEW_SELECTION_KEY = 'securitySolution.alerts.table.view-selection';
+
+export const VIEW_SELECTION = {
+  gridView: 'gridView',
+  eventRenderedView: 'eventRenderedView',
+} as const;
+
+export const ALERTS_TABLE_REGISTRY_CONFIG_IDS = {
+  ALERTS_PAGE: `${APP_ID}-alerts-page`,
+  RULE_DETAILS: `${APP_ID}-rule-details`,
+  CASE: `${APP_ID}-case`,
+} as const;
diff --git a/x-pack/plugins/security_solution/common/types/data_table/index.ts b/x-pack/plugins/security_solution/common/types/data_table/index.ts
@@ -6,6 +6,7 @@
  */
 
 import * as runtimeTypes from 'io-ts';
+import type { VIEW_SELECTION } from '../../constants';
 
 export enum Direction {
   asc = 'asc',
@@ -33,6 +34,7 @@ export enum TableId {
   alternateTest = 'alternateTest',
   rulePreview = 'rule-preview',
   kubernetesPageSessions = 'kubernetes-page-sessions',
+  alertsOnCasePage = 'alerts-case-page',
 }
 
 const TableIdLiteralRt = runtimeTypes.union([
@@ -46,4 +48,9 @@ const TableIdLiteralRt = runtimeTypes.union([
   runtimeTypes.literal(TableId.rulePreview),
   runtimeTypes.literal(TableId.kubernetesPageSessions),
 ]);
+
 export type TableIdLiteral = runtimeTypes.TypeOf<typeof TableIdLiteralRt>;
+
+export type ViewSelectionTypes = keyof typeof VIEW_SELECTION;
+
+export type ViewSelection = typeof VIEW_SELECTION[ViewSelectionTypes];
diff --git a/x-pack/plugins/security_solution/cypress/ccs_e2e/detection_alerts/alerts_details.cy.ts b/x-pack/plugins/security_solution/cypress/ccs_e2e/detection_alerts/alerts_details.cy.ts
@@ -7,7 +7,7 @@
 
 import { JSON_TEXT } from '../../screens/alerts_details';
 
-import { expandFirstAlert, waitForAlertsPanelToBeLoaded } from '../../tasks/alerts';
+import { expandFirstAlert, waitForAlerts } from '../../tasks/alerts';
 import { openJsonView } from '../../tasks/alerts_details';
 import { createCustomRuleEnabled } from '../../tasks/api_calls/rules';
 import { cleanKibana } from '../../tasks/common';
@@ -25,7 +25,7 @@ describe('Alert details with unmapped fields', () => {
     esArchiverCCSLoad('unmapped_fields');
     createCustomRuleEnabled(getUnmappedCCSRule());
     visitWithoutDateRange(ALERTS_URL);
-    waitForAlertsPanelToBeLoaded();
+    waitForAlerts();
     expandFirstAlert();
   });
 

diff --git a/...ck/plugins/security_solution/cypress/ccs_e2e/detection_rules/event_correlation_rule.cy.ts b/...ck/plugins/security_solution/cypress/ccs_e2e/detection_rules/event_correlation_rule.cy.ts
@@ -8,7 +8,7 @@
 import { esArchiverCCSLoad } from '../../tasks/es_archiver';
 import { getCCSEqlRule } from '../../objects/rule';
 
-import { ALERT_DATA_GRID, NUMBER_OF_ALERTS } from '../../screens/alerts';
+import { ALERTS_COUNT, ALERT_DATA_GRID } from '../../screens/alerts';
 
 import {
   filterByCustomRules,
@@ -41,7 +41,7 @@ describe('Detection rules', function () {
     waitForTheRuleToBeExecuted();
     waitForAlertsToPopulate();
 
-    cy.get(NUMBER_OF_ALERTS).should('have.text', expectedNumberOfAlerts);
+    cy.get(ALERTS_COUNT).should('have.text', expectedNumberOfAlerts);
     cy.get(ALERT_DATA_GRID)
       .invoke('text')
       .then((text) => {

diff --git a/x-pack/plugins/security_solution/cypress/e2e/data_sources/create_runtime_field.cy.ts b/x-pack/plugins/security_solution/cypress/e2e/data_sources/create_runtime_field.cy.ts
@@ -16,34 +16,39 @@ import { createCustomRuleEnabled } from '../../tasks/api_calls/rules';
 import { getNewRule } from '../../objects/rule';
 import { refreshPage } from '../../tasks/security_header';
 import { waitForAlertsToPopulate } from '../../tasks/create_new_rule';
-import { openEventsViewerFieldsBrowser } from '../../tasks/hosts/events';
-import { assertFieldDisplayed, createField } from '../../tasks/create_runtime_field';
+import { createField } from '../../tasks/create_runtime_field';
+import { openAlertsFieldBrowser } from '../../tasks/alerts';
+import { deleteRuntimeField } from '../../tasks/sourcerer';
+import { GET_DATA_GRID_HEADER } from '../../screens/common/data_grid';
+import { GET_TIMELINE_HEADER } from '../../screens/timeline';
+
+const alertRunTimeField = 'field.name.alert.page';
+const timelineRuntimeField = 'field.name.timeline';
 
 describe('Create DataView runtime field', () => {
   before(() => {
+    deleteRuntimeField('security-solution-default', alertRunTimeField);
+    deleteRuntimeField('security-solution-default', timelineRuntimeField);
     login();
   });
 
   it('adds field to alert table', () => {
-    const fieldName = 'field.name.alert.page';
     visit(ALERTS_URL);
     createCustomRuleEnabled(getNewRule());
     refreshPage();
     waitForAlertsToPopulate();
-    openEventsViewerFieldsBrowser();
-
-    createField(fieldName);
-    assertFieldDisplayed(fieldName, 'alerts');
+    openAlertsFieldBrowser();
+    createField(alertRunTimeField);
+    cy.get(GET_DATA_GRID_HEADER(alertRunTimeField)).should('exist');
   });
 
   it('adds field to timeline', () => {
-    const fieldName = 'field.name.timeline';
     visit(HOSTS_URL);
     openTimelineUsingToggle();
     populateTimeline();
     openTimelineFieldsBrowser();
 
-    createField(fieldName);
-    assertFieldDisplayed(fieldName);
+    createField(timelineRuntimeField);
+    cy.get(GET_TIMELINE_HEADER(timelineRuntimeField)).should('exist');
   });
 });
diff --git a/x-pack/plugins/security_solution/cypress/e2e/detection_alert_details/navigation.cy.ts b/x-pack/plugins/security_solution/cypress/e2e/detection_alert_details/navigation.cy.ts
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { expandFirstAlert, waitForAlertsPanelToBeLoaded } from '../../tasks/alerts';
+import { expandFirstAlert, waitForAlerts } from '../../tasks/alerts';
 import { createCustomRuleEnabled } from '../../tasks/api_calls/rules';
 import { cleanKibana } from '../../tasks/common';
 import { login, visit } from '../../tasks/login';
@@ -35,7 +35,7 @@ describe('Alert Details Page Navigation', () => {
     describe('context menu', () => {
       beforeEach(() => {
         visit(ALERTS_URL);
-        waitForAlertsPanelToBeLoaded();
+        waitForAlerts();
       });
 
       it('should navigate to the details page from the alert context menu', () => {
@@ -55,7 +55,7 @@ describe('Alert Details Page Navigation', () => {
     describe('flyout', () => {
       beforeEach(() => {
         visit(ALERTS_URL);
-        waitForAlertsPanelToBeLoaded();
+        waitForAlerts();
       });
 
       it('should navigate to the details page from the alert flyout', () => {

diff --git a/x-pack/plugins/security_solution/cypress/e2e/detection_alerts/alerts_cell_actions.cy.ts b/x-pack/plugins/security_solution/cypress/e2e/detection_alerts/alerts_cell_actions.cy.ts
@@ -51,7 +51,7 @@ describe('Alerts cell actions', () => {
           .first()
           .invoke('text')
           .then((severityVal) => {
-            scrollAlertTableColumnIntoView(ALERT_TABLE_FILE_NAME_HEADER);
+            scrollAlertTableColumnIntoView(ALERT_TABLE_SEVERITY_VALUES);
             filterForAlertProperty(ALERT_TABLE_SEVERITY_VALUES, 0);
             cy.get(FILTER_BADGE)
               .first()
@@ -75,7 +75,7 @@ describe('Alerts cell actions', () => {
           .first()
           .invoke('text')
           .then((severityVal) => {
-            scrollAlertTableColumnIntoView(ALERT_TABLE_FILE_NAME_HEADER);
+            scrollAlertTableColumnIntoView(ALERT_TABLE_SEVERITY_VALUES);
             addAlertPropertyToTimeline(ALERT_TABLE_SEVERITY_VALUES, 0);
             openActiveTimeline();
             cy.get(PROVIDER_BADGE)
@@ -101,7 +101,7 @@ describe('Alerts cell actions', () => {
           .first()
           .invoke('text')
           .then(() => {
-            scrollAlertTableColumnIntoView(ALERT_TABLE_FILE_NAME_HEADER);
+            scrollAlertTableColumnIntoView(ALERT_TABLE_SEVERITY_VALUES);
             showTopNAlertProperty(ALERT_TABLE_SEVERITY_VALUES, 0);
             cy.get(SHOW_TOP_N_HEADER).first().should('have.text', `Top kibana.alert.severity`);
           });
@@ -114,7 +114,7 @@ describe('Alerts cell actions', () => {
           .first()
           .invoke('text')
           .then(() => {
-            scrollAlertTableColumnIntoView(ALERT_TABLE_FILE_NAME_HEADER);
+            scrollAlertTableColumnIntoView(ALERT_TABLE_SEVERITY_VALUES);
             cy.window().then((win) => {
               cy.stub(win, 'prompt').returns('DISABLED WINDOW PROMPT');
             });

diff --git a/x-pack/plugins/security_solution/cypress/e2e/detection_alerts/detection_page_filters.cy.ts b/x-pack/plugins/security_solution/cypress/e2e/detection_alerts/detection_page_filters.cy.ts
@@ -21,7 +21,6 @@ import { APP_ID, DEFAULT_DETECTION_PAGE_FILTERS } from '../../../common/constant
 import { formatPageFilterSearchParam } from '../../../common/utils/format_page_filter_search_param';
 import {
   markAcknowledgedFirstAlert,
-  refreshAlertPageFilter,
   resetFilters,
   selectCountTable,
   waitForAlerts,
@@ -152,7 +151,7 @@ describe.skip('Detections : Page Filters', () => {
       .then((noOfAlerts) => {
         const originalAlertCount = noOfAlerts.split(' ')[0];
         markAcknowledgedFirstAlert();
-        refreshAlertPageFilter();
+        waitForAlerts();
         cy.get(OPTION_LIST_VALUES).eq(0).click();
         cy.get(OPTION_SELECTABLE(0, 'acknowledged')).should('be.visible');
         cy.get(ALERTS_COUNT)

diff --git a/x-pack/plugins/security_solution/cypress/e2e/detection_alerts/enrichments.cy.ts b/x-pack/plugins/security_solution/cypress/e2e/detection_alerts/enrichments.cy.ts
@@ -7,12 +7,12 @@
 
 import { getNewRule } from '../../objects/rule';
 import {
-  NUMBER_OF_ALERTS,
   HOST_RISK_HEADER_COLIMN,
   USER_RISK_HEADER_COLIMN,
   HOST_RISK_COLUMN,
   USER_RISK_COLUMN,
   ACTION_COLUMN,
+  ALERTS_COUNT,
 } from '../../screens/alerts';
 import { ENRICHED_DATA_ROW } from '../../screens/alerts_details';
 import { esArchiverLoad, esArchiverUnload } from '../../tasks/es_archiver';
@@ -56,7 +56,7 @@ describe('Enrichment', () => {
     });
 
     it('Should has enrichment fields', function () {
-      cy.get(NUMBER_OF_ALERTS)
+      cy.get(ALERTS_COUNT)
         .invoke('text')
         .should('match', /^[1-9].+$/); // Any number of alerts
       cy.get(HOST_RISK_HEADER_COLIMN).contains('host.risk.calculated_level');

diff --git a/x-pack/plugins/security_solution/cypress/e2e/detection_rules/custom_query_rule.cy.ts b/x-pack/plugins/security_solution/cypress/e2e/detection_rules/custom_query_rule.cy.ts
@@ -14,7 +14,7 @@ import {
   getNewOverrideRule,
 } from '../../objects/rule';
 import { getTimeline } from '../../objects/timeline';
-import { ALERT_GRID_CELL, NUMBER_OF_ALERTS } from '../../screens/alerts';
+import { ALERTS_COUNT, ALERT_GRID_CELL } from '../../screens/alerts';
 
 import {
   CUSTOM_RULES_BTN,
@@ -229,7 +229,7 @@ describe('Custom query rules', () => {
       waitForAlertsToPopulate();
 
       cy.log('Asserting that alerts have been generated after the creation');
-      cy.get(NUMBER_OF_ALERTS)
+      cy.get(ALERTS_COUNT)
         .invoke('text')
         .should('match', /^[1-9].+$/); // Any number of alerts
       cy.get(ALERT_GRID_CELL).contains(ruleFields.ruleName);

diff --git a/...k/plugins/security_solution/cypress/e2e/detection_rules/custom_query_rule_data_view.cy.ts b/...k/plugins/security_solution/cypress/e2e/detection_rules/custom_query_rule_data_view.cy.ts
@@ -9,7 +9,7 @@ import { formatMitreAttackDescription } from '../../helpers/rules';
 import type { Mitre } from '../../objects/rule';
 import { getDataViewRule } from '../../objects/rule';
 import type { CompleteTimeline } from '../../objects/timeline';
-import { ALERT_GRID_CELL, NUMBER_OF_ALERTS } from '../../screens/alerts';
+import { ALERTS_COUNT, ALERT_GRID_CELL } from '../../screens/alerts';
 
 import {
   CUSTOM_RULES_BTN,
@@ -160,7 +160,7 @@ describe('Custom query rules', () => {
       waitForTheRuleToBeExecuted();
       waitForAlertsToPopulate();
 
-      cy.get(NUMBER_OF_ALERTS)
+      cy.get(ALERTS_COUNT)
         .invoke('text')
         .should('match', /^[1-9].+$/);
       cy.get(ALERT_GRID_CELL).contains(this.rule.name);

diff --git a/x-pack/plugins/security_solution/cypress/e2e/detection_rules/event_correlation_rule.cy.ts b/x-pack/plugins/security_solution/cypress/e2e/detection_rules/event_correlation_rule.cy.ts
@@ -9,7 +9,7 @@ import { formatMitreAttackDescription } from '../../helpers/rules';
 import type { Mitre } from '../../objects/rule';
 import { getEqlRule, getEqlSequenceRule, getIndexPatterns } from '../../objects/rule';
 
-import { ALERT_DATA_GRID, NUMBER_OF_ALERTS } from '../../screens/alerts';
+import { ALERTS_COUNT, ALERT_DATA_GRID } from '../../screens/alerts';
 import {
   CUSTOM_RULES_BTN,
   RISK_SCORE,
@@ -148,7 +148,7 @@ describe('EQL rules', () => {
       waitForTheRuleToBeExecuted();
       waitForAlertsToPopulate();
 
-      cy.get(NUMBER_OF_ALERTS).should('have.text', expectedNumberOfAlerts);
+      cy.get(ALERTS_COUNT).should('have.text', expectedNumberOfAlerts);
       cy.get(ALERT_DATA_GRID)
         .invoke('text')
         .then((text) => {
@@ -192,7 +192,7 @@ describe('EQL rules', () => {
       waitForTheRuleToBeExecuted();
       waitForAlertsToPopulate();
 
-      cy.get(NUMBER_OF_ALERTS).should('have.text', expectedNumberOfSequenceAlerts);
+      cy.get(ALERTS_COUNT).should('have.text', expectedNumberOfSequenceAlerts);
       cy.get(ALERT_DATA_GRID)
         .invoke('text')
         .then((text) => {

diff --git a/x-pack/plugins/security_solution/cypress/e2e/detection_rules/indicator_match_rule.cy.ts b/x-pack/plugins/security_solution/cypress/e2e/detection_rules/indicator_match_rule.cy.ts
@@ -17,7 +17,7 @@ import {
   ALERT_RULE_NAME,
   ALERT_RISK_SCORE,
   ALERT_SEVERITY,
-  NUMBER_OF_ALERTS,
+  ALERTS_COUNT,
 } from '../../screens/alerts';
 import {
   CUSTOM_RULES_BTN,
@@ -492,7 +492,7 @@ describe('indicator match', () => {
         waitForTheRuleToBeExecuted();
         waitForAlertsToPopulate();
 
-        cy.get(NUMBER_OF_ALERTS).should('have.text', expectedNumberOfAlerts);
+        cy.get(ALERTS_COUNT).should('have.text', expectedNumberOfAlerts);
         cy.get(ALERT_RULE_NAME).first().should('have.text', rule.name);
         cy.get(ALERT_SEVERITY).first().should('have.text', rule.severity?.toLowerCase());
         cy.get(ALERT_RISK_SCORE).first().should('have.text', rule.riskScore);