add density configuration to timeline

x-pack/plugins/security_solution/public/common/mock/global_state.ts

@@ -396,6 +396,7 @@ export const mockGlobalState: State = {
         savedSearch: null,
         isDataProviderVisible: true,
         sampleSize: 500,
+        density: undefined,
       },
     },
     insertTimeline: null,

x-pack/plugins/security_solution/public/common/mock/timeline_results.ts

@@ -1934,6 +1934,7 @@ export const mockTimelineModel: TimelineModel = {
   savedSearch: null,
   isDataProviderVisible: false,
   sampleSize: 500,
+  density: undefined,
 };
 
 export const mockDataTableModel: DataTableModel = {
@@ -2124,6 +2125,7 @@ export const defaultTimelineProps: CreateTimelineProps = {
   notes: null,
   ruleNote: '# this is some markdown documentation',
   ruleAuthor: ['elastic'],
+  density: undefined,
 };
 
 export const mockTimelineDetails: TimelineEventsDetailsItem[] = [

x-pack/plugins/security_solution/public/detections/components/alerts_table/actions.test.tsx

@@ -451,6 +451,7 @@ describe('alert actions', () => {
             isDataProviderVisible: false,
             rowHeight: 3,
             sampleSize: 500,
+            density: undefined,
           },
           to: '2018-11-05T19:03:25.937Z',
           ruleNote: '# this is some markdown documentation',

x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.tsx

@@ -140,7 +140,7 @@ export const TimelineDataTableComponent: React.FC<DataTableProps> = memo(
 
     const showTimeCol = useMemo(() => !!dataView && !!dataView.timeFieldName, [dataView]);
 
-    const { rowHeight, sampleSize, excludedRowRendererIds } = useSelector((state: State) =>
+    const { rowHeight, sampleSize, density, excludedRowRendererIds } = useSelector((state: State) =>
       selectTimelineById(state, timelineId)
     );
 
@@ -355,6 +355,14 @@ export const TimelineDataTableComponent: React.FC<DataTableProps> = memo(
       return enabledRowRenderers.length > 0 ? trailingControlColumns : undefined;
     }, [enabledRowRenderers.length, trailingControlColumns]);
 
+
+    const onUpdateDensity = useCallback(
+      (density: DataGridDensity) => {
+        dispatch(timelineActions.updateDensity({ id: timelineId, density: density }));
+      },
+      [dispatch, timelineId]
+    );
+
     return (
       <StatefulEventContext.Provider value={activeStatefulEventContext}>
         <StyledTimelineUnifiedDataTable>
@@ -369,6 +377,9 @@ export const TimelineDataTableComponent: React.FC<DataTableProps> = memo(
             columns={columnIds}
             expandedDoc={expandedDoc}
             gridStyleOverride={tableStylesOverride}
+            showDensitySelector={true}
+            dataGridDensityState={density}
+            onUpdateDataGridDensity={onUpdateDensity}
             dataView={dataView}
             showColumnTokens={true}
             loadingState={dataLoadingState}

x-pack/plugins/security_solution/public/timelines/store/actions.ts

@@ -30,6 +30,7 @@ import type {
 } from '../../../common/types/timeline';
 import type { DataProviderType, RowRendererId } from '../../../common/api/timeline';
 import type { ResolveTimelineConfig } from '../components/open_timeline/types';
+import { DataGridDensity } from '@kbn/unified-data-table';
 
 const actionCreator = actionCreatorFactory('x-pack/security_solution/local/timeline');
 
@@ -307,4 +308,9 @@ export const updateSampleSize = actionCreator<{
 export const setConfirmingNoteId = actionCreator<{
   id: string;
   confirmingNoteId: string | null | undefined;
-}>('SET_CONFIRMING_NOTE_ID');
+}>('SET_CONFIRMIxwG_NOTE_ID');
+
+export const updateDensity = actionCreator<{
+  id: string;
+  density: DataGridDensity;
+}>('UPDATE_DENSITY');

x-pack/plugins/security_solution/public/timelines/store/defaults.ts

@@ -106,6 +106,7 @@ export const timelineDefaults: SubsetTimelineModel &
   isDataProviderVisible: false,
   sampleSize: 500,
   rowHeight: 3,
+  density: undefined,
 };
 
 export const getTimelineManageDefaults = (id: string) => ({

x-pack/plugins/security_solution/public/timelines/store/helpers.test.ts

@@ -137,6 +137,7 @@ const basicTimeline: TimelineModel = {
   savedSearch: null,
   isDataProviderVisible: true,
   sampleSize: 500,
+  density: undefined,
 };
 const timelineByIdMock: TimelineById = {
   foo: { ...basicTimeline },

x-pack/plugins/security_solution/public/timelines/store/model.ts

@@ -7,6 +7,7 @@
 
 import type { Filter } from '@kbn/es-query';
 import type { SavedSearch } from '@kbn/saved-search-plugin/common';
+import { DataGridDensity } from '@kbn/unified-data-table';
 import type { SessionViewConfig } from '../../../common/types';
 import type {
   EqlOptionsSelected,
@@ -144,6 +145,8 @@ export interface TimelineModel {
   sampleSize: number;
   /** the note id pending deletion */
   confirmingNoteId?: string | null;
+  /** Density configuration of the table */
+  density?: DataGridDensity;
 }
 
 export type SubsetTimelineModel = Readonly<

x-pack/plugins/security_solution/public/timelines/store/reducer.ts

@@ -66,6 +66,7 @@ import {
   updateColumnWidth,
   setConfirmingNoteId,
   deleteNoteFromEvent,
+  updateDensity,
 } from './actions';
 
 import {
@@ -105,6 +106,7 @@ import {
   updateTimelinePerPageOptions,
   updateTimelineItemsPerPage,
   updateTimelineColumnWidth,
+
 } from './helpers';
 
 import type { TimelineState } from './types';
@@ -589,6 +591,16 @@ export const timelineReducer = reducerWithInitialState(initialTimelineState)
       },
     },
   }))
+  .case(updateDensity, (state, { id, density }) => ({
+    ...state,
+    timelineById: {
+      ...state.timelineById,
+      [id]: {
+        ...state.timelineById[id],
+        density,
+      },
+    },
+  }))
   .case(setConfirmingNoteId, (state, { id, confirmingNoteId }) => ({
     ...state,
     timelineById: {