diff --git a/x-pack/plugins/security_solution/public/common/mock/global_state.ts b/x-pack/plugins/security_solution/public/common/mock/global_state.ts index 7b399e8848c78..e548df40ee097 100644 --- a/x-pack/plugins/security_solution/public/common/mock/global_state.ts +++ b/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, diff --git a/x-pack/plugins/security_solution/public/common/mock/timeline_results.ts b/x-pack/plugins/security_solution/public/common/mock/timeline_results.ts index 427285c5f9233..0e54fab716968 100644 --- a/x-pack/plugins/security_solution/public/common/mock/timeline_results.ts +++ b/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[] = [ 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 index 3d284b89f0745..f1e4508bdf8bb 100644 --- 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 @@ -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', diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.tsx index 6a3552e78ecd2..34728c161698e 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.tsx @@ -140,7 +140,7 @@ export const TimelineDataTableComponent: React.FC = 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 = 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 ( @@ -369,6 +377,9 @@ export const TimelineDataTableComponent: React.FC = memo( columns={columnIds} expandedDoc={expandedDoc} gridStyleOverride={tableStylesOverride} + showDensitySelector={true} + dataGridDensityState={density} + onUpdateDataGridDensity={onUpdateDensity} dataView={dataView} showColumnTokens={true} loadingState={dataLoadingState} diff --git a/x-pack/plugins/security_solution/public/timelines/store/actions.ts b/x-pack/plugins/security_solution/public/timelines/store/actions.ts index 2517b44d2daae..9dd280c7394d1 100644 --- a/x-pack/plugins/security_solution/public/timelines/store/actions.ts +++ b/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'); diff --git a/x-pack/plugins/security_solution/public/timelines/store/defaults.ts b/x-pack/plugins/security_solution/public/timelines/store/defaults.ts index dd9b811e144e8..7101d40d9b8a8 100644 --- a/x-pack/plugins/security_solution/public/timelines/store/defaults.ts +++ b/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) => ({ diff --git a/x-pack/plugins/security_solution/public/timelines/store/helpers.test.ts b/x-pack/plugins/security_solution/public/timelines/store/helpers.test.ts index 4503d1026d7c8..55d51325abd3d 100644 --- a/x-pack/plugins/security_solution/public/timelines/store/helpers.test.ts +++ b/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 }, diff --git a/x-pack/plugins/security_solution/public/timelines/store/model.ts b/x-pack/plugins/security_solution/public/timelines/store/model.ts index 4061276204668..ae6f8e8937480 100644 --- a/x-pack/plugins/security_solution/public/timelines/store/model.ts +++ b/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< diff --git a/x-pack/plugins/security_solution/public/timelines/store/reducer.ts b/x-pack/plugins/security_solution/public/timelines/store/reducer.ts index ba93b512136c8..bae1ae52d99d6 100644 --- a/x-pack/plugins/security_solution/public/timelines/store/reducer.ts +++ b/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: {