diff --git a/x-pack/plugins/security_solution/public/detections/components/alerts_kpis/common/config.ts b/x-pack/plugins/security_solution/public/detections/components/alerts_kpis/common/config.ts index cb5a23e711974..a835628fae6cf 100644 --- a/x-pack/plugins/security_solution/public/detections/components/alerts_kpis/common/config.ts +++ b/x-pack/plugins/security_solution/public/detections/components/alerts_kpis/common/config.ts @@ -19,6 +19,9 @@ export const alertsStackByOptions: AlertsStackByOption[] = [ { text: 'signal.rule.name', value: 'signal.rule.name' }, { text: 'source.ip', value: 'source.ip' }, { text: 'user.name', value: 'user.name' }, + { text: 'process.name', value: 'process.name' }, + { text: 'file.name', value: 'file.name' }, + { text: 'hash.sha256', value: 'hash.sha256' }, ]; export const DEFAULT_STACK_BY_FIELD = 'signal.rule.name'; diff --git a/x-pack/plugins/security_solution/public/detections/components/alerts_kpis/common/types.ts b/x-pack/plugins/security_solution/public/detections/components/alerts_kpis/common/types.ts index 833c05bfc7a79..f561c3f6faa21 100644 --- a/x-pack/plugins/security_solution/public/detections/components/alerts_kpis/common/types.ts +++ b/x-pack/plugins/security_solution/public/detections/components/alerts_kpis/common/types.ts @@ -21,4 +21,7 @@ export type AlertsStackByField = | 'signal.rule.type' | 'signal.rule.name' | 'source.ip' - | 'user.name'; + | 'user.name' + | 'process.name' + | 'file.name' + | 'hash.sha256'; diff --git a/x-pack/plugins/security_solution/public/timelines/store/timeline/actions.ts b/x-pack/plugins/security_solution/public/timelines/store/timeline/actions.ts index 3750bc22ddc69..95ad6c5d44ca3 100644 --- a/x-pack/plugins/security_solution/public/timelines/store/timeline/actions.ts +++ b/x-pack/plugins/security_solution/public/timelines/store/timeline/actions.ts @@ -37,7 +37,9 @@ export const { setSelected, setTGridSelectAll, toggleDetailPanel, + updateColumnOrder, updateColumns, + updateColumnWidth, updateIsLoading, updateItemsPerPage, updateItemsPerPageOptions, diff --git a/x-pack/plugins/security_solution/public/timelines/store/timeline/epic_local_storage.test.tsx b/x-pack/plugins/security_solution/public/timelines/store/timeline/epic_local_storage.test.tsx index 01bc589393d2e..131f255b5a7a7 100644 --- a/x-pack/plugins/security_solution/public/timelines/store/timeline/epic_local_storage.test.tsx +++ b/x-pack/plugins/security_solution/public/timelines/store/timeline/epic_local_storage.test.tsx @@ -25,7 +25,9 @@ import { removeColumn, upsertColumn, applyDeltaToColumnWidth, + updateColumnOrder, updateColumns, + updateColumnWidth, updateItemsPerPage, updateSort, } from './actions'; @@ -168,4 +170,35 @@ describe('epicLocalStorage', () => { ); await waitFor(() => expect(addTimelineInStorageMock).toHaveBeenCalled()); }); + + it('persists updates to the column order to local storage', async () => { + shallow( + + + + ); + store.dispatch( + updateColumnOrder({ + columnIds: ['event.severity', '@timestamp', 'event.category'], + id: 'test', + }) + ); + await waitFor(() => expect(addTimelineInStorageMock).toHaveBeenCalled()); + }); + + it('persists updates to the column width to local storage', async () => { + shallow( + + + + ); + store.dispatch( + updateColumnWidth({ + columnId: 'event.severity', + id: 'test', + width: 123, + }) + ); + await waitFor(() => expect(addTimelineInStorageMock).toHaveBeenCalled()); + }); }); diff --git a/x-pack/plugins/security_solution/public/timelines/store/timeline/epic_local_storage.ts b/x-pack/plugins/security_solution/public/timelines/store/timeline/epic_local_storage.ts index 9a889e9ec1af8..6c4ebf91b7adf 100644 --- a/x-pack/plugins/security_solution/public/timelines/store/timeline/epic_local_storage.ts +++ b/x-pack/plugins/security_solution/public/timelines/store/timeline/epic_local_storage.ts @@ -19,6 +19,8 @@ import { applyDeltaToColumnWidth, setExcludedRowRendererIds, updateColumns, + updateColumnOrder, + updateColumnWidth, updateItemsPerPage, updateSort, } from './actions'; @@ -30,6 +32,8 @@ const timelineActionTypes = [ upsertColumn.type, applyDeltaToColumnWidth.type, updateColumns.type, + updateColumnOrder.type, + updateColumnWidth.type, updateItemsPerPage.type, updateSort.type, setExcludedRowRendererIds.type, diff --git a/x-pack/plugins/timelines/public/components/t_grid/body/column_headers/column_header.tsx b/x-pack/plugins/timelines/public/components/t_grid/body/column_headers/column_header.tsx index 033292711c5af..4e6db10cc8bce 100644 --- a/x-pack/plugins/timelines/public/components/t_grid/body/column_headers/column_header.tsx +++ b/x-pack/plugins/timelines/public/components/t_grid/body/column_headers/column_header.tsx @@ -161,8 +161,8 @@ const ColumnHeaderComponent: React.FC = ({ id: 0, items: [ { - icon: , - name: i18n.HIDE_COLUMN, + icon: , + name: i18n.REMOVE_COLUMN, onClick: () => { dispatch(tGridActions.removeColumn({ id: timelineId, columnId: header.id })); handleClosePopOverTrigger(); diff --git a/x-pack/plugins/timelines/public/components/t_grid/body/column_headers/helpers.test.tsx b/x-pack/plugins/timelines/public/components/t_grid/body/column_headers/helpers.test.tsx index 2e684b9eda989..47fcb8c8e1509 100644 --- a/x-pack/plugins/timelines/public/components/t_grid/body/column_headers/helpers.test.tsx +++ b/x-pack/plugins/timelines/public/components/t_grid/body/column_headers/helpers.test.tsx @@ -98,6 +98,7 @@ describe('helpers', () => { describe('getColumnHeaders', () => { // additional properties used by `EuiDataGrid`: const actions = { + showHide: false, showSortAsc: true, showSortDesc: true, }; diff --git a/x-pack/plugins/timelines/public/components/t_grid/body/column_headers/helpers.tsx b/x-pack/plugins/timelines/public/components/t_grid/body/column_headers/helpers.tsx index c658000e6d331..66ec3ec1c399f 100644 --- a/x-pack/plugins/timelines/public/components/t_grid/body/column_headers/helpers.tsx +++ b/x-pack/plugins/timelines/public/components/t_grid/body/column_headers/helpers.tsx @@ -27,6 +27,7 @@ import { allowSorting } from '../helpers'; const defaultActions: EuiDataGridColumnActions = { showSortAsc: true, showSortDesc: true, + showHide: false, }; const getAllBrowserFields = (browserFields: BrowserFields): Array> => diff --git a/x-pack/plugins/timelines/public/components/t_grid/body/column_headers/translations.ts b/x-pack/plugins/timelines/public/components/t_grid/body/column_headers/translations.ts index 2d4fbcbd54cfa..202eef8d675b8 100644 --- a/x-pack/plugins/timelines/public/components/t_grid/body/column_headers/translations.ts +++ b/x-pack/plugins/timelines/public/components/t_grid/body/column_headers/translations.ts @@ -23,10 +23,6 @@ export const FULL_SCREEN = i18n.translate('xpack.timelines.timeline.fullScreenBu defaultMessage: 'Full screen', }); -export const HIDE_COLUMN = i18n.translate('xpack.timelines.timeline.hideColumnLabel', { - defaultMessage: 'Hide column', -}); - export const SORT_AZ = i18n.translate('xpack.timelines.timeline.sortAZLabel', { defaultMessage: 'Sort A-Z', }); diff --git a/x-pack/plugins/timelines/public/components/t_grid/body/index.test.tsx b/x-pack/plugins/timelines/public/components/t_grid/body/index.test.tsx index 50764af3c7f2f..5a7ae6e407b0b 100644 --- a/x-pack/plugins/timelines/public/components/t_grid/body/index.test.tsx +++ b/x-pack/plugins/timelines/public/components/t_grid/body/index.test.tsx @@ -6,9 +6,11 @@ */ import React from 'react'; +import { fireEvent, render, screen } from '@testing-library/react'; import { BodyComponent, StatefulBodyProps } from '.'; import { Sort } from './sort'; +import { REMOVE_COLUMN } from './column_headers/translations'; import { Direction } from '../../../../common/search_strategy'; import { useMountAppended } from '../../utils/use_mount_appended'; import { defaultHeaders, mockBrowserFields, mockTimelineData, TestProviders } from '../../../mock'; @@ -273,4 +275,57 @@ describe('Body', () => { .find((c) => c.id === 'signal.rule.risk_score')?.cellActions ).toBeUndefined(); }); + + test('it does NOT render switches for hiding columns in the `EuiDataGrid` `Columns` popover', async () => { + render( + + + + ); + + // Click the `EuidDataGrid` `Columns` button to open the popover: + fireEvent.click(screen.getByTestId('dataGridColumnSelectorButton')); + + // `EuiDataGrid` renders switches for hiding in the `Columns` popover when `showColumnSelector.allowHide` is `true` + const switches = await screen.queryAllByRole('switch'); + + expect(switches.length).toBe(0); // no switches are rendered, because `allowHide` is `false` + }); + + test('it dispatches the `REMOVE_COLUMN` action when a user clicks `Remove column` in the column header popover', async () => { + render( + + + + ); + + // click the `@timestamp` column header to display the popover + fireEvent.click(screen.getByText('@timestamp')); + + // click the `Remove column` action in the popover + fireEvent.click(await screen.getByText(REMOVE_COLUMN)); + + expect(mockDispatch).toBeCalledWith({ + payload: { columnId: '@timestamp', id: 'timeline-test' }, + type: 'x-pack/timelines/t-grid/REMOVE_COLUMN', + }); + }); + + test('it dispatches the `UPDATE_COLUMN_WIDTH` action when a user resizes a column', async () => { + render( + + + + ); + + // simulate resizing the column + fireEvent.mouseDown(screen.getAllByTestId('dataGridColumnResizer')[0]); + fireEvent.mouseMove(screen.getAllByTestId('dataGridColumnResizer')[0]); + fireEvent.mouseUp(screen.getAllByTestId('dataGridColumnResizer')[0]); + + expect(mockDispatch).toBeCalledWith({ + payload: { columnId: '@timestamp', id: 'timeline-test', width: NaN }, + type: 'x-pack/timelines/t-grid/UPDATE_COLUMN_WIDTH', + }); + }); }); diff --git a/x-pack/plugins/timelines/public/components/t_grid/body/index.tsx b/x-pack/plugins/timelines/public/components/t_grid/body/index.tsx index 619571a0c8e81..9e43c16fd5e6f 100644 --- a/x-pack/plugins/timelines/public/components/t_grid/body/index.tsx +++ b/x-pack/plugins/timelines/public/components/t_grid/body/index.tsx @@ -75,6 +75,7 @@ import { ViewSelection } from '../event_rendered_view/selector'; import { EventRenderedView } from '../event_rendered_view'; import { useDataGridHeightHack } from './height_hack'; import { Filter } from '../../../../../../../src/plugins/data/public'; +import { REMOVE_COLUMN } from './column_headers/translations'; const StatefulAlertStatusBulkActions = lazy( () => import('../toolbar/bulk_actions/alert_status_bulk_actions') @@ -497,7 +498,7 @@ export const BodyComponent = React.memo( showFullScreenSelector: false, } : { - showColumnSelector: { allowHide: true, allowReorder: true }, + showColumnSelector: { allowHide: false, allowReorder: true }, showSortSelector: true, showFullScreenSelector: true, }), @@ -559,13 +560,32 @@ export const BodyComponent = React.memo( [columnHeaders, dispatch, id, loadPage] ); - const [visibleColumns, setVisibleColumns] = useState(() => - columnHeaders.map(({ id: cid }) => cid) - ); // initializes to the full set of columns + const visibleColumns = useMemo(() => columnHeaders.map(({ id: cid }) => cid), [columnHeaders]); // the full set of columns - useEffect(() => { - setVisibleColumns(columnHeaders.map(({ id: cid }) => cid)); - }, [columnHeaders]); + const onColumnResize = useCallback( + ({ columnId, width }: { columnId: string; width: number }) => { + dispatch( + tGridActions.updateColumnWidth({ + columnId, + id, + width, + }) + ); + }, + [dispatch, id] + ); + + const onSetVisibleColumns = useCallback( + (newVisibleColumns: string[]) => { + dispatch( + tGridActions.updateColumnOrder({ + columnIds: newVisibleColumns, + id, + }) + ); + }, + [dispatch, id] + ); const setEventsLoading = useCallback( ({ eventIds, isLoading: loading }) => { @@ -654,6 +674,19 @@ export const BodyComponent = React.memo( return { ...header, + actions: { + ...header.actions, + additional: [ + { + iconType: 'cross', + label: REMOVE_COLUMN, + onClick: () => { + dispatch(tGridActions.removeColumn({ id, columnId: header.id })); + }, + size: 'xs', + }, + ], + }, ...(hasCellActions(header.id) ? { cellActions: @@ -663,7 +696,7 @@ export const BodyComponent = React.memo( : {}), }; }), - [columnHeaders, defaultCellActions, browserFields, data, pageSize, id] + [columnHeaders, defaultCellActions, browserFields, data, pageSize, id, dispatch] ); const renderTGridCellValue = useMemo(() => { @@ -761,7 +794,7 @@ export const BodyComponent = React.memo( data-test-subj="body-data-grid" aria-label={i18n.TGRID_BODY_ARIA_LABEL} columns={columnsWithCellActions} - columnVisibility={{ visibleColumns, setVisibleColumns }} + columnVisibility={{ visibleColumns, setVisibleColumns: onSetVisibleColumns }} gridStyle={gridStyle} leadingControlColumns={leadingTGridControlColumns} trailingControlColumns={trailingTGridControlColumns} @@ -769,6 +802,7 @@ export const BodyComponent = React.memo( rowCount={totalItems} renderCellValue={renderTGridCellValue} sorting={{ columns: sortingColumns, onSort }} + onColumnResize={onColumnResize} pagination={{ pageIndex: activePage, pageSize, diff --git a/x-pack/plugins/timelines/public/store/t_grid/actions.ts b/x-pack/plugins/timelines/public/store/t_grid/actions.ts index a039a236fb186..feab12b616c78 100644 --- a/x-pack/plugins/timelines/public/store/t_grid/actions.ts +++ b/x-pack/plugins/timelines/public/store/t_grid/actions.ts @@ -32,6 +32,17 @@ export const applyDeltaToColumnWidth = actionCreator<{ delta: number; }>('APPLY_DELTA_TO_COLUMN_WIDTH'); +export const updateColumnOrder = actionCreator<{ + columnIds: string[]; + id: string; +}>('UPDATE_COLUMN_ORDER'); + +export const updateColumnWidth = actionCreator<{ + columnId: string; + id: string; + width: number; +}>('UPDATE_COLUMN_WIDTH'); + export type ToggleDetailPanel = TimelineExpandedDetailType & { tabType?: TimelineTabs; timelineId: string; diff --git a/x-pack/plugins/timelines/public/store/t_grid/helpers.test.tsx b/x-pack/plugins/timelines/public/store/t_grid/helpers.test.tsx index 121e5bda78ed8..1e1fbe290a115 100644 --- a/x-pack/plugins/timelines/public/store/t_grid/helpers.test.tsx +++ b/x-pack/plugins/timelines/public/store/t_grid/helpers.test.tsx @@ -7,7 +7,11 @@ import { SortColumnTimeline } from '../../../common'; import { tGridDefaults } from './defaults'; -import { setInitializeTgridSettings } from './helpers'; +import { + setInitializeTgridSettings, + updateTGridColumnOrder, + updateTGridColumnWidth, +} from './helpers'; import { mockGlobalState } from '../../mock/global_state'; import { TGridModelSettings } from '.'; @@ -57,3 +61,112 @@ describe('setInitializeTgridSettings', () => { expect(result).toBe(timelineById); }); }); + +describe('updateTGridColumnOrder', () => { + test('it returns the columns in the new expected order', () => { + const originalIdOrder = defaultTimelineById.test.columns.map((x) => x.id); // ['@timestamp', 'event.severity', 'event.category', '...'] + + // the new order swaps the positions of the first and second columns: + const newIdOrder = [originalIdOrder[1], originalIdOrder[0], ...originalIdOrder.slice(2)]; // ['event.severity', '@timestamp', 'event.category', '...'] + + expect( + updateTGridColumnOrder({ + columnIds: newIdOrder, + id: 'test', + timelineById: defaultTimelineById, + }) + ).toEqual({ + ...defaultTimelineById, + test: { + ...defaultTimelineById.test, + columns: [ + defaultTimelineById.test.columns[1], // event.severity + defaultTimelineById.test.columns[0], // @timestamp + ...defaultTimelineById.test.columns.slice(2), // all remaining columns + ], + }, + }); + }); + + test('it omits unknown column IDs when re-ordering columns', () => { + const originalIdOrder = defaultTimelineById.test.columns.map((x) => x.id); // ['@timestamp', 'event.severity', 'event.category', '...'] + const unknownColumId = 'does.not.exist'; + const newIdOrder = [originalIdOrder[0], unknownColumId, ...originalIdOrder.slice(1)]; // ['@timestamp', 'does.not.exist', 'event.severity', 'event.category', '...'] + + expect( + updateTGridColumnOrder({ + columnIds: newIdOrder, + id: 'test', + timelineById: defaultTimelineById, + }) + ).toEqual({ + ...defaultTimelineById, + test: { + ...defaultTimelineById.test, + }, + }); + }); + + test('it returns an empty collection of columns if none of the new column IDs are found', () => { + const newIdOrder = ['this.id.does.NOT.exist', 'this.id.also.does.NOT.exist']; // all unknown IDs + + expect( + updateTGridColumnOrder({ + columnIds: newIdOrder, + id: 'test', + timelineById: defaultTimelineById, + }) + ).toEqual({ + ...defaultTimelineById, + test: { + ...defaultTimelineById.test, + columns: [], // <-- empty, because none of the new column IDs match the old IDs + }, + }); + }); +}); + +describe('updateTGridColumnWidth', () => { + test("it updates (only) the specified column's width", () => { + const columnId = '@timestamp'; + const width = 1234; + + const expectedUpdatedColumn = { + ...defaultTimelineById.test.columns[0], // @timestamp + initialWidth: width, + }; + + expect( + updateTGridColumnWidth({ + columnId, + id: 'test', + timelineById: defaultTimelineById, + width, + }) + ).toEqual({ + ...defaultTimelineById, + test: { + ...defaultTimelineById.test, + columns: [expectedUpdatedColumn, ...defaultTimelineById.test.columns.slice(1)], + }, + }); + }); + + test('it is a noop if the the specified column is unknown', () => { + const unknownColumId = 'does.not.exist'; + + expect( + updateTGridColumnWidth({ + columnId: unknownColumId, + id: 'test', + timelineById: defaultTimelineById, + width: 90210, + }) + ).toEqual({ + ...defaultTimelineById, + test: { + ...defaultTimelineById.test, + }, + }); + }); +}); diff --git a/x-pack/plugins/timelines/public/store/t_grid/helpers.ts b/x-pack/plugins/timelines/public/store/t_grid/helpers.ts index f7b0d86f88621..34de86d32a9b2 100644 --- a/x-pack/plugins/timelines/public/store/t_grid/helpers.ts +++ b/x-pack/plugins/timelines/public/store/t_grid/helpers.ts @@ -8,6 +8,7 @@ import { omit, union } from 'lodash/fp'; import { isEmpty } from 'lodash'; +import { EuiDataGridColumn } from '@elastic/eui'; import type { ToggleDetailPanel } from './actions'; import { TGridPersistInput, TimelineById, TimelineId } from './types'; import type { TGridModel, TGridModelSettings } from './model'; @@ -232,6 +233,63 @@ export const applyDeltaToTimelineColumnWidth = ({ }; }; +type Columns = Array< + Pick & ColumnHeaderOptions +>; + +export const updateTGridColumnOrder = ({ + columnIds, + id, + timelineById, +}: { + columnIds: string[]; + id: string; + timelineById: TimelineById; +}): TimelineById => { + const timeline = timelineById[id]; + + const columns = columnIds.reduce((acc, cid) => { + const columnIndex = timeline.columns.findIndex((c) => c.id === cid); + + return columnIndex !== -1 ? [...acc, timeline.columns[columnIndex]] : acc; + }, []); + + return { + ...timelineById, + [id]: { + ...timeline, + columns, + }, + }; +}; + +export const updateTGridColumnWidth = ({ + columnId, + id, + timelineById, + width, +}: { + columnId: string; + id: string; + timelineById: TimelineById; + width: number; +}): TimelineById => { + const timeline = timelineById[id]; + + const columns = timeline.columns.map((x) => ({ + ...x, + initialWidth: x.id === columnId ? width : x.initialWidth, + })); + + return { + ...timelineById, + [id]: { + ...timeline, + columns, + }, + }; +}; + interface UpdateTimelineColumnsParams { id: string; columns: ColumnHeaderOptions[]; diff --git a/x-pack/plugins/timelines/public/store/t_grid/reducer.ts b/x-pack/plugins/timelines/public/store/t_grid/reducer.ts index d29240d5658db..d3af1dc4e9b30 100644 --- a/x-pack/plugins/timelines/public/store/t_grid/reducer.ts +++ b/x-pack/plugins/timelines/public/store/t_grid/reducer.ts @@ -23,7 +23,9 @@ import { setSelected, setTimelineUpdatedAt, toggleDetailPanel, + updateColumnOrder, updateColumns, + updateColumnWidth, updateIsLoading, updateItemsPerPage, updateItemsPerPageOptions, @@ -40,6 +42,8 @@ import { setDeletedTimelineEvents, setLoadingTimelineEvents, setSelectedTimelineEvents, + updateTGridColumnOrder, + updateTGridColumnWidth, updateTimelineColumns, updateTimelineItemsPerPage, updateTimelinePerPageOptions, @@ -91,6 +95,23 @@ export const tGridReducer = reducerWithInitialState(initialTGridState) timelineById: state.timelineById, }), })) + .case(updateColumnOrder, (state, { id, columnIds }) => ({ + ...state, + timelineById: updateTGridColumnOrder({ + columnIds, + id, + timelineById: state.timelineById, + }), + })) + .case(updateColumnWidth, (state, { id, columnId, width }) => ({ + ...state, + timelineById: updateTGridColumnWidth({ + columnId, + id, + timelineById: state.timelineById, + width, + }), + })) .case(removeColumn, (state, { id, columnId }) => ({ ...state, timelineById: removeTimelineColumn({ diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json index 6a97078082117..d67126fdad4bb 100644 --- a/x-pack/plugins/translations/translations/ja-JP.json +++ b/x-pack/plugins/translations/translations/ja-JP.json @@ -24458,7 +24458,6 @@ "xpack.timelines.timeline.fieldTooltip": "フィールド", "xpack.timelines.timeline.flyout.pane.removeColumnButtonLabel": "列を削除", "xpack.timelines.timeline.fullScreenButton": "全画面", - "xpack.timelines.timeline.hideColumnLabel": "列を非表示", "xpack.timelines.timeline.openedAlertFailedToastMessage": "アラートを開けませんでした", "xpack.timelines.timeline.openSelectedTitle": "選択した項目を開く", "xpack.timelines.timeline.properties.timelineToggleButtonAriaLabel": "タイムライン {title} を{isOpen, select, false {開く} true {閉じる} other {切り替える}}", diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json index 6e09814d015cc..598a5c24bdee2 100644 --- a/x-pack/plugins/translations/translations/zh-CN.json +++ b/x-pack/plugins/translations/translations/zh-CN.json @@ -24874,7 +24874,6 @@ "xpack.timelines.timeline.fieldTooltip": "字段", "xpack.timelines.timeline.flyout.pane.removeColumnButtonLabel": "移除列", "xpack.timelines.timeline.fullScreenButton": "全屏", - "xpack.timelines.timeline.hideColumnLabel": "隐藏列", "xpack.timelines.timeline.openedAlertFailedToastMessage": "无法打开告警", "xpack.timelines.timeline.openedAlertSuccessToastMessage": "已成功打开 {totalAlerts} 个{totalAlerts, plural, other {告警}}。", "xpack.timelines.timeline.openSelectedTitle": "打开所选",