From f96311fd9e23f56630a5cf16024c87b63f2efb8f Mon Sep 17 00:00:00 2001 From: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Date: Sat, 16 Oct 2021 17:20:31 -0400 Subject: [PATCH] [Security Solution] Restores Alerts table local storage persistence and the Remove Column action (#114742) (#115301) ## [Security Solution] Restores Alerts table local storage persistence and the Remove Column action This PR implements the following changes summarized below to address , as proposed [here](https://github.com/elastic/kibana/issues/113090#issuecomment-935143690): - Configures the `Columns` popover to be consistent with `Discover` - Changes the `Hide column` action to `Remove column`, to be consistent with `Discover` - Persists updates to the `Columns` popover order in `local storage` - Restores the feature to persist column widths in `local storage` ### Configures the `Columns` popover to be consistent with `Discover` - We now pass `false` to the `allowHide` [EuiDataGrid API](https://elastic.github.io/eui/#/tabular-content/data-grid): ![allow_hide](https://user-images.githubusercontent.com/4459398/136114714-02f25b97-86af-47e5-9adc-1177d5a2c715.png) This makes all `EuiDataGrid`-based views in the Security Solution consistent with `Discover`'s use of the `EuiDataGrid` `Columns` popover. In `7.15`, the `Columns` popover includes the _hide column_ toggle, as shown in the screenshot below: ![alerts_columns_popover_7_15](https://user-images.githubusercontent.com/4459398/136112441-455ddbeb-dea3-4837-81ad-32d6c82c11fe.png) _Above: The `Columns` popover in the `7.15` `Alerts` table_ The `Columns` popover in `Discover`'s `EuiDataGrid`-based table does not display the hide column toggle, as shown the screenshot below: ![columns_popover_discover](https://user-images.githubusercontent.com/4459398/136112856-7e42c822-2260-4759-ac78-5bea63a171c7.png) _Above: The `EuiDataGrid` `Columns` popover in `Discover`, in `master`_ Passing `false` to the `allowHide` [EuiDataGrid API](https://elastic.github.io/eui/#/tabular-content/data-grid) API makes the `Columns` popover in all `EuiDataGrid`-based views in the Security Solution consistent with `Discover`, as illustrated by the screenshot below: ![alerts_columns_popover_no_hide](https://user-images.githubusercontent.com/4459398/136112980-d4219fbd-1443-4612-8cdb-b97bee8b97ef.png) _Above: The `Columns` popover is now consistent with `Discover`_ ## Changes the `Hide column` action to `Remove column`, to be consistent with `Discover` - The `Hide column` action shown in the `7.15` alerts table is changed to `Remove column`, making it consistent with `Discover`'s use of `EuiDataGrid` In `7.15`, the `Alerts` table has a `Hide column` action, as shown in the screenshot below: ![hide_column](https://user-images.githubusercontent.com/4459398/136115681-9e0da144-a981-4352-8092-9368d74cd153.png) _Above: The `Hide Column` action in the `7.15` `Alerts` table_ In `7.15`, clicking the `Hide Column` action shown in the screenshot above hides the column, but does not remove it. In `7.15`, columns may only be removed by un-checking them in the `Fields` browser, or by un-toggling them in the Alerts / Events details popover. Both of those methods require multiple clicks, and require uses to re-find the field in the modal or popover before it may be toggled for removal. In `Discover`, users don't hide columns. In `Discover`, users directly remove columns by clicking the `Remove column` action, shown in the screenshot below: ![discover_remove_column](https://user-images.githubusercontent.com/4459398/136114295-f018a561-f9ee-4ce4-a9c6-0fcd7f71e67b.png) _Above: The `Remove column` action in `Discover`'s use of `EuiDataGrid` in `master`_ All `EuiDataGrid`-based views in the Security Solution were made consistent with `Discover` by replacing the `Hide column` action with `Remove column`, per the screenshot below: ![remove_column_after](https://user-images.githubusercontent.com/4459398/137047582-3c4d6cb0-ac12-4c50-9c34-0c4ef5536550.png) _Above: The `Remove column` action in the Alerts table_ Note: the `Remove column` action shown above appears as the last item in the popover because it's specified via the `EuiDataGrid` `EuiDataGridColumnActions` > `additonal` API, which appends additonal actions to the end of popover, after the built-in actions: ![additional](https://user-images.githubusercontent.com/4459398/137047825-625002b3-5cd6-4b3e-87da-e76dbaf2a827.png) ## Persists updates to the `Columns` popover order in `local storage` - Persist column order updates to `local storage` when users update the order of columns via the `Columns` popover The following PR restored partial support for persisting columns across page refreshes via `local storage`, but the Redux store was not updated when users sort columns via the `Columns` popover, an shown in the animated gif below: ![ordering_via_columns](https://user-images.githubusercontent.com/4459398/136119497-65f76f49-091c-4a45-b8d3-1e5ef80ccbb2.gif) _Above: Ordering via the `Columns` popover is not persisted to `local storage` in `7.15`_ This PR utilizes the `setVisibleColumns` [EuiDataGrid API](https://elastic.github.io/eui/#/tabular-content/data-grid) API as a callback to update Redux when the columns are sorted, which will in-turn update `local storage` to persist the new order across page refreshes: ![setVisibleColumns](https://user-images.githubusercontent.com/4459398/136117249-628bb147-a860-4ccf-811a-0e57a99296fb.png) ## Restores the feature to persist column widths in `local storage` In previous releases, resized column widths were peristed in `local storage` to persist across page refreshes, as documented in : ``` { "detections-page":{ "id":"detections-page", "activeTab":"query", "prevActiveTab":"query", "columns":[ { "category":"base", "columnHeaderType":"not-filtered", "description":"Date/time when the event originated. This is the date/time extracted from the event, typically representing when the event was generated by the source. If the event source has no original timestamp, this value is typically populated by the first time the event was received by the pipeline. Required field for all events.", "example":"2016-05-23T08:05:34.853Z", "id":"@timestamp", "type":"date", "aggregatable":true, "width":190 }, { "category":"cloud", "columnHeaderType":"not-filtered", "description":"The cloud account or organization id used to identify different entities in a multi-tenant environment. Examples: AWS account id, Google Cloud ORG Id, or other unique identifier.", "example":"666777888999", "id":"cloud.account.id", "type":"string", "aggregatable":true, "width":180 }, { "category":"cloud", "columnHeaderType":"not-filtered", "description":"Availability zone in which this host is running.", "example":"us-east-1c", "id":"cloud.availability_zone", "type":"string", "aggregatable":true, "width":180 }, // ... } ], // ... } } ``` _Above: column widths were persisted to `local storage` in previous release, (going at least back to `7.12`)_ In this PR, we utilize the `onColumnResize` [EuiDataGrid API](https://elastic.github.io/eui/#/tabular-content/data-grid) API as a callback to update Redux when the columns are sorted via the `Columns` popover. Updating Redux will in-turn update `local storage`, so resized columns widths will persist across page refreshes: ![onColumnResize](https://user-images.githubusercontent.com/4459398/136120062-3b0bebce-9c44-47fc-9956-48fe07a30f83.png) ### Other changes The Alerts page `Trend` chart and table were updated to include the following additional `Stack by` fields (CC @paulewing): ``` process.name file.name hash.sha256 ``` per the before / after screenshots below: ![alerts-trend-before](https://user-images.githubusercontent.com/4459398/137045011-7da4530b-0259-4fd4-b903-9eee6c26d02f.png) _Above: The Alerts `Trend` Stack by fields in `7.15` (before)_ ![alerts-trend-after](https://user-images.githubusercontent.com/4459398/137045023-d0ae987c-a474-4123-a05b-a6ad2fc52922.png) _Above: The Alerts `Trend` `Stack by` fields (after the addition of the `process.name`, `file.name`, and `hash.sha256` fields)_ CC: @monina-n @paulewing Co-authored-by: Andrew Goldstein --- .../components/alerts_kpis/common/config.ts | 3 + .../components/alerts_kpis/common/types.ts | 5 +- .../timelines/store/timeline/actions.ts | 2 + .../timeline/epic_local_storage.test.tsx | 33 +++++ .../store/timeline/epic_local_storage.ts | 4 + .../body/column_headers/column_header.tsx | 4 +- .../body/column_headers/helpers.test.tsx | 1 + .../t_grid/body/column_headers/helpers.tsx | 1 + .../body/column_headers/translations.ts | 4 - .../components/t_grid/body/index.test.tsx | 55 +++++++++ .../public/components/t_grid/body/index.tsx | 52 ++++++-- .../timelines/public/store/t_grid/actions.ts | 11 ++ .../public/store/t_grid/helpers.test.tsx | 115 +++++++++++++++++- .../timelines/public/store/t_grid/helpers.ts | 58 +++++++++ .../timelines/public/store/t_grid/reducer.ts | 21 ++++ .../translations/translations/ja-JP.json | 1 - .../translations/translations/zh-CN.json | 1 - 17 files changed, 352 insertions(+), 19 deletions(-) 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 a9a03f8f22524..52446ddc4a89f 100644 --- a/x-pack/plugins/translations/translations/ja-JP.json +++ b/x-pack/plugins/translations/translations/ja-JP.json @@ -24613,7 +24613,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 2dc94fc1ffa9c..10cfb10a01445 100644 --- a/x-pack/plugins/translations/translations/zh-CN.json +++ b/x-pack/plugins/translations/translations/zh-CN.json @@ -25030,7 +25030,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": "打开所选",