[8.15] [Bug][Investigations] - Fix timeline column reset (#188240) (#188386)

# Backport

This will backport the following commits from `main` to `8.15`:
- [[Bug][Investigations] - Fix timeline column reset
(#188240)](https://github.com/elastic/kibana/pull/188240)

<!--- Backport version: 8.9.8 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Michael
Olorunnisola","email":"michael.olorunnisola@elastic.co"},"sourceCommit":{"committedDate":"2024-07-15T16:23:45Z","message":"[Bug][Investigations]
- Fix timeline column reset (#188240)\n\n##
Summary\r\n\r\n**Bug:**\r\nWithin the new timeline, we have default
columns that show whenever an\r\nempty array for columns are
provided.\r\nThis was causing columns to re-appear in the `Selected
fields` section\r\neven though the columns were not actually selected
anymore leading to\r\nmismatched state between the browser ui and the
table preventing the\r\ndefault columns from being removed again without
page refresh. _The old\r\ntimeline table is not
affected_.\r\n\r\n\r\n\r\nhttps://github.com/user-attachments/assets/7d16b8c3-be1a-4bc7-87b0-62fcac563f15\r\n\r\n\r\n\r\n**Fix:**\r\nThe
logic used to default an empty array of columns to the
default\r\ntimeline columns has been updated to allow the empty array to
be passed.\r\nWith the old timeline experience this just means all
columns _can_ be\r\nremoved and you'd see an empty table, but with the
new unified table\r\n(which will be the default in 8.15
after\r\n\r\n\r\nhttps://github.com/user-attachments/assets/e5fbaf48-77e3-4363-8232-35d256729b7e","sha":"385884d98b21e5613eadb613ef984aa87da282ae","branchLabelMapping":{"^v8.16.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","Team:Threat
Hunting:Investigations","v8.15.0","v8.16.0"],"number":188240,"url":"https://github.com/elastic/kibana/pull/188240","mergeCommit":{"message":"[Bug][Investigations]
- Fix timeline column reset (#188240)\n\n##
Summary\r\n\r\n**Bug:**\r\nWithin the new timeline, we have default
columns that show whenever an\r\nempty array for columns are
provided.\r\nThis was causing columns to re-appear in the `Selected
fields` section\r\neven though the columns were not actually selected
anymore leading to\r\nmismatched state between the browser ui and the
table preventing the\r\ndefault columns from being removed again without
page refresh. _The old\r\ntimeline table is not
affected_.\r\n\r\n\r\n\r\nhttps://github.com/user-attachments/assets/7d16b8c3-be1a-4bc7-87b0-62fcac563f15\r\n\r\n\r\n\r\n**Fix:**\r\nThe
logic used to default an empty array of columns to the
default\r\ntimeline columns has been updated to allow the empty array to
be passed.\r\nWith the old timeline experience this just means all
columns _can_ be\r\nremoved and you'd see an empty table, but with the
new unified table\r\n(which will be the default in 8.15
after\r\n\r\n\r\nhttps://github.com/user-attachments/assets/e5fbaf48-77e3-4363-8232-35d256729b7e","sha":"385884d98b21e5613eadb613ef984aa87da282ae"}},"sourceBranch":"main","suggestedTargetBranches":["8.15"],"targetPullRequestStates":[{"branch":"8.15","label":"v8.15.0","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v8.16.0","labelRegex":"^v8.16.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/188240","number":188240,"mergeCommit":{"message":"[Bug][Investigations]
- Fix timeline column reset (#188240)\n\n##
Summary\r\n\r\n**Bug:**\r\nWithin the new timeline, we have default
columns that show whenever an\r\nempty array for columns are
provided.\r\nThis was causing columns to re-appear in the `Selected
fields` section\r\neven though the columns were not actually selected
anymore leading to\r\nmismatched state between the browser ui and the
table preventing the\r\ndefault columns from being removed again without
page refresh. _The old\r\ntimeline table is not
affected_.\r\n\r\n\r\n\r\nhttps://github.com/user-attachments/assets/7d16b8c3-be1a-4bc7-87b0-62fcac563f15\r\n\r\n\r\n\r\n**Fix:**\r\nThe
logic used to default an empty array of columns to the
default\r\ntimeline columns has been updated to allow the empty array to
be passed.\r\nWith the old timeline experience this just means all
columns _can_ be\r\nremoved and you'd see an empty table, but with the
new unified table\r\n(which will be the default in 8.15
after\r\n\r\n\r\nhttps://github.com/user-attachments/assets/e5fbaf48-77e3-4363-8232-35d256729b7e","sha":"385884d98b21e5613eadb613ef984aa87da282ae"}}]}]
BACKPORT-->
This commit is contained in:
Michael Olorunnisola 2024-07-16 04:41:05 -04:00 committed by GitHub
parent 42d76f9f1c
commit 321aac72b0
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 10 additions and 351 deletions

View file

@ -2133,7 +2133,7 @@ export const defaultTimelineProps: CreateTimelineProps = {
savedSearch: null,
isDataProviderVisible: false,
sampleSize: 500,
rowHeight: 1,
rowHeight: 3,
},
to: '2018-11-05T19:03:25.937Z',
notes: null,

View file

@ -454,7 +454,7 @@ describe('alert actions', () => {
savedSearchId: null,
savedSearch: null,
isDataProviderVisible: false,
rowHeight: 1,
rowHeight: 3,
sampleSize: 500,
},
to: '2018-11-05T19:03:25.937Z',

View file

@ -100,7 +100,7 @@ describe('UnifiedTimelineBody', () => {
expect(MockUnifiedTimelineComponent).toHaveBeenLastCalledWith(
expect.objectContaining({
columns: defaultUdtHeaders,
columns: [],
}),
{}
);

View file

@ -8,7 +8,6 @@
import type { ComponentProps, ReactElement } from 'react';
import React, { useEffect, useState, useMemo } from 'react';
import { RootDragDropProvider } from '@kbn/dom-drag-drop';
import { isEmpty } from 'lodash';
import { StyledTableFlexGroup, StyledUnifiedTableFlexItem } from '../unified_components/styles';
import { UnifiedTimeline } from '../unified_components';
import { defaultUdtHeaders } from '../unified_components/default_headers';
@ -59,9 +58,7 @@ export const UnifiedTimelineBody = (props: UnifiedTimelineBodyProps) => {
});
}, [events, pageInfo.activePage]);
const columnsHeader = useMemo(() => {
return isEmpty(columns) ? defaultUdtHeaders : columns;
}, [columns]);
const columnsHeader = useMemo(() => columns ?? defaultUdtHeaders, [columns]);
return (
<StyledTableFlexGroup direction="column" gutterSize="s">

View file

@ -1,334 +1,8 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`useTimelineColumns augmentedColumnHeaders should return the default columns 1`] = `
Array [
Object {
"aggregatable": true,
"columnHeaderType": "not-filtered",
"esTypes": Array [
"date",
],
"format": "",
"id": "@timestamp",
"indexes": Array [
"auditbeat",
"filebeat",
"packetbeat",
],
"initialWidth": 190,
"name": "@timestamp",
"readFromDocValues": true,
"searchable": true,
"type": "date",
},
Object {
"aggregatable": false,
"columnHeaderType": "not-filtered",
"esTypes": Array [
"text",
],
"format": "string",
"id": "message",
"indexes": Array [
"auditbeat",
"filebeat",
"packetbeat",
],
"initialWidth": 180,
"name": "message",
"searchable": true,
"type": "string",
},
Object {
"aggregatable": true,
"columnHeaderType": "not-filtered",
"esTypes": Array [
"keyword",
],
"format": "string",
"id": "event.category",
"indexes": Array [
"apm-*-transaction*",
"auditbeat-*",
"endgame-*",
"filebeat-*",
"logs-*",
"packetbeat-*",
"traces-apm*",
"winlogbeat-*",
"-*elastic-cloud-logs-*",
],
"initialWidth": 180,
"name": "event.category",
"searchable": true,
"type": "string",
},
Object {
"aggregatable": true,
"columnHeaderType": "not-filtered",
"esTypes": Array [
"keyword",
],
"format": "string",
"id": "event.action",
"indexes": Array [
"apm-*-transaction*",
"auditbeat-*",
"endgame-*",
"filebeat-*",
"logs-*",
"packetbeat-*",
"traces-apm*",
"winlogbeat-*",
"-*elastic-cloud-logs-*",
],
"initialWidth": 180,
"name": "event.action",
"searchable": true,
"type": "string",
},
Object {
"aggregatable": true,
"columnHeaderType": "not-filtered",
"esTypes": Array [
"keyword",
],
"format": "string",
"id": "host.name",
"indexes": Array [
"apm-*-transaction*",
"auditbeat-*",
"endgame-*",
"filebeat-*",
"logs-*",
"packetbeat-*",
"traces-apm*",
"winlogbeat-*",
"-*elastic-cloud-logs-*",
],
"initialWidth": 180,
"name": "host.name",
"searchable": true,
"type": "string",
},
Object {
"aggregatable": true,
"columnHeaderType": "not-filtered",
"esTypes": Array [
"ip",
],
"format": "",
"id": "source.ip",
"indexes": Array [
"auditbeat",
"filebeat",
"packetbeat",
],
"initialWidth": 180,
"name": "source.ip",
"searchable": true,
"type": "ip",
},
Object {
"aggregatable": true,
"columnHeaderType": "not-filtered",
"esTypes": Array [
"ip",
],
"format": "",
"id": "destination.ip",
"indexes": Array [
"auditbeat",
"filebeat",
"packetbeat",
],
"initialWidth": 180,
"name": "destination.ip",
"searchable": true,
"type": "ip",
},
Object {
"aggregatable": true,
"columnHeaderType": "not-filtered",
"esTypes": Array [
"keyword",
],
"format": "string",
"id": "user.name",
"indexes": Array [
"auditbeat",
"filebeat",
"packetbeat",
],
"initialWidth": 180,
"name": "user.name",
"searchable": true,
"type": "string",
},
]
`;
exports[`useTimelineColumns augmentedColumnHeaders should return the default columns 1`] = `Array []`;
exports[`useTimelineColumns augmentedColumnHeaders should return the default unified data table (udt) columns 1`] = `
Array [
Object {
"aggregatable": true,
"columnHeaderType": "not-filtered",
"esTypes": Array [
"date",
],
"format": "",
"id": "@timestamp",
"indexes": Array [
"auditbeat",
"filebeat",
"packetbeat",
],
"initialWidth": 215,
"name": "@timestamp",
"readFromDocValues": true,
"searchable": true,
"type": "date",
},
Object {
"aggregatable": false,
"columnHeaderType": "not-filtered",
"esTypes": Array [
"text",
],
"format": "string",
"id": "message",
"indexes": Array [
"auditbeat",
"filebeat",
"packetbeat",
],
"initialWidth": 360,
"name": "message",
"searchable": true,
"type": "string",
},
Object {
"aggregatable": true,
"columnHeaderType": "not-filtered",
"esTypes": Array [
"keyword",
],
"format": "string",
"id": "event.category",
"indexes": Array [
"apm-*-transaction*",
"auditbeat-*",
"endgame-*",
"filebeat-*",
"logs-*",
"packetbeat-*",
"traces-apm*",
"winlogbeat-*",
"-*elastic-cloud-logs-*",
],
"name": "event.category",
"searchable": true,
"type": "string",
},
Object {
"aggregatable": true,
"columnHeaderType": "not-filtered",
"esTypes": Array [
"keyword",
],
"format": "string",
"id": "event.action",
"indexes": Array [
"apm-*-transaction*",
"auditbeat-*",
"endgame-*",
"filebeat-*",
"logs-*",
"packetbeat-*",
"traces-apm*",
"winlogbeat-*",
"-*elastic-cloud-logs-*",
],
"name": "event.action",
"searchable": true,
"type": "string",
},
Object {
"aggregatable": true,
"columnHeaderType": "not-filtered",
"esTypes": Array [
"keyword",
],
"format": "string",
"id": "host.name",
"indexes": Array [
"apm-*-transaction*",
"auditbeat-*",
"endgame-*",
"filebeat-*",
"logs-*",
"packetbeat-*",
"traces-apm*",
"winlogbeat-*",
"-*elastic-cloud-logs-*",
],
"name": "host.name",
"searchable": true,
"type": "string",
},
Object {
"aggregatable": true,
"columnHeaderType": "not-filtered",
"esTypes": Array [
"ip",
],
"format": "",
"id": "source.ip",
"indexes": Array [
"auditbeat",
"filebeat",
"packetbeat",
],
"name": "source.ip",
"searchable": true,
"type": "ip",
},
Object {
"aggregatable": true,
"columnHeaderType": "not-filtered",
"esTypes": Array [
"ip",
],
"format": "",
"id": "destination.ip",
"indexes": Array [
"auditbeat",
"filebeat",
"packetbeat",
],
"name": "destination.ip",
"searchable": true,
"type": "ip",
},
Object {
"aggregatable": true,
"columnHeaderType": "not-filtered",
"esTypes": Array [
"keyword",
],
"format": "string",
"id": "user.name",
"indexes": Array [
"auditbeat",
"filebeat",
"packetbeat",
],
"name": "user.name",
"searchable": true,
"type": "string",
},
]
`;
exports[`useTimelineColumns augmentedColumnHeaders should return the default unified data table (udt) columns 1`] = `Array []`;
exports[`useTimelineColumns augmentedColumnHeaders should return the provided columns 1`] = `
Array [
@ -390,14 +64,6 @@ Array [
exports[`useTimelineColumns getTimelineQueryFieldsFromColumns should return the list of all the fields 1`] = `
Array [
"@timestamp",
"message",
"event.category",
"event.action",
"host.name",
"source.ip",
"destination.ip",
"user.name",
"@timestamp",
"kibana.alert.workflow_status",
"kibana.alert.workflow_tags",

View file

@ -55,7 +55,7 @@ describe('useTimelineColumns', () => {
const { result } = renderHook(() => useTimelineColumns([]), {
wrapper: TestProviders,
});
expect(result.current.localColumns).toEqual(defaultHeaders);
expect(result.current.localColumns).toEqual([]);
});
it('should return the default unified data table (udt) columns', () => {
@ -63,7 +63,7 @@ describe('useTimelineColumns', () => {
const { result } = renderHook(() => useTimelineColumns([]), {
wrapper: TestProviders,
});
expect(result.current.localColumns).toEqual(defaultUdtHeaders);
expect(result.current.localColumns).toEqual([]);
});
it('should return the provided columns', () => {

View file

@ -5,7 +5,6 @@
* 2.0.
*/
import { isEmpty } from 'lodash/fp';
import { useMemo } from 'react';
import { SourcererScopeName } from '../../../../../sourcerer/store/model';
import { useSourcererDataView } from '../../../../../sourcerer/containers';
@ -28,10 +27,7 @@ export const useTimelineColumns = (columns: ColumnHeaderOptions[]) => {
[unifiedComponentsInTimelineEnabled]
);
const localColumns = useMemo(
() => (isEmpty(columns) ? defaultColumns : columns),
[columns, defaultColumns]
);
const localColumns = useMemo(() => columns ?? defaultColumns, [columns, defaultColumns]);
const augmentedColumnHeaders = memoizedGetTimelineColumnHeaders(
localColumns,

View file

@ -101,7 +101,7 @@ export const timelineDefaults: SubsetTimelineModel &
savedSearch: null,
isDataProviderVisible: false,
sampleSize: 500,
rowHeight: 1,
rowHeight: 3,
};
export const getTimelineManageDefaults = (id: string) => ({