From 2d1e758a38dcbff6835e10291f17fdddf7228a70 Mon Sep 17 00:00:00 2001 From: Xavier Mouligneau <189600+XavierM@users.noreply.github.com> Date: Tue, 18 Feb 2020 13:45:20 -0500 Subject: [PATCH] [SIEM] fix circular dependency (#57729) * fix Timeline url dependency * fix circular dependency * rename ColumnHeader to ColumnHeaderOptions --- .../run_check_circular_deps_cli.js | 3 +- .../alerts_viewer/default_headers.ts | 11 ++- .../components/drag_and_drop/helpers.ts | 6 +- .../components/event_details/columns.tsx | 8 +- .../event_details/event_details.tsx | 6 +- .../event_details/event_fields_browser.tsx | 6 +- .../components/event_details/helpers.tsx | 11 ++- .../event_details/stateful_event_details.tsx | 6 +- .../events_viewer/default_headers.tsx | 9 ++- .../events_viewer/default_model.tsx | 3 +- .../events_viewer/events_viewer.tsx | 7 +- .../public/components/events_viewer/index.tsx | 16 ++-- .../fields_browser/field_browser.tsx | 6 +- .../fields_browser/field_items.test.tsx | 6 +- .../components/fields_browser/field_items.tsx | 8 +- .../components/fields_browser/field_name.tsx | 6 +- .../components/fields_browser/fields_pane.tsx | 6 +- .../components/fields_browser/index.tsx | 6 +- .../public/components/fields_browser/types.ts | 6 +- .../public/components/flyout/header/index.tsx | 5 +- .../siem/public/components/flyout/index.tsx | 2 +- .../public/components/navigation/helpers.ts | 6 +- .../navigation/tab_navigation/types.ts | 4 +- .../public/components/navigation/types.ts | 4 +- .../components/open_timeline/helpers.test.ts | 2 +- .../components/open_timeline/helpers.ts | 11 ++- .../public/components/open_timeline/index.tsx | 6 +- .../public/components/open_timeline/types.ts | 5 +- .../timeline/body/actions/index.test.tsx | 2 +- .../body/column_headers/actions/index.tsx | 5 +- .../body/column_headers/column_header.tsx | 23 +----- .../body/column_headers/default_headers.ts | 7 +- .../body/column_headers/filter/index.test.tsx | 2 +- .../body/column_headers/filter/index.tsx | 4 +- .../column_headers/header/header_content.tsx | 4 +- .../body/column_headers/header/helpers.ts | 6 +- .../body/column_headers/header/index.test.tsx | 2 +- .../body/column_headers/header/index.tsx | 4 +- .../header_tooltip_content/index.test.tsx | 4 +- .../header_tooltip_content/index.tsx | 4 +- .../body/column_headers/helpers.test.ts | 48 ++++++++++++ .../timeline/body/column_headers/helpers.ts | 48 ++++++++++++ .../body/column_headers/index.test.tsx | 2 +- .../timeline/body/column_headers/index.tsx | 7 +- .../components/timeline/body/constants.ts | 21 +++++ .../body/data_driven_columns/index.tsx | 6 +- .../body/events/event_column_view.tsx | 4 +- .../components/timeline/body/events/index.tsx | 6 +- .../timeline/body/events/stateful_event.tsx | 6 +- .../body/events/stateful_event_child.tsx | 4 +- .../components/timeline/body/helpers.test.ts | 46 +---------- .../components/timeline/body/helpers.ts | 52 +------------ .../public/components/timeline/body/index.tsx | 8 +- .../body/renderers/column_renderer.ts | 4 +- .../body/renderers/empty_column_renderer.tsx | 4 +- .../body/renderers/plain_column_renderer.tsx | 4 +- .../timeline/body/stateful_body.test.tsx | 2 +- .../timeline/body/stateful_body.tsx | 24 +++--- .../siem/public/components/timeline/events.ts | 4 +- .../timeline/expandable_event/index.tsx | 6 +- .../siem/public/components/timeline/index.tsx | 16 ++-- .../timeline/search_or_filter/index.tsx | 3 +- .../public/components/timeline/timeline.tsx | 7 +- .../public/components/url_state/helpers.ts | 9 ++- .../url_state/initialize_redux_by_url.tsx | 8 +- .../siem/public/components/url_state/types.ts | 8 +- .../plugins/siem/public/mock/global_state.ts | 2 +- .../legacy/plugins/siem/public/mock/header.ts | 7 +- .../components/activity_monitor/columns.tsx | 2 +- .../components/activity_monitor/index.tsx | 25 +----- .../components/activity_monitor/types.ts | 29 +++++++ .../components/signals/actions.tsx | 2 +- .../components/signals/default_config.tsx | 8 +- .../components/signals/index.tsx | 3 +- .../siem/public/store/timeline/actions.ts | 15 ++-- .../siem/public/store/timeline/defaults.ts | 54 +++++++++++++ .../siem/public/store/timeline/epic.ts | 5 +- .../siem/public/store/timeline/helpers.ts | 12 +-- .../siem/public/store/timeline/model.ts | 76 +++++++------------ .../public/store/timeline/reducer.test.ts | 18 +++-- 80 files changed, 465 insertions(+), 398 deletions(-) create mode 100644 x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/helpers.test.ts create mode 100644 x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/helpers.ts create mode 100644 x-pack/legacy/plugins/siem/public/components/timeline/body/constants.ts create mode 100644 x-pack/legacy/plugins/siem/public/pages/detection_engine/components/activity_monitor/types.ts create mode 100644 x-pack/legacy/plugins/siem/public/store/timeline/defaults.ts diff --git a/x-pack/legacy/plugins/siem/dev_tools/circular_deps/run_check_circular_deps_cli.js b/x-pack/legacy/plugins/siem/dev_tools/circular_deps/run_check_circular_deps_cli.js index 7d76b1dd921aa..8ca61b2397d8b 100644 --- a/x-pack/legacy/plugins/siem/dev_tools/circular_deps/run_check_circular_deps_cli.js +++ b/x-pack/legacy/plugins/siem/dev_tools/circular_deps/run_check_circular_deps_cli.js @@ -21,8 +21,7 @@ run( ); const circularFound = result.circular(); - // We can only care about SIEM code, we should not be penalyze for others - if (circularFound.filter(cf => cf.includes('siem')).length !== 0) { + if (circularFound.length !== 0) { throw createFailError( `SIEM circular dependencies of imports has been found:\n - ${circularFound.join('\n - ')}` ); diff --git a/x-pack/legacy/plugins/siem/public/components/alerts_viewer/default_headers.ts b/x-pack/legacy/plugins/siem/public/components/alerts_viewer/default_headers.ts index af9a5ab765571..b12bd1b6c2a51 100644 --- a/x-pack/legacy/plugins/siem/public/components/alerts_viewer/default_headers.ts +++ b/x-pack/legacy/plugins/siem/public/components/alerts_viewer/default_headers.ts @@ -4,12 +4,15 @@ * you may not use this file except in compliance with the Elastic License. */ -import { ColumnHeader } from '../timeline/body/column_headers/column_header'; import { defaultColumnHeaderType } from '../timeline/body/column_headers/default_headers'; -import { DEFAULT_COLUMN_MIN_WIDTH, DEFAULT_DATE_COLUMN_MIN_WIDTH } from '../timeline/body/helpers'; -import { timelineDefaults, SubsetTimelineModel } from '../../store/timeline/model'; +import { + DEFAULT_COLUMN_MIN_WIDTH, + DEFAULT_DATE_COLUMN_MIN_WIDTH, +} from '../timeline/body/constants'; +import { ColumnHeaderOptions, SubsetTimelineModel } from '../../store/timeline/model'; +import { timelineDefaults } from '../../store/timeline/defaults'; -export const alertsHeaders: ColumnHeader[] = [ +export const alertsHeaders: ColumnHeaderOptions[] = [ { columnHeaderType: defaultColumnHeaderType, id: '@timestamp', diff --git a/x-pack/legacy/plugins/siem/public/components/drag_and_drop/helpers.ts b/x-pack/legacy/plugins/siem/public/components/drag_and_drop/helpers.ts index ae3a8828491e3..82ddd2c9f29d7 100644 --- a/x-pack/legacy/plugins/siem/public/components/drag_and_drop/helpers.ts +++ b/x-pack/legacy/plugins/siem/public/components/drag_and_drop/helpers.ts @@ -11,8 +11,8 @@ import { ActionCreator } from 'typescript-fsa'; import { BrowserFields, getAllFieldsByName } from '../../containers/source'; import { IdToDataProvider } from '../../store/drag_and_drop/model'; -import { ColumnHeader } from '../timeline/body/column_headers/column_header'; -import { DEFAULT_COLUMN_MIN_WIDTH } from '../timeline/body/helpers'; +import { ColumnHeaderOptions } from '../../store/timeline/model'; +import { DEFAULT_COLUMN_MIN_WIDTH } from '../timeline/body/constants'; import { DataProvider } from '../timeline/data_providers/data_provider'; import { dragAndDropActions, timelineActions } from '../../store/actions'; @@ -124,7 +124,7 @@ interface AddProviderToTimelineParams { interface AddFieldToTimelineColumnsParams { upsertColumn?: ActionCreator<{ - column: ColumnHeader; + column: ColumnHeaderOptions; id: string; index: number; }>; diff --git a/x-pack/legacy/plugins/siem/public/components/event_details/columns.tsx b/x-pack/legacy/plugins/siem/public/components/event_details/columns.tsx index 1962850425baa..e9903ce66d799 100644 --- a/x-pack/legacy/plugins/siem/public/components/event_details/columns.tsx +++ b/x-pack/legacy/plugins/siem/public/components/event_details/columns.tsx @@ -22,6 +22,7 @@ import styled from 'styled-components'; import { BrowserFields } from '../../containers/source'; import { ToStringArray } from '../../graphql/types'; import { WithCopyToClipboard } from '../../lib/clipboard/with_copy_to_clipboard'; +import { ColumnHeaderOptions } from '../../store/timeline/model'; import { DragEffects } from '../drag_and_drop/draggable_wrapper'; import { DroppableWrapper } from '../drag_and_drop/droppable_wrapper'; import { getDroppableId, getDraggableFieldId, DRAG_TYPE_FIELD } from '../drag_and_drop/helpers'; @@ -29,9 +30,8 @@ import { DraggableFieldBadge } from '../draggables/field_badge'; import { FieldName } from '../fields_browser/field_name'; import { SelectableText } from '../selectable_text'; import { OverflowField } from '../tables/helpers'; -import { ColumnHeader } from '../timeline/body/column_headers/column_header'; import { defaultColumnHeaderType } from '../timeline/body/column_headers/default_headers'; -import { DEFAULT_COLUMN_MIN_WIDTH } from '../timeline/body/helpers'; +import { DEFAULT_COLUMN_MIN_WIDTH } from '../timeline/body/constants'; import { MESSAGE_FIELD_NAME } from '../timeline/body/renderers/constants'; import { FormattedFieldValue } from '../timeline/body/renderers/formatted_field'; import { OnUpdateColumns } from '../timeline/events'; @@ -63,11 +63,11 @@ export const getColumns = ({ toggleColumn, }: { browserFields: BrowserFields; - columnHeaders: ColumnHeader[]; + columnHeaders: ColumnHeaderOptions[]; eventId: string; onUpdateColumns: OnUpdateColumns; contextId: string; - toggleColumn: (column: ColumnHeader) => void; + toggleColumn: (column: ColumnHeaderOptions) => void; }) => [ { field: 'field', diff --git a/x-pack/legacy/plugins/siem/public/components/event_details/event_details.tsx b/x-pack/legacy/plugins/siem/public/components/event_details/event_details.tsx index f77c703f064f6..9234fe44320f0 100644 --- a/x-pack/legacy/plugins/siem/public/components/event_details/event_details.tsx +++ b/x-pack/legacy/plugins/siem/public/components/event_details/event_details.tsx @@ -10,7 +10,7 @@ import styled from 'styled-components'; import { BrowserFields } from '../../containers/source'; import { DetailItem } from '../../graphql/types'; -import { ColumnHeader } from '../timeline/body/column_headers/column_header'; +import { ColumnHeaderOptions } from '../../store/timeline/model'; import { OnUpdateColumns } from '../timeline/events'; import { EventFieldsBrowser } from './event_fields_browser'; import { JsonView } from './json_view'; @@ -20,14 +20,14 @@ export type View = 'table-view' | 'json-view'; interface Props { browserFields: BrowserFields; - columnHeaders: ColumnHeader[]; + columnHeaders: ColumnHeaderOptions[]; data: DetailItem[]; id: string; view: View; onUpdateColumns: OnUpdateColumns; onViewSelected: (selected: View) => void; timelineId: string; - toggleColumn: (column: ColumnHeader) => void; + toggleColumn: (column: ColumnHeaderOptions) => void; } const Details = styled.div` diff --git a/x-pack/legacy/plugins/siem/public/components/event_details/event_fields_browser.tsx b/x-pack/legacy/plugins/siem/public/components/event_details/event_fields_browser.tsx index f4e9a2b789d71..9a842339cb62e 100644 --- a/x-pack/legacy/plugins/siem/public/components/event_details/event_fields_browser.tsx +++ b/x-pack/legacy/plugins/siem/public/components/event_details/event_fields_browser.tsx @@ -8,7 +8,7 @@ import { sortBy } from 'lodash'; import { EuiInMemoryTable } from '@elastic/eui'; import React, { useMemo } from 'react'; -import { ColumnHeader } from '../timeline/body/column_headers/column_header'; +import { ColumnHeaderOptions } from '../../store/timeline/model'; import { BrowserFields, getAllFieldsByName } from '../../containers/source'; import { DetailItem } from '../../graphql/types'; import { OnUpdateColumns } from '../timeline/events'; @@ -18,12 +18,12 @@ import { search } from './helpers'; interface Props { browserFields: BrowserFields; - columnHeaders: ColumnHeader[]; + columnHeaders: ColumnHeaderOptions[]; data: DetailItem[]; eventId: string; onUpdateColumns: OnUpdateColumns; timelineId: string; - toggleColumn: (column: ColumnHeader) => void; + toggleColumn: (column: ColumnHeaderOptions) => void; } /** Renders a table view or JSON view of the `ECS` `data` */ diff --git a/x-pack/legacy/plugins/siem/public/components/event_details/helpers.tsx b/x-pack/legacy/plugins/siem/public/components/event_details/helpers.tsx index a4ec8ff2c4907..5d9c9d82490bb 100644 --- a/x-pack/legacy/plugins/siem/public/components/event_details/helpers.tsx +++ b/x-pack/legacy/plugins/siem/public/components/event_details/helpers.tsx @@ -7,8 +7,11 @@ import { get, getOr, isEmpty, uniqBy } from 'lodash/fp'; import { BrowserField, BrowserFields } from '../../containers/source'; -import { ColumnHeader } from '../timeline/body/column_headers/column_header'; -import { DEFAULT_DATE_COLUMN_MIN_WIDTH, DEFAULT_COLUMN_MIN_WIDTH } from '../timeline/body/helpers'; +import { ColumnHeaderOptions } from '../../store/timeline/model'; +import { + DEFAULT_DATE_COLUMN_MIN_WIDTH, + DEFAULT_COLUMN_MIN_WIDTH, +} from '../timeline/body/constants'; import { ToStringArray } from '../../graphql/types'; import * as i18n from './translations'; @@ -46,7 +49,7 @@ export const getColumnHeaderFromBrowserField = ({ }: { browserField: Partial; width?: number; -}): ColumnHeader => ({ +}): ColumnHeaderOptions => ({ category: browserField.category, columnHeaderType: 'not-filtered', description: browserField.description != null ? browserField.description : undefined, @@ -68,7 +71,7 @@ export const getColumnsWithTimestamp = ({ }: { browserFields: BrowserFields; category: string; -}): ColumnHeader[] => { +}): ColumnHeaderOptions[] => { const emptyFields: Record> = {}; const timestamp = get('base.fields.@timestamp', browserFields); const categoryFields: Array> = [ diff --git a/x-pack/legacy/plugins/siem/public/components/event_details/stateful_event_details.tsx b/x-pack/legacy/plugins/siem/public/components/event_details/stateful_event_details.tsx index c614fd52316bc..c79f02740253a 100644 --- a/x-pack/legacy/plugins/siem/public/components/event_details/stateful_event_details.tsx +++ b/x-pack/legacy/plugins/siem/public/components/event_details/stateful_event_details.tsx @@ -7,20 +7,20 @@ import React, { useCallback, useState } from 'react'; import { BrowserFields } from '../../containers/source'; -import { ColumnHeader } from '../timeline/body/column_headers/column_header'; import { DetailItem } from '../../graphql/types'; +import { ColumnHeaderOptions } from '../../store/timeline/model'; import { OnUpdateColumns } from '../timeline/events'; import { EventDetails, View } from './event_details'; interface Props { browserFields: BrowserFields; - columnHeaders: ColumnHeader[]; + columnHeaders: ColumnHeaderOptions[]; data: DetailItem[]; id: string; onUpdateColumns: OnUpdateColumns; timelineId: string; - toggleColumn: (column: ColumnHeader) => void; + toggleColumn: (column: ColumnHeaderOptions) => void; } export const StatefulEventDetails = React.memo( diff --git a/x-pack/legacy/plugins/siem/public/components/events_viewer/default_headers.tsx b/x-pack/legacy/plugins/siem/public/components/events_viewer/default_headers.tsx index fed61c3bdd215..b97e0da5df078 100644 --- a/x-pack/legacy/plugins/siem/public/components/events_viewer/default_headers.tsx +++ b/x-pack/legacy/plugins/siem/public/components/events_viewer/default_headers.tsx @@ -4,11 +4,14 @@ * you may not use this file except in compliance with the Elastic License. */ -import { ColumnHeader } from '../timeline/body/column_headers/column_header'; +import { ColumnHeaderOptions } from '../../store/timeline/model'; import { defaultColumnHeaderType } from '../timeline/body/column_headers/default_headers'; -import { DEFAULT_COLUMN_MIN_WIDTH, DEFAULT_DATE_COLUMN_MIN_WIDTH } from '../timeline/body/helpers'; +import { + DEFAULT_COLUMN_MIN_WIDTH, + DEFAULT_DATE_COLUMN_MIN_WIDTH, +} from '../timeline/body/constants'; -export const defaultHeaders: ColumnHeader[] = [ +export const defaultHeaders: ColumnHeaderOptions[] = [ { columnHeaderType: defaultColumnHeaderType, id: '@timestamp', diff --git a/x-pack/legacy/plugins/siem/public/components/events_viewer/default_model.tsx b/x-pack/legacy/plugins/siem/public/components/events_viewer/default_model.tsx index ac385057406e2..59a9f6d061c8d 100644 --- a/x-pack/legacy/plugins/siem/public/components/events_viewer/default_model.tsx +++ b/x-pack/legacy/plugins/siem/public/components/events_viewer/default_model.tsx @@ -5,7 +5,8 @@ */ import { defaultHeaders } from './default_headers'; -import { SubsetTimelineModel, timelineDefaults } from '../../store/timeline/model'; +import { SubsetTimelineModel } from '../../store/timeline/model'; +import { timelineDefaults } from '../../store/timeline/defaults'; export const eventsDefaultModel: SubsetTimelineModel = { ...timelineDefaults, diff --git a/x-pack/legacy/plugins/siem/public/components/events_viewer/events_viewer.tsx b/x-pack/legacy/plugins/siem/public/components/events_viewer/events_viewer.tsx index f0f28f1dc246c..0854f3db0552b 100644 --- a/x-pack/legacy/plugins/siem/public/components/events_viewer/events_viewer.tsx +++ b/x-pack/legacy/plugins/siem/public/components/events_viewer/events_viewer.tsx @@ -14,10 +14,9 @@ import { BrowserFields } from '../../containers/source'; import { TimelineQuery } from '../../containers/timeline'; import { Direction } from '../../graphql/types'; import { useKibana } from '../../lib/kibana'; -import { KqlMode } from '../../store/timeline/model'; +import { ColumnHeaderOptions, KqlMode } from '../../store/timeline/model'; import { AutoSizer } from '../auto_sizer'; import { HeaderSection } from '../header_section'; -import { ColumnHeader } from '../timeline/body/column_headers/column_header'; import { defaultHeaders } from '../timeline/body/column_headers/default_headers'; import { Sort } from '../timeline/body/sort'; import { StatefulBody } from '../timeline/body/stateful_body'; @@ -50,7 +49,7 @@ const StyledEuiPanel = styled(EuiPanel)` interface Props { browserFields: BrowserFields; - columns: ColumnHeader[]; + columns: ColumnHeaderOptions[]; dataProviders: DataProvider[]; deletedEventIds: Readonly; end: number; @@ -68,7 +67,7 @@ interface Props { start: number; sort: Sort; timelineTypeContext: TimelineTypeContextProps; - toggleColumn: (column: ColumnHeader) => void; + toggleColumn: (column: ColumnHeaderOptions) => void; utilityBar?: (refetch: inputsModel.Refetch, totalCount: number) => React.ReactNode; } diff --git a/x-pack/legacy/plugins/siem/public/components/events_viewer/index.tsx b/x-pack/legacy/plugins/siem/public/components/events_viewer/index.tsx index d56898cae7d23..6ee70d1d43a0e 100644 --- a/x-pack/legacy/plugins/siem/public/components/events_viewer/index.tsx +++ b/x-pack/legacy/plugins/siem/public/components/events_viewer/index.tsx @@ -10,8 +10,12 @@ import { connect } from 'react-redux'; import { ActionCreator } from 'typescript-fsa'; import { inputsModel, inputsSelectors, State, timelineSelectors } from '../../store'; import { inputsActions, timelineActions } from '../../store/actions'; -import { KqlMode, SubsetTimelineModel, TimelineModel } from '../../store/timeline/model'; -import { ColumnHeader } from '../timeline/body/column_headers/column_header'; +import { + ColumnHeaderOptions, + KqlMode, + SubsetTimelineModel, + TimelineModel, +} from '../../store/timeline/model'; import { DataProvider } from '../timeline/data_providers/data_provider'; import { Sort } from '../timeline/body/sort'; import { OnChangeItemsPerPage } from '../timeline/events'; @@ -39,7 +43,7 @@ export interface OwnProps { } interface StateReduxProps { - columns: ColumnHeader[]; + columns: ColumnHeaderOptions[]; dataProviders?: DataProvider[]; filters: esFilters.Filter[]; isLive: boolean; @@ -57,7 +61,7 @@ interface StateReduxProps { interface DispatchProps { createTimeline: ActionCreator<{ id: string; - columns: ColumnHeader[]; + columns: ColumnHeaderOptions[]; itemsPerPage?: number; sort?: Sort; showCheckboxes?: boolean; @@ -76,7 +80,7 @@ interface DispatchProps { itemsPerPage: number; }>; upsertColumn: ActionCreator<{ - column: ColumnHeader; + column: ColumnHeaderOptions; id: string; index: number; }>; @@ -134,7 +138,7 @@ const StatefulEventsViewerComponent: React.FC = ({ ); const toggleColumn = useCallback( - (column: ColumnHeader) => { + (column: ColumnHeaderOptions) => { const exists = columns.findIndex(c => c.id === column.id) !== -1; if (!exists && upsertColumn != null) { diff --git a/x-pack/legacy/plugins/siem/public/components/fields_browser/field_browser.tsx b/x-pack/legacy/plugins/siem/public/components/fields_browser/field_browser.tsx index c8a0eb9da688b..02aeab74f8bab 100644 --- a/x-pack/legacy/plugins/siem/public/components/fields_browser/field_browser.tsx +++ b/x-pack/legacy/plugins/siem/public/components/fields_browser/field_browser.tsx @@ -10,7 +10,7 @@ import { noop } from 'lodash/fp'; import styled from 'styled-components'; import { BrowserFields } from '../../containers/source'; -import { ColumnHeader } from '../timeline/body/column_headers/column_header'; +import { ColumnHeaderOptions } from '../../store/timeline/model'; import { CategoriesPane } from './categories_pane'; import { FieldsPane } from './fields_pane'; import { Header } from './header'; @@ -57,7 +57,7 @@ type Props = Pick< /** * The current timeline column headers */ - columnHeaders: ColumnHeader[]; + columnHeaders: ColumnHeaderOptions[]; /** * A map of categoryId -> metadata about the fields in that category, * filtered such that the name of every field in the category includes @@ -95,7 +95,7 @@ type Props = Pick< /** * Invoked to add or remove a column from the timeline */ - toggleColumn: (column: ColumnHeader) => void; + toggleColumn: (column: ColumnHeaderOptions) => void; }; /** diff --git a/x-pack/legacy/plugins/siem/public/components/fields_browser/field_items.test.tsx b/x-pack/legacy/plugins/siem/public/components/fields_browser/field_items.test.tsx index 4d0c707c46910..226b56dad8c4f 100644 --- a/x-pack/legacy/plugins/siem/public/components/fields_browser/field_items.test.tsx +++ b/x-pack/legacy/plugins/siem/public/components/fields_browser/field_items.test.tsx @@ -9,9 +9,9 @@ import React from 'react'; import { mockBrowserFields } from '../../containers/source/mock'; import { TestProviders } from '../../mock'; -import { ColumnHeader } from '../timeline/body/column_headers/column_header'; +import { ColumnHeaderOptions } from '../../store/timeline/model'; import { defaultColumnHeaderType } from '../timeline/body/column_headers/default_headers'; -import { DEFAULT_DATE_COLUMN_MIN_WIDTH } from '../timeline/body/helpers'; +import { DEFAULT_DATE_COLUMN_MIN_WIDTH } from '../timeline/body/constants'; import { Category } from './category'; import { getFieldColumns, getFieldItems } from './field_items'; @@ -21,7 +21,7 @@ import { useMountAppended } from '../../utils/use_mount_appended'; const selectedCategoryId = 'base'; const selectedCategoryFields = mockBrowserFields[selectedCategoryId].fields; const timestampFieldId = '@timestamp'; -const columnHeaders: ColumnHeader[] = [ +const columnHeaders: ColumnHeaderOptions[] = [ { category: 'base', columnHeaderType: defaultColumnHeaderType, diff --git a/x-pack/legacy/plugins/siem/public/components/fields_browser/field_items.tsx b/x-pack/legacy/plugins/siem/public/components/fields_browser/field_items.tsx index 778e9d3d3c744..990c2678b1006 100644 --- a/x-pack/legacy/plugins/siem/public/components/fields_browser/field_items.tsx +++ b/x-pack/legacy/plugins/siem/public/components/fields_browser/field_items.tsx @@ -13,6 +13,7 @@ import { Draggable } from 'react-beautiful-dnd'; import styled from 'styled-components'; import { BrowserField, BrowserFields } from '../../containers/source'; +import { ColumnHeaderOptions } from '../../store/timeline/model'; import { DragEffects } from '../drag_and_drop/draggable_wrapper'; import { DroppableWrapper } from '../drag_and_drop/droppable_wrapper'; import { getDraggableFieldId, getDroppableId, DRAG_TYPE_FIELD } from '../drag_and_drop/helpers'; @@ -20,9 +21,8 @@ import { DraggableFieldBadge } from '../draggables/field_badge'; import { getEmptyValue } from '../empty_value'; import { getColumnsWithTimestamp, getExampleText, getIconFromType } from '../event_details/helpers'; import { SelectableText } from '../selectable_text'; -import { ColumnHeader } from '../timeline/body/column_headers/column_header'; import { defaultColumnHeaderType } from '../timeline/body/column_headers/default_headers'; -import { DEFAULT_COLUMN_MIN_WIDTH } from '../timeline/body/helpers'; +import { DEFAULT_COLUMN_MIN_WIDTH } from '../timeline/body/constants'; import { OnUpdateColumns } from '../timeline/events'; import { TruncatableText } from '../truncatable_text'; import { FieldName } from './field_name'; @@ -68,10 +68,10 @@ export const getFieldItems = ({ browserFields: BrowserFields; category: Partial; categoryId: string; - columnHeaders: ColumnHeader[]; + columnHeaders: ColumnHeaderOptions[]; highlight?: string; timelineId: string; - toggleColumn: (column: ColumnHeader) => void; + toggleColumn: (column: ColumnHeaderOptions) => void; onUpdateColumns: OnUpdateColumns; }): FieldItem[] => uniqBy('name', [ diff --git a/x-pack/legacy/plugins/siem/public/components/fields_browser/field_name.tsx b/x-pack/legacy/plugins/siem/public/components/fields_browser/field_name.tsx index b8fbe46baa9c5..fe434a6ad63ce 100644 --- a/x-pack/legacy/plugins/siem/public/components/fields_browser/field_name.tsx +++ b/x-pack/legacy/plugins/siem/public/components/fields_browser/field_name.tsx @@ -18,7 +18,7 @@ import React, { useContext } from 'react'; import styled from 'styled-components'; import { WithCopyToClipboard } from '../../lib/clipboard/with_copy_to_clipboard'; -import { ColumnHeader } from '../timeline/body/column_headers/column_header'; +import { ColumnHeaderOptions } from '../../store/timeline/model'; import { OnUpdateColumns } from '../timeline/events'; import { TimelineContext } from '../timeline/timeline_context'; import { WithHoverActions } from '../with_hover_actions'; @@ -107,7 +107,7 @@ ViewCategoryIcon.displayName = 'ViewCategoryIcon'; interface ToolTipProps { categoryId: string; onUpdateColumns: OnUpdateColumns; - categoryColumns: ColumnHeader[]; + categoryColumns: ColumnHeaderOptions[]; } const ViewCategory = React.memo( @@ -138,7 +138,7 @@ ViewCategory.displayName = 'ViewCategory'; /** Renders a field name in it's non-dragging state */ export const FieldName = React.memo<{ categoryId: string; - categoryColumns: ColumnHeader[]; + categoryColumns: ColumnHeaderOptions[]; fieldId: string; highlight?: string; onUpdateColumns: OnUpdateColumns; diff --git a/x-pack/legacy/plugins/siem/public/components/fields_browser/fields_pane.tsx b/x-pack/legacy/plugins/siem/public/components/fields_browser/fields_pane.tsx index fba6e22e4b21f..354b2ae5e5eb8 100644 --- a/x-pack/legacy/plugins/siem/public/components/fields_browser/fields_pane.tsx +++ b/x-pack/legacy/plugins/siem/public/components/fields_browser/fields_pane.tsx @@ -9,7 +9,7 @@ import React from 'react'; import styled from 'styled-components'; import { BrowserFields } from '../../containers/source'; -import { ColumnHeader } from '../timeline/body/column_headers/column_header'; +import { ColumnHeaderOptions } from '../../store/timeline/model'; import { Category } from './category'; import { FieldBrowserProps } from './types'; @@ -33,7 +33,7 @@ const NoFieldsFlexGroup = styled(EuiFlexGroup)` NoFieldsFlexGroup.displayName = 'NoFieldsFlexGroup'; type Props = Pick & { - columnHeaders: ColumnHeader[]; + columnHeaders: ColumnHeaderOptions[]; /** * A map of categoryId -> metadata about the fields in that category, * filtered such that the name of every field in the category includes @@ -56,7 +56,7 @@ type Props = Pick void; + toggleColumn: (column: ColumnHeaderOptions) => void; }; export const FieldsPane = React.memo( ({ diff --git a/x-pack/legacy/plugins/siem/public/components/fields_browser/index.tsx b/x-pack/legacy/plugins/siem/public/components/fields_browser/index.tsx index c8cde5fa02a51..ff051bd722950 100644 --- a/x-pack/legacy/plugins/siem/public/components/fields_browser/index.tsx +++ b/x-pack/legacy/plugins/siem/public/components/fields_browser/index.tsx @@ -13,7 +13,7 @@ import { ActionCreator } from 'typescript-fsa'; import { BrowserFields } from '../../containers/source'; import { timelineActions } from '../../store/actions'; -import { ColumnHeader } from '../timeline/body/column_headers/column_header'; +import { ColumnHeaderOptions } from '../../store/timeline/model'; import { DEFAULT_CATEGORY_NAME } from '../timeline/body/column_headers/default_headers'; import { FieldsBrowser } from './field_browser'; import { filterBrowserFieldsByFieldName, mergeBrowserFieldsWithDefaultCategory } from './helpers'; @@ -37,7 +37,7 @@ interface DispatchProps { columnId: string; }>; upsertColumn?: ActionCreator<{ - column: ColumnHeader; + column: ColumnHeaderOptions; id: string; index: number; }>; @@ -137,7 +137,7 @@ export const StatefulFieldsBrowserComponent = React.memo { + const updateColumnsAndSelectCategoryId = useCallback((columns: ColumnHeaderOptions[]) => { onUpdateColumns(columns); // show the category columns in the timeline }, []); diff --git a/x-pack/legacy/plugins/siem/public/components/fields_browser/types.ts b/x-pack/legacy/plugins/siem/public/components/fields_browser/types.ts index 21d2d65168fa4..d6b1936fcc52f 100644 --- a/x-pack/legacy/plugins/siem/public/components/fields_browser/types.ts +++ b/x-pack/legacy/plugins/siem/public/components/fields_browser/types.ts @@ -5,15 +5,15 @@ */ import { BrowserFields } from '../../containers/source'; +import { ColumnHeaderOptions } from '../../store/timeline/model'; import { OnUpdateColumns } from '../timeline/events'; -import { ColumnHeader } from '../timeline/body/column_headers/column_header'; export type OnFieldSelected = (fieldId: string) => void; export type OnHideFieldBrowser = () => void; export interface FieldBrowserProps { /** The timeline's current column headers */ - columnHeaders: ColumnHeader[]; + columnHeaders: ColumnHeaderOptions[]; /** A map of categoryId -> metadata about the fields in that category */ browserFields: BrowserFields; /** The height of the field browser */ @@ -31,7 +31,7 @@ export interface FieldBrowserProps { /** The timeline associated with this field browser */ timelineId: string; /** Adds or removes a column to / from the timeline */ - toggleColumn: (column: ColumnHeader) => void; + toggleColumn: (column: ColumnHeaderOptions) => void; /** The width of the field browser */ width: number; } diff --git a/x-pack/legacy/plugins/siem/public/components/flyout/header/index.tsx b/x-pack/legacy/plugins/siem/public/components/flyout/header/index.tsx index e1075c89ca350..1292b77109c24 100644 --- a/x-pack/legacy/plugins/siem/public/components/flyout/header/index.tsx +++ b/x-pack/legacy/plugins/siem/public/components/flyout/header/index.tsx @@ -25,8 +25,9 @@ import { Properties } from '../../timeline/properties'; import { appActions, appModel } from '../../../store/app'; import { inputsActions } from '../../../store/inputs'; import { timelineActions } from '../../../store/actions'; -import { timelineDefaults, TimelineModel } from '../../../store/timeline/model'; -import { DEFAULT_TIMELINE_WIDTH } from '../../timeline/body/helpers'; +import { TimelineModel } from '../../../store/timeline/model'; +import { timelineDefaults } from '../../../store/timeline/defaults'; +import { DEFAULT_TIMELINE_WIDTH } from '../../timeline/body/constants'; import { InputsModelId } from '../../../store/inputs/constants'; interface OwnProps { diff --git a/x-pack/legacy/plugins/siem/public/components/flyout/index.tsx b/x-pack/legacy/plugins/siem/public/components/flyout/index.tsx index 9fb59e2034b08..8ff26b8b9b577 100644 --- a/x-pack/legacy/plugins/siem/public/components/flyout/index.tsx +++ b/x-pack/legacy/plugins/siem/public/components/flyout/index.tsx @@ -16,7 +16,7 @@ import { DataProvider } from '../timeline/data_providers/data_provider'; import { FlyoutButton } from './button'; import { Pane } from './pane'; import { timelineActions } from '../../store/actions'; -import { DEFAULT_TIMELINE_WIDTH } from '../timeline/body/helpers'; +import { DEFAULT_TIMELINE_WIDTH } from '../timeline/body/constants'; /** The height in pixels of the flyout header, exported for use in height calculations */ export const flyoutHeaderHeight: number = 60; diff --git a/x-pack/legacy/plugins/siem/public/components/navigation/helpers.ts b/x-pack/legacy/plugins/siem/public/components/navigation/helpers.ts index 7a5cc106dbcd8..a9adf2881ffd3 100644 --- a/x-pack/legacy/plugins/siem/public/components/navigation/helpers.ts +++ b/x-pack/legacy/plugins/siem/public/components/navigation/helpers.ts @@ -8,8 +8,9 @@ import { isEmpty } from 'lodash/fp'; import { Location } from 'history'; import { UrlInputsModel } from '../../store/inputs/model'; +import { TimelineUrl } from '../../store/timeline/model'; import { CONSTANTS } from '../url_state/constants'; -import { URL_STATE_KEYS, KeyUrlState, Timeline } from '../url_state/types'; +import { URL_STATE_KEYS, KeyUrlState } from '../url_state/types'; import { replaceQueryStringInLocation, replaceStateKeyInQueryString, @@ -24,7 +25,8 @@ export const getSearch = (tab: SearchNavTab, urlState: TabNavigationProps): stri if (tab && tab.urlKey != null && URL_STATE_KEYS[tab.urlKey] != null) { return URL_STATE_KEYS[tab.urlKey].reduce( (myLocation: Location, urlKey: KeyUrlState) => { - let urlStateToReplace: UrlInputsModel | Query | esFilters.Filter[] | Timeline | string = ''; + let urlStateToReplace: UrlInputsModel | Query | esFilters.Filter[] | TimelineUrl | string = + ''; if (urlKey === CONSTANTS.appQuery && urlState.query != null) { if (urlState.query.query === '') { diff --git a/x-pack/legacy/plugins/siem/public/components/navigation/tab_navigation/types.ts b/x-pack/legacy/plugins/siem/public/components/navigation/tab_navigation/types.ts index 3fac783b55047..8830894daf405 100644 --- a/x-pack/legacy/plugins/siem/public/components/navigation/tab_navigation/types.ts +++ b/x-pack/legacy/plugins/siem/public/components/navigation/tab_navigation/types.ts @@ -6,9 +6,9 @@ import { UrlInputsModel } from '../../../store/inputs/model'; import { CONSTANTS } from '../../url_state/constants'; -import { Timeline } from '../../url_state/types'; import { HostsTableType } from '../../../store/hosts/model'; import { esFilters, Query } from '../../../../../../../../src/plugins/data/public'; +import { TimelineUrl } from '../../../store/timeline/model'; import { SiemNavigationProps } from '../types'; @@ -20,7 +20,7 @@ export interface TabNavigationProps extends SiemNavigationProps { [CONSTANTS.filters]?: esFilters.Filter[]; [CONSTANTS.savedQuery]?: string; [CONSTANTS.timerange]: UrlInputsModel; - [CONSTANTS.timeline]: Timeline; + [CONSTANTS.timeline]: TimelineUrl; } export interface TabNavigationItemProps { diff --git a/x-pack/legacy/plugins/siem/public/components/navigation/types.ts b/x-pack/legacy/plugins/siem/public/components/navigation/types.ts index 845642256be8a..361945ee9a8af 100644 --- a/x-pack/legacy/plugins/siem/public/components/navigation/types.ts +++ b/x-pack/legacy/plugins/siem/public/components/navigation/types.ts @@ -7,8 +7,8 @@ import { esFilters, Query } from '../../../../../../../src/plugins/data/public'; import { HostsTableType } from '../../store/hosts/model'; import { UrlInputsModel } from '../../store/inputs/model'; +import { TimelineUrl } from '../../store/timeline/model'; import { CONSTANTS, UrlStateType } from '../url_state/constants'; -import { Timeline } from '../url_state/types'; export interface SiemNavigationProps { display?: 'default' | 'condensed'; @@ -24,7 +24,7 @@ export interface SiemNavigationComponentProps { [CONSTANTS.filters]?: esFilters.Filter[]; [CONSTANTS.savedQuery]?: string; [CONSTANTS.timerange]: UrlInputsModel; - [CONSTANTS.timeline]: Timeline; + [CONSTANTS.timeline]: TimelineUrl; }; } diff --git a/x-pack/legacy/plugins/siem/public/components/open_timeline/helpers.test.ts b/x-pack/legacy/plugins/siem/public/components/open_timeline/helpers.test.ts index 2228ee4262400..120d644b3b33a 100644 --- a/x-pack/legacy/plugins/siem/public/components/open_timeline/helpers.test.ts +++ b/x-pack/legacy/plugins/siem/public/components/open_timeline/helpers.test.ts @@ -6,7 +6,7 @@ import { cloneDeep, omit } from 'lodash/fp'; import { mockTimelineResults } from '../../mock/timeline_results'; -import { timelineDefaults } from '../../store/timeline/model'; +import { timelineDefaults } from '../../store/timeline/defaults'; import { defaultTimelineToTimelineModel, getNotesCount, diff --git a/x-pack/legacy/plugins/siem/public/components/open_timeline/helpers.ts b/x-pack/legacy/plugins/siem/public/components/open_timeline/helpers.ts index c6cc75d74cad7..3b3e0d0482d7e 100644 --- a/x-pack/legacy/plugins/siem/public/components/open_timeline/helpers.ts +++ b/x-pack/legacy/plugins/siem/public/components/open_timeline/helpers.ts @@ -19,13 +19,16 @@ import { addTimeline as dispatchAddTimeline, } from '../../store/timeline/actions'; -import { TimelineModel, timelineDefaults } from '../../store/timeline/model'; -import { ColumnHeader } from '../timeline/body/column_headers/column_header'; +import { ColumnHeaderOptions, TimelineModel } from '../../store/timeline/model'; +import { timelineDefaults } from '../../store/timeline/defaults'; import { defaultColumnHeaderType, defaultHeaders, } from '../timeline/body/column_headers/default_headers'; -import { DEFAULT_DATE_COLUMN_MIN_WIDTH, DEFAULT_COLUMN_MIN_WIDTH } from '../timeline/body/helpers'; +import { + DEFAULT_DATE_COLUMN_MIN_WIDTH, + DEFAULT_COLUMN_MIN_WIDTH, +} from '../timeline/body/constants'; import { OpenTimelineResult, UpdateTimeline, DispatchUpdateTimeline } from './types'; import { getDefaultFromValue, getDefaultToValue } from '../../utils/default_date_settings'; @@ -78,7 +81,7 @@ export const defaultTimelineToTimelineModel = ( columns: timeline.columns != null ? timeline.columns.map(col => { - const timelineCols: ColumnHeader = { + const timelineCols: ColumnHeaderOptions = { ...col, columnHeaderType: defaultColumnHeaderType, id: col.id != null ? col.id : 'unknown', diff --git a/x-pack/legacy/plugins/siem/public/components/open_timeline/index.tsx b/x-pack/legacy/plugins/siem/public/components/open_timeline/index.tsx index a97cfefaf0393..2fc61405ff12b 100644 --- a/x-pack/legacy/plugins/siem/public/components/open_timeline/index.tsx +++ b/x-pack/legacy/plugins/siem/public/components/open_timeline/index.tsx @@ -15,12 +15,12 @@ import { AllTimelinesVariables, AllTimelinesQuery } from '../../containers/timel import { allTimelinesQuery } from '../../containers/timeline/all/index.gql_query'; import { DeleteTimelineMutation, SortFieldTimeline, Direction } from '../../graphql/types'; import { State, timelineSelectors } from '../../store'; -import { timelineDefaults, TimelineModel } from '../../store/timeline/model'; +import { ColumnHeaderOptions, TimelineModel } from '../../store/timeline/model'; +import { timelineDefaults } from '../../store/timeline/defaults'; import { createTimeline as dispatchCreateNewTimeline, updateIsLoading as dispatchUpdateIsLoading, } from '../../store/timeline/actions'; -import { ColumnHeader } from '../timeline/body/column_headers/column_header'; import { OpenTimeline } from './open_timeline'; import { OPEN_TIMELINE_CLASS_NAME, queryTimelineById, dispatchUpdateTimeline } from './helpers'; import { OpenTimelineModalBody } from './open_timeline_modal/open_timeline_modal_body'; @@ -338,7 +338,7 @@ const mapDispatchToProps = (dispatch: Dispatch) => ({ show, }: { id: string; - columns: ColumnHeader[]; + columns: ColumnHeaderOptions[]; show?: boolean; }) => dispatch(dispatchCreateNewTimeline({ id, columns, show })), updateIsLoading: ({ id, isLoading }: { id: string; isLoading: boolean }) => diff --git a/x-pack/legacy/plugins/siem/public/components/open_timeline/types.ts b/x-pack/legacy/plugins/siem/public/components/open_timeline/types.ts index e5e85ccf0954a..4190ed12c5620 100644 --- a/x-pack/legacy/plugins/siem/public/components/open_timeline/types.ts +++ b/x-pack/legacy/plugins/siem/public/components/open_timeline/types.ts @@ -7,8 +7,7 @@ import { ActionCreator } from 'typescript-fsa'; import { AllTimelinesVariables } from '../../containers/timeline/all'; -import { TimelineModel } from '../../store/timeline/model'; -import { ColumnHeader } from '../timeline/body/column_headers/column_header'; +import { ColumnHeaderOptions, TimelineModel } from '../../store/timeline/model'; import { NoteResult } from '../../graphql/types'; /** The users who added a timeline to favorites */ @@ -168,7 +167,7 @@ export interface OpenTimelineDispatchProps { updateTimeline: DispatchUpdateTimeline; createNewTimeline: ActionCreator<{ id: string; - columns: ColumnHeader[]; + columns: ColumnHeaderOptions[]; show?: boolean; }>; updateIsLoading: ActionCreator<{ id: string; isLoading: boolean }>; diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/actions/index.test.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/body/actions/index.test.tsx index 9351fddd90dd5..6055745e9378e 100644 --- a/x-pack/legacy/plugins/siem/public/components/timeline/body/actions/index.test.tsx +++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/actions/index.test.tsx @@ -7,7 +7,7 @@ import { mount } from 'enzyme'; import React from 'react'; import { TestProviders } from '../../../../mock'; -import { DEFAULT_ACTIONS_COLUMN_WIDTH } from '../helpers'; +import { DEFAULT_ACTIONS_COLUMN_WIDTH } from '../constants'; import { Actions } from '.'; diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/actions/index.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/actions/index.tsx index 64e8aa3c7e7b7..d9e04ad873537 100644 --- a/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/actions/index.tsx +++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/actions/index.tsx @@ -7,15 +7,16 @@ import { EuiButtonIcon } from '@elastic/eui'; import React from 'react'; +import { ColumnHeaderOptions } from '../../../../../store/timeline/model'; import { OnColumnRemoved } from '../../../events'; import { EventsHeadingExtra, EventsLoading } from '../../../styles'; import { useTimelineContext } from '../../../timeline_context'; import { Sort } from '../../sort'; -import { ColumnHeader } from '../column_header'; + import * as i18n from '../translations'; interface Props { - header: ColumnHeader; + header: ColumnHeaderOptions; onColumnRemoved: OnColumnRemoved; sort: Sort; } diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/column_header.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/column_header.tsx index 9df805bddcc82..c3f28fd513d08 100644 --- a/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/column_header.tsx +++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/column_header.tsx @@ -7,6 +7,8 @@ import React from 'react'; import { Draggable } from 'react-beautiful-dnd'; import { Resizable, ResizeCallback } from 're-resizable'; + +import { ColumnHeaderOptions } from '../../../../store/timeline/model'; import { DragEffects } from '../../../drag_and_drop/draggable_wrapper'; import { getDraggableFieldId, DRAG_TYPE_FIELD } from '../../../drag_and_drop/helpers'; import { DraggableFieldBadge } from '../../../draggables/field_badge'; @@ -16,29 +18,10 @@ import { Sort } from '../sort'; import { DraggingContainer } from './common/dragging_container'; import { Header } from './header'; -import { ColumnId } from '../column_id'; - -export type ColumnHeaderType = 'not-filtered' | 'text-filter'; - -/** The specification of a column header */ -export interface ColumnHeader { - aggregatable?: boolean; - category?: string; - columnHeaderType: ColumnHeaderType; - description?: string; - example?: string; - format?: string; - id: ColumnId; - label?: string; - linkField?: string; - placeholder?: string; - type?: string; - width: number; -} interface ColumneHeaderProps { draggableIndex: number; - header: ColumnHeader; + header: ColumnHeaderOptions; onColumnRemoved: OnColumnRemoved; onColumnSorted: OnColumnSorted; onColumnResized: OnColumnResized; diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/default_headers.ts b/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/default_headers.ts index 4280ad684e8e0..082b5103a7d86 100644 --- a/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/default_headers.ts +++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/default_headers.ts @@ -4,13 +4,12 @@ * you may not use this file except in compliance with the Elastic License. */ -import { DEFAULT_COLUMN_MIN_WIDTH, DEFAULT_DATE_COLUMN_MIN_WIDTH } from '../helpers'; - -import { ColumnHeader, ColumnHeaderType } from './column_header'; +import { ColumnHeaderOptions, ColumnHeaderType } from '../../../../store/timeline/model'; +import { DEFAULT_COLUMN_MIN_WIDTH, DEFAULT_DATE_COLUMN_MIN_WIDTH } from '../constants'; export const defaultColumnHeaderType: ColumnHeaderType = 'not-filtered'; -export const defaultHeaders: ColumnHeader[] = [ +export const defaultHeaders: ColumnHeaderOptions[] = [ { columnHeaderType: defaultColumnHeaderType, id: '@timestamp', diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/filter/index.test.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/filter/index.test.tsx index b9cfee395bafb..f0f6ce8d0ed6f 100644 --- a/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/filter/index.test.tsx +++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/filter/index.test.tsx @@ -7,7 +7,7 @@ import { mount, shallow } from 'enzyme'; import React from 'react'; -import { ColumnHeaderType } from '../column_header'; +import { ColumnHeaderType } from '../../../../../store/timeline/model'; import { defaultHeaders } from '../default_headers'; import { Filter } from '.'; diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/filter/index.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/filter/index.tsx index 0b5247e7da678..911a309edfd98 100644 --- a/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/filter/index.tsx +++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/filter/index.tsx @@ -8,11 +8,11 @@ import { noop } from 'lodash/fp'; import React from 'react'; import { OnFilterChange } from '../../../events'; -import { ColumnHeader } from '../column_header'; +import { ColumnHeaderOptions } from '../../../../../store/timeline/model'; import { TextFilter } from '../text_filter'; interface Props { - header: ColumnHeader; + header: ColumnHeaderOptions; onFilterChange?: OnFilterChange; } diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/header/header_content.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/header/header_content.tsx index c38ae26050c93..84781e6a24300 100644 --- a/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/header/header_content.tsx +++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/header/header_content.tsx @@ -8,18 +8,18 @@ import { EuiToolTip } from '@elastic/eui'; import { noop } from 'lodash/fp'; import React from 'react'; +import { ColumnHeaderOptions } from '../../../../../store/timeline/model'; import { TruncatableText } from '../../../../truncatable_text'; import { EventsHeading, EventsHeadingTitleButton, EventsHeadingTitleSpan } from '../../../styles'; import { useTimelineContext } from '../../../timeline_context'; import { Sort } from '../../sort'; import { SortIndicator } from '../../sort/sort_indicator'; -import { ColumnHeader } from '../column_header'; import { HeaderToolTipContent } from '../header_tooltip_content'; import { getSortDirection } from './helpers'; interface HeaderContentProps { children: React.ReactNode; - header: ColumnHeader; + header: ColumnHeaderOptions; isResizing: boolean; onClick: () => void; sort: Sort; diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/header/helpers.ts b/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/header/helpers.ts index 93cb9de7c8355..47ce21e4c9637 100644 --- a/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/header/helpers.ts +++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/header/helpers.ts @@ -6,11 +6,11 @@ import { Direction } from '../../../../../graphql/types'; import { assertUnreachable } from '../../../../../lib/helpers'; +import { ColumnHeaderOptions } from '../../../../../store/timeline/model'; import { Sort, SortDirection } from '../../sort'; -import { ColumnHeader } from '../column_header'; interface GetNewSortDirectionOnClickParams { - clickedHeader: ColumnHeader; + clickedHeader: ColumnHeaderOptions; currentSort: Sort; } @@ -36,7 +36,7 @@ export const getNextSortDirection = (currentSort: Sort): Direction => { }; interface GetSortDirectionParams { - header: ColumnHeader; + header: ColumnHeaderOptions; sort: Sort; } diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/header/index.test.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/header/index.test.tsx index fab2e7ee872bf..80ae2aab0a19c 100644 --- a/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/header/index.test.tsx +++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/header/index.test.tsx @@ -9,9 +9,9 @@ import React from 'react'; import { Direction } from '../../../../../graphql/types'; import { TestProviders } from '../../../../../mock'; +import { ColumnHeaderType } from '../../../../../store/timeline/model'; import { Sort } from '../../sort'; import { CloseButton } from '../actions'; -import { ColumnHeaderType } from '../column_header'; import { defaultHeaders } from '../default_headers'; import { HeaderComponent } from '.'; diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/header/index.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/header/index.tsx index c45b9ce425deb..82c5d7eb73f02 100644 --- a/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/header/index.tsx +++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/header/index.tsx @@ -7,16 +7,16 @@ import { noop } from 'lodash/fp'; import React, { useCallback } from 'react'; +import { ColumnHeaderOptions } from '../../../../../store/timeline/model'; import { OnColumnRemoved, OnColumnSorted, OnFilterChange } from '../../../events'; import { Sort } from '../../sort'; import { Actions } from '../actions'; -import { ColumnHeader } from '../column_header'; import { Filter } from '../filter'; import { getNewSortDirectionOnClick } from './helpers'; import { HeaderContent } from './header_content'; interface Props { - header: ColumnHeader; + header: ColumnHeaderOptions; onColumnRemoved: OnColumnRemoved; onColumnSorted: OnColumnSorted; onFilterChange?: OnFilterChange; diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/header_tooltip_content/index.test.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/header_tooltip_content/index.test.tsx index 20c139ae1d050..9afc852373bc6 100644 --- a/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/header_tooltip_content/index.test.tsx +++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/header_tooltip_content/index.test.tsx @@ -8,13 +8,13 @@ import { mount, shallow } from 'enzyme'; import { cloneDeep } from 'lodash/fp'; import React from 'react'; +import { ColumnHeaderOptions } from '../../../../../store/timeline/model'; import { defaultHeaders } from '../../../../../mock'; -import { ColumnHeader } from '../column_header'; import { HeaderToolTipContent } from '.'; describe('HeaderToolTipContent', () => { - let header: ColumnHeader; + let header: ColumnHeaderOptions; beforeEach(() => { header = cloneDeep(defaultHeaders[0]); }); diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/header_tooltip_content/index.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/header_tooltip_content/index.tsx index 5deb2c3e66376..bef4bcc42b0c7 100644 --- a/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/header_tooltip_content/index.tsx +++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/header_tooltip_content/index.tsx @@ -9,8 +9,8 @@ import { isEmpty } from 'lodash/fp'; import React from 'react'; import styled from 'styled-components'; +import { ColumnHeaderOptions } from '../../../../../store/timeline/model'; import { getIconFromType } from '../../../../event_details/helpers'; -import { ColumnHeader } from '../column_header'; import * as i18n from '../translations'; const IconType = styled(EuiIcon)` @@ -35,7 +35,7 @@ const ToolTipTableValue = styled.span` `; ToolTipTableValue.displayName = 'ToolTipTableValue'; -export const HeaderToolTipContent = React.memo<{ header: ColumnHeader }>(({ header }) => ( +export const HeaderToolTipContent = React.memo<{ header: ColumnHeaderOptions }>(({ header }) => ( <> {!isEmpty(header.category) && (

diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/helpers.test.ts b/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/helpers.test.ts new file mode 100644 index 0000000000000..d66b75538ef6f --- /dev/null +++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/helpers.test.ts @@ -0,0 +1,48 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import { getActionsColumnWidth, getColumnWidthFromType } from './helpers'; +import { + DEFAULT_COLUMN_MIN_WIDTH, + DEFAULT_DATE_COLUMN_MIN_WIDTH, + DEFAULT_ACTIONS_COLUMN_WIDTH, + SHOW_CHECK_BOXES_COLUMN_WIDTH, + EVENTS_VIEWER_ACTIONS_COLUMN_WIDTH, +} from '../constants'; + +describe('helpers', () => { + describe('getColumnWidthFromType', () => { + test('it returns the expected width for a non-date column', () => { + expect(getColumnWidthFromType('keyword')).toEqual(DEFAULT_COLUMN_MIN_WIDTH); + }); + + test('it returns the expected width for a date column', () => { + expect(getColumnWidthFromType('date')).toEqual(DEFAULT_DATE_COLUMN_MIN_WIDTH); + }); + }); + + describe('getActionsColumnWidth', () => { + test('returns the default actions column width when isEventViewer is false', () => { + expect(getActionsColumnWidth(false)).toEqual(DEFAULT_ACTIONS_COLUMN_WIDTH); + }); + + test('returns the default actions column width + checkbox width when isEventViewer is false and showCheckboxes is true', () => { + expect(getActionsColumnWidth(false, true)).toEqual( + DEFAULT_ACTIONS_COLUMN_WIDTH + SHOW_CHECK_BOXES_COLUMN_WIDTH + ); + }); + + test('returns the events viewer actions column width when isEventViewer is true', () => { + expect(getActionsColumnWidth(true)).toEqual(EVENTS_VIEWER_ACTIONS_COLUMN_WIDTH); + }); + + test('returns the events viewer actions column width + checkbox width when isEventViewer is true and showCheckboxes is true', () => { + expect(getActionsColumnWidth(true, true)).toEqual( + EVENTS_VIEWER_ACTIONS_COLUMN_WIDTH + SHOW_CHECK_BOXES_COLUMN_WIDTH + ); + }); + }); +}); diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/helpers.ts b/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/helpers.ts new file mode 100644 index 0000000000000..6923831f9ef63 --- /dev/null +++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/helpers.ts @@ -0,0 +1,48 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import { get } from 'lodash/fp'; + +import { BrowserFields } from '../../../../containers/source'; +import { ColumnHeaderOptions } from '../../../../store/timeline/model'; +import { + DEFAULT_COLUMN_MIN_WIDTH, + DEFAULT_DATE_COLUMN_MIN_WIDTH, + SHOW_CHECK_BOXES_COLUMN_WIDTH, + EVENTS_VIEWER_ACTIONS_COLUMN_WIDTH, + DEFAULT_ACTIONS_COLUMN_WIDTH, +} from '../constants'; + +/** Enriches the column headers with field details from the specified browserFields */ +export const getColumnHeaders = ( + headers: ColumnHeaderOptions[], + browserFields: BrowserFields +): ColumnHeaderOptions[] => { + return headers.map(header => { + const splitHeader = header.id.split('.'); // source.geo.city_name -> [source, geo, city_name] + + return { + ...header, + ...get( + [splitHeader.length > 1 ? splitHeader[0] : 'base', 'fields', header.id], + browserFields + ), + }; + }); +}; + +export const getColumnWidthFromType = (type: string): number => + type !== 'date' ? DEFAULT_COLUMN_MIN_WIDTH : DEFAULT_DATE_COLUMN_MIN_WIDTH; + +/** Returns the (fixed) width of the Actions column */ +export const getActionsColumnWidth = ( + isEventViewer: boolean, + showCheckboxes = false, + additionalActionWidth = 0 +): number => + (showCheckboxes ? SHOW_CHECK_BOXES_COLUMN_WIDTH : 0) + + (isEventViewer ? EVENTS_VIEWER_ACTIONS_COLUMN_WIDTH : DEFAULT_ACTIONS_COLUMN_WIDTH) + + additionalActionWidth; diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/index.test.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/index.test.tsx index 4b97dd7573a45..4fafacfd01633 100644 --- a/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/index.test.tsx +++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/index.test.tsx @@ -7,7 +7,7 @@ import { shallow } from 'enzyme'; import React from 'react'; -import { DEFAULT_ACTIONS_COLUMN_WIDTH } from '../helpers'; +import { DEFAULT_ACTIONS_COLUMN_WIDTH } from '../constants'; import { defaultHeaders } from './default_headers'; import { Direction } from '../../../../graphql/types'; import { mockBrowserFields } from '../../../../../public/containers/source/mock'; diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/index.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/index.tsx index 953ffb4d4932b..ab8dc629dd577 100644 --- a/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/index.tsx +++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/index.tsx @@ -10,6 +10,7 @@ import React from 'react'; import { Droppable } from 'react-beautiful-dnd'; import { BrowserFields } from '../../../../containers/source'; +import { ColumnHeaderOptions } from '../../../../store/timeline/model'; import { DRAG_TYPE_FIELD, droppableTimelineColumnsPrefix } from '../../../drag_and_drop/helpers'; import { StatefulFieldsBrowser } from '../../../fields_browser'; import { FIELD_BROWSER_HEIGHT, FIELD_BROWSER_WIDTH } from '../../../fields_browser/helpers'; @@ -30,13 +31,13 @@ import { EventsTrHeader, } from '../../styles'; import { Sort } from '../sort'; -import { ColumnHeader } from './column_header'; import { EventsSelect } from './events_select'; +import { ColumnHeader } from './column_header'; interface Props { actionsColumnWidth: number; browserFields: BrowserFields; - columnHeaders: ColumnHeader[]; + columnHeaders: ColumnHeaderOptions[]; isEventViewer?: boolean; isSelectAllChecked: boolean; onColumnRemoved: OnColumnRemoved; @@ -49,7 +50,7 @@ interface Props { showSelectAllCheckbox: boolean; sort: Sort; timelineId: string; - toggleColumn: (column: ColumnHeader) => void; + toggleColumn: (column: ColumnHeaderOptions) => void; } /** Renders the timeline header columns */ diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/constants.ts b/x-pack/legacy/plugins/siem/public/components/timeline/body/constants.ts new file mode 100644 index 0000000000000..2aeb033c50d6f --- /dev/null +++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/constants.ts @@ -0,0 +1,21 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +/** The (fixed) width of the Actions column */ +export const DEFAULT_ACTIONS_COLUMN_WIDTH = 115; // px; +/** + * The (fixed) width of the Actions column when the timeline body is used as + * an events viewer, which has fewer actions than a regular events viewer + */ +export const EVENTS_VIEWER_ACTIONS_COLUMN_WIDTH = 32; // px; +/** Additional column width to include when checkboxes are shown **/ +export const SHOW_CHECK_BOXES_COLUMN_WIDTH = 32; // px; +/** The default minimum width of a column (when a width for the column type is not specified) */ +export const DEFAULT_COLUMN_MIN_WIDTH = 180; // px +/** The default minimum width of a column of type `date` */ +export const DEFAULT_DATE_COLUMN_MIN_WIDTH = 190; // px + +export const DEFAULT_TIMELINE_WIDTH = 1100; // px diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/data_driven_columns/index.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/body/data_driven_columns/index.tsx index 416c72cfbc255..af32c4632b019 100644 --- a/x-pack/legacy/plugins/siem/public/components/timeline/body/data_driven_columns/index.tsx +++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/data_driven_columns/index.tsx @@ -5,18 +5,18 @@ */ import React from 'react'; - import { getOr } from 'lodash/fp'; + import { Ecs, TimelineNonEcsData } from '../../../../graphql/types'; +import { ColumnHeaderOptions } from '../../../../store/timeline/model'; import { OnColumnResized } from '../../events'; import { EventsTd, EventsTdContent, EventsTdGroupData } from '../../styles'; -import { ColumnHeader } from '../column_headers/column_header'; import { ColumnRenderer } from '../renderers/column_renderer'; import { getColumnRenderer } from '../renderers/get_column_renderer'; interface Props { _id: string; - columnHeaders: ColumnHeader[]; + columnHeaders: ColumnHeaderOptions[]; columnRenderers: ColumnRenderer[]; data: TimelineNonEcsData[]; ecsData: Ecs; diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/events/event_column_view.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/body/events/event_column_view.tsx index 74476c3dc1d61..daf9c3d8b1f96 100644 --- a/x-pack/legacy/plugins/siem/public/components/timeline/body/events/event_column_view.tsx +++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/events/event_column_view.tsx @@ -9,11 +9,11 @@ import uuid from 'uuid'; import { TimelineNonEcsData, Ecs } from '../../../../graphql/types'; import { Note } from '../../../../lib/note'; +import { ColumnHeaderOptions } from '../../../../store/timeline/model'; import { AssociateNote, UpdateNote } from '../../../notes/helpers'; import { OnColumnResized, OnPinEvent, OnRowSelected, OnUnPinEvent } from '../../events'; import { EventsTdContent, EventsTrData } from '../../styles'; import { Actions } from '../actions'; -import { ColumnHeader } from '../column_headers/column_header'; import { DataDrivenColumns } from '../data_driven_columns'; import { eventHasNotes, getPinOnClick } from '../helpers'; import { ColumnRenderer } from '../renderers/column_renderer'; @@ -23,7 +23,7 @@ interface Props { id: string; actionsColumnWidth: number; associateNote: AssociateNote; - columnHeaders: ColumnHeader[]; + columnHeaders: ColumnHeaderOptions[]; columnRenderers: ColumnRenderer[]; data: TimelineNonEcsData[]; ecsData: Ecs; diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/events/index.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/body/events/index.tsx index 6b2e105ad0566..84c4253076dc9 100644 --- a/x-pack/legacy/plugins/siem/public/components/timeline/body/events/index.tsx +++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/events/index.tsx @@ -8,6 +8,7 @@ import React from 'react'; import { BrowserFields } from '../../../../containers/source'; import { TimelineItem, TimelineNonEcsData } from '../../../../graphql/types'; +import { ColumnHeaderOptions } from '../../../../store/timeline/model'; import { maxDelay } from '../../../../lib/helpers/scheduler'; import { Note } from '../../../../lib/note'; import { AddNoteToEvent, UpdateNote } from '../../../notes/helpers'; @@ -19,7 +20,6 @@ import { OnUpdateColumns, } from '../../events'; import { EventsTbody } from '../../styles'; -import { ColumnHeader } from '../column_headers/column_header'; import { ColumnRenderer } from '../renderers/column_renderer'; import { RowRenderer } from '../renderers/row_renderer'; import { StatefulEvent } from './stateful_event'; @@ -29,7 +29,7 @@ interface Props { actionsColumnWidth: number; addNoteToEvent: AddNoteToEvent; browserFields: BrowserFields; - columnHeaders: ColumnHeader[]; + columnHeaders: ColumnHeaderOptions[]; columnRenderers: ColumnRenderer[]; containerElementRef: HTMLDivElement; data: TimelineItem[]; @@ -47,7 +47,7 @@ interface Props { rowRenderers: RowRenderer[]; selectedEventIds: Readonly>; showCheckboxes: boolean; - toggleColumn: (column: ColumnHeader) => void; + toggleColumn: (column: ColumnHeaderOptions) => void; updateNote: UpdateNote; } diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/events/stateful_event.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/body/events/stateful_event.tsx index 5704b6030e7d1..1f09ae4337c42 100644 --- a/x-pack/legacy/plugins/siem/public/components/timeline/body/events/stateful_event.tsx +++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/events/stateful_event.tsx @@ -13,6 +13,7 @@ import { TimelineDetailsQuery } from '../../../../containers/timeline/details'; import { TimelineItem, DetailItem, TimelineNonEcsData } from '../../../../graphql/types'; import { requestIdleCallbackViaScheduler } from '../../../../lib/helpers/scheduler'; import { Note } from '../../../../lib/note'; +import { ColumnHeaderOptions } from '../../../../store/timeline/model'; import { AddNoteToEvent, UpdateNote } from '../../../notes/helpers'; import { SkeletonRow } from '../../../skeleton_row'; import { @@ -26,7 +27,6 @@ import { ExpandableEvent } from '../../expandable_event'; import { STATEFUL_EVENT_CSS_CLASS_NAME } from '../../helpers'; import { EventsTrGroup, EventsTrSupplement, OFFSET_SCROLLBAR } from '../../styles'; import { useTimelineWidthContext } from '../../timeline_context'; -import { ColumnHeader } from '../column_headers/column_header'; import { ColumnRenderer } from '../renderers/column_renderer'; import { getRowRenderer } from '../renderers/get_row_renderer'; import { RowRenderer } from '../renderers/row_renderer'; @@ -38,7 +38,7 @@ interface Props { containerElementRef: HTMLDivElement; addNoteToEvent: AddNoteToEvent; browserFields: BrowserFields; - columnHeaders: ColumnHeader[]; + columnHeaders: ColumnHeaderOptions[]; columnRenderers: ColumnRenderer[]; event: TimelineItem; eventIdToNoteIds: Readonly>; @@ -56,7 +56,7 @@ interface Props { selectedEventIds: Readonly>; showCheckboxes: boolean; timelineId: string; - toggleColumn: (column: ColumnHeader) => void; + toggleColumn: (column: ColumnHeaderOptions) => void; updateNote: UpdateNote; } diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/events/stateful_event_child.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/body/events/stateful_event_child.tsx index 16f89ca916d81..04f4ddf2a6eab 100644 --- a/x-pack/legacy/plugins/siem/public/components/timeline/body/events/stateful_event_child.tsx +++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/events/stateful_event_child.tsx @@ -9,12 +9,12 @@ import uuid from 'uuid'; import { TimelineNonEcsData, Ecs } from '../../../../graphql/types'; import { Note } from '../../../../lib/note'; +import { ColumnHeaderOptions } from '../../../../store/timeline/model'; import { AddNoteToEvent, UpdateNote } from '../../../notes/helpers'; import { NoteCards } from '../../../notes/note_cards'; import { OnPinEvent, OnColumnResized, OnUnPinEvent, OnRowSelected } from '../../events'; import { EventsTrSupplement, OFFSET_SCROLLBAR } from '../../styles'; import { useTimelineWidthContext } from '../../timeline_context'; -import { ColumnHeader } from '../column_headers/column_header'; import { ColumnRenderer } from '../renderers/column_renderer'; import { EventColumnView } from './event_column_view'; @@ -23,7 +23,7 @@ interface Props { actionsColumnWidth: number; addNoteToEvent: AddNoteToEvent; onPinEvent: OnPinEvent; - columnHeaders: ColumnHeader[]; + columnHeaders: ColumnHeaderOptions[]; columnRenderers: ColumnRenderer[]; data: TimelineNonEcsData[]; ecsData: Ecs; diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/helpers.test.ts b/x-pack/legacy/plugins/siem/public/components/timeline/body/helpers.test.ts index 602b88b7ae6d6..f021bf38b56c2 100644 --- a/x-pack/legacy/plugins/siem/public/components/timeline/body/helpers.test.ts +++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/helpers.test.ts @@ -6,19 +6,7 @@ import { Ecs } from '../../../graphql/types'; -import { - DEFAULT_ACTIONS_COLUMN_WIDTH, - DEFAULT_COLUMN_MIN_WIDTH, - DEFAULT_DATE_COLUMN_MIN_WIDTH, - EVENTS_VIEWER_ACTIONS_COLUMN_WIDTH, - eventHasNotes, - eventIsPinned, - getActionsColumnWidth, - getColumnWidthFromType, - getPinTooltip, - stringifyEvent, - SHOW_CHECK_BOXES_COLUMN_WIDTH, -} from './helpers'; +import { eventHasNotes, eventIsPinned, getPinTooltip, stringifyEvent } from './helpers'; describe('helpers', () => { describe('stringifyEvent', () => { @@ -237,36 +225,4 @@ describe('helpers', () => { expect(eventIsPinned({ eventId, pinnedEventIds })).toEqual(false); }); }); - - describe('getColumnWidthFromType', () => { - test('it returns the expected width for a non-date column', () => { - expect(getColumnWidthFromType('keyword')).toEqual(DEFAULT_COLUMN_MIN_WIDTH); - }); - - test('it returns the expected width for a date column', () => { - expect(getColumnWidthFromType('date')).toEqual(DEFAULT_DATE_COLUMN_MIN_WIDTH); - }); - }); - - describe('getActionsColumnWidth', () => { - test('returns the default actions column width when isEventViewer is false', () => { - expect(getActionsColumnWidth(false)).toEqual(DEFAULT_ACTIONS_COLUMN_WIDTH); - }); - - test('returns the default actions column width + checkbox width when isEventViewer is false and showCheckboxes is true', () => { - expect(getActionsColumnWidth(false, true)).toEqual( - DEFAULT_ACTIONS_COLUMN_WIDTH + SHOW_CHECK_BOXES_COLUMN_WIDTH - ); - }); - - test('returns the events viewer actions column width when isEventViewer is true', () => { - expect(getActionsColumnWidth(true)).toEqual(EVENTS_VIEWER_ACTIONS_COLUMN_WIDTH); - }); - - test('returns the events viewer actions column width + checkbox width when isEventViewer is true and showCheckboxes is true', () => { - expect(getActionsColumnWidth(true, true)).toEqual( - EVENTS_VIEWER_ACTIONS_COLUMN_WIDTH + SHOW_CHECK_BOXES_COLUMN_WIDTH - ); - }); - }); }); diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/helpers.ts b/x-pack/legacy/plugins/siem/public/components/timeline/body/helpers.ts index 4b1d72a3af7b0..3d1d165ef4fa6 100644 --- a/x-pack/legacy/plugins/siem/public/components/timeline/body/helpers.ts +++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/helpers.ts @@ -3,30 +3,13 @@ * or more contributor license agreements. Licensed under the Elastic License; * you may not use this file except in compliance with the Elastic License. */ -import { get, isEmpty, noop } from 'lodash/fp'; +import { isEmpty, noop } from 'lodash/fp'; -import { BrowserFields } from '../../../containers/source'; import { Ecs, TimelineItem, TimelineNonEcsData } from '../../../graphql/types'; import { EventType } from '../../../store/timeline/model'; import { OnPinEvent, OnUnPinEvent } from '../events'; -import { ColumnHeader } from './column_headers/column_header'; -import * as i18n from './translations'; - -/** The (fixed) width of the Actions column */ -export const DEFAULT_ACTIONS_COLUMN_WIDTH = 115; // px; -/** - * The (fixed) width of the Actions column when the timeline body is used as - * an events viewer, which has fewer actions than a regular events viewer - */ -export const EVENTS_VIEWER_ACTIONS_COLUMN_WIDTH = 32; // px; -/** Additional column width to include when checkboxes are shown **/ -export const SHOW_CHECK_BOXES_COLUMN_WIDTH = 32; // px; -/** The default minimum width of a column (when a width for the column type is not specified) */ -export const DEFAULT_COLUMN_MIN_WIDTH = 180; // px -/** The default minimum width of a column of type `date` */ -export const DEFAULT_DATE_COLUMN_MIN_WIDTH = 190; // px -export const DEFAULT_TIMELINE_WIDTH = 1100; // px +import * as i18n from './translations'; // eslint-disable-next-line @typescript-eslint/no-explicit-any export const omitTypenameAndEmpty = (k: string, v: any): any | undefined => @@ -74,37 +57,6 @@ export const getPinOnClick = ({ return isEventPinned ? () => onUnPinEvent(eventId) : () => onPinEvent(eventId); }; -export const getColumnWidthFromType = (type: string): number => - type !== 'date' ? DEFAULT_COLUMN_MIN_WIDTH : DEFAULT_DATE_COLUMN_MIN_WIDTH; - -/** Enriches the column headers with field details from the specified browserFields */ -export const getColumnHeaders = ( - headers: ColumnHeader[], - browserFields: BrowserFields -): ColumnHeader[] => { - return headers.map(header => { - const splitHeader = header.id.split('.'); // source.geo.city_name -> [source, geo, city_name] - - return { - ...header, - ...get( - [splitHeader.length > 1 ? splitHeader[0] : 'base', 'fields', header.id], - browserFields - ), - }; - }); -}; - -/** Returns the (fixed) width of the Actions column */ -export const getActionsColumnWidth = ( - isEventViewer: boolean, - showCheckboxes = false, - additionalActionWidth = 0 -): number => - (showCheckboxes ? SHOW_CHECK_BOXES_COLUMN_WIDTH : 0) + - (isEventViewer ? EVENTS_VIEWER_ACTIONS_COLUMN_WIDTH : DEFAULT_ACTIONS_COLUMN_WIDTH) + - additionalActionWidth; - /** * Creates mapping of eventID -> fieldData for given fieldsToKeep. Used to store additional field * data necessary for custom timeline actions in conjunction with selection state diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/index.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/body/index.tsx index f00da48266927..9beae219e6a6f 100644 --- a/x-pack/legacy/plugins/siem/public/components/timeline/body/index.tsx +++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/index.tsx @@ -9,6 +9,7 @@ import React, { useMemo, useRef } from 'react'; import { BrowserFields } from '../../../containers/source'; import { TimelineItem, TimelineNonEcsData } from '../../../graphql/types'; import { Note } from '../../../lib/note'; +import { ColumnHeaderOptions } from '../../../store/timeline/model'; import { AddNoteToEvent, UpdateNote } from '../../notes/helpers'; import { OnColumnRemoved, @@ -23,9 +24,8 @@ import { } from '../events'; import { EventsTable, TimelineBody, TimelineBodyGlobalStyle } from '../styles'; import { ColumnHeaders } from './column_headers'; -import { ColumnHeader } from './column_headers/column_header'; +import { getActionsColumnWidth } from './column_headers/helpers'; import { Events } from './events'; -import { getActionsColumnWidth } from './helpers'; import { ColumnRenderer } from './renderers/column_renderer'; import { RowRenderer } from './renderers/row_renderer'; import { Sort } from './sort'; @@ -34,7 +34,7 @@ import { useTimelineTypeContext } from '../timeline_context'; export interface BodyProps { addNoteToEvent: AddNoteToEvent; browserFields: BrowserFields; - columnHeaders: ColumnHeader[]; + columnHeaders: ColumnHeaderOptions[]; columnRenderers: ColumnRenderer[]; data: TimelineItem[]; getNotesByIds: (noteIds: string[]) => Note[]; @@ -59,7 +59,7 @@ export interface BodyProps { selectedEventIds: Readonly>; showCheckboxes: boolean; sort: Sort; - toggleColumn: (column: ColumnHeader) => void; + toggleColumn: (column: ColumnHeaderOptions) => void; updateNote: UpdateNote; } diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/column_renderer.ts b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/column_renderer.ts index d1807c82d188e..a13de90e7aed3 100644 --- a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/column_renderer.ts +++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/column_renderer.ts @@ -5,7 +5,7 @@ */ import { TimelineNonEcsData } from '../../../../graphql/types'; -import { ColumnHeader } from '../column_headers/column_header'; +import { ColumnHeaderOptions } from '../../../../store/timeline/model'; export interface ColumnRenderer { isInstance: (columnName: string, data: TimelineNonEcsData[]) => boolean; @@ -20,7 +20,7 @@ export interface ColumnRenderer { }: { columnName: string; eventId: string; - field: ColumnHeader; + field: ColumnHeaderOptions; timelineId: string; truncate?: boolean; values: string[] | null | undefined; diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/empty_column_renderer.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/empty_column_renderer.tsx index 7e2346ced8785..45ef46616718d 100644 --- a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/empty_column_renderer.tsx +++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/empty_column_renderer.tsx @@ -9,12 +9,12 @@ import React from 'react'; import { TimelineNonEcsData } from '../../../../graphql/types'; +import { ColumnHeaderOptions } from '../../../../store/timeline/model'; import { DraggableWrapper, DragEffects } from '../../../drag_and_drop/draggable_wrapper'; import { escapeDataProviderId } from '../../../drag_and_drop/helpers'; import { getEmptyValue } from '../../../empty_value'; import { EXISTS_OPERATOR } from '../../data_providers/data_provider'; import { Provider } from '../../data_providers/provider'; -import { ColumnHeader } from '../column_headers/column_header'; import { ColumnRenderer } from './column_renderer'; import { parseQueryValue } from './parse_query_value'; @@ -33,7 +33,7 @@ export const emptyColumnRenderer: ColumnRenderer = { }: { columnName: string; eventId: string; - field: ColumnHeader; + field: ColumnHeaderOptions; timelineId: string; truncate?: boolean; }) => ( diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/plain_column_renderer.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/plain_column_renderer.tsx index deeec05bc0707..f6a61889c501b 100644 --- a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/plain_column_renderer.tsx +++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/plain_column_renderer.tsx @@ -8,8 +8,8 @@ import { head } from 'lodash/fp'; import React from 'react'; import { TimelineNonEcsData } from '../../../../graphql/types'; +import { ColumnHeaderOptions } from '../../../../store/timeline/model'; import { getEmptyTagValue } from '../../../empty_value'; -import { ColumnHeader } from '../column_headers/column_header'; import { ColumnRenderer } from './column_renderer'; import { FormattedFieldValue } from './formatted_field'; import { parseValue } from './parse_value'; @@ -32,7 +32,7 @@ export const plainColumnRenderer: ColumnRenderer = { }: { columnName: string; eventId: string; - field: ColumnHeader; + field: ColumnHeaderOptions; timelineId: string; truncate?: boolean; values: string[] | undefined | null; diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/stateful_body.test.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/body/stateful_body.test.tsx index ce59ae8d45048..4945939ac2bdc 100644 --- a/x-pack/legacy/plugins/siem/public/components/timeline/body/stateful_body.test.tsx +++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/stateful_body.test.tsx @@ -7,7 +7,7 @@ import { mockBrowserFields } from '../../../containers/source/mock'; import { defaultHeaders } from './column_headers/default_headers'; -import { getColumnHeaders } from './helpers'; +import { getColumnHeaders } from './column_headers/helpers'; describe('stateful_body', () => { describe('getColumnHeaders', () => { diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/stateful_body.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/body/stateful_body.tsx index edf0613ac2693..8b854c3b17efb 100644 --- a/x-pack/legacy/plugins/siem/public/components/timeline/body/stateful_body.tsx +++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/stateful_body.tsx @@ -14,6 +14,9 @@ import { BrowserFields } from '../../../containers/source'; import { TimelineItem, TimelineNonEcsData } from '../../../graphql/types'; import { Note } from '../../../lib/note'; import { appModel, appSelectors, State, timelineSelectors } from '../../../store'; +import { timelineActions, appActions } from '../../../store/actions'; +import { ColumnHeaderOptions, TimelineModel } from '../../../store/timeline/model'; +import { timelineDefaults } from '../../../store/timeline/defaults'; import { AddNoteToEvent, UpdateNote } from '../../notes/helpers'; import { OnColumnRemoved, @@ -25,16 +28,13 @@ import { OnUnPinEvent, OnUpdateColumns, } from '../events'; - -import { ColumnHeader } from './column_headers/column_header'; -import { getColumnHeaders, getEventIdToDataMapping } from './helpers'; +import { useTimelineTypeContext } from '../timeline_context'; +import { getColumnHeaders } from './column_headers/helpers'; +import { getEventIdToDataMapping } from './helpers'; import { Body } from './index'; import { columnRenderers, rowRenderers } from './renderers'; import { Sort } from './sort'; -import { timelineActions, appActions } from '../../../store/actions'; -import { timelineDefaults, TimelineModel } from '../../../store/timeline/model'; import { plainRowRenderer } from './renderers/plain_row_renderer'; -import { useTimelineTypeContext } from '../timeline_context'; interface OwnProps { browserFields: BrowserFields; @@ -43,11 +43,11 @@ interface OwnProps { isEventViewer?: boolean; height: number; sort: Sort; - toggleColumn: (column: ColumnHeader) => void; + toggleColumn: (column: ColumnHeaderOptions) => void; } interface ReduxProps { - columnHeaders: ColumnHeader[]; + columnHeaders: ColumnHeaderOptions[]; eventIdToNoteIds: Readonly>; isSelectAllChecked: boolean; loadingEventIds: Readonly; @@ -89,7 +89,7 @@ interface DispatchProps { }>; updateColumns?: ActionCreator<{ id: string; - columns: ColumnHeader[]; + columns: ColumnHeaderOptions[]; }>; updateSort?: ActionCreator<{ id: string; @@ -100,7 +100,7 @@ interface DispatchProps { type StatefulBodyComponentProps = OwnProps & ReduxProps & DispatchProps; -export const emptyColumnHeaders: ColumnHeader[] = []; +export const emptyColumnHeaders: ColumnHeaderOptions[] = []; const StatefulBodyComponent = React.memo( ({ @@ -270,9 +270,9 @@ StatefulBodyComponent.displayName = 'StatefulBodyComponent'; const makeMapStateToProps = () => { const memoizedColumnHeaders: ( - headers: ColumnHeader[], + headers: ColumnHeaderOptions[], browserFields: BrowserFields - ) => ColumnHeader[] = memoizeOne(getColumnHeaders); + ) => ColumnHeaderOptions[] = memoizeOne(getColumnHeaders); const getTimeline = timelineSelectors.getTimelineByIdSelector(); const getNotesByIds = appSelectors.notesByIdsSelector(); diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/events.ts b/x-pack/legacy/plugins/siem/public/components/timeline/events.ts index b54ed52bb9f18..f977c03ed3053 100644 --- a/x-pack/legacy/plugins/siem/public/components/timeline/events.ts +++ b/x-pack/legacy/plugins/siem/public/components/timeline/events.ts @@ -4,7 +4,7 @@ * you may not use this file except in compliance with the Elastic License. */ -import { ColumnHeader } from './body/column_headers/column_header'; +import { ColumnHeaderOptions } from '../../store/timeline/model'; import { ColumnId } from './body/column_id'; import { SortDirection } from './body/sort'; import { QueryOperator } from './data_providers/data_provider'; @@ -85,7 +85,7 @@ export type OnRowSelected = ({ export type OnSelectAll = ({ isSelected }: { isSelected: boolean }) => void; /** Invoked when columns are updated */ -export type OnUpdateColumns = (columns: ColumnHeader[]) => void; +export type OnUpdateColumns = (columns: ColumnHeaderOptions[]) => void; /** Invoked when a user unpins an event */ export type OnUnPinEvent = (eventId: string) => void; diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/expandable_event/index.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/expandable_event/index.tsx index 1c5df9d220a62..77cf50342b78b 100644 --- a/x-pack/legacy/plugins/siem/public/components/timeline/expandable_event/index.tsx +++ b/x-pack/legacy/plugins/siem/public/components/timeline/expandable_event/index.tsx @@ -8,7 +8,7 @@ import React from 'react'; import styled from 'styled-components'; import { BrowserFields } from '../../../containers/source'; -import { ColumnHeader } from '../body/column_headers/column_header'; +import { ColumnHeaderOptions } from '../../../store/timeline/model'; import { DetailItem } from '../../../graphql/types'; import { StatefulEventDetails } from '../../event_details/stateful_event_details'; import { LazyAccordion } from '../../lazy_accordion'; @@ -30,14 +30,14 @@ ExpandableDetails.displayName = 'ExpandableDetails'; interface Props { browserFields: BrowserFields; - columnHeaders: ColumnHeader[]; + columnHeaders: ColumnHeaderOptions[]; id: string; event: DetailItem[]; forceExpand?: boolean; hideExpandButton?: boolean; onUpdateColumns: OnUpdateColumns; timelineId: string; - toggleColumn: (column: ColumnHeader) => void; + toggleColumn: (column: ColumnHeaderOptions) => void; } export const ExpandableEvent = React.memo( diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/index.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/index.tsx index a224e0355b5d3..9a7e005b434ae 100644 --- a/x-pack/legacy/plugins/siem/public/components/timeline/index.tsx +++ b/x-pack/legacy/plugins/siem/public/components/timeline/index.tsx @@ -12,12 +12,12 @@ import { ActionCreator } from 'typescript-fsa'; import { esFilters } from '../../../../../../../src/plugins/data/public'; import { WithSource } from '../../containers/source'; +import { useSignalIndex } from '../../containers/detection_engine/signals/use_signal_index'; import { inputsModel, inputsSelectors, State, timelineSelectors } from '../../store'; import { timelineActions } from '../../store/actions'; -import { EventType, KqlMode, timelineDefaults, TimelineModel } from '../../store/timeline/model'; -import { useSignalIndex } from '../../containers/detection_engine/signals/use_signal_index'; +import { ColumnHeaderOptions, EventType, KqlMode, TimelineModel } from '../../store/timeline/model'; +import { timelineDefaults } from '../../store/timeline/defaults'; -import { ColumnHeader } from './body/column_headers/column_header'; import { DataProvider, QueryOperator } from './data_providers/data_provider'; import { defaultHeaders } from './body/column_headers/default_headers'; import { Sort } from './body/sort'; @@ -40,7 +40,7 @@ export interface OwnProps { interface StateReduxProps { activePage?: number; - columns: ColumnHeader[]; + columns: ColumnHeaderOptions[]; dataProviders?: DataProvider[]; eventType: EventType; end: number; @@ -60,7 +60,7 @@ interface StateReduxProps { interface DispatchProps { createTimeline?: ActionCreator<{ id: string; - columns: ColumnHeader[]; + columns: ColumnHeaderOptions[]; show?: boolean; }>; addProvider?: ActionCreator<{ @@ -79,7 +79,7 @@ interface DispatchProps { updateColumns?: ActionCreator<{ id: string; category: string; - columns: ColumnHeader[]; + columns: ColumnHeaderOptions[]; }>; updateProviders?: ActionCreator<{ id: string; @@ -128,7 +128,7 @@ interface DispatchProps { providerId: string; }>; upsertColumn?: ActionCreator<{ - column: ColumnHeader; + column: ColumnHeaderOptions; id: string; index: number; }>; @@ -233,7 +233,7 @@ const StatefulTimelineComponent = React.memo( ); const toggleColumn = useCallback( - (column: ColumnHeader) => { + (column: ColumnHeaderOptions) => { const exists = columns.findIndex(c => c.id === column.id) !== -1; if (!exists && upsertColumn != null) { diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/search_or_filter/index.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/search_or_filter/index.tsx index d25ebe8e80ad5..782d17a396f76 100644 --- a/x-pack/legacy/plugins/siem/public/components/timeline/search_or_filter/index.tsx +++ b/x-pack/legacy/plugins/siem/public/components/timeline/search_or_filter/index.tsx @@ -21,7 +21,8 @@ import { inputsSelectors, } from '../../../store'; import { timelineActions } from '../../../store/actions'; -import { KqlMode, timelineDefaults, TimelineModel, EventType } from '../../../store/timeline/model'; +import { KqlMode, TimelineModel, EventType } from '../../../store/timeline/model'; +import { timelineDefaults } from '../../../store/timeline/defaults'; import { DispatchUpdateReduxTime, dispatchUpdateReduxTime } from '../../super_date_picker'; import { DataProvider } from '../data_providers/data_provider'; import { SearchOrFilter } from './search_or_filter'; diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/timeline.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/timeline.tsx index 11886b45b0bec..deb35b8906e56 100644 --- a/x-pack/legacy/plugins/siem/public/components/timeline/timeline.tsx +++ b/x-pack/legacy/plugins/siem/public/components/timeline/timeline.tsx @@ -13,9 +13,8 @@ import { BrowserFields } from '../../containers/source'; import { TimelineQuery } from '../../containers/timeline'; import { Direction } from '../../graphql/types'; import { useKibana } from '../../lib/kibana'; -import { KqlMode, EventType } from '../../store/timeline/model'; +import { ColumnHeaderOptions, KqlMode, EventType } from '../../store/timeline/model'; import { AutoSizer } from '../auto_sizer'; -import { ColumnHeader } from './body/column_headers/column_header'; import { defaultHeaders } from './body/column_headers/default_headers'; import { Sort } from './body/sort'; import { StatefulBody } from './body/stateful_body'; @@ -57,7 +56,7 @@ export const isCompactFooter = (width: number): boolean => width < 600; interface Props { browserFields: BrowserFields; - columns: ColumnHeader[]; + columns: ColumnHeaderOptions[]; dataProviders: DataProvider[]; end: number; eventType: EventType; @@ -84,7 +83,7 @@ interface Props { showCallOutUnauthorizedMsg: boolean; start: number; sort: Sort; - toggleColumn: (column: ColumnHeader) => void; + toggleColumn: (column: ColumnHeaderOptions) => void; } /** The parent Timeline component */ diff --git a/x-pack/legacy/plugins/siem/public/components/url_state/helpers.ts b/x-pack/legacy/plugins/siem/public/components/url_state/helpers.ts index 03fdbe2219acc..c33215420cc54 100644 --- a/x-pack/legacy/plugins/siem/public/components/url_state/helpers.ts +++ b/x-pack/legacy/plugins/siem/public/components/url_state/helpers.ts @@ -4,15 +4,17 @@ * you may not use this file except in compliance with the Elastic License. */ +import { isEmpty } from 'lodash/fp'; import { decode, encode } from 'rison-node'; import * as H from 'history'; import { QueryString } from 'ui/utils/query_string'; -import { Query, esFilters } from 'src/plugins/data/public'; -import { isEmpty } from 'lodash/fp'; +import { Query, esFilters } from '../../../../../../../src/plugins/data/public'; + import { SiemPageName } from '../../pages/home/types'; import { inputsSelectors, State, timelineSelectors } from '../../store'; import { UrlInputsModel } from '../../store/inputs/model'; +import { TimelineUrl } from '../../store/timeline/model'; import { formatDate } from '../super_date_picker'; import { NavTab } from '../navigation/types'; import { CONSTANTS, UrlStateType } from './constants'; @@ -20,7 +22,6 @@ import { LocationTypes, UrlStateContainerPropTypes, ReplaceStateInLocation, - Timeline, UpdateUrlStateString, } from './types'; @@ -243,7 +244,7 @@ export const updateUrlStateString = ({ }); } } else if (urlKey === CONSTANTS.timeline) { - const queryState = decodeRisonUrlState(newUrlStateString); + const queryState = decodeRisonUrlState(newUrlStateString); if (queryState != null && queryState.id === '') { return replaceStateInLocation({ history, diff --git a/x-pack/legacy/plugins/siem/public/components/url_state/initialize_redux_by_url.tsx b/x-pack/legacy/plugins/siem/public/components/url_state/initialize_redux_by_url.tsx index 50639289458cc..47064bccf561f 100644 --- a/x-pack/legacy/plugins/siem/public/components/url_state/initialize_redux_by_url.tsx +++ b/x-pack/legacy/plugins/siem/public/components/url_state/initialize_redux_by_url.tsx @@ -6,8 +6,8 @@ import { get, isEmpty } from 'lodash/fp'; import { Dispatch } from 'redux'; -import { Query, esFilters } from 'src/plugins/data/public'; +import { Query, esFilters } from '../../../../../../../src/plugins/data/public'; import { inputsActions } from '../../store/actions'; import { InputsModelId, TimeRangeKinds } from '../../store/inputs/constants'; import { @@ -16,12 +16,12 @@ import { AbsoluteTimeRange, RelativeTimeRange, } from '../../store/inputs/model'; +import { TimelineUrl } from '../../store/timeline/model'; import { savedQueryService, siemFilterManager } from '../search_bar'; - import { CONSTANTS } from './constants'; import { decodeRisonUrlState } from './helpers'; import { normalizeTimeRange } from './normalize_time_range'; -import { DispatchSetInitialStateFromUrl, SetInitialStateFromUrl, Timeline } from './types'; +import { DispatchSetInitialStateFromUrl, SetInitialStateFromUrl } from './types'; import { queryTimelineById } from '../open_timeline/helpers'; export const dispatchSetInitialStateFromUrl = ( @@ -75,7 +75,7 @@ export const dispatchSetInitialStateFromUrl = ( } if (urlKey === CONSTANTS.timeline) { - const timeline = decodeRisonUrlState(newUrlStateString); + const timeline = decodeRisonUrlState(newUrlStateString); if (timeline != null && timeline.id !== '') { queryTimelineById({ apolloClient, diff --git a/x-pack/legacy/plugins/siem/public/components/url_state/types.ts b/x-pack/legacy/plugins/siem/public/components/url_state/types.ts index 05df4b1d152a0..29fcd83878258 100644 --- a/x-pack/legacy/plugins/siem/public/components/url_state/types.ts +++ b/x-pack/legacy/plugins/siem/public/components/url_state/types.ts @@ -10,6 +10,7 @@ import { ActionCreator } from 'typescript-fsa'; import { IIndexPattern, Query, esFilters } from 'src/plugins/data/public'; import { UrlInputsModel } from '../../store/inputs/model'; +import { TimelineUrl } from '../../store/timeline/model'; import { RouteSpyState } from '../../utils/route/types'; import { DispatchUpdateTimeline } from '../open_timeline/types'; import { NavTab } from '../navigation/types'; @@ -66,17 +67,12 @@ export type LocationTypes = | CONSTANTS.timelinePage | CONSTANTS.unknown; -export interface Timeline { - id: string; - isOpen: boolean; -} - export interface UrlState { [CONSTANTS.appQuery]?: Query; [CONSTANTS.filters]?: esFilters.Filter[]; [CONSTANTS.savedQuery]?: string; [CONSTANTS.timerange]: UrlInputsModel; - [CONSTANTS.timeline]: Timeline; + [CONSTANTS.timeline]: TimelineUrl; } export type KeyUrlState = keyof UrlState; diff --git a/x-pack/legacy/plugins/siem/public/mock/global_state.ts b/x-pack/legacy/plugins/siem/public/mock/global_state.ts index 31e203d080322..6678c3043a3da 100644 --- a/x-pack/legacy/plugins/siem/public/mock/global_state.ts +++ b/x-pack/legacy/plugins/siem/public/mock/global_state.ts @@ -4,7 +4,7 @@ * you may not use this file except in compliance with the Elastic License. */ -import { DEFAULT_TIMELINE_WIDTH } from '../components/timeline/body/helpers'; +import { DEFAULT_TIMELINE_WIDTH } from '../components/timeline/body/constants'; import { Direction, FlowTarget, diff --git a/x-pack/legacy/plugins/siem/public/mock/header.ts b/x-pack/legacy/plugins/siem/public/mock/header.ts index 387e16ebeb3d6..61af5a5f098b5 100644 --- a/x-pack/legacy/plugins/siem/public/mock/header.ts +++ b/x-pack/legacy/plugins/siem/public/mock/header.ts @@ -3,15 +3,14 @@ * or more contributor license agreements. Licensed under the Elastic License; * you may not use this file except in compliance with the Elastic License. */ - -import { ColumnHeader } from '../components/timeline/body/column_headers/column_header'; +import { ColumnHeaderOptions } from '../store/timeline/model'; import { defaultColumnHeaderType } from '../components/timeline/body/column_headers/default_headers'; import { DEFAULT_COLUMN_MIN_WIDTH, DEFAULT_DATE_COLUMN_MIN_WIDTH, -} from '../components/timeline/body/helpers'; +} from '../components/timeline/body/constants'; -export const defaultHeaders: ColumnHeader[] = [ +export const defaultHeaders: ColumnHeaderOptions[] = [ { category: 'base', columnHeaderType: defaultColumnHeaderType, diff --git a/x-pack/legacy/plugins/siem/public/pages/detection_engine/components/activity_monitor/columns.tsx b/x-pack/legacy/plugins/siem/public/pages/detection_engine/components/activity_monitor/columns.tsx index 6256d5b869925..e69df6ab47ce7 100644 --- a/x-pack/legacy/plugins/siem/public/pages/detection_engine/components/activity_monitor/columns.tsx +++ b/x-pack/legacy/plugins/siem/public/pages/detection_engine/components/activity_monitor/columns.tsx @@ -10,7 +10,7 @@ import { EuiBasicTableColumn, EuiIconTip, EuiLink, EuiTextColor } from '@elastic import { DefaultItemIconButtonAction } from '@elastic/eui/src/components/basic_table/action_types'; import React from 'react'; import { getEmptyTagValue } from '../../../../components/empty_value'; -import { ColumnTypes } from './index'; +import { ColumnTypes } from './types'; const actions: Array> = [ { diff --git a/x-pack/legacy/plugins/siem/public/pages/detection_engine/components/activity_monitor/index.tsx b/x-pack/legacy/plugins/siem/public/pages/detection_engine/components/activity_monitor/index.tsx index 318c4f6f87ecd..45c36e73176d6 100644 --- a/x-pack/legacy/plugins/siem/public/pages/detection_engine/components/activity_monitor/index.tsx +++ b/x-pack/legacy/plugins/siem/public/pages/detection_engine/components/activity_monitor/index.tsx @@ -15,30 +15,7 @@ import { UtilityBarText, } from '../../../../components/detection_engine/utility_bar'; import { columns } from './columns'; - -export interface RuleTypes { - href: string; - name: string; -} - -export interface ColumnTypes { - id: number; - rule: RuleTypes; - ran: string; - lookedBackTo: string; - status: string; - response?: string | undefined; -} - -export interface PageTypes { - index: number; - size: number; -} - -export interface SortTypes { - field: keyof ColumnTypes; - direction: 'asc' | 'desc'; -} +import { ColumnTypes, PageTypes, SortTypes } from './types'; export const ActivityMonitor = React.memo(() => { const sampleTableData = [ diff --git a/x-pack/legacy/plugins/siem/public/pages/detection_engine/components/activity_monitor/types.ts b/x-pack/legacy/plugins/siem/public/pages/detection_engine/components/activity_monitor/types.ts new file mode 100644 index 0000000000000..816992ff940dd --- /dev/null +++ b/x-pack/legacy/plugins/siem/public/pages/detection_engine/components/activity_monitor/types.ts @@ -0,0 +1,29 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +export interface RuleTypes { + href: string; + name: string; +} + +export interface ColumnTypes { + id: number; + rule: RuleTypes; + ran: string; + lookedBackTo: string; + status: string; + response?: string | undefined; +} + +export interface PageTypes { + index: number; + size: number; +} + +export interface SortTypes { + field: keyof ColumnTypes; + direction: 'asc' | 'desc'; +} diff --git a/x-pack/legacy/plugins/siem/public/pages/detection_engine/components/signals/actions.tsx b/x-pack/legacy/plugins/siem/public/pages/detection_engine/components/signals/actions.tsx index 003d2baa53dbc..b23b051e8b2e8 100644 --- a/x-pack/legacy/plugins/siem/public/pages/detection_engine/components/signals/actions.tsx +++ b/x-pack/legacy/plugins/siem/public/pages/detection_engine/components/signals/actions.tsx @@ -17,7 +17,7 @@ import { formatTimelineResultToModel, } from '../../../../components/open_timeline/helpers'; import { convertKueryToElasticSearchQuery } from '../../../../lib/keury'; -import { timelineDefaults } from '../../../../store/timeline/model'; +import { timelineDefaults } from '../../../../store/timeline/defaults'; import { replaceTemplateFieldFromQuery, replaceTemplateFieldFromMatchFilters, diff --git a/x-pack/legacy/plugins/siem/public/pages/detection_engine/components/signals/default_config.tsx b/x-pack/legacy/plugins/siem/public/pages/detection_engine/components/signals/default_config.tsx index 6cf515050a39f..f4e8cdc866ece 100644 --- a/x-pack/legacy/plugins/siem/public/pages/detection_engine/components/signals/default_config.tsx +++ b/x-pack/legacy/plugins/siem/public/pages/detection_engine/components/signals/default_config.tsx @@ -11,14 +11,14 @@ import ApolloClient from 'apollo-client'; import React from 'react'; import { esFilters } from '../../../../../../../../../src/plugins/data/common/es_query'; -import { ColumnHeader } from '../../../../components/timeline/body/column_headers/column_header'; import { TimelineAction, TimelineActionProps } from '../../../../components/timeline/body/actions'; import { defaultColumnHeaderType } from '../../../../components/timeline/body/column_headers/default_headers'; import { DEFAULT_COLUMN_MIN_WIDTH, DEFAULT_DATE_COLUMN_MIN_WIDTH, -} from '../../../../components/timeline/body/helpers'; -import { SubsetTimelineModel, timelineDefaults } from '../../../../store/timeline/model'; +} from '../../../../components/timeline/body/constants'; +import { ColumnHeaderOptions, SubsetTimelineModel } from '../../../../store/timeline/model'; +import { timelineDefaults } from '../../../../store/timeline/defaults'; import { FILTER_OPEN } from './signals_filter_group'; import { sendSignalToTimelineAction, updateSignalStatusAction } from './actions'; @@ -85,7 +85,7 @@ export const buildSignalsRuleIdFilter = (ruleId: string): esFilters.Filter[] => }, ]; -export const signalsHeaders: ColumnHeader[] = [ +export const signalsHeaders: ColumnHeaderOptions[] = [ { columnHeaderType: defaultColumnHeaderType, id: '@timestamp', diff --git a/x-pack/legacy/plugins/siem/public/pages/detection_engine/components/signals/index.tsx b/x-pack/legacy/plugins/siem/public/pages/detection_engine/components/signals/index.tsx index 7eb8e07ada762..f1a4675b0086d 100644 --- a/x-pack/legacy/plugins/siem/public/pages/detection_engine/components/signals/index.tsx +++ b/x-pack/legacy/plugins/siem/public/pages/detection_engine/components/signals/index.tsx @@ -22,7 +22,8 @@ import { TimelineNonEcsData } from '../../../../graphql/types'; import { useKibana } from '../../../../lib/kibana'; import { inputsSelectors, State, inputsModel } from '../../../../store'; import { timelineActions, timelineSelectors } from '../../../../store/timeline'; -import { timelineDefaults, TimelineModel } from '../../../../store/timeline/model'; +import { TimelineModel } from '../../../../store/timeline/model'; +import { timelineDefaults } from '../../../../store/timeline/defaults'; import { useApolloClient } from '../../../../utils/apollo_context'; import { updateSignalStatusAction } from './actions'; diff --git a/x-pack/legacy/plugins/siem/public/store/timeline/actions.ts b/x-pack/legacy/plugins/siem/public/store/timeline/actions.ts index 7af17a40da312..67c5c9af2704e 100644 --- a/x-pack/legacy/plugins/siem/public/store/timeline/actions.ts +++ b/x-pack/legacy/plugins/siem/public/store/timeline/actions.ts @@ -7,7 +7,6 @@ import actionCreatorFactory from 'typescript-fsa'; import { esFilters } from '../../../../../../../src/plugins/data/public'; -import { ColumnHeader } from '../../components/timeline/body/column_headers/column_header'; import { Sort } from '../../components/timeline/body/sort'; import { DataProvider, @@ -15,7 +14,7 @@ import { } from '../../components/timeline/data_providers/data_provider'; import { KueryFilterQuery, SerializedFilterQuery } from '../model'; -import { EventType, KqlMode, TimelineModel } from './model'; +import { EventType, KqlMode, TimelineModel, ColumnHeaderOptions } from './model'; import { TimelineNonEcsData } from '../../graphql/types'; const actionCreator = actionCreatorFactory('x-pack/siem/local/timeline'); @@ -28,9 +27,11 @@ export const addNoteToEvent = actionCreator<{ id: string; noteId: string; eventI 'ADD_NOTE_TO_EVENT' ); -export const upsertColumn = actionCreator<{ column: ColumnHeader; id: string; index: number }>( - 'UPSERT_COLUMN' -); +export const upsertColumn = actionCreator<{ + column: ColumnHeaderOptions; + id: string; + index: number; +}>('UPSERT_COLUMN'); export const addProvider = actionCreator<{ id: string; provider: DataProvider }>('ADD_PROVIDER'); @@ -56,7 +57,7 @@ export const createTimeline = actionCreator<{ end: number; }; filters?: esFilters.Filter[]; - columns: ColumnHeader[]; + columns: ColumnHeaderOptions[]; itemsPerPage?: number; kqlQuery?: { filterQuery: SerializedFilterQuery | null; @@ -110,7 +111,7 @@ export const updateIsLoading = actionCreator<{ export const updateColumns = actionCreator<{ id: string; - columns: ColumnHeader[]; + columns: ColumnHeaderOptions[]; }>('UPDATE_COLUMNS'); export const updateDataProviderEnabled = actionCreator<{ diff --git a/x-pack/legacy/plugins/siem/public/store/timeline/defaults.ts b/x-pack/legacy/plugins/siem/public/store/timeline/defaults.ts new file mode 100644 index 0000000000000..bbaf2a3fb6e30 --- /dev/null +++ b/x-pack/legacy/plugins/siem/public/store/timeline/defaults.ts @@ -0,0 +1,54 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import { Direction } from '../../graphql/types'; +import { DEFAULT_TIMELINE_WIDTH } from '../../components/timeline/body/constants'; +import { defaultHeaders } from '../../components/timeline/body/column_headers/default_headers'; +import { SubsetTimelineModel, TimelineModel } from './model'; + +export const timelineDefaults: SubsetTimelineModel & Pick = { + columns: defaultHeaders, + dataProviders: [], + deletedEventIds: [], + description: '', + eventType: 'raw', + eventIdToNoteIds: {}, + highlightedDropAndProviderId: '', + historyIds: [], + filters: [], + isFavorite: false, + isLive: false, + isSelectAllChecked: false, + isLoading: false, + isSaving: false, + itemsPerPage: 25, + itemsPerPageOptions: [10, 25, 50, 100], + kqlMode: 'filter', + kqlQuery: { + filterQuery: null, + filterQueryDraft: null, + }, + loadingEventIds: [], + title: '', + noteIds: [], + pinnedEventIds: {}, + pinnedEventsSaveObject: {}, + dateRange: { + start: 0, + end: 0, + }, + savedObjectId: null, + selectedEventIds: {}, + show: false, + showCheckboxes: false, + showRowRenderers: true, + sort: { + columnId: '@timestamp', + sortDirection: Direction.desc, + }, + width: DEFAULT_TIMELINE_WIDTH, + version: null, +}; diff --git a/x-pack/legacy/plugins/siem/public/store/timeline/epic.ts b/x-pack/legacy/plugins/siem/public/store/timeline/epic.ts index 7d8bb7591c04f..eb11a90d62ce8 100644 --- a/x-pack/legacy/plugins/siem/public/store/timeline/epic.ts +++ b/x-pack/legacy/plugins/siem/public/store/timeline/epic.ts @@ -29,7 +29,6 @@ import { } from 'rxjs/operators'; import { esFilters } from '../../../../../../../src/plugins/data/public'; -import { ColumnHeader } from '../../components/timeline/body/column_headers/column_header'; import { persistTimelineMutation } from '../../containers/timeline/persist.gql_query'; import { PersistTimelineMutation, @@ -70,7 +69,7 @@ import { addTimeline, showCallOutUnauthorizedMsg, } from './actions'; -import { TimelineModel } from './model'; +import { ColumnHeaderOptions, TimelineModel } from './model'; import { epicPersistNote, timelineNoteActionsType } from './epic_note'; import { epicPersistPinnedEvent, timelinePinnedEventActionsType } from './epic_pinned_event'; import { epicPersistTimelineFavorite, timelineFavoriteActionsType } from './epic_favorite'; @@ -273,7 +272,7 @@ export const convertTimelineAsInput = ( } else if (key === 'columns' && get(key, timeline) != null) { return set( key, - get(key, timeline).map((col: ColumnHeader) => omit(['width', '__typename'], col)), + get(key, timeline).map((col: ColumnHeaderOptions) => omit(['width', '__typename'], col)), acc ); } else if (key === 'filters' && get(key, timeline) != null) { diff --git a/x-pack/legacy/plugins/siem/public/store/timeline/helpers.ts b/x-pack/legacy/plugins/siem/public/store/timeline/helpers.ts index d3dacb68d4cde..ad92f8333d2b2 100644 --- a/x-pack/legacy/plugins/siem/public/store/timeline/helpers.ts +++ b/x-pack/legacy/plugins/siem/public/store/timeline/helpers.ts @@ -7,8 +7,7 @@ import { getOr, omit, uniq, isEmpty, isEqualWith, union } from 'lodash/fp'; import { esFilters } from '../../../../../../../src/plugins/data/public'; -import { ColumnHeader } from '../../components/timeline/body/column_headers/column_header'; -import { getColumnWidthFromType } from '../../components/timeline/body/helpers'; +import { getColumnWidthFromType } from '../../components/timeline/body/column_headers/helpers'; import { Sort } from '../../components/timeline/body/sort'; import { DataProvider, @@ -17,7 +16,8 @@ import { } from '../../components/timeline/data_providers/data_provider'; import { KueryFilterQuery, SerializedFilterQuery } from '../model'; -import { KqlMode, timelineDefaults, TimelineModel, EventType } from './model'; +import { timelineDefaults } from './defaults'; +import { ColumnHeaderOptions, KqlMode, TimelineModel, EventType } from './model'; import { TimelineById, TimelineState } from './types'; import { TimelineNonEcsData } from '../../graphql/types'; @@ -129,7 +129,7 @@ export const addTimelineToStore = ({ }); interface AddNewTimelineParams { - columns: ColumnHeader[]; + columns: ColumnHeaderOptions[]; dataProviders?: DataProvider[]; dateRange?: { start: number; @@ -353,7 +353,7 @@ const addProviderToTimeline = ( }; interface AddTimelineColumnParams { - column: ColumnHeader; + column: ColumnHeaderOptions; id: string; index: number; timelineById: TimelineById; @@ -566,7 +566,7 @@ export const updateKqlFilterQueryDraft = ({ interface UpdateTimelineColumnsParams { id: string; - columns: ColumnHeader[]; + columns: ColumnHeaderOptions[]; timelineById: TimelineById; } diff --git a/x-pack/legacy/plugins/siem/public/store/timeline/model.ts b/x-pack/legacy/plugins/siem/public/store/timeline/model.ts index d9f1bab1e0033..4279a7cd09a75 100644 --- a/x-pack/legacy/plugins/siem/public/store/timeline/model.ts +++ b/x-pack/legacy/plugins/siem/public/store/timeline/model.ts @@ -5,20 +5,39 @@ */ import { esFilters } from '../../../../../../../src/plugins/data/public'; -import { ColumnHeader } from '../../components/timeline/body/column_headers/column_header'; import { DataProvider } from '../../components/timeline/data_providers/data_provider'; -import { DEFAULT_TIMELINE_WIDTH } from '../../components/timeline/body/helpers'; -import { defaultHeaders } from '../../components/timeline/body/column_headers/default_headers'; import { Sort } from '../../components/timeline/body/sort'; -import { Direction, PinnedEvent, TimelineNonEcsData } from '../../graphql/types'; +import { PinnedEvent, TimelineNonEcsData } from '../../graphql/types'; import { KueryFilterQuery, SerializedFilterQuery } from '../model'; export const DEFAULT_PAGE_COUNT = 2; // Eui Pager will not render unless this is a minimum of 2 pages export type KqlMode = 'filter' | 'search'; export type EventType = 'all' | 'raw' | 'signal'; + +export type ColumnHeaderType = 'not-filtered' | 'text-filter'; + +/** Uniquely identifies a column */ +export type ColumnId = string; + +/** The specification of a column header */ +export interface ColumnHeaderOptions { + aggregatable?: boolean; + category?: string; + columnHeaderType: ColumnHeaderType; + description?: string; + example?: string; + format?: string; + id: ColumnId; + label?: string; + linkField?: string; + placeholder?: string; + type?: string; + width: number; +} + export interface TimelineModel { /** The columns displayed in the timeline */ - columns: ColumnHeader[]; + columns: ColumnHeaderOptions[]; /** The sources of the event data shown in the timeline */ dataProviders: DataProvider[]; /** Events to not be rendered **/ @@ -124,46 +143,7 @@ export type SubsetTimelineModel = Readonly< > >; -export const timelineDefaults: SubsetTimelineModel & Pick = { - columns: defaultHeaders, - dataProviders: [], - deletedEventIds: [], - description: '', - eventType: 'raw', - eventIdToNoteIds: {}, - highlightedDropAndProviderId: '', - historyIds: [], - filters: [], - isFavorite: false, - isLive: false, - isSelectAllChecked: false, - isLoading: false, - isSaving: false, - itemsPerPage: 25, - itemsPerPageOptions: [10, 25, 50, 100], - kqlMode: 'filter', - kqlQuery: { - filterQuery: null, - filterQueryDraft: null, - }, - loadingEventIds: [], - title: '', - noteIds: [], - pinnedEventIds: {}, - pinnedEventsSaveObject: {}, - dateRange: { - start: 0, - end: 0, - }, - savedObjectId: null, - selectedEventIds: {}, - show: false, - showCheckboxes: false, - showRowRenderers: true, - sort: { - columnId: '@timestamp', - sortDirection: Direction.desc, - }, - width: DEFAULT_TIMELINE_WIDTH, - version: null, -}; +export interface TimelineUrl { + id: string; + isOpen: boolean; +} diff --git a/x-pack/legacy/plugins/siem/public/store/timeline/reducer.test.ts b/x-pack/legacy/plugins/siem/public/store/timeline/reducer.test.ts index 0b82bab3dbb8e..58fc1c7e1e3df 100644 --- a/x-pack/legacy/plugins/siem/public/store/timeline/reducer.test.ts +++ b/x-pack/legacy/plugins/siem/public/store/timeline/reducer.test.ts @@ -6,7 +6,6 @@ import { cloneDeep, set } from 'lodash/fp'; -import { ColumnHeader } from '../../components/timeline/body/column_headers/column_header'; import { IS_OPERATOR, DataProvider, @@ -15,9 +14,9 @@ import { import { defaultColumnHeaderType } from '../../components/timeline/body/column_headers/default_headers'; import { DEFAULT_COLUMN_MIN_WIDTH, - getColumnWidthFromType, DEFAULT_TIMELINE_WIDTH, -} from '../../components/timeline/body/helpers'; +} from '../../components/timeline/body/constants'; +import { getColumnWidthFromType } from '../../components/timeline/body/column_headers/helpers'; import { Direction } from '../../graphql/types'; import { defaultHeaders } from '../../mock'; @@ -41,7 +40,8 @@ import { updateTimelineTitle, upsertTimelineColumn, } from './helpers'; -import { timelineDefaults } from './model'; +import { ColumnHeaderOptions } from './model'; +import { timelineDefaults } from './defaults'; import { TimelineById } from './types'; const timelineByIdMock: TimelineById = { @@ -101,7 +101,11 @@ const timelineByIdMock: TimelineById = { }, }; -const columnsMock: ColumnHeader[] = [defaultHeaders[0], defaultHeaders[1], defaultHeaders[2]]; +const columnsMock: ColumnHeaderOptions[] = [ + defaultHeaders[0], + defaultHeaders[1], + defaultHeaders[2], +]; describe('Timeline', () => { describe('#add saved object Timeline to store ', () => { @@ -183,8 +187,8 @@ describe('Timeline', () => { describe('#upsertTimelineColumn', () => { let timelineById: TimelineById = {}; - let columns: ColumnHeader[] = []; - let columnToAdd: ColumnHeader; + let columns: ColumnHeaderOptions[] = []; + let columnToAdd: ColumnHeaderOptions; beforeEach(() => { timelineById = cloneDeep(timelineByIdMock);