[Bug][Investigations][Timeline] - Fix row highlighting & default enab…

…le row renderers (#188388) ## Summary This PR accomplishes the following 2 things. 1. It fixes row highlighting for the default table as the timeline styles were only being applied when `renderCustomGridBody` was being used. https://github.com/user-attachments/assets/27fdfae2-729f-46d3-b1f3-691e768c871a 2. It default enables the Row Renderers for the `investigateInTimeline` and timeline template workflows. https://github.com/user-attachments/assets/f074eaf7-3b8e-4f07-9a5d-face2b9f94a2 --------- Co-authored-by: Jatin Kathuria <[email protected]> Co-authored-by: kibanamachine <[email protected]> (cherry picked from commit 5efc0f6)
elastic · Jul 17, 2024 · 04f37bf · 04f37bf
1 parent db977ee
commit 04f37bf
Show file tree

Hide file tree

Showing 16 changed files with 180 additions and 82 deletions.
diff --git a/x-pack/plugins/security_solution/public/detections/components/alerts_table/actions.test.tsx b/x-pack/plugins/security_solution/public/detections/components/alerts_table/actions.test.tsx
@@ -100,6 +100,7 @@ const getExpectedcreateTimelineParam = (
   notes: null,
   timeline: {
     ...timelineDefaults,
+    excludedRowRendererIds: [],
     dataProviders,
     id: TimelineId.active,
     indexNames: [],
@@ -379,7 +380,7 @@ describe('alert actions', () => {
             },
             eventIdToNoteIds: {},
             eventType: 'all',
-            excludedRowRendererIds: defaultTimelineProps.timeline.excludedRowRendererIds,
+            excludedRowRendererIds: [],
             expandedDetail: {},
             filters: [
               {
@@ -549,10 +550,13 @@ describe('alert actions', () => {
           getExceptionFilter: mockGetExceptionFilter,
         });
 
+        const expectedTimelineProps = structuredClone(defaultTimelineProps);
+        expectedTimelineProps.timeline.excludedRowRendererIds = [];
+
         expect(updateTimelineIsLoading).not.toHaveBeenCalled();
         expect(mockGetExceptionFilter).not.toHaveBeenCalled();
         expect(createTimeline).toHaveBeenCalledTimes(1);
-        expect(createTimeline).toHaveBeenCalledWith(defaultTimelineProps);
+        expect(createTimeline).toHaveBeenCalledWith(expectedTimelineProps);
       });
     });
 
@@ -576,10 +580,13 @@ describe('alert actions', () => {
           getExceptionFilter: mockGetExceptionFilter,
         });
 
+        const expectedTimelineProps = structuredClone(defaultTimelineProps);
+        expectedTimelineProps.timeline.excludedRowRendererIds = [];
+
         expect(updateTimelineIsLoading).not.toHaveBeenCalled();
         expect(mockGetExceptionFilter).not.toHaveBeenCalled();
         expect(createTimeline).toHaveBeenCalledTimes(1);
-        expect(createTimeline).toHaveBeenCalledWith(defaultTimelineProps);
+        expect(createTimeline).toHaveBeenCalledWith(expectedTimelineProps);
       });
     });
 
@@ -614,6 +621,7 @@ describe('alert actions', () => {
           ...defaultTimelineProps,
           timeline: {
             ...defaultTimelineProps.timeline,
+            excludedRowRendererIds: [],
             resolveTimelineConfig: undefined,
             dataProviders: [
               {
@@ -642,6 +650,9 @@ describe('alert actions', () => {
           },
         };
 
+        const expectedTimelineProps = structuredClone(defaultTimelineProps);
+        expectedTimelineProps.timeline.excludedRowRendererIds = [];
+
         await sendAlertToTimelineAction({
           createTimeline,
           ecsData: ecsDataMock,
@@ -653,7 +664,7 @@ describe('alert actions', () => {
         expect(updateTimelineIsLoading).not.toHaveBeenCalled();
         expect(mockGetExceptionFilter).not.toHaveBeenCalled();
         expect(createTimeline).toHaveBeenCalledTimes(1);
-        expect(createTimeline).toHaveBeenCalledWith(defaultTimelineProps);
+        expect(createTimeline).toHaveBeenCalledWith(expectedTimelineProps);
       });
     });
 
@@ -737,6 +748,7 @@ describe('alert actions', () => {
           ...defaultTimelineProps,
           timeline: {
             ...defaultTimelineProps.timeline,
+            excludedRowRendererIds: [],
             dataProviders: [
               {
                 and: [],
@@ -890,6 +902,7 @@ describe('alert actions', () => {
           ...defaultTimelineProps,
           timeline: {
             ...defaultTimelineProps.timeline,
+            excludedRowRendererIds: [],
             columns: mockGetOneTimelineResult.columns,
             defaultColumns: defaultUdtHeaders,
             dataProviders: [],
@@ -1043,6 +1056,7 @@ describe('alert actions', () => {
           ...defaultTimelineProps,
           timeline: {
             ...defaultTimelineProps.timeline,
+            excludedRowRendererIds: [],
             filters: [
               {
                 meta: {

diff --git a/x-pack/plugins/security_solution/public/detections/components/alerts_table/actions.tsx b/x-pack/plugins/security_solution/public/detections/components/alerts_table/actions.tsx
@@ -499,6 +499,7 @@ const createThresholdTimeline = async (
       notes: null,
       timeline: {
         ...timelineDefaults,
+        excludedRowRendererIds: [],
         columns: templateValues.columns ?? timelineDefaults.columns,
         description: `_id: ${alertDoc._id}`,
         filters: allFilters,
@@ -655,6 +656,7 @@ const createNewTermsTimeline = async (
       timeline: {
         ...timelineDefaults,
         columns: templateValues.columns ?? timelineDefaults.columns,
+        excludedRowRendererIds: [],
         description: `_id: ${alertDoc._id}`,
         filters: allFilters,
         dataProviders: templateValues.dataProviders ?? dataProviders,
@@ -824,6 +826,7 @@ const createSuppressedTimeline = async (
       notes: null,
       timeline: {
         ...timelineDefaults,
+        excludedRowRendererIds: [],
         columns: templateValues.columns ?? timelineDefaults.columns,
         description: `_id: ${alertDoc._id}`,
         filters: allFilters,
@@ -906,6 +909,7 @@ export const sendBulkEventsToTimelineAction = async (
     notes: null,
     timeline: {
       ...timelineDefaults,
+      excludedRowRendererIds: [],
       dataProviders,
       id: TimelineId.active,
       indexNames: [],
@@ -1050,6 +1054,7 @@ export const sendAlertToTimelineAction = async ({
             from,
             timeline: {
               ...timeline,
+              excludedRowRendererIds: [],
               title: '',
               timelineType: TimelineType.default,
               templateTimelineId: null,
@@ -1126,6 +1131,7 @@ export const sendAlertToTimelineAction = async ({
       notes: null,
       timeline: {
         ...timelineDefaults,
+        excludedRowRendererIds: [],
         dataProviders,
         id: TimelineId.active,
         indexNames: [],

diff --git a/...ublic/detections/components/alerts_table/timeline_actions/use_investigate_in_timeline.tsx b/...ublic/detections/components/alerts_table/timeline_actions/use_investigate_in_timeline.tsx
@@ -163,9 +163,10 @@ export const useInvestigateInTimeline = ({
           columns: !unifiedComponentsInTimelineDisabled ? defaultUdtHeaders : defaultHeaders,
           indexNames: timeline.indexNames ?? [],
           show: true,
-          excludedRowRendererIds: !unifiedComponentsInTimelineDisabled
-            ? timeline.excludedRowRendererIds
-            : [],
+          excludedRowRendererIds:
+            !unifiedComponentsInTimelineDisabled && timeline.timelineType !== TimelineType.template
+              ? timeline.excludedRowRendererIds
+              : [],
         },
         to: toTimeline,
         ruleNote,

diff --git a/x-pack/plugins/security_solution/public/timelines/components/new_timeline/index.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/new_timeline/index.test.tsx
@@ -94,7 +94,7 @@ describe('NewTimelineButton', () => {
         show: true,
         timelineType: TimelineType.template,
         updated: undefined,
-        excludedRowRendererIds: [...Object.values(RowRendererId)],
+        excludedRowRendererIds: [],
       });
     });
   });

diff --git a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/helpers.test.ts b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/helpers.test.ts
@@ -350,6 +350,7 @@ describe('helpers', () => {
       expect(newTimeline).toEqual({
         ...defaultTimeline,
         columns: defaultUdtHeaders,
+        excludedRowRendererIds: [],
       });
     });
 
@@ -500,6 +501,7 @@ describe('helpers', () => {
         timelineType: TimelineType.template,
         title: 'Awesome Timeline',
         columns: defaultUdtHeaders,
+        excludedRowRendererIds: [],
       });
     });
 

diff --git a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/helpers.ts b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/helpers.ts
@@ -22,8 +22,13 @@ import type {
   PinnedEvent,
   Note,
 } from '../../../../common/api/timeline';
+import {
+  RowRendererId,
+  DataProviderType,
+  TimelineStatus,
+  TimelineType,
+} from '../../../../common/api/timeline';
 import { TimelineId, TimelineTabs } from '../../../../common/types/timeline';
-import { DataProviderType, TimelineStatus, TimelineType } from '../../../../common/api/timeline';
 import { useUpdateTimeline } from './use_update_timeline';
 
 import type { TimelineModel } from '../../store/model';
@@ -256,6 +261,7 @@ export const defaultTimelineToTimelineModel = (
           }
         : timeline.dateRange,
     dataProviders: getDataProviders(duplicate, timeline.dataProviders, timelineType),
+    excludedRowRendererIds: isTemplate ? [] : Object.keys(RowRendererId),
     eventIdToNoteIds: setEventIdToNoteIds(duplicate, timeline.eventIdToNoteIds),
     filters: timeline.filters != null ? timeline.filters.map(setTimelineFilters) : [],
     isFavorite: duplicate
@@ -358,9 +364,10 @@ export const useQueryTimelineById = () => {
           show: openTimeline,
           initialized: true,
           savedSearchId: savedSearchId ?? null,
-          excludedRowRendererIds: !unifiedComponentsInTimelineDisabled
-            ? timelineDefaults.excludedRowRendererIds
-            : [],
+          excludedRowRendererIds:
+            !unifiedComponentsInTimelineDisabled && timelineType !== TimelineType.template
+              ? timelineDefaults.excludedRowRendererIds
+              : [],
         },
       });
       resetDiscoverAppState();

diff --git a/...ines/components/timeline/unified_components/data_table/custom_timeline_data_grid_body.tsx b/...ines/components/timeline/unified_components/data_table/custom_timeline_data_grid_body.tsx
@@ -15,7 +15,7 @@ import styled from 'styled-components';
 import type { RowRenderer } from '../../../../../../common/types';
 import { TIMELINE_EVENT_DETAIL_ROW_ID } from '../../body/constants';
 import { useStatefulRowRenderer } from '../../body/events/stateful_row_renderer/use_stateful_row_renderer';
-import { useGetEventTypeRowClassName } from './use_get_event_type_row_classname';
+import { getEventTypeRowClassName } from './get_event_type_row_classname';
 
 export type CustomTimelineDataGridBodyProps = EuiDataGridCustomBodyProps & {
   rows: Array<DataTableRecord & TimelineItem> | undefined;
@@ -181,7 +181,7 @@ const CustomDataGridSingleRow = memo(function CustomDataGridSingleRow(
         : {},
     [canShowRowRenderer]
   );
-  const eventTypeRowClassName = useGetEventTypeRowClassName(rowData.ecs);
+  const eventTypeRowClassName = useMemo(() => getEventTypeRowClassName(rowData.ecs), [rowData.ecs]);
 
   return (
     <CustomGridRow

diff --git a/.../use_get_event_type_row_classname.test.ts → ...able/get_event_type_row_classname.test.ts b/.../use_get_event_type_row_classname.test.ts → ...able/get_event_type_row_classname.test.ts
@@ -4,8 +4,7 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
-import { useGetEventTypeRowClassName } from './use_get_event_type_row_classname';
-import { renderHook } from '@testing-library/react-hooks';
+import { getEventTypeRowClassName } from './get_event_type_row_classname';
 
 const mockOddEqlEvent = {
   _id: 'test-eql-alert',
@@ -29,29 +28,29 @@ const mockEvent = {
   _id: 'basic-event',
 };
 
-describe('useGetEventTypeRowClassName', () => {
+describe('getEventTypeRowClassName', () => {
   it('should return rawEvent', () => {
-    const { result } = renderHook(() => useGetEventTypeRowClassName(mockEvent));
-    expect(result.current).toEqual('rawEvent');
+    const result = getEventTypeRowClassName(mockEvent);
+    expect(result).toEqual('rawEvent');
   });
 
   it('should contain eqlSequence', () => {
-    const { result } = renderHook(() => useGetEventTypeRowClassName(mockBuildingBlockAlert));
-    expect(result.current).toContain('eqlSequence');
+    const result = getEventTypeRowClassName(mockBuildingBlockAlert);
+    expect(result).toContain('eqlSequence');
   });
 
   it('should contain buildingBlockType', () => {
-    const { result } = renderHook(() => useGetEventTypeRowClassName(mockBuildingBlockAlert));
-    expect(result.current).toContain('buildingBlockType');
+    const result = getEventTypeRowClassName(mockBuildingBlockAlert);
+    expect(result).toContain('buildingBlockType');
   });
 
   it('should return eqlNonSequence', () => {
-    const { result } = renderHook(() => useGetEventTypeRowClassName(mockOddEqlEvent));
-    expect(result.current).toEqual('eqlNonSequence');
+    const result = getEventTypeRowClassName(mockOddEqlEvent);
+    expect(result).toEqual('eqlNonSequence');
   });
 
   it('should return nonRawEvent', () => {
-    const { result } = renderHook(() => useGetEventTypeRowClassName(mockAlert));
-    expect(result.current).toEqual('nonRawEvent');
+    const result = getEventTypeRowClassName(mockAlert);
+    expect(result).toEqual('nonRawEvent');
   });
 });
diff --git a/...melines/components/timeline/unified_components/data_table/get_event_type_row_classname.ts b/...melines/components/timeline/unified_components/data_table/get_event_type_row_classname.ts
@@ -0,0 +1,25 @@
+/*
+ * 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 type { TimelineItem } from '@kbn/timelines-plugin/common';
+import { getEventType, isEvenEqlSequence, isEventBuildingBlockType } from '../../body/helpers';
+
+export const getEventTypeRowClassName = (ecsData: TimelineItem['ecs']) => {
+  const eventType = getEventType(ecsData);
+  const eventTypeClassName =
+    eventType === 'raw'
+      ? 'rawEvent'
+      : eventType === 'eql'
+      ? isEvenEqlSequence(ecsData)
+        ? 'eqlSequence'
+        : 'eqlNonSequence'
+      : 'nonRawEvent';
+
+  const buildingBlockTypeClassName = isEventBuildingBlockType(ecsData) ? 'buildingBlockType' : '';
+
+  return `${eventTypeClassName} ${buildingBlockTypeClassName}`.trim();
+};
diff --git a/...ity_solution/public/timelines/components/timeline/unified_components/data_table/index.tsx b/...ity_solution/public/timelines/components/timeline/unified_components/data_table/index.tsx
@@ -161,7 +161,7 @@ export const TimelineDataTableComponent: React.FC<DataTableProps> = memo(
       selectTimelineById(state, timelineId)
     );
 
-    const tableRows = useMemo(
+    const { tableRows, tableStylesOverride } = useMemo(
       () => transformTimelineItemToUnifiedRows({ events, dataView }),
       [events, dataView]
     );
@@ -424,9 +424,10 @@ export const TimelineDataTableComponent: React.FC<DataTableProps> = memo(
           <UnifiedTimelineGlobalStyles />
           <DataGridMemoized
             ariaLabelledBy="timelineDocumentsAriaLabel"
-            className={'udtTimeline'}
+            className="udtTimeline"
             columns={columnIds}
             expandedDoc={expandedDoc}
+            gridStyleOverride={tableStylesOverride}
             dataView={dataView}
             showColumnTokens={true}
             loadingState={dataLoadingState}

diff --git a/...nes/components/timeline/unified_components/data_table/use_get_event_type_row_classname.ts b/...nes/components/timeline/unified_components/data_table/use_get_event_type_row_classname.ts