github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-23 17:28:26 -04:00
Code Issues Projects Releases Packages Wiki Activity

[SIEM] Persistence of a Timeline (#36662) (#36934)

Browse source 
* persistence of a timeline

s Please enter the commit message for your changes. Lines starting

* fix unit testing + add functionality in the setting of timeline

* fix ciGroup5

* fix duplicate timeline

* fix merge issue

* fix test

* review I

* cleanup merge

* add kql from savedObject to kql bar

* add operator from Dataprovider to saveObject
This commit is contained in:
Xavier Mouligneau 2019-05-23 12:18:59 -04:00 • committed by GitHub
parent 5338f6c358
commit 73af787981
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
186 changed files with 11511 additions and 3516 deletions
Download patch file Download diff file Expand all files Collapse all files

4
x-pack/plugins/siem/common/graphql/root/schema.gql.ts
View file

@ -9,10 +9,10 @@ import gql from 'graphql-tag';
export const rootSchema = gql`
schema {
query: Query
#mutation: Mutation
mutation: Mutation
}
type Query
#type Mutation
type Mutation
`;

9
x-pack/plugins/siem/common/utility_types.ts Normal file
View file

@ -0,0 +1,9 @@
/*
* 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 type Pick3<T, K1 extends keyof T, K2 extends keyof T[K1], K3 extends keyof T[K1][K2]> = {
[P1 in K1]: { [P2 in K2]: { [P3 in K3]: ((T[K1])[K2])[P3] } }
};

13
x-pack/plugins/siem/index.ts
View file

@ -4,15 +4,17 @@
* you may not use this file except in compliance with the Elastic License.
*/
import { i18n } from '@kbn/i18n';
import { resolve } from 'path';
import { Server } from 'hapi';
import { i18n } from '@kbn/i18n';
import { initServerWithKibana } from './server/kibana.index';
import { savedObjectMappings } from './server/saved_objects';
export const APP_ID = 'siem';
export const APP_NAME = 'SIEM';
export const DEFAULT_INDEX_KEY = 'siem:defaultIndex';
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export function siem(kibana: any) {
return new kibana.Plugin({
@ -22,7 +24,9 @@ export function siem(kibana: any) {
require: ['kibana', 'elasticsearch'],
uiExports: {
app: {
description: 'Explore your SIEM App',
description: i18n.translate('xpack.siem.securityDescription', {
defaultMessage: 'Explore your SIEM App',
}),
main: 'plugins/siem/app',
euiIconType: 'securityAnalyticsApp',
title: APP_NAME,
@ -32,7 +36,9 @@ export function siem(kibana: any) {
home: ['plugins/siem/register_feature'],
links: [
{
description: 'Explore your SIEM App',
description: i18n.translate('xpack.siem.linkSecurityDescription', {
defaultMessage: 'Explore your SIEM App',
}),
euiIconType: 'securityAnalyticsApp',
id: 'siem',
order: 9000,
@ -53,6 +59,7 @@ export function siem(kibana: any) {
requiresPageReload: true,
},
},
mappings: savedObjectMappings,
},
init(server: Server) {
initServerWithKibana(server);

8
x-pack/plugins/siem/public/apps/start_app.tsx
View file

@ -13,17 +13,23 @@ import { ThemeProvider } from 'styled-components';
import { EuiErrorBoundary } from '@elastic/eui';
import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json';
import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
import { BehaviorSubject } from 'rxjs';
import { pluck } from 'rxjs/operators';
import { I18nContext } from 'ui/i18n';
import { ErrorToast } from '../components/error_toast';
import { KibanaConfigContext } from '../components/formatted_date';
import { AppFrontendLibs } from '../lib/lib';
import { PageRouter } from '../routes';
import { store } from '../store';
import { createStore } from '../store';
export const startApp = async (libs: AppFrontendLibs) => {
const history = createHashHistory();
const libs$ = new BehaviorSubject(libs);
const store = createStore(undefined, libs$.pipe(pluck('apolloClient')));
libs.framework.render(
<EuiErrorBoundary>
<I18nContext>

1
x-pack/plugins/siem/public/components/drag_and_drop/__snapshots__/draggable_wrapper.test.tsx.snap generated
View file

@ -385,6 +385,7 @@ exports[`DraggableWrapper rendering it renders against the snapshot 1`] = `
"name": "Provider 1",
"queryMatch": Object {
"field": "name",
"operator": ":",
"value": "Provider 1",
},
}

2
x-pack/plugins/siem/public/components/draggables/index.tsx
View file

@ -13,6 +13,7 @@ import { escapeQueryValue } from '../../lib/keury';
import { DragEffects, DraggableWrapper } from '../drag_and_drop/draggable_wrapper';
import { escapeDataProviderId } from '../drag_and_drop/helpers';
import { getEmptyStringTag } from '../empty_value';
import { IS_OPERATOR } from '../timeline/data_providers/data_provider';
import { Provider } from '../timeline/data_providers/provider';
export interface DefaultDraggableType {
@ -95,6 +96,7 @@ export const DefaultDraggable = pure<DefaultDraggableType>(
queryMatch: {
field,
value: escapeQueryValue(queryValue ? queryValue : value),
operator: IS_OPERATOR,
},
}}
render={(dataProvider, _, snapshot) =>

6
x-pack/plugins/siem/public/components/error_toast/index.test.tsx
View file

@ -9,17 +9,17 @@ import toJson from 'enzyme-to-json';
import * as React from 'react';
import { Provider } from 'react-redux';
import { mockGlobalState } from '../../mock';
import { apolloClientObservable, mockGlobalState } from '../../mock';
import { createStore, State } from '../../store';
import { ErrorToast } from '.';
describe('Error Toast', () => {
const state: State = mockGlobalState;
let store = createStore(state);
let store = createStore(state, apolloClientObservable);
beforeEach(() => {
store = createStore(state);
store = createStore(state, apolloClientObservable);
});
describe('rendering', () => {

14
x-pack/plugins/siem/public/components/flyout/index.test.tsx
View file

@ -10,7 +10,7 @@ import { set } from 'lodash/fp';
import * as React from 'react';
import { ActionCreator } from 'typescript-fsa';
import { mockGlobalState, TestProviders } from '../../mock';
import { apolloClientObservable, mockGlobalState, TestProviders } from '../../mock';
import { createStore, State } from '../../store';
import { mockDataProviders } from '../timeline/data_providers/mock/mock_data_providers';
@ -60,7 +60,7 @@ describe('Flyout', () => {
test('it renders the title field when its state is set to flyout is true', () => {
const stateShowIsTrue = set('timeline.timelineById.test.show', true, state);
const storeShowIsTrue = createStore(stateShowIsTrue);
const storeShowIsTrue = createStore(stateShowIsTrue, apolloClientObservable);
const wrapper = mount(
<TestProviders store={storeShowIsTrue}>
@ -83,7 +83,7 @@ describe('Flyout', () => {
test('it does NOT render the fly out button when its state is set to flyout is true', () => {
const stateShowIsTrue = set('timeline.timelineById.test.show', true, state);
const storeShowIsTrue = createStore(stateShowIsTrue);
const storeShowIsTrue = createStore(stateShowIsTrue, apolloClientObservable);
const wrapper = mount(
<TestProviders store={storeShowIsTrue}>
@ -101,7 +101,7 @@ describe('Flyout', () => {
test('it renders the flyout body', () => {
const stateShowIsTrue = set('timeline.timelineById.test.show', true, state);
const storeShowIsTrue = createStore(stateShowIsTrue);
const storeShowIsTrue = createStore(stateShowIsTrue, apolloClientObservable);
const wrapper = mount(
<TestProviders store={storeShowIsTrue}>
@ -130,7 +130,7 @@ describe('Flyout', () => {
mockDataProviders,
state
);
const storeWithDataProviders = createStore(stateWithDataProviders);
const storeWithDataProviders = createStore(stateWithDataProviders, apolloClientObservable);
const wrapper = mount(
<TestProviders store={storeWithDataProviders}>
@ -152,7 +152,7 @@ describe('Flyout', () => {
mockDataProviders,
state
);
const storeWithDataProviders = createStore(stateWithDataProviders);
const storeWithDataProviders = createStore(stateWithDataProviders, apolloClientObservable);
const wrapper = mount(
<TestProviders store={storeWithDataProviders}>
@ -214,7 +214,7 @@ describe('Flyout', () => {
test('should call the onClose when the close button is clicked', () => {
const stateShowIsTrue = set('timeline.timelineById.test.show', true, state);
const storeShowIsTrue = createStore(stateShowIsTrue);
const storeShowIsTrue = createStore(stateShowIsTrue, apolloClientObservable);
const showTimeline = (jest.fn() as unknown) as ActionCreator<{ id: string; show: boolean }>;
const wrapper = mount(

3
x-pack/plugins/siem/public/components/formatted_ip/index.tsx
View file

@ -13,7 +13,7 @@ import { DragEffects, DraggableWrapper } from '../drag_and_drop/draggable_wrappe
import { escapeDataProviderId } from '../drag_and_drop/helpers';
import { getOrEmptyTagFromValue } from '../empty_value';
import { IPDetailsLink } from '../links';
import { DataProvider } from '../timeline/data_providers/data_provider';
import { DataProvider, IS_OPERATOR } from '../timeline/data_providers/data_provider';
import { Provider } from '../timeline/data_providers/provider';
import { TruncatableText } from '../truncatable_text';
import { parseQueryValue } from '../timeline/body/renderers/parse_query_value';
@ -55,6 +55,7 @@ const getDataProvider = ({
queryMatch: {
field: fieldName,
value: escapeQueryValue(parseQueryValue(address)),
operator: IS_OPERATOR,
},
excluded: false,
kqlQuery: '',

2
x-pack/plugins/siem/public/components/notes/helpers.tsx
View file

@ -70,7 +70,9 @@ export const createNote = ({
id: getNewNoteId(),
lastEdit: null,
note: newNote.trim(),
saveObjectId: null,
user: 'elastic', // TODO: get the logged-in Kibana user
version: null,
});
interface UpdateAndAssociateNodeParams {

4
x-pack/plugins/siem/public/components/notes/note_cards/index.test.tsx
View file

@ -20,14 +20,18 @@ describe('NoteCards', () => {
id: 'abc',
lastEdit: null,
note: 'a fake note',
saveObjectId: null,
user: 'elastic',
version: null,
},
{
created: new Date(),
id: 'def',
lastEdit: null,
note: 'another fake note',
saveObjectId: null,
user: 'elastic',
version: null,
},
];

4
x-pack/plugins/siem/public/components/open_timeline/helpers.test.ts
View file

@ -7,10 +7,10 @@ import { cloneDeep, omit } from 'lodash/fp';
import { getNotesCount, getPinnedEventCount, isUntitled } from './helpers';
import { mockTimelineResults } from '../../mock/timeline_results';
import { TimelineResult } from './types';
import { OpenTimelineResult } from './types';
describe('helpers', () => {
let mockResults: TimelineResult[];
let mockResults: OpenTimelineResult[];
beforeEach(() => {
mockResults = cloneDeep(mockTimelineResults);

8
x-pack/plugins/siem/public/components/open_timeline/helpers.ts
View file

@ -4,16 +4,16 @@
* you may not use this file except in compliance with the Elastic License.
*/
import { TimelineResult } from './types';
import { OpenTimelineResult } from './types';
export const OPEN_TIMELINE_CLASS_NAME = 'open-timeline';
/** Returns a count of the pinned events in a timeline */
export const getPinnedEventCount = ({ pinnedEventIds }: TimelineResult): number =>
export const getPinnedEventCount = ({ pinnedEventIds }: OpenTimelineResult): number =>
pinnedEventIds != null ? Object.keys(pinnedEventIds).length : 0;
/** Returns the sum of all notes added to pinned events and notes applicable to the timeline */
export const getNotesCount = ({ eventIdToNoteIds, noteIds }: TimelineResult): number => {
export const getNotesCount = ({ eventIdToNoteIds, noteIds }: OpenTimelineResult): number => {
const eventNoteCount =
eventIdToNoteIds != null
? Object.keys(eventIdToNoteIds).reduce<number>(
@ -28,5 +28,5 @@ export const getNotesCount = ({ eventIdToNoteIds, noteIds }: TimelineResult): nu
};
/** Returns true if the timeline is untitlied */
export const isUntitled = ({ title }: TimelineResult): boolean =>
export const isUntitled = ({ title }: OpenTimelineResult): boolean =>
title == null || title.trim().length === 0;

493
x-pack/plugins/siem/public/components/open_timeline/index.test.tsx
View file

@ -4,38 +4,55 @@
* you may not use this file except in compliance with the Elastic License.
*/
import { cloneDeep, get } from 'lodash/fp';
import { mountWithIntl } from 'test_utils/enzyme_helpers';
import { mount, ReactWrapper } from 'enzyme';
import { get } from 'lodash/fp';
import { MockedProvider } from 'react-apollo/test-utils';
import * as React from 'react';
import { wait } from '../../lib/helpers';
import { TestProviderWithoutDragAndDrop, apolloClient } from '../../mock/test_providers';
import { mockOpenTimelineQueryResults } from '../../mock/timeline_results';
import { DEFAULT_SEARCH_RESULTS_PER_PAGE } from '../../pages/timelines/timelines_page';
import { mockTimelineResults } from '../../mock/timeline_results';
import { StatefulOpenTimeline } from '.';
import { NotePreviews } from './note_previews';
import { OPEN_TIMELINE_CLASS_NAME } from './helpers';
import { StatefulOpenTimeline } from '.';
import { TimelineResult } from './types';
const getStateChildComponent = (
wrapper: ReactWrapper<any, Readonly<{}>, React.Component<{}, {}, any>>
): React.Component<{}, {}, any> =>
wrapper
.childAt(0)
.childAt(0)
.childAt(0)
.childAt(0)
.childAt(0)
.childAt(0)
.childAt(0)
.childAt(0)
.instance();
describe('StatefulOpenTimeline', () => {
const title = 'All Timelines / Open Timelines';
let mockResults: TimelineResult[];
beforeEach(() => {
mockResults = cloneDeep(mockTimelineResults);
});
test('it has the expected initial state', () => {
const wrapper = mountWithIntl(
<StatefulOpenTimeline
deleteTimelines={jest.fn()}
defaultPageSize={DEFAULT_SEARCH_RESULTS_PER_PAGE}
openTimeline={jest.fn()}
searchResults={mockResults}
title={title}
/>
test('it has the expected initial state', async () => {
const wrapper = mount(
<TestProviderWithoutDragAndDrop>
<MockedProvider mocks={mockOpenTimelineQueryResults} addTypename={false}>
<StatefulOpenTimeline
apolloClient={apolloClient}
isModal={false}
defaultPageSize={DEFAULT_SEARCH_RESULTS_PER_PAGE}
title={title}
/>
</MockedProvider>
</TestProviderWithoutDragAndDrop>
);
expect(wrapper.state()).toEqual({
await wait();
wrapper.update();
expect(getStateChildComponent(wrapper).state).toEqual({
itemIdToExpandedNotesRowMap: {},
onlyFavorites: false,
pageIndex: 0,
@ -48,24 +65,30 @@ describe('StatefulOpenTimeline', () => {
});
describe('#onQueryChange', () => {
test('it updates the query state with the expected trimmed value when the user enters a query', () => {
const wrapper = mountWithIntl(
<StatefulOpenTimeline
deleteTimelines={jest.fn()}
defaultPageSize={DEFAULT_SEARCH_RESULTS_PER_PAGE}
openTimeline={jest.fn()}
searchResults={mockResults}
title={title}
/>
test('it updates the query state with the expected trimmed value when the user enters a query', async () => {
const wrapper = mount(
<TestProviderWithoutDragAndDrop>
<MockedProvider mocks={mockOpenTimelineQueryResults} addTypename={false}>
<StatefulOpenTimeline
apolloClient={apolloClient}
isModal={false}
defaultPageSize={DEFAULT_SEARCH_RESULTS_PER_PAGE}
title={title}
/>
</MockedProvider>
</TestProviderWithoutDragAndDrop>
);
await wait();
wrapper.update();
wrapper
.find('[data-test-subj="search-bar"] input')
.simulate('keyup', { keyCode: 13, target: { value: ' abcd ' } });
wrapper.update();
expect(wrapper.state()).toEqual({
expect(getStateChildComponent(wrapper).state).toEqual({
itemIdToExpandedNotesRowMap: {},
onlyFavorites: false,
pageIndex: 0,
@ -77,17 +100,22 @@ describe('StatefulOpenTimeline', () => {
});
});
test('it appends the word "with" to the Showing n Timelines message when the user enters a query', () => {
const wrapper = mountWithIntl(
<StatefulOpenTimeline
deleteTimelines={jest.fn()}
defaultPageSize={DEFAULT_SEARCH_RESULTS_PER_PAGE}
openTimeline={jest.fn()}
searchResults={mockResults}
title={title}
/>
test('it appends the word "with" to the Showing in Timelines message when the user enters a query', async () => {
const wrapper = mount(
<TestProviderWithoutDragAndDrop>
<MockedProvider mocks={mockOpenTimelineQueryResults} addTypename={false}>
<StatefulOpenTimeline
apolloClient={apolloClient}
isModal={false}
defaultPageSize={DEFAULT_SEARCH_RESULTS_PER_PAGE}
title={title}
/>
</MockedProvider>
</TestProviderWithoutDragAndDrop>
);
await wait();
wrapper
.find('[data-test-subj="search-bar"] input')
.simulate('keyup', { keyCode: 13, target: { value: ' abcd ' } });
@ -102,17 +130,22 @@ describe('StatefulOpenTimeline', () => {
).toContain('Showing 11 Timelines with');
});
test('echos (renders) the query when the user enters a query', () => {
const wrapper = mountWithIntl(
<StatefulOpenTimeline
deleteTimelines={jest.fn()}
defaultPageSize={DEFAULT_SEARCH_RESULTS_PER_PAGE}
openTimeline={jest.fn()}
searchResults={mockResults}
title={title}
/>
test('echos (renders) the query when the user enters a query', async () => {
const wrapper = mount(
<TestProviderWithoutDragAndDrop>
<MockedProvider mocks={mockOpenTimelineQueryResults} addTypename={false}>
<StatefulOpenTimeline
apolloClient={apolloClient}
isModal={false}
defaultPageSize={DEFAULT_SEARCH_RESULTS_PER_PAGE}
title={title}
/>
</MockedProvider>
</TestProviderWithoutDragAndDrop>
);
await wait();
wrapper
.find('[data-test-subj="search-bar"] input')
.simulate('keyup', { keyCode: 13, target: { value: ' abcd ' } });
@ -129,17 +162,22 @@ describe('StatefulOpenTimeline', () => {
});
describe('#focusInput', () => {
test('focuses the input when the component mounts', () => {
const wrapper = mountWithIntl(
<StatefulOpenTimeline
deleteTimelines={jest.fn()}
defaultPageSize={DEFAULT_SEARCH_RESULTS_PER_PAGE}
openTimeline={jest.fn()}
searchResults={mockResults}
title={title}
/>
test('focuses the input when the component mounts', async () => {
const wrapper = mount(
<TestProviderWithoutDragAndDrop>
<MockedProvider mocks={mockOpenTimelineQueryResults} addTypename={false}>
<StatefulOpenTimeline
apolloClient={apolloClient}
isModal={false}
defaultPageSize={DEFAULT_SEARCH_RESULTS_PER_PAGE}
title={title}
/>
</MockedProvider>
</TestProviderWithoutDragAndDrop>
);
await wait();
expect(
wrapper
.find(`.${OPEN_TIMELINE_CLASS_NAME} input`)
@ -150,20 +188,25 @@ describe('StatefulOpenTimeline', () => {
});
describe('#onAddTimelinesToFavorites', () => {
test('it invokes addTimelinesToFavorites with the selected timelines when the button is clicked', () => {
// This functionality is hiding for now and waiting to see the light in the near future
test.skip('it invokes addTimelinesToFavorites with the selected timelines when the button is clicked', async () => {
const addTimelinesToFavorites = jest.fn();
const wrapper = mountWithIntl(
<StatefulOpenTimeline
addTimelinesToFavorites={addTimelinesToFavorites}
deleteTimelines={jest.fn()}
defaultPageSize={DEFAULT_SEARCH_RESULTS_PER_PAGE}
openTimeline={jest.fn()}
searchResults={mockResults}
title={title}
/>
const wrapper = mount(
<TestProviderWithoutDragAndDrop>
<MockedProvider mocks={mockOpenTimelineQueryResults} addTypename={false}>
<StatefulOpenTimeline
apolloClient={apolloClient}
isModal={false}
defaultPageSize={DEFAULT_SEARCH_RESULTS_PER_PAGE}
title={title}
/>
</MockedProvider>
</TestProviderWithoutDragAndDrop>
);
await wait();
wrapper
.find('.euiCheckbox__input')
.first()
@ -190,19 +233,25 @@ describe('StatefulOpenTimeline', () => {
});
describe('#onDeleteSelected', () => {
test('it invokes deleteTimelines with the selected timelines when the button is clicked', () => {
// TODO - Have been skip because we need to re-implement the test as the component changed
test.skip('it invokes deleteTimelines with the selected timelines when the button is clicked', async () => {
const deleteTimelines = jest.fn();
const wrapper = mountWithIntl(
<StatefulOpenTimeline
deleteTimelines={deleteTimelines}
defaultPageSize={DEFAULT_SEARCH_RESULTS_PER_PAGE}
openTimeline={jest.fn()}
searchResults={mockResults}
title={title}
/>
const wrapper = mount(
<TestProviderWithoutDragAndDrop>
<MockedProvider mocks={mockOpenTimelineQueryResults} addTypename={false}>
<StatefulOpenTimeline
apolloClient={apolloClient}
isModal={false}
defaultPageSize={DEFAULT_SEARCH_RESULTS_PER_PAGE}
title={title}
/>
</MockedProvider>
</TestProviderWithoutDragAndDrop>
);
await wait();
wrapper
.find('.euiCheckbox__input')
.first()
@ -229,46 +278,60 @@ describe('StatefulOpenTimeline', () => {
});
describe('#onSelectionChange', () => {
test('it updates the selection state when timelines are selected', () => {
const wrapper = mountWithIntl(
<StatefulOpenTimeline
deleteTimelines={jest.fn()}
defaultPageSize={DEFAULT_SEARCH_RESULTS_PER_PAGE}
openTimeline={jest.fn()}
searchResults={mockResults}
title={title}
/>
test('it updates the selection state when timelines are selected', async () => {
const wrapper = mount(
<TestProviderWithoutDragAndDrop>
<MockedProvider mocks={mockOpenTimelineQueryResults} addTypename={false}>
<StatefulOpenTimeline
apolloClient={apolloClient}
isModal={false}
defaultPageSize={DEFAULT_SEARCH_RESULTS_PER_PAGE}
title={title}
/>
</MockedProvider>
</TestProviderWithoutDragAndDrop>
);
await wait();
wrapper
.find('.euiCheckbox__input')
.first()
.simulate('change', { target: { checked: true } });
wrapper.update();
expect(get('selectedItems', wrapper.state()).length).toEqual(9); // 9 selectable timelines are shown on the first page of data
expect(get('selectedItems', getStateChildComponent(wrapper).state).length).toEqual(13); // 13 because we did mock 13 timelines in the query
});
});
describe('#onTableChange', () => {
test('it updates the sort state when the user clicks on a column to sort it', () => {
const wrapper = mountWithIntl(
<StatefulOpenTimeline
deleteTimelines={jest.fn()}
defaultPageSize={DEFAULT_SEARCH_RESULTS_PER_PAGE}
openTimeline={jest.fn()}
searchResults={mockResults}
title={title}
/>
test('it updates the sort state when the user clicks on a column to sort it', async () => {
const wrapper = mount(
<TestProviderWithoutDragAndDrop>
<MockedProvider mocks={mockOpenTimelineQueryResults} addTypename={false}>
<StatefulOpenTimeline
apolloClient={apolloClient}
isModal={false}
defaultPageSize={DEFAULT_SEARCH_RESULTS_PER_PAGE}
title={title}
/>
</MockedProvider>
</TestProviderWithoutDragAndDrop>
);
await wait();
wrapper.update();
wrapper
.find('thead tr th button')
.at(1)
.at(0)
.simulate('click');
wrapper.update();
expect(wrapper.state()).toEqual({
expect(getStateChildComponent(wrapper).state).toEqual({
itemIdToExpandedNotesRowMap: {},
onlyFavorites: false,
pageIndex: 0,
@ -276,29 +339,36 @@ describe('StatefulOpenTimeline', () => {
search: '',
selectedItems: [],
sortDirection: 'asc',
sortField: 'description',
sortField: 'updated',
});
});
});
describe('#onToggleOnlyFavorites', () => {
test('it updates the onlyFavorites state when the user clicks the Only Favorites button', () => {
const wrapper = mountWithIntl(
<StatefulOpenTimeline
deleteTimelines={jest.fn()}
defaultPageSize={DEFAULT_SEARCH_RESULTS_PER_PAGE}
openTimeline={jest.fn()}
searchResults={mockResults}
title={title}
/>
test('it updates the onlyFavorites state when the user clicks the Only Favorites button', async () => {
const wrapper = mount(
<TestProviderWithoutDragAndDrop>
<MockedProvider mocks={mockOpenTimelineQueryResults} addTypename={false}>
<StatefulOpenTimeline
apolloClient={apolloClient}
isModal={false}
defaultPageSize={DEFAULT_SEARCH_RESULTS_PER_PAGE}
title={title}
/>
</MockedProvider>
</TestProviderWithoutDragAndDrop>
);
await wait();
wrapper
.find('[data-test-subj="only-favorites-toggle"]')
.first()
.simulate('click');
expect(wrapper.state()).toEqual({
wrapper.update();
expect(getStateChildComponent(wrapper).state).toEqual({
itemIdToExpandedNotesRowMap: {},
onlyFavorites: true,
pageIndex: 0,
@ -312,25 +382,45 @@ describe('StatefulOpenTimeline', () => {
});
describe('#onToggleShowNotes', () => {
test('it updates the itemIdToExpandedNotesRowMap state when the user clicks the expand notes button', () => {
const wrapper = mountWithIntl(
<StatefulOpenTimeline
deleteTimelines={jest.fn()}
defaultPageSize={DEFAULT_SEARCH_RESULTS_PER_PAGE}
openTimeline={jest.fn()}
searchResults={mockResults}
title={title}
/>
test('it updates the itemIdToExpandedNotesRowMap state when the user clicks the expand notes button', async () => {
const wrapper = mount(
<TestProviderWithoutDragAndDrop>
<MockedProvider mocks={mockOpenTimelineQueryResults} addTypename={false}>
<StatefulOpenTimeline
apolloClient={apolloClient}
isModal={false}
defaultPageSize={DEFAULT_SEARCH_RESULTS_PER_PAGE}
title={title}
/>
</MockedProvider>
</TestProviderWithoutDragAndDrop>
);
await wait();
wrapper.update();
wrapper
.find('[data-test-subj="expand-notes"]')
.first()
.simulate('click');
expect(wrapper.state()).toEqual({
wrapper.update();
expect(getStateChildComponent(wrapper).state).toEqual({
itemIdToExpandedNotesRowMap: {
'saved-timeline-11': <NotePreviews isModal={false} notes={mockResults[0].notes} />,
'10849df0-7b44-11e9-a608-ab3d811609': (
<NotePreviews
isModal={false}
notes={
mockOpenTimelineQueryResults[0].result.data!.getAllTimeline.timeline[0].notes !=
null
? mockOpenTimelineQueryResults[0].result.data!.getAllTimeline.timeline[0].notes.map(
note => ({ ...note, savedObjectId: note.noteId })
)
: []
}
/>
),
},
onlyFavorites: false,
pageIndex: 0,
@ -342,43 +432,57 @@ describe('StatefulOpenTimeline', () => {
});
});
test('it renders the expanded notes when the expand button is clicked', () => {
const wrapper = mountWithIntl(
<StatefulOpenTimeline
deleteTimelines={jest.fn()}
defaultPageSize={DEFAULT_SEARCH_RESULTS_PER_PAGE}
openTimeline={jest.fn()}
searchResults={mockResults}
title={title}
/>
test('it renders the expanded notes when the expand button is clicked', async () => {
const wrapper = mount(
<TestProviderWithoutDragAndDrop>
<MockedProvider mocks={mockOpenTimelineQueryResults} addTypename={false}>
<StatefulOpenTimeline
apolloClient={apolloClient}
isModal={false}
defaultPageSize={DEFAULT_SEARCH_RESULTS_PER_PAGE}
title={title}
/>
</MockedProvider>
</TestProviderWithoutDragAndDrop>
);
await wait();
wrapper.update();
wrapper
.find('[data-test-subj="expand-notes"]')
.first()
.simulate('click');
wrapper.update();
expect(
wrapper
.find('[data-test-subj="note-previews-container"]')
.find('[data-test-subj="updated-by"]')
.first()
.text()
).toEqual('alice');
).toEqual('elastic');
});
});
test('it renders the title', () => {
const wrapper = mountWithIntl(
<StatefulOpenTimeline
deleteTimelines={jest.fn()}
defaultPageSize={DEFAULT_SEARCH_RESULTS_PER_PAGE}
openTimeline={jest.fn()}
searchResults={mockResults}
title={title}
/>
test('it renders the title', async () => {
const wrapper = mount(
<TestProviderWithoutDragAndDrop>
<MockedProvider mocks={mockOpenTimelineQueryResults} addTypename={false}>
<StatefulOpenTimeline
apolloClient={apolloClient}
isModal={false}
defaultPageSize={DEFAULT_SEARCH_RESULTS_PER_PAGE}
title={title}
/>
</MockedProvider>
</TestProviderWithoutDragAndDrop>
);
await wait();
expect(
wrapper
.find('[data-test-subj="title"]')
@ -388,17 +492,24 @@ describe('StatefulOpenTimeline', () => {
});
describe('#resetSelectionState', () => {
test('when the user deletes selected timelines, resetSelectionState is invoked to clear the selection state', () => {
const wrapper = mountWithIntl(
<StatefulOpenTimeline
deleteTimelines={jest.fn()}
defaultPageSize={DEFAULT_SEARCH_RESULTS_PER_PAGE}
openTimeline={jest.fn()}
searchResults={mockResults}
title={title}
/>
test('when the user deletes selected timelines, resetSelectionState is invoked to clear the selection state', async () => {
const wrapper = mount(
<TestProviderWithoutDragAndDrop>
<MockedProvider mocks={mockOpenTimelineQueryResults} addTypename={false}>
<StatefulOpenTimeline
apolloClient={apolloClient}
isModal={false}
defaultPageSize={DEFAULT_SEARCH_RESULTS_PER_PAGE}
title={title}
/>
</MockedProvider>
</TestProviderWithoutDragAndDrop>
);
await wait();
wrapper.update();
wrapper
.find('.euiCheckbox__input')
.first()
@ -410,21 +521,30 @@ describe('StatefulOpenTimeline', () => {
.first()
.simulate('click');
expect(get('selectedItems', wrapper.state()).length).toEqual(0);
wrapper.update();
expect(get('selectedItems', getStateChildComponent(wrapper).state).length).toEqual(0);
});
});
test('it renders the expected count of matching timelines when no query has been entered', () => {
const wrapper = mountWithIntl(
<StatefulOpenTimeline
deleteTimelines={jest.fn()}
defaultPageSize={DEFAULT_SEARCH_RESULTS_PER_PAGE}
openTimeline={jest.fn()}
searchResults={mockResults}
title={title}
/>
test('it renders the expected count of matching timelines when no query has been entered', async () => {
const wrapper = mount(
<MockedProvider mocks={mockOpenTimelineQueryResults} addTypename={false}>
<TestProviderWithoutDragAndDrop>
<StatefulOpenTimeline
apolloClient={apolloClient}
isModal={false}
defaultPageSize={DEFAULT_SEARCH_RESULTS_PER_PAGE}
title={title}
/>
</TestProviderWithoutDragAndDrop>
</MockedProvider>
);
await wait();
wrapper.update();
expect(
wrapper
.find('[data-test-subj="query-message"]')
@ -433,43 +553,60 @@ describe('StatefulOpenTimeline', () => {
).toContain('Showing 11 Timelines ');
});
test('it invokes onOpenTimeline with the expected parameters when the hyperlink is clicked', () => {
// TODO - Have been skip because we need to re-implement the test as the component changed
test.skip('it invokes onOpenTimeline with the expected parameters when the hyperlink is clicked', async () => {
const onOpenTimeline = jest.fn();
const wrapper = mountWithIntl(
<StatefulOpenTimeline
deleteTimelines={jest.fn()}
defaultPageSize={DEFAULT_SEARCH_RESULTS_PER_PAGE}
openTimeline={onOpenTimeline}
searchResults={mockResults}
title={title}
/>
const wrapper = mount(
<TestProviderWithoutDragAndDrop>
<MockedProvider mocks={mockOpenTimelineQueryResults} addTypename={false}>
<StatefulOpenTimeline
apolloClient={apolloClient}
isModal={false}
defaultPageSize={DEFAULT_SEARCH_RESULTS_PER_PAGE}
title={title}
/>
</MockedProvider>
</TestProviderWithoutDragAndDrop>
);
await wait();
wrapper
.find(`[data-test-subj="title-${mockResults[0].savedObjectId}"]`)
.find(
`[data-test-subj="title-${
mockOpenTimelineQueryResults[0].result.data!.getAllTimeline.timeline[0].savedObjectId
}"]`
)
.first()
.simulate('click');
expect(onOpenTimeline).toHaveBeenCalledWith({
duplicate: false,
timelineId: mockResults[0].savedObjectId,
timelineId: mockOpenTimelineQueryResults[0].result.data!.getAllTimeline.timeline[0]
.savedObjectId,
});
});
test('it invokes onOpenTimeline with the expected params when the button is clicked', () => {
// TODO - Have been skip because we need to re-implement the test as the component changed
test.skip('it invokes onOpenTimeline with the expected params when the button is clicked', async () => {
const onOpenTimeline = jest.fn();
const wrapper = mountWithIntl(
<StatefulOpenTimeline
deleteTimelines={jest.fn()}
defaultPageSize={DEFAULT_SEARCH_RESULTS_PER_PAGE}
openTimeline={onOpenTimeline}
searchResults={mockResults}
title={title}
/>
const wrapper = mount(
<TestProviderWithoutDragAndDrop>
<MockedProvider mocks={mockOpenTimelineQueryResults} addTypename={false}>
<StatefulOpenTimeline
apolloClient={apolloClient}
isModal={false}
defaultPageSize={DEFAULT_SEARCH_RESULTS_PER_PAGE}
title={title}
/>
</MockedProvider>
</TestProviderWithoutDragAndDrop>
);
await wait();
wrapper
.find('[data-test-subj="open-duplicate"]')
.first()

482
x-pack/plugins/siem/public/components/open_timeline/index.tsx
View file

@ -4,15 +4,41 @@
* you may not use this file except in compliance with the Elastic License.
*/
import dateMath from '@elastic/datemath';
import ApolloClient from 'apollo-client';
import { getOr, assign } from 'lodash/fp';
import * as React from 'react';
import { connect } from 'react-redux';
import { SortFieldTimeline } from '../../../server/graphql/types';
import {
defaultHeaders,
defaultColumnHeaderType,
} from '../../components/timeline/body/column_headers/default_headers';
import { deleteTimelineMutation } from '../../containers/timeline/delete/persist.gql_query';
import { AllTimelinesVariables } from '../../containers/timeline/all';
import { allTimelinesQuery } from '../../containers/timeline/all/index.gql_query';
import { oneTimelineQuery } from '../../containers/timeline/one/index.gql_query';
import { DeleteTimelineMutation, GetOneTimeline, TimelineResult } from '../../graphql/types';
import { Note } from '../../lib/note';
import { State, timelineSelectors } from '../../store';
import { addNotes as dispatchAddNotes } from '../../store/app/actions';
import { setTimelineRangeDatePicker as dispatchSetTimelineRangeDatePicker } from '../../store/inputs/actions';
import {
applyKqlFilterQuery as dispatchApplyKqlFilterQuery,
addTimeline as dispatchAddTimeline,
createTimeline as dispatchCreateNewTimeline,
setKqlFilterQueryDraft as dispatchSetKqlFilterQueryDraft,
updateIsLoading as dispatchUpdateIsLoading,
} from '../../store/timeline/actions';
import { TimelineModel } from '../../store/timeline/model';
import { OpenTimeline } from './open_timeline';
import { OPEN_TIMELINE_CLASS_NAME } from './helpers';
import { OpenTimelineModal } from './open_timeline_modal/open_timeline_modal';
import {
DeleteTimelines,
EuiSearchBarQuery,
OnAddTimelinesToFavorites,
OnDeleteSelected,
OnOpenTimeline,
OnQueryChange,
@ -21,14 +47,21 @@ import {
OnTableChangeParams,
OpenTimelineProps,
OnToggleOnlyFavorites,
TimelineResult,
OpenTimelineResult,
OnToggleShowNotes,
OnDeleteOneTimeline,
OpenTimelineDispatchProps,
OpenTimelineReduxProps,
} from './types';
import { AllTimelinesQuery } from '../../containers/timeline/all';
import { Direction } from '../../graphql/types';
import { DEFAULT_DATE_COLUMN_MIN_WIDTH, DEFAULT_COLUMN_MIN_WIDTH } from '../timeline/body/helpers';
import { ColumnHeader } from '../timeline/body/column_headers/column_header';
export const DEFAULT_SORT_FIELD = 'updated';
export const DEFAULT_SORT_DIRECTION = 'desc';
interface State {
export interface OpenTimelineState {
/** Required by EuiTable for expandable rows: a map of `TimelineResult.savedObjectId` to rendered notes */
itemIdToExpandedNotesRowMap: Record<string, JSX.Element>;
/** Only query for favorite timelines when true */
@ -40,29 +73,27 @@ interface State {
/** The current search criteria */
search: string;
/** The currently-selected timelines in the table */
selectedItems: TimelineResult[];
selectedItems: OpenTimelineResult[];
/** The requested sort direction of the query results */
sortDirection: 'asc' | 'desc';
/** The requested field to sort on */
sortField: string;
}
type Props = Pick<OpenTimelineProps, 'defaultPageSize' | 'title'> & {
/** Performs IO to add the specified timelines to the user's favorites */
addTimelinesToFavorites?: (timelineIds: string[]) => void;
/** Performs IO to delete the specified timelines */
deleteTimelines?: DeleteTimelines;
/** Invoked when the user clicks on the name of a timeline to open it */
openTimeline: OnOpenTimeline;
/**
* TODO: remove this prop (used for testing) when the results of executing
* a search are provided by the GraphQL query
*/
searchResults: TimelineResult[];
};
interface OwnProps<TCache = object> {
apolloClient: ApolloClient<TCache>;
/** Displays open timeline in modal */
isModal: boolean;
closeModalTimeline?: () => void;
}
export type OpenTimelineOwnProps = OwnProps &
Pick<OpenTimelineProps, 'defaultPageSize' | 'title'> &
OpenTimelineDispatchProps &
OpenTimelineReduxProps;
/** Returns a collection of selected timeline ids */
export const getSelectedTimelineIds = (selectedItems: TimelineResult[]): string[] =>
export const getSelectedTimelineIds = (selectedItems: OpenTimelineResult[]): string[] =>
selectedItems.reduce<string[]>(
(validSelections, timelineResult) =>
timelineResult.savedObjectId != null
@ -72,8 +103,11 @@ export const getSelectedTimelineIds = (selectedItems: TimelineResult[]): string[
);
/** Manages the state (e.g table selection) of the (pure) `OpenTimeline` component */
export class StatefulOpenTimeline extends React.PureComponent<Props, State> {
constructor(props: Props) {
export class StatefulOpenTimelineComponent extends React.PureComponent<
OpenTimelineOwnProps,
OpenTimelineState
> {
constructor(props: OpenTimelineOwnProps) {
super(props);
this.state = {
@ -93,14 +127,7 @@ export class StatefulOpenTimeline extends React.PureComponent<Props, State> {
}
public render() {
const {
addTimelinesToFavorites,
deleteTimelines,
defaultPageSize,
openTimeline,
searchResults,
title,
} = this.props;
const { defaultPageSize, isModal = false, title } = this.props;
const {
itemIdToExpandedNotesRowMap,
onlyFavorites,
@ -111,66 +138,71 @@ export class StatefulOpenTimeline extends React.PureComponent<Props, State> {
sortDirection,
sortField,
} = this.state;
{
// TODO: wrap `OpenTimeline` below with the GraphQL query, and pass
// `isLoading`, `searchResults`, `totalSearchResultsCount`, etc:
return deleteTimelines != null ? (
<OpenTimeline
deleteTimelines={deleteTimelines}
defaultPageSize={defaultPageSize}
isLoading={false}
itemIdToExpandedNotesRowMap={itemIdToExpandedNotesRowMap}
onAddTimelinesToFavorites={
addTimelinesToFavorites != null ? this.onAddTimelinesToFavorites : undefined
}
onDeleteSelected={deleteTimelines != null ? this.onDeleteSelected : undefined}
onlyFavorites={onlyFavorites}
onOpenTimeline={openTimeline}
onQueryChange={this.onQueryChange}
onSelectionChange={this.onSelectionChange}
onTableChange={this.onTableChange}
onToggleOnlyFavorites={this.onToggleOnlyFavorites}
onToggleShowNotes={this.onToggleShowNotes}
pageIndex={pageIndex}
pageSize={pageSize}
query={query}
searchResults={searchResults.slice(pageIndex * pageSize, pageIndex * pageSize + pageSize)}
selectedItems={selectedItems}
sortDirection={sortDirection}
sortField={sortField}
title={title}
totalSearchResultsCount={searchResults.length}
/>
) : (
<OpenTimelineModal
deleteTimelines={deleteTimelines}
defaultPageSize={defaultPageSize}
isLoading={false}
itemIdToExpandedNotesRowMap={itemIdToExpandedNotesRowMap}
onAddTimelinesToFavorites={
addTimelinesToFavorites != null ? this.onAddTimelinesToFavorites : undefined
}
onDeleteSelected={deleteTimelines != null ? this.onDeleteSelected : undefined}
onlyFavorites={onlyFavorites}
onOpenTimeline={openTimeline}
onQueryChange={this.onQueryChange}
onSelectionChange={this.onSelectionChange}
onTableChange={this.onTableChange}
onToggleOnlyFavorites={this.onToggleOnlyFavorites}
onToggleShowNotes={this.onToggleShowNotes}
pageIndex={pageIndex}
pageSize={pageSize}
query={query}
searchResults={searchResults.slice(pageIndex * pageSize, pageIndex * pageSize + pageSize)}
selectedItems={selectedItems}
sortDirection={sortDirection}
sortField={sortField}
title={title}
totalSearchResultsCount={searchResults.length}
/>
);
}
return (
<AllTimelinesQuery
pageInfo={{
pageIndex: pageIndex + 1,
pageSize,
}}
search={query}
sort={{ sortField: sortField as SortFieldTimeline, sortOrder: sortDirection as Direction }}
onlyUserFavorite={onlyFavorites}
>
{({ timelines, loading, totalCount }) => {
return !isModal ? (
<OpenTimeline
deleteTimelines={this.onDeleteOneTimeline}
defaultPageSize={defaultPageSize}
isLoading={loading}
itemIdToExpandedNotesRowMap={itemIdToExpandedNotesRowMap}
onAddTimelinesToFavorites={undefined}
onDeleteSelected={this.onDeleteSelected}
onlyFavorites={onlyFavorites}
onOpenTimeline={this.openTimeline}
onQueryChange={this.onQueryChange}
onSelectionChange={this.onSelectionChange}
onTableChange={this.onTableChange}
onToggleOnlyFavorites={this.onToggleOnlyFavorites}
onToggleShowNotes={this.onToggleShowNotes}
pageIndex={pageIndex}
pageSize={pageSize}
query={query}
searchResults={timelines}
selectedItems={selectedItems}
sortDirection={sortDirection}
sortField={sortField}
title={title}
totalSearchResultsCount={totalCount}
/>
) : (
<OpenTimelineModal
deleteTimelines={this.onDeleteOneTimeline}
defaultPageSize={defaultPageSize}
isLoading={loading}
itemIdToExpandedNotesRowMap={itemIdToExpandedNotesRowMap}
onAddTimelinesToFavorites={undefined}
onDeleteSelected={this.onDeleteSelected}
onlyFavorites={onlyFavorites}
onOpenTimeline={this.openTimeline}
onQueryChange={this.onQueryChange}
onSelectionChange={this.onSelectionChange}
onTableChange={this.onTableChange}
onToggleOnlyFavorites={this.onToggleOnlyFavorites}
onToggleShowNotes={this.onToggleShowNotes}
pageIndex={pageIndex}
pageSize={pageSize}
query={query}
searchResults={timelines}
selectedItems={selectedItems}
sortDirection={sortDirection}
sortField={sortField}
title={title}
totalSearchResultsCount={totalCount}
/>
);
}}
</AllTimelinesQuery>
);
}
/** Invoked when the user presses enters to submit the text in the search input */
@ -189,40 +221,64 @@ export class StatefulOpenTimeline extends React.PureComponent<Props, State> {
}
};
/* This feature will be implemented in the near future, so we are keeping it to know what to do */
/** Invoked when the user clicks the action to add the selected timelines to favorites */
private onAddTimelinesToFavorites: OnAddTimelinesToFavorites = () => {
const { addTimelinesToFavorites } = this.props;
const { selectedItems } = this.state;
// private onAddTimelinesToFavorites: OnAddTimelinesToFavorites = () => {
// const { addTimelinesToFavorites } = this.props;
// const { selectedItems } = this.state;
// if (addTimelinesToFavorites != null) {
// addTimelinesToFavorites(getSelectedTimelineIds(selectedItems));
// TODO: it's not possible to clear the selection state of the newly-favorited
// items, because we can't pass the selection state as props to the table.
// See: https://github.com/elastic/eui/issues/1077
// TODO: the query must re-execute to show the results of the mutation
// }
// };
if (addTimelinesToFavorites != null) {
addTimelinesToFavorites(getSelectedTimelineIds(selectedItems));
private onDeleteOneTimeline: OnDeleteOneTimeline = (timelineIds: string[]) => {
const { onlyFavorites, pageIndex, pageSize, search, sortDirection, sortField } = this.state;
// TODO: it's not possible to clear the selection state of the newly-favorited
// items, because we can't pass the selection state as props to the table.
// See: https://github.com/elastic/eui/issues/1077
// TODO: the query must re-execute to show the results of the mutation
}
this.deleteTimelines(timelineIds, {
search,
pageInfo: {
pageIndex: pageIndex + 1,
pageSize,
},
sort: {
sortField: sortField as SortFieldTimeline,
sortOrder: sortDirection as Direction,
},
onlyUserFavorite: onlyFavorites,
});
};
/** Invoked when the user clicks the action to delete the selected timelines */
private onDeleteSelected: OnDeleteSelected = () => {
const { deleteTimelines } = this.props;
const { selectedItems } = this.state;
const { selectedItems, onlyFavorites } = this.state;
if (deleteTimelines != null) {
deleteTimelines(getSelectedTimelineIds(selectedItems));
this.deleteTimelines(getSelectedTimelineIds(selectedItems), {
search: this.state.search,
pageInfo: {
pageIndex: this.state.pageIndex + 1,
pageSize: this.state.pageSize,
},
sort: {
sortField: this.state.sortField as SortFieldTimeline,
sortOrder: this.state.sortDirection as Direction,
},
onlyUserFavorite: onlyFavorites,
});
// NOTE: we clear the selection state below, but if the server fails to
// delete a timeline, it will remain selected in the table:
this.resetSelectionState();
// NOTE: we clear the selection state below, but if the server fails to
// delete a timeline, it will remain selected in the table:
this.resetSelectionState();
// TODO: the query must re-execute to show the results of the deletion
}
// TODO: the query must re-execute to show the results of the deletion
};
/** Invoked when the user selects (or de-selects) timelines */
private onSelectionChange: OnSelectionChange = (selectedItems: TimelineResult[]) => {
private onSelectionChange: OnSelectionChange = (selectedItems: OpenTimelineResult[]) => {
this.setState({ selectedItems }); // <-- this is NOT passed down as props to the table: https://github.com/elastic/eui/issues/1077
};
@ -261,4 +317,212 @@ export class StatefulOpenTimeline extends React.PureComponent<Props, State> {
selectedItems: [],
});
};
private openTimeline: OnOpenTimeline = ({
duplicate,
timelineId,
}: {
duplicate: boolean;
timelineId: string;
}) => {
const {
applyKqlFilterQuery,
addNotes,
addTimeline,
closeModalTimeline,
isModal,
setTimelineRangeDatePicker,
setKqlFilterQueryDraft,
updateIsLoading,
} = this.props;
if (isModal && closeModalTimeline != null) {
closeModalTimeline();
}
updateIsLoading({ id: 'timeline-1', isLoading: true });
this.props.apolloClient
.query<GetOneTimeline.Query, GetOneTimeline.Variables>({
query: oneTimelineQuery,
fetchPolicy: 'no-cache',
variables: { id: timelineId },
})
.then(result => {
const timelineToOpen: TimelineResult = omitTypenameInTimeline(
getOr({}, 'data.getOneTimeline', result)
);
const { notes, ...timelineModel } = timelineToOpen;
const momentDate = dateMath.parse('now-24h');
setTimelineRangeDatePicker({
from: getOr(momentDate ? momentDate.valueOf() : 0, 'dateRange.start', timelineModel),
to: getOr(Date.now(), 'dateRange.end', timelineModel),
});
addTimeline({
id: 'timeline-1',
timeline: {
...assign(this.props.timeline, timelineModel),
columns:
timelineModel.columns != null
? timelineModel.columns.map(col => {
const timelineCols: ColumnHeader = {
...col,
columnHeaderType: defaultColumnHeaderType,
id: col.id != null ? col.id : 'unknown',
placeholder: col.placeholder != null ? col.placeholder : undefined,
category: col.category != null ? col.category : undefined,
description: col.description != null ? col.description : undefined,
example: col.example != null ? col.example : undefined,
type: col.type != null ? col.type : undefined,
width:
col.id === '@timestamp'
? DEFAULT_DATE_COLUMN_MIN_WIDTH
: DEFAULT_COLUMN_MIN_WIDTH,
};
return timelineCols;
})
: defaultHeaders,
eventIdToNoteIds: duplicate
? {}
: timelineModel.eventIdToNoteIds != null
? timelineModel.eventIdToNoteIds.reduce((acc, note) => {
if (note.eventId != null) {
const eventNotes = getOr([], note.eventId, acc);
return { ...acc, [note.eventId]: [...eventNotes, note.noteId] };
}
return acc;
}, {})
: {},
isFavorite: duplicate
? false
: timelineModel.favorite != null
? timelineModel.favorite.length > 0
: false,
isLive: false,
isSaving: false,
itemsPerPage: 25,
noteIds: duplicate ? [] : timelineModel.noteIds != null ? timelineModel.noteIds : [],
pinnedEventIds: duplicate
? {}
: timelineModel.pinnedEventIds != null
? timelineModel.pinnedEventIds.reduce(
(acc, pinnedEventId) => ({ ...acc, [pinnedEventId]: true }),
{}
)
: {},
pinnedEventsSaveObject: duplicate
? {}
: timelineModel.pinnedEventsSaveObject != null
? timelineModel.pinnedEventsSaveObject.reduce(
(acc, pinnedEvent) => ({ ...acc, [pinnedEvent.pinnedEventId]: pinnedEvent }),
{}
)
: {},
savedObjectId: duplicate ? null : timelineModel.savedObjectId,
version: duplicate ? null : timelineModel.version,
title: duplicate ? '' : timelineModel.title || '',
},
});
if (
timelineModel.kqlQuery != null &&
timelineModel.kqlQuery.filterQuery != null &&
timelineModel.kqlQuery.filterQuery.kuery != null &&
timelineModel.kqlQuery.filterQuery.kuery.expression !== ''
) {
setKqlFilterQueryDraft({
id: 'timeline-1',
filterQueryDraft: {
kind: 'kuery',
expression: timelineModel.kqlQuery.filterQuery.kuery.expression || '',
},
});
applyKqlFilterQuery({
id: 'timeline-1',
filterQuery: {
kuery: {
kind: 'kuery',
expression: timelineModel.kqlQuery.filterQuery.kuery.expression || '',
},
serializedQuery: timelineModel.kqlQuery.filterQuery.serializedQuery || '',
},
});
}
if (!duplicate) {
addNotes({
notes:
notes != null
? notes.map<Note>(note => ({
created: note.created != null ? new Date(note.created) : new Date(),
id: note.noteId,
lastEdit: note.updated != null ? new Date(note.updated) : new Date(),
note: note.note || '',
user: note.updatedBy || 'unknown',
saveObjectId: note.noteId,
version: note.version,
}))
: [],
});
}
})
.finally(() => {
updateIsLoading({ id: 'timeline-1', isLoading: false });
});
};
private deleteTimelines: DeleteTimelines = (
timelineIds: string[],
variables?: AllTimelinesVariables
) => {
if (timelineIds.includes(this.props.timeline.savedObjectId || '')) {
this.props.createNewTimeline({ id: 'timeline-1', columns: defaultHeaders, show: false });
}
this.props.apolloClient.mutate<
DeleteTimelineMutation.Mutation,
DeleteTimelineMutation.Variables
>({
mutation: deleteTimelineMutation,
fetchPolicy: 'no-cache',
variables: { id: timelineIds },
refetchQueries: [
{
query: allTimelinesQuery,
variables,
},
],
});
};
}
const makeMapStateToProps = () => {
const getTimeline = timelineSelectors.getTimelineByIdSelector();
const mapStateToProps = (state: State) => {
const timeline = getTimeline(state, 'timeline-1');
return {
timeline,
};
};
return mapStateToProps;
};
export const StatefulOpenTimeline = connect(
makeMapStateToProps,
{
applyKqlFilterQuery: dispatchApplyKqlFilterQuery,
addTimeline: dispatchAddTimeline,
addNotes: dispatchAddNotes,
createNewTimeline: dispatchCreateNewTimeline,
setKqlFilterQueryDraft: dispatchSetKqlFilterQueryDraft,
setTimelineRangeDatePicker: dispatchSetTimelineRangeDatePicker,
updateIsLoading: dispatchUpdateIsLoading,
}
)(StatefulOpenTimelineComponent);
const omitTypename = (key: string, value: keyof TimelineModel) =>
key === '__typename' ? undefined : value;
const omitTypenameInTimeline = (timeline: TimelineResult): TimelineResult =>
JSON.parse(JSON.stringify(timeline), omitTypename);

8
x-pack/plugins/siem/public/components/open_timeline/note_previews/index.test.tsx
View file

@ -10,11 +10,11 @@ import { mountWithIntl } from 'test_utils/enzyme_helpers';
import * as React from 'react';
import { mockTimelineResults } from '../../../mock/timeline_results';
import { TimelineResult, TimelineResultNote } from '../types';
import { OpenTimelineResult, TimelineResultNote } from '../types';
import { NotePreviews } from '.';
describe('NotePreviews', () => {
let mockResults: TimelineResult[];
let mockResults: OpenTimelineResult[];
let note1updated: number;
let note2updated: number;
let note3updated: number;
@ -31,7 +31,7 @@ describe('NotePreviews', () => {
});
test('it renders a note preview for each note when isModal is false', () => {
const hasNotes: TimelineResult[] = [{ ...mockResults[0] }];
const hasNotes: OpenTimelineResult[] = [{ ...mockResults[0] }];
const wrapper = mountWithIntl(<NotePreviews isModal={false} notes={hasNotes[0].notes} />);
@ -41,7 +41,7 @@ describe('NotePreviews', () => {
});
test('it renders a note preview for each note when isModal is true', () => {
const hasNotes: TimelineResult[] = [{ ...mockResults[0] }];
const hasNotes: OpenTimelineResult[] = [{ ...mockResults[0] }];
const wrapper = mountWithIntl(<NotePreviews isModal={true} notes={hasNotes[0].notes} />);

4
x-pack/plugins/siem/public/components/open_timeline/open_timeline.test.tsx
View file

@ -9,7 +9,7 @@ import { mountWithIntl } from 'test_utils/enzyme_helpers';
import * as React from 'react';
import { DEFAULT_SEARCH_RESULTS_PER_PAGE } from '../../pages/timelines/timelines_page';
import { TimelineResult } from './types';
import { OpenTimelineResult } from './types';
import { TimelinesTableProps } from './timelines_table';
import { mockTimelineResults } from '../../mock/timeline_results';
import { OpenTimeline } from './open_timeline';
@ -19,7 +19,7 @@ import { DEFAULT_SORT_DIRECTION, DEFAULT_SORT_FIELD } from '.';
describe('OpenTimeline', () => {
const title = 'All Timelines / Open Timelines';
let mockResults: TimelineResult[];
let mockResults: OpenTimelineResult[];
beforeEach(() => {
mockResults = cloneDeep(mockTimelineResults);

125
x-pack/plugins/siem/public/components/open_timeline/open_timeline_modal/index.test.tsx
View file

@ -5,16 +5,43 @@
*/
import { get } from 'lodash/fp';
import { mountWithIntl } from 'test_utils/enzyme_helpers';
import { mount, ReactWrapper } from 'enzyme';
import * as React from 'react';
import { MockedProvider } from 'react-apollo/test-utils';
import { wait } from '../../../lib/helpers';
import { TestProviderWithoutDragAndDrop } from '../../../mock/test_providers';
import { mockOpenTimelineQueryResults } from '../../../mock/timeline_results';
import * as i18n from '../translations';
import { OpenTimelineModalButton } from '.';
import * as i18n from '../translations';
const getStateChildComponent = (
wrapper: ReactWrapper<any, Readonly<{}>, React.Component<{}, {}, any>>
): React.Component<{}, {}, any> =>
wrapper
.childAt(0)
.childAt(0)
.childAt(0)
.childAt(0)
.childAt(0)
.childAt(0)
.childAt(0)
.instance();
describe('OpenTimelineModalButton', () => {
test('it renders the expected button text', () => {
const wrapper = mountWithIntl(<OpenTimelineModalButton onToggle={jest.fn()} />);
test('it renders the expected button text', async () => {
const wrapper = mount(
<TestProviderWithoutDragAndDrop>
<MockedProvider mocks={mockOpenTimelineQueryResults} addTypename={false}>
<OpenTimelineModalButton onToggle={jest.fn()} />
</MockedProvider>
</TestProviderWithoutDragAndDrop>
);
await wait();
wrapper.update();
expect(
wrapper
@ -25,25 +52,55 @@ describe('OpenTimelineModalButton', () => {
});
describe('statefulness', () => {
test('defaults showModal to false', () => {
const wrapper = mountWithIntl(<OpenTimelineModalButton onToggle={jest.fn()} />);
test('defaults showModal to false', async () => {
const wrapper = mount(
<TestProviderWithoutDragAndDrop>
<MockedProvider mocks={mockOpenTimelineQueryResults} addTypename={false}>
<OpenTimelineModalButton onToggle={jest.fn()} />
</MockedProvider>
</TestProviderWithoutDragAndDrop>
);
expect(get('showModal', wrapper.state())).toEqual(false);
await wait();
wrapper.update();
expect(get('showModal', getStateChildComponent(wrapper).state)).toEqual(false);
});
test('it sets showModal to true when the button is clicked', () => {
const wrapper = mountWithIntl(<OpenTimelineModalButton onToggle={jest.fn()} />);
test('it sets showModal to true when the button is clicked', async () => {
const wrapper = mount(
<TestProviderWithoutDragAndDrop>
<MockedProvider mocks={mockOpenTimelineQueryResults} addTypename={false}>
<OpenTimelineModalButton onToggle={jest.fn()} />
</MockedProvider>
</TestProviderWithoutDragAndDrop>
);
await wait();
wrapper
.find('[data-test-subj="open-timeline-button"]')
.first()
.simulate('click');
expect(get('showModal', wrapper.state())).toEqual(true);
wrapper.update();
expect(wrapper.find('div[data-test-subj="open-timeline-modal"].euiModal').length).toEqual(1);
});
test('it does NOT render the modal when showModal is false', () => {
const wrapper = mountWithIntl(<OpenTimelineModalButton onToggle={jest.fn()} />);
test('it does NOT render the modal when showModal is false', async () => {
const wrapper = mount(
<TestProviderWithoutDragAndDrop>
<MockedProvider mocks={mockOpenTimelineQueryResults} addTypename={false}>
<OpenTimelineModalButton onToggle={jest.fn()} />
</MockedProvider>
</TestProviderWithoutDragAndDrop>
);
await wait();
wrapper.update();
expect(
wrapper
@ -53,8 +110,18 @@ describe('OpenTimelineModalButton', () => {
).toBe(false);
});
test('it renders the modal when showModal is true', () => {
const wrapper = mountWithIntl(<OpenTimelineModalButton onToggle={jest.fn()} />);
test('it renders the modal when showModal is true', async () => {
const wrapper = mount(
<TestProviderWithoutDragAndDrop>
<MockedProvider mocks={mockOpenTimelineQueryResults} addTypename={false}>
<OpenTimelineModalButton onToggle={jest.fn()} />
</MockedProvider>
</TestProviderWithoutDragAndDrop>
);
await wait();
wrapper.update();
wrapper
.find('[data-test-subj="open-timeline-button"]')
@ -71,26 +138,46 @@ describe('OpenTimelineModalButton', () => {
});
describe('onToggle prop', () => {
test('it still correctly updates the showModal state if `onToggle` is not provided as a prop', () => {
const wrapper = mountWithIntl(<OpenTimelineModalButton />);
test('it still correctly updates the showModal state if `onToggle` is not provided as a prop', async () => {
const wrapper = mount(
<TestProviderWithoutDragAndDrop>
<MockedProvider mocks={mockOpenTimelineQueryResults} addTypename={false}>
<OpenTimelineModalButton onToggle={jest.fn()} />
</MockedProvider>
</TestProviderWithoutDragAndDrop>
);
await wait();
wrapper
.find('[data-test-subj="open-timeline-button"]')
.first()
.simulate('click');
expect(get('showModal', wrapper.state())).toEqual(true);
wrapper.update();
expect(get('showModal', getStateChildComponent(wrapper).state)).toEqual(true);
});
test('it invokes the optional onToggle function provided as a prop when the open timeline button is clicked', () => {
test('it invokes the optional onToggle function provided as a prop when the open timeline button is clicked', async () => {
const onToggle = jest.fn();
const wrapper = mountWithIntl(<OpenTimelineModalButton onToggle={onToggle} />);
const wrapper = mount(
<TestProviderWithoutDragAndDrop>
<MockedProvider mocks={mockOpenTimelineQueryResults} addTypename={false}>
<OpenTimelineModalButton onToggle={onToggle} />
</MockedProvider>
</TestProviderWithoutDragAndDrop>
);
await wait();
wrapper
.find('[data-test-subj="open-timeline-button"]')
.first()
.simulate('click');
wrapper.update();
expect(onToggle).toBeCalled();
});
});

83
x-pack/plugins/siem/public/components/open_timeline/open_timeline_modal/index.tsx
View file

@ -10,9 +10,10 @@ import styled from 'styled-components';
import { StatefulOpenTimeline } from '..';
import { ApolloConsumer } from 'react-apollo';
import * as i18n from '../translations';
interface Props {
export interface OpenTimelineModalButtonProps {
/**
* An optional callback that if specified, will perform arbitrary IO before
* this component updates its internal toggle state.
@ -20,7 +21,7 @@ interface Props {
onToggle?: () => void;
}
interface State {
export interface OpenTimelineModalButtonState {
showModal: boolean;
}
@ -40,8 +41,11 @@ const ModalContainer = styled.div`
/**
* Renders a button that when clicked, displays the `Open Timelines` modal
*/
export class OpenTimelineModalButton extends React.PureComponent<Props, State> {
constructor(props: Props) {
export class OpenTimelineModalButton extends React.PureComponent<
OpenTimelineModalButtonProps,
OpenTimelineModalButtonState
> {
constructor(props: OpenTimelineModalButtonProps) {
super(props);
this.state = { showModal: false };
@ -49,36 +53,41 @@ export class OpenTimelineModalButton extends React.PureComponent<Props, State> {
public render() {
return (
<>
<EuiButtonEmpty
color="text"
data-test-subj="open-timeline-button"
iconSide="left"
iconType="folderOpen"
onClick={this.toggleShowModal}
>
{i18n.OPEN_TIMELINE}
</EuiButtonEmpty>
<ApolloConsumer>
{client => (
<>
<EuiButtonEmpty
color="text"
data-test-subj="open-timeline-button"
iconSide="left"
iconType="folderOpen"
onClick={this.toggleShowModal}
>
{i18n.OPEN_TIMELINE}
</EuiButtonEmpty>
{this.state.showModal && (
<EuiOverlayMask>
<ModalContainer>
<EuiModal
data-test-subj="open-timeline-modal"
maxWidth={OPEN_TIMELINE_MODAL_WIDTH}
onClose={this.toggleShowModal}
>
<StatefulOpenTimeline
openTimeline={this.openTimeline}
defaultPageSize={DEFAULT_SEARCH_RESULTS_PER_PAGE}
searchResults={[]}
title={i18n.OPEN_TIMELINE_TITLE}
/>
</EuiModal>
</ModalContainer>
</EuiOverlayMask>
{this.state.showModal && (
<EuiOverlayMask>
<ModalContainer>
<EuiModal
data-test-subj="open-timeline-modal"
maxWidth={OPEN_TIMELINE_MODAL_WIDTH}
onClose={this.toggleShowModal}
>
<StatefulOpenTimeline
apolloClient={client}
closeModalTimeline={this.closeModalTimeline}
isModal={true}
defaultPageSize={DEFAULT_SEARCH_RESULTS_PER_PAGE}
title={i18n.OPEN_TIMELINE_TITLE}
/>
</EuiModal>
</ModalContainer>
</EuiOverlayMask>
)}
</>
)}
</>
</ApolloConsumer>
);
}
@ -93,15 +102,7 @@ export class OpenTimelineModalButton extends React.PureComponent<Props, State> {
}));
};
private openTimeline = ({
duplicate,
timelineId,
}: {
duplicate: boolean;
timelineId: string;
}) => {
private closeModalTimeline = () => {
this.toggleShowModal();
alert(`TODO: open timeline ID: ${timelineId} duplicate: ${duplicate}`);
};
}

4
x-pack/plugins/siem/public/components/open_timeline/open_timeline_modal/open_timeline_modal.test.tsx
View file

@ -9,7 +9,7 @@ import { mountWithIntl } from 'test_utils/enzyme_helpers';
import * as React from 'react';
import { DEFAULT_SEARCH_RESULTS_PER_PAGE } from '../../../pages/timelines/timelines_page';
import { TimelineResult } from '../types';
import { OpenTimelineResult } from '../types';
import { TimelinesTableProps } from '../timelines_table';
import { mockTimelineResults } from '../../../mock/timeline_results';
import { OpenTimelineModal } from './open_timeline_modal';
@ -19,7 +19,7 @@ import { DEFAULT_SORT_DIRECTION, DEFAULT_SORT_FIELD } from '../';
describe('OpenTimelineModal', () => {
const title = 'All Timelines / Open Timelines';
let mockResults: TimelineResult[];
let mockResults: OpenTimelineResult[];
beforeEach(() => {
mockResults = cloneDeep(mockTimelineResults);

8
x-pack/plugins/siem/public/components/open_timeline/timelines_table/actions_columns.test.tsx
View file

@ -12,11 +12,11 @@ import * as React from 'react';
import { DEFAULT_SEARCH_RESULTS_PER_PAGE } from '../../../pages/timelines/timelines_page';
import { DEFAULT_SORT_DIRECTION, DEFAULT_SORT_FIELD } from '..';
import { mockTimelineResults } from '../../../mock/timeline_results';
import { TimelineResult } from '../types';
import { OpenTimelineResult } from '../types';
import { TimelinesTable } from '.';
describe('#getActionsColumns', () => {
let mockResults: TimelineResult[];
let mockResults: OpenTimelineResult[];
beforeEach(() => {
mockResults = cloneDeep(mockTimelineResults);
@ -94,7 +94,9 @@ describe('#getActionsColumns', () => {
});
test('it renders a disabled the open duplicate button if the timeline does not have a saved object id', () => {
const missingSavedObjectId: TimelineResult[] = [omit('savedObjectId', { ...mockResults[0] })];
const missingSavedObjectId: OpenTimelineResult[] = [
omit('savedObjectId', { ...mockResults[0] }),
];
const wrapper = mountWithIntl(
<TimelinesTable

6
x-pack/plugins/siem/public/components/open_timeline/timelines_table/actions_columns.tsx
View file

@ -8,7 +8,7 @@ import { EuiButtonIcon, EuiToolTip } from '@elastic/eui';
import * as React from 'react';
import { ACTION_COLUMN_WIDTH, PositionedIcon } from './common_styles';
import { DeleteTimelines, OnOpenTimeline, TimelineResult } from '../types';
import { DeleteTimelines, OnOpenTimeline, OpenTimelineResult } from '../types';
import { DeleteTimelineModalButton } from '../delete_timeline_modal';
import * as i18n from '../translations';
@ -28,7 +28,7 @@ export const getActionsColumns = ({
const deleteTimelineColumn = {
align: 'center',
field: 'savedObjectId',
render: (savedObjectId: string, { title }: TimelineResult) => (
render: (savedObjectId: string, { title }: OpenTimelineResult) => (
<PositionedIcon>
<DeleteTimelineModalButton
deleteTimelines={deleteTimelines}
@ -44,7 +44,7 @@ export const getActionsColumns = ({
const openAsDuplicateColumn = {
align: 'center',
field: 'savedObjectId',
render: (savedObjectId: string, timelineResult: TimelineResult) => (
render: (savedObjectId: string, timelineResult: OpenTimelineResult) => (
<PositionedIcon>
<EuiToolTip content={i18n.OPEN_AS_DUPLICATE}>
<EuiButtonIcon

50
x-pack/plugins/siem/public/components/open_timeline/timelines_table/common_columns.test.tsx
View file

@ -12,7 +12,7 @@ import * as React from 'react';
import { DEFAULT_SEARCH_RESULTS_PER_PAGE } from '../../../pages/timelines/timelines_page';
import { DEFAULT_SORT_DIRECTION, DEFAULT_SORT_FIELD } from '..';
import { getEmptyValue } from '../../empty_value';
import { TimelineResult } from '../types';
import { OpenTimelineResult } from '../types';
import { mockTimelineResults } from '../../../mock/timeline_results';
import { NotePreviews } from '../note_previews';
import { TimelinesTable } from '.';
@ -20,7 +20,7 @@ import { TimelinesTable } from '.';
import * as i18n from '../translations';
describe('#getCommonColumns', () => {
let mockResults: TimelineResult[];
let mockResults: OpenTimelineResult[];
beforeEach(() => {
mockResults = cloneDeep(mockTimelineResults);
@ -28,7 +28,7 @@ describe('#getCommonColumns', () => {
describe('Expand column', () => {
test('it renders the expand button when the timelineResult has notes', () => {
const hasNotes: TimelineResult[] = [{ ...mockResults[0] }];
const hasNotes: OpenTimelineResult[] = [{ ...mockResults[0] }];
const wrapper = mountWithIntl(
<TimelinesTable
@ -54,7 +54,7 @@ describe('#getCommonColumns', () => {
});
test('it does NOT render the expand button when the timelineResult notes are undefined', () => {
const missingNotes: TimelineResult[] = [omit('notes', { ...mockResults[0] })];
const missingNotes: OpenTimelineResult[] = [omit('notes', { ...mockResults[0] })];
const wrapper = mountWithIntl(
<TimelinesTable
@ -80,7 +80,7 @@ describe('#getCommonColumns', () => {
});
test('it does NOT render the expand button when the timelineResult notes are null', () => {
const nullNotes: TimelineResult[] = [{ ...mockResults[0], notes: null }];
const nullNotes: OpenTimelineResult[] = [{ ...mockResults[0], notes: null }];
const wrapper = mountWithIntl(
<TimelinesTable
@ -106,7 +106,7 @@ describe('#getCommonColumns', () => {
});
test('it does NOT render the expand button when the notes are empty', () => {
const emptylNotes: TimelineResult[] = [{ ...mockResults[0], notes: [] }];
const emptylNotes: OpenTimelineResult[] = [{ ...mockResults[0], notes: [] }];
const wrapper = mountWithIntl(
<TimelinesTable
@ -132,7 +132,9 @@ describe('#getCommonColumns', () => {
});
test('it does NOT render the expand button when the timelineResult savedObjectId is undefined', () => {
const missingSavedObjectId: TimelineResult[] = [omit('savedObjectId', { ...mockResults[0] })];
const missingSavedObjectId: OpenTimelineResult[] = [
omit('savedObjectId', { ...mockResults[0] }),
];
const wrapper = mountWithIntl(
<TimelinesTable
@ -158,7 +160,7 @@ describe('#getCommonColumns', () => {
});
test('it does NOT render the expand button when the timelineResult savedObjectId is null', () => {
const nullSavedObjectId: TimelineResult[] = [{ ...mockResults[0], savedObjectId: null }];
const nullSavedObjectId: OpenTimelineResult[] = [{ ...mockResults[0], savedObjectId: null }];
const wrapper = mountWithIntl(
<TimelinesTable
@ -184,7 +186,7 @@ describe('#getCommonColumns', () => {
});
test('it renders the right arrow expander when the row is not expanded', () => {
const hasNotes: TimelineResult[] = [{ ...mockResults[0] }];
const hasNotes: OpenTimelineResult[] = [{ ...mockResults[0] }];
const wrapper = mountWithIntl(
<TimelinesTable
@ -215,7 +217,7 @@ describe('#getCommonColumns', () => {
});
test('it renders the down arrow expander when the row is expanded', () => {
const hasNotes: TimelineResult[] = [{ ...mockResults[0] }];
const hasNotes: OpenTimelineResult[] = [{ ...mockResults[0] }];
const itemIdToExpandedNotesRowMap = {
[mockResults[0].savedObjectId!]: (
@ -253,7 +255,7 @@ describe('#getCommonColumns', () => {
test('it invokes onToggleShowNotes to expand the row when the row is not expanded', () => {
const onToggleShowNotes = jest.fn();
const hasNotes: TimelineResult[] = [{ ...mockResults[0] }];
const hasNotes: OpenTimelineResult[] = [{ ...mockResults[0] }];
// the saved object id does not exist in the map yet, so the row is not expanded:
const itemIdToExpandedNotesRowMap = {
@ -293,7 +295,7 @@ describe('#getCommonColumns', () => {
test('it invokes onToggleShowNotes to remove the row when the row is expanded', () => {
const onToggleShowNotes = jest.fn();
const hasNotes: TimelineResult[] = [{ ...mockResults[0] }];
const hasNotes: OpenTimelineResult[] = [{ ...mockResults[0] }];
// the saved object id exists in the map yet, so the row is expanded:
const itemIdToExpandedNotesRowMap = {
@ -392,7 +394,9 @@ describe('#getCommonColumns', () => {
});
test('it renders the title when the timeline has a title, but no saved object id', () => {
const missingSavedObjectId: TimelineResult[] = [omit('savedObjectId', { ...mockResults[0] })];
const missingSavedObjectId: OpenTimelineResult[] = [
omit('savedObjectId', { ...mockResults[0] }),
];
const wrapper = mountWithIntl(
<TimelinesTable
@ -423,7 +427,7 @@ describe('#getCommonColumns', () => {
});
test('it renders an Untitled Timeline title when the timeline has no title and a saved object id', () => {
const missingTitle: TimelineResult[] = [omit('title', { ...mockResults[0] })];
const missingTitle: OpenTimelineResult[] = [omit('title', { ...mockResults[0] })];
const wrapper = mountWithIntl(
<TimelinesTable
@ -454,7 +458,7 @@ describe('#getCommonColumns', () => {
});
test('it renders an Untitled Timeline title when the timeline has no title, and no saved object id', () => {
const withMissingSavedObjectIdAndTitle: TimelineResult[] = [
const withMissingSavedObjectIdAndTitle: OpenTimelineResult[] = [
omit(['title', 'savedObjectId'], { ...mockResults[0] }),
];
@ -487,7 +491,9 @@ describe('#getCommonColumns', () => {
});
test('it renders an Untitled Timeline title when the title is just whitespace, and it has a saved object id', () => {
const withJustWhitespaceTitle: TimelineResult[] = [{ ...mockResults[0], title: ' ' }];
const withJustWhitespaceTitle: OpenTimelineResult[] = [
{ ...mockResults[0], title: ' ' },
];
const wrapper = mountWithIntl(
<TimelinesTable
@ -518,7 +524,7 @@ describe('#getCommonColumns', () => {
});
test('it renders an Untitled Timeline title when the title is just whitespace, and no saved object id', () => {
const withMissingSavedObjectId: TimelineResult[] = [
const withMissingSavedObjectId: OpenTimelineResult[] = [
omit('savedObjectId', { ...mockResults[0], title: ' ' }),
];
@ -580,7 +586,9 @@ describe('#getCommonColumns', () => {
});
test('it does NOT render a hyperlink when the timeline has no saved object id', () => {
const missingSavedObjectId: TimelineResult[] = [omit('savedObjectId', { ...mockResults[0] })];
const missingSavedObjectId: OpenTimelineResult[] = [
omit('savedObjectId', { ...mockResults[0] }),
];
const wrapper = mountWithIntl(
<TimelinesTable
@ -705,7 +713,7 @@ describe('#getCommonColumns', () => {
});
test('it renders a placeholder when the timeline has no description', () => {
const missingDescription: TimelineResult[] = [omit('description', { ...mockResults[0] })];
const missingDescription: OpenTimelineResult[] = [omit('description', { ...mockResults[0] })];
const wrapper = mountWithIntl(
<TimelinesTable
@ -735,7 +743,7 @@ describe('#getCommonColumns', () => {
});
test('it renders a placeholder when the timeline description is just whitespace', () => {
const justWhitespaceDescription: TimelineResult[] = [
const justWhitespaceDescription: OpenTimelineResult[] = [
{ ...mockResults[0], description: ' ' },
];
@ -828,7 +836,7 @@ describe('#getCommonColumns', () => {
});
test('it renders a placeholder when the timeline has no last modified (updated) date', () => {
const missingUpdated: TimelineResult[] = [omit('updated', { ...mockResults[0] })];
const missingUpdated: OpenTimelineResult[] = [omit('updated', { ...mockResults[0] })];
const wrapper = mountWithIntl(
<TimelinesTable

12
x-pack/plugins/siem/public/components/open_timeline/timelines_table/common_columns.tsx
View file

@ -13,7 +13,7 @@ import { FormattedDate } from '../../formatted_date';
import { getEmptyTagValue } from '../../empty_value';
import { isUntitled } from '../helpers';
import { NotePreviews } from '../note_previews';
import { OnOpenTimeline, OnToggleShowNotes, TimelineResult } from '../types';
import { OnOpenTimeline, OnToggleShowNotes, OpenTimelineResult } from '../types';
import * as i18n from '../translations';
@ -45,7 +45,7 @@ export const getCommonColumns = ({
}) => [
{
isExpander: true,
render: ({ notes, savedObjectId }: TimelineResult) =>
render: ({ notes, savedObjectId }: OpenTimelineResult) =>
notes != null && notes.length > 0 && savedObjectId != null ? (
<ExpandButtonContainer>
<EuiButtonIcon
@ -71,7 +71,7 @@ export const getCommonColumns = ({
dataType: 'string',
field: 'title',
name: i18n.TIMELINE_NAME,
render: (title: string, timelineResult: TimelineResult) =>
render: (title: string, timelineResult: OpenTimelineResult) =>
timelineResult.savedObjectId != null ? (
<EuiLink
data-test-subj={`title-${timelineResult.savedObjectId}`}
@ -89,7 +89,7 @@ export const getCommonColumns = ({
{isUntitled(timelineResult) ? i18n.UNTITLED_TIMELINE : title}
</div>
),
sortable: true,
sortable: false,
},
{
dataType: 'string',
@ -100,14 +100,14 @@ export const getCommonColumns = ({
{description != null && description.trim().length > 0 ? description : getEmptyTagValue()}
</span>
),
sortable: true,
sortable: false,
width: showExtendedColumnsAndActions ? EXTENDED_COLUMNS_DESCRIPTION_WIDTH : DESCRIPTION_WIDTH,
},
{
dataType: 'date',
field: 'updated',
name: i18n.LAST_MODIFIED,
render: (date: number, timelineResult: TimelineResult) => (
render: (date: number, timelineResult: OpenTimelineResult) => (
<div data-test-subj="updated">
{timelineResult.updated != null ? (
<FormattedDate fieldName="" value={date} />

6
x-pack/plugins/siem/public/components/open_timeline/timelines_table/extended_columns.test.tsx
View file

@ -12,14 +12,14 @@ import { DEFAULT_SEARCH_RESULTS_PER_PAGE } from '../../../pages/timelines/timeli
import { DEFAULT_SORT_DIRECTION, DEFAULT_SORT_FIELD } from '..';
import { getEmptyValue } from '../../empty_value';
import { mockTimelineResults } from '../../../mock/timeline_results';
import { TimelineResult } from '../types';
import { OpenTimelineResult } from '../types';
import { TimelinesTable } from '.';
import * as i18n from '../translations';
describe('#getExtendedColumns', () => {
let mockResults: TimelineResult[];
let mockResults: OpenTimelineResult[];
beforeEach(() => {
mockResults = cloneDeep(mockTimelineResults);
@ -85,7 +85,7 @@ describe('#getExtendedColumns', () => {
});
test('it renders a placeholder when the timeline is missing the updatedBy property', () => {
const missingUpdatedBy: TimelineResult[] = [omit('updatedBy', { ...mockResults[0] })];
const missingUpdatedBy: OpenTimelineResult[] = [omit('updatedBy', { ...mockResults[0] })];
const wrapper = mountWithIntl(
<TimelinesTable

6
x-pack/plugins/siem/public/components/open_timeline/timelines_table/extended_columns.tsx
View file

@ -9,7 +9,7 @@ import * as React from 'react';
import { defaultToEmptyTag } from '../../empty_value';
import * as i18n from '../translations';
import { TimelineResult } from '../types';
import { OpenTimelineResult } from '../types';
/**
* Returns the extended columns that are specific to the `All Timelines` view
@ -20,9 +20,9 @@ export const getExtendedColumns = () => [
dataType: 'string',
field: 'updatedBy',
name: i18n.MODIFIED_BY,
render: (updatedBy: TimelineResult['updatedBy']) => (
render: (updatedBy: OpenTimelineResult['updatedBy']) => (
<div data-test-subj="username">{defaultToEmptyTag(updatedBy)}</div>
),
sortable: true,
sortable: false,
},
];

14
x-pack/plugins/siem/public/components/open_timeline/timelines_table/icon_header_columns.test.tsx
View file

@ -13,10 +13,10 @@ import { DEFAULT_SEARCH_RESULTS_PER_PAGE } from '../../../pages/timelines/timeli
import { DEFAULT_SORT_DIRECTION, DEFAULT_SORT_FIELD } from '..';
import { mockTimelineResults } from '../../../mock/timeline_results';
import { TimelinesTable } from '.';
import { TimelineResult } from '../types';
import { OpenTimelineResult } from '../types';
describe('#getActionsColumns', () => {
let mockResults: TimelineResult[];
let mockResults: OpenTimelineResult[];
beforeEach(() => {
mockResults = cloneDeep(mockTimelineResults);
@ -147,7 +147,7 @@ describe('#getActionsColumns', () => {
});
test('it renders an empty star when favorite is undefined', () => {
const undefinedFavorite: TimelineResult[] = [omit('favorite', { ...mockResults[0] })];
const undefinedFavorite: OpenTimelineResult[] = [omit('favorite', { ...mockResults[0] })];
const wrapper = mountWithIntl(
<TimelinesTable
@ -173,7 +173,7 @@ describe('#getActionsColumns', () => {
});
test('it renders an empty star when favorite is null', () => {
const nullFavorite: TimelineResult[] = [{ ...mockResults[0], favorite: null }];
const nullFavorite: OpenTimelineResult[] = [{ ...mockResults[0], favorite: null }];
const wrapper = mountWithIntl(
<TimelinesTable
@ -199,7 +199,7 @@ describe('#getActionsColumns', () => {
});
test('it renders an empty star when favorite is empty', () => {
const emptyFavorite: TimelineResult[] = [{ ...mockResults[0], favorite: [] }];
const emptyFavorite: OpenTimelineResult[] = [{ ...mockResults[0], favorite: [] }];
const wrapper = mountWithIntl(
<TimelinesTable
@ -225,7 +225,7 @@ describe('#getActionsColumns', () => {
});
test('it renders an filled star when favorite has one entry', () => {
const emptyFavorite: TimelineResult[] = [
const emptyFavorite: OpenTimelineResult[] = [
{
...mockResults[0],
favorite: [
@ -261,7 +261,7 @@ describe('#getActionsColumns', () => {
});
test('it renders an filled star when favorite has more than one entry', () => {
const emptyFavorite: TimelineResult[] = [
const emptyFavorite: OpenTimelineResult[] = [
{
...mockResults[0],
favorite: [

11
x-pack/plugins/siem/public/components/open_timeline/timelines_table/icon_header_columns.tsx
View file

@ -8,7 +8,7 @@ import { EuiIcon, EuiToolTip } from '@elastic/eui';
import * as React from 'react';
import { ACTION_COLUMN_WIDTH, PositionedIcon } from './common_styles';
import { FavoriteTimelineResult, TimelineResult } from '../types';
import { FavoriteTimelineResult, OpenTimelineResult } from '../types';
import { getNotesCount, getPinnedEventCount } from '../helpers';
import * as i18n from '../translations';
@ -25,7 +25,7 @@ export const getIconHeaderColumns = () => [
<EuiIcon data-test-subj="pinned-event-header-icon" size="m" color="subdued" type="pin" />
</EuiToolTip>
),
render: (_: Record<string, boolean> | null | undefined, timelineResult: TimelineResult) => (
render: (_: Record<string, boolean> | null | undefined, timelineResult: OpenTimelineResult) => (
<span data-test-subj="pinned-event-count">{`${getPinnedEventCount(timelineResult)}`}</span>
),
sortable: false,
@ -44,9 +44,10 @@ export const getIconHeaderColumns = () => [
/>
</EuiToolTip>
),
render: (_: Record<string, string[]> | null | undefined, timelineResult: TimelineResult) => (
<span data-test-subj="notes-count">{getNotesCount(timelineResult)}</span>
),
render: (
_: Record<string, string[]> | null | undefined,
timelineResult: OpenTimelineResult
) => <span data-test-subj="notes-count">{getNotesCount(timelineResult)}</span>,
sortable: false,
width: ACTION_COLUMN_WIDTH,
},

8
x-pack/plugins/siem/public/components/open_timeline/timelines_table/index.test.tsx
View file

@ -11,13 +11,13 @@ import * as React from 'react';
import { DEFAULT_SEARCH_RESULTS_PER_PAGE } from '../../../pages/timelines/timelines_page';
import { DEFAULT_SORT_DIRECTION, DEFAULT_SORT_FIELD } from '..';
import { mockTimelineResults } from '../../../mock/timeline_results';
import { TimelineResult } from '../types';
import { OpenTimelineResult } from '../types';
import { TimelinesTable, TimelinesTableProps } from '.';
import * as i18n from '../translations';
describe('TimelinesTable', () => {
let mockResults: TimelineResult[];
let mockResults: OpenTimelineResult[];
beforeEach(() => {
mockResults = cloneDeep(mockTimelineResults);
@ -400,14 +400,14 @@ describe('TimelinesTable', () => {
wrapper
.find('thead tr th button')
.at(1)
.at(0)
.simulate('click');
wrapper.update();
expect(onTableChange).toHaveBeenCalledWith({
page: { index: 0, size: 10 },
sort: { direction: 'asc', field: 'description' },
sort: { direction: 'asc', field: 'updated' },
});
});

7
x-pack/plugins/siem/public/components/open_timeline/timelines_table/index.tsx
View file

@ -15,7 +15,7 @@ import {
OnSelectionChange,
OnTableChange,
OnToggleShowNotes,
TimelineResult,
OpenTimelineResult,
} from '../types';
import { getActionsColumns } from './actions_columns';
import { getCommonColumns } from './common_columns';
@ -27,6 +27,7 @@ import * as i18n from '../translations';
const TimelinesTableContainer = styled.div`
.euiTableCellContent {
animation: none;
text-align: left;
}
.euiTableCellContent__text {
@ -89,7 +90,7 @@ export interface TimelinesTableProps {
onToggleShowNotes: OnToggleShowNotes;
pageIndex: number;
pageSize: number;
searchResults: TimelineResult[];
searchResults: OpenTimelineResult[];
showExtendedColumnsAndActions: boolean;
sortDirection: 'asc' | 'desc';
sortField: string;
@ -138,7 +139,7 @@ export const TimelinesTable = pure<TimelinesTableProps>(
};
const selection = {
selectable: (timelineResult: TimelineResult) => timelineResult.savedObjectId != null,
selectable: (timelineResult: OpenTimelineResult) => timelineResult.savedObjectId != null,
selectableMessage: (selectable: boolean) =>
!selectable ? i18n.MISSING_SAVED_OBJECT_ID : undefined,
onSelectionChange,

2
x-pack/plugins/siem/public/components/open_timeline/translations.ts
View file

@ -86,7 +86,7 @@ export const POSTED = i18n.translate('xpack.siem.open.timeline.postedLabel', {
});
export const SEARCH_PLACEHOLDER = i18n.translate('xpack.siem.open.timeline.searchPlaceholder', {
defaultMessage: 'e.g. timeline name, description, or notes',
defaultMessage: 'e.g. timeline name, or description',
});
export const TIMELINE_NAME = i18n.translate('xpack.siem.open.timeline.timelineNameTableHeader', {

46
x-pack/plugins/siem/public/components/open_timeline/types.ts
View file

@ -4,6 +4,14 @@
* you may not use this file except in compliance with the Elastic License.
*/
import { ActionCreator } from 'typescript-fsa';
import { AllTimelinesVariables } from '../../containers/timeline/all';
import { Note } from '../../lib/note';
import { TimelineModel } from '../../store/timeline/model';
import { SerializedFilterQuery, KueryFilterQuery } from '../../store';
import { ColumnHeader } from '../timeline/body/column_headers/column_header';
/** The users who added a timeline to favorites */
export interface FavoriteTimelineResult {
userId?: number | null;
@ -19,7 +27,7 @@ export interface TimelineResultNote {
}
/** The results of the query run by the OpenTimeline component */
export interface TimelineResult {
export interface OpenTimelineResult {
created?: number | null;
description?: string | null;
eventIdToNoteIds?: Readonly<Record<string, string[]>> | null;
@ -43,13 +51,14 @@ export interface EuiSearchBarQuery {
}
/** Performs IO to delete the specified timelines */
export type DeleteTimelines = (timelineIds: string[]) => void;
export type DeleteTimelines = (timelineIds: string[], variables?: AllTimelinesVariables) => void;
/** Invoked when the user clicks the action make the selected timelines favorites */
export type OnAddTimelinesToFavorites = () => void;
/** Invoked when the user clicks the action to delete the selected timelines */
export type OnDeleteSelected = () => void;
export type OnDeleteOneTimeline = (timelineIds: string[]) => void;
/** Invoked when the user clicks on the name of a timeline to open it */
export type OnOpenTimeline = (
@ -60,7 +69,7 @@ export type OnOpenTimeline = (
export type OnQueryChange = (query: EuiSearchBarQuery) => void;
/** Invoked when the user selects (or de-selects) timelines in the table */
export type OnSelectionChange = (selectedItems: TimelineResult[]) => void;
export type OnSelectionChange = (selectedItems: OpenTimelineResult[]) => void;
/** Invoked when the user toggles the option to only view favorite timelines */
export type OnToggleOnlyFavorites = () => void;
@ -117,9 +126,9 @@ export interface OpenTimelineProps {
/** The currently applied search criteria */
query: string;
/** The results of executing a search */
searchResults: TimelineResult[];
searchResults: OpenTimelineResult[];
/** the currently-selected timelines in the table */
selectedItems: TimelineResult[];
selectedItems: OpenTimelineResult[];
/** the requested sort direction of the query results */
sortDirection: 'asc' | 'desc';
/** the requested field to sort on */
@ -129,3 +138,30 @@ export interface OpenTimelineProps {
/** The total (server-side) count of the search results */
totalSearchResultsCount: number;
}
export interface OpenTimelineDispatchProps {
setKqlFilterQueryDraft: ActionCreator<{
id: string;
filterQueryDraft: KueryFilterQuery;
}>;
applyKqlFilterQuery: ActionCreator<{
id: string;
filterQuery: SerializedFilterQuery;
}>;
addTimeline: ActionCreator<{ id: string; timeline: TimelineModel }>;
addNotes: ActionCreator<{ notes: Note[] }>;
createNewTimeline: ActionCreator<{
id: string;
columns: ColumnHeader[];
show?: boolean;
}>;
setTimelineRangeDatePicker: ActionCreator<{
from: number;
to: number;
}>;
updateIsLoading: ActionCreator<{ id: string; isLoading: boolean }>;
}
export interface OpenTimelineReduxProps {
timeline: TimelineModel;
}

15
x-pack/plugins/siem/public/components/page/add_to_kql/index.test.tsx
View file

@ -9,17 +9,22 @@ import toJson from 'enzyme-to-json';
import * as React from 'react';
import { escapeQueryValue } from '../../../lib/keury';
import { mockGlobalState, TestProviders, mockIndexPattern } from '../../../mock';
import {
apolloClientObservable,
mockGlobalState,
TestProviders,
mockIndexPattern,
} from '../../../mock';
import { createStore, hostsModel, networkModel, State } from '../../../store';
import { AddToKql } from '.';
describe('AddToKql Component', async () => {
const state: State = mockGlobalState;
let store = createStore(state);
let store = createStore(state, apolloClientObservable);
beforeEach(() => {
store = createStore(state);
store = createStore(state, apolloClientObservable);
});
test('Rendering', async () => {
@ -97,7 +102,7 @@ describe('AddToKql Component', async () => {
},
},
filterQuery: {
query: {
kuery: {
kind: 'kuery',
expression: 'host.name: siem-kibana',
},
@ -153,7 +158,7 @@ describe('AddToKql Component', async () => {
},
},
filterQuery: {
query: {
kuery: {
kind: 'kuery',
expression: 'host.name: siem-kibana',
},

6
x-pack/plugins/siem/public/components/page/hosts/authentications_table/index.test.tsx
View file

@ -10,7 +10,7 @@ import { getOr } from 'lodash/fp';
import * as React from 'react';
import { Provider as ReduxStoreProvider } from 'react-redux';
import { mockGlobalState } from '../../../../mock';
import { apolloClientObservable, mockGlobalState } from '../../../../mock';
import { createStore, hostsModel, State } from '../../../../store';
import { AuthenticationTable } from '.';
@ -20,10 +20,10 @@ describe('Authentication Table Component', () => {
const loadMore = jest.fn();
const state: State = mockGlobalState;
let store = createStore(state);
let store = createStore(state, apolloClientObservable);
beforeEach(() => {
store = createStore(state);
store = createStore(state, apolloClientObservable);
});
describe('rendering', () => {

3
x-pack/plugins/siem/public/components/page/hosts/authentications_table/index.tsx
View file

@ -20,6 +20,7 @@ import { escapeDataProviderId } from '../../../drag_and_drop/helpers';
import { getEmptyTagValue } from '../../../empty_value';
import { HostDetailsLink, IPDetailsLink } from '../../../links';
import { Columns, ItemsPerRow, LoadMoreTable } from '../../../load_more_table';
import { IS_OPERATOR } from '../../../timeline/data_providers/data_provider';
import { Provider } from '../../../timeline/data_providers/provider';
import * as i18n from './translations';
@ -154,6 +155,7 @@ const getAuthenticationColumns = (): [
queryMatch: {
field: 'event.type',
value: 'authentication_failure',
operator: IS_OPERATOR,
},
}}
render={(dataProvider, _, snapshot) =>
@ -237,6 +239,7 @@ const getAuthenticationColumns = (): [
queryMatch: {
field: 'event.type',
value: 'authentication_success',
operator: IS_OPERATOR,
},
}}
render={(dataProvider, _, snapshot) =>

6
x-pack/plugins/siem/public/components/page/hosts/events_table/index.test.tsx
View file

@ -10,7 +10,7 @@ import { getOr } from 'lodash/fp';
import * as React from 'react';
import { Provider as ReduxStoreProvider } from 'react-redux';
import { mockGlobalState } from '../../../../mock';
import { apolloClientObservable, mockGlobalState } from '../../../../mock';
import { createStore, hostsModel, State } from '../../../../store';
import { EventsTable } from './index';
@ -20,10 +20,10 @@ describe('Load More Events Table Component', () => {
const loadMore = jest.fn();
const state: State = mockGlobalState;
let store = createStore(state);
let store = createStore(state, apolloClientObservable);
beforeEach(() => {
store = createStore(state);
store = createStore(state, apolloClientObservable);
});
describe('rendering', () => {

13
x-pack/plugins/siem/public/components/page/hosts/hosts_table/columns.tsx
View file

@ -19,6 +19,7 @@ import { PreferenceFormattedDate } from '../../../formatted_date';
import { HostDetailsLink } from '../../../links';
import { Columns } from '../../../load_more_table';
import { LocalizedDateTooltip } from '../../../localized_date_tooltip';
import { IS_OPERATOR } from '../../../timeline/data_providers/data_provider';
import { Provider } from '../../../timeline/data_providers/provider';
import { AddToKql } from '../../add_to_kql';
@ -40,8 +41,8 @@ export const getHostsColumns = (
hideForMobile: false,
sortable: true,
render: hostName => {
if (hostName != null) {
const id = escapeDataProviderId(`hosts-table-hostName-${hostName}`);
if (hostName != null && hostName.length > 0) {
const id = escapeDataProviderId(`hosts-table-hostName-${hostName[0]}`);
return (
<DraggableWrapper
key={id}
@ -50,9 +51,9 @@ export const getHostsColumns = (
enabled: true,
excluded: false,
id,
name: hostName,
name: hostName[0],
kqlQuery: '',
queryMatch: { field: 'host.name', value: hostName },
queryMatch: { field: 'host.name', value: hostName[0], operator: IS_OPERATOR },
}}
render={(dataProvider, _, snapshot) =>
snapshot.isDragging ? (
@ -62,11 +63,11 @@ export const getHostsColumns = (
) : (
<AddToKql
indexPattern={indexPattern}
expression={`host.name: ${escapeQueryValue(hostName)}`}
expression={`host.name: ${escapeQueryValue(hostName[0])}`}
componentFilterType="hosts"
type={type}
>
<HostDetailsLink hostName={hostName} />
<HostDetailsLink hostName={hostName[0]} />
</AddToKql>
)
}

12
x-pack/plugins/siem/public/components/page/hosts/hosts_table/index.test.tsx
View file

@ -11,7 +11,13 @@ import * as React from 'react';
import { MockedProvider } from 'react-apollo/test-utils';
import { Provider as ReduxStoreProvider } from 'react-redux';
import { mockFrameworks, mockIndexPattern, mockGlobalState, TestProviders } from '../../../../mock';
import {
apolloClientObservable,
mockFrameworks,
mockIndexPattern,
mockGlobalState,
TestProviders,
} from '../../../../mock';
import { createStore, hostsModel, State } from '../../../../store';
import { KibanaConfigContext } from '../../../formatted_date';
@ -22,10 +28,10 @@ describe('Load More Table Component', () => {
const loadMore = jest.fn();
const state: State = mockGlobalState;
let store = createStore(state);
let store = createStore(state, apolloClientObservable);
beforeEach(() => {
store = createStore(state);
store = createStore(state, apolloClientObservable);
});
describe('rendering', () => {

3
x-pack/plugins/siem/public/components/page/network/domains_table/columns.tsx
View file

@ -27,6 +27,7 @@ import { defaultToEmptyTag, getEmptyTagValue } from '../../../empty_value';
import { PreferenceFormattedDate } from '../../../formatted_date';
import { Columns } from '../../../load_more_table';
import { LocalizedDateTooltip } from '../../../localized_date_tooltip';
import { IS_OPERATOR } from '../../../timeline/data_providers/data_provider';
import { Provider } from '../../../timeline/data_providers/provider';
import { AddToKql } from '../../add_to_kql';
@ -69,7 +70,7 @@ export const getDomainsColumns = (
name: domainName,
excluded: false,
kqlQuery: '',
queryMatch: { field: domainNameAttr, value: domainName },
queryMatch: { field: domainNameAttr, value: domainName, operator: IS_OPERATOR },
}}
render={(dataProvider, _, snapshot) =>
snapshot.isDragging ? (

11
x-pack/plugins/siem/public/components/page/network/domains_table/index.test.tsx
View file

@ -12,7 +12,12 @@ import { MockedProvider } from 'react-apollo/test-utils';
import { Provider as ReduxStoreProvider } from 'react-redux';
import { FlowTarget } from '../../../../graphql/types';
import { mockIndexPattern, mockGlobalState, TestProviders } from '../../../../mock';
import {
apolloClientObservable,
mockIndexPattern,
mockGlobalState,
TestProviders,
} from '../../../../mock';
import { createStore, networkModel, State } from '../../../../store';
import { DomainsTable } from '.';
@ -23,10 +28,10 @@ describe('Domains Table Component', () => {
const ip = '10.10.10.10';
const state: State = mockGlobalState;
let store = createStore(state);
let store = createStore(state, apolloClientObservable);
beforeEach(() => {
store = createStore(state);
store = createStore(state, apolloClientObservable);
});
describe('Rendering', () => {

6
x-pack/plugins/siem/public/components/page/network/flow_target_select_connected/index.test.tsx
View file

@ -7,7 +7,7 @@
import { mount } from 'enzyme';
import * as React from 'react';
import { mockGlobalState, TestProviders } from '../../../../mock';
import { apolloClientObservable, mockGlobalState, TestProviders } from '../../../../mock';
import { createStore, State } from '../../../../store';
import { FlowTargetSelectConnected } from './index';
@ -15,10 +15,10 @@ import { IpOverviewId } from '../../../field_renderers/field_renderers';
describe('Flow Target Select Connected', () => {
const state: State = mockGlobalState;
let store = createStore(state);
let store = createStore(state, apolloClientObservable);
beforeEach(() => {
store = createStore(state);
store = createStore(state, apolloClientObservable);
});
test('Pick Relative Date', () => {
const wrapper = mount(

6
x-pack/plugins/siem/public/components/page/network/ip_overview/index.test.tsx
View file

@ -10,7 +10,7 @@ import * as React from 'react';
import { ActionCreator } from 'typescript-fsa';
import { FlowTarget } from '../../../../graphql/types';
import { mockGlobalState, TestProviders } from '../../../../mock';
import { apolloClientObservable, mockGlobalState, TestProviders } from '../../../../mock';
import { createStore, networkModel, State } from '../../../../store';
import { IpOverview } from './index';
@ -19,10 +19,10 @@ import { mockData } from './mock';
describe('IP Overview Component', () => {
const state: State = mockGlobalState;
let store = createStore(state);
let store = createStore(state, apolloClientObservable);
beforeEach(() => {
store = createStore(state);
store = createStore(state, apolloClientObservable);
});
describe('rendering', () => {

6
x-pack/plugins/siem/public/components/page/network/kpi_network/index.test.tsx
View file

@ -9,7 +9,7 @@ import toJson from 'enzyme-to-json';
import * as React from 'react';
import { Provider as ReduxStoreProvider } from 'react-redux';
import { mockGlobalState } from '../../../../mock';
import { apolloClientObservable, mockGlobalState } from '../../../../mock';
import { createStore, State } from '../../../../store';
import { KpiNetworkComponent } from '.';
@ -18,10 +18,10 @@ import { mockData } from './mock';
describe('KpiNetwork Component', () => {
const state: State = mockGlobalState;
let store = createStore(state);
let store = createStore(state, apolloClientObservable);
beforeEach(() => {
store = createStore(state);
store = createStore(state, apolloClientObservable);
});
describe('rendering', () => {

7
x-pack/plugins/siem/public/components/page/network/network_dns_table/columns.tsx
View file

@ -14,6 +14,7 @@ import { DragEffects, DraggableWrapper } from '../../../drag_and_drop/draggable_
import { escapeDataProviderId } from '../../../drag_and_drop/helpers';
import { defaultToEmptyTag, getEmptyTagValue } from '../../../empty_value';
import { Columns } from '../../../load_more_table';
import { IS_OPERATOR } from '../../../timeline/data_providers/data_provider';
import { Provider } from '../../../timeline/data_providers/provider';
import * as i18n from './translations';
@ -46,7 +47,11 @@ export const getNetworkDnsColumns = (
name: dnsName,
excluded: false,
kqlQuery: '',
queryMatch: { field: 'dns.question.etld_plus_one', value: escapeQueryValue(dnsName) },
queryMatch: {
field: 'dns.question.etld_plus_one',
value: escapeQueryValue(dnsName),
operator: IS_OPERATOR,
},
}}
render={(dataProvider, _, snapshot) =>
snapshot.isDragging ? (

6
x-pack/plugins/siem/public/components/page/network/network_dns_table/index.test.tsx
View file

@ -11,7 +11,7 @@ import * as React from 'react';
import { MockedProvider } from 'react-apollo/test-utils';
import { Provider as ReduxStoreProvider } from 'react-redux';
import { mockGlobalState, TestProviders } from '../../../../mock';
import { apolloClientObservable, mockGlobalState, TestProviders } from '../../../../mock';
import { createStore, networkModel, State } from '../../../../store';
import { NetworkDnsTable } from '.';
@ -21,10 +21,10 @@ describe('NetworkTopNFlow Table Component', () => {
const loadMore = jest.fn();
const state: State = mockGlobalState;
let store = createStore(state);
let store = createStore(state, apolloClientObservable);
beforeEach(() => {
store = createStore(state);
store = createStore(state, apolloClientObservable);
});
describe('rendering', () => {

3
x-pack/plugins/siem/public/components/page/network/network_top_n_flow_table/columns.tsx
View file

@ -23,6 +23,7 @@ import { escapeDataProviderId } from '../../../drag_and_drop/helpers';
import { defaultToEmptyTag, getEmptyTagValue } from '../../../empty_value';
import { IPDetailsLink } from '../../../links';
import { Columns } from '../../../load_more_table';
import { IS_OPERATOR } from '../../../timeline/data_providers/data_provider';
import { Provider } from '../../../timeline/data_providers/provider';
import { AddToKql } from '../../add_to_kql';
@ -62,7 +63,7 @@ export const getNetworkTopNFlowColumns = (
name: ip,
excluded: false,
kqlQuery: '',
queryMatch: { field: ipAttr, value: ip },
queryMatch: { field: ipAttr, value: ip, operator: IS_OPERATOR },
}}
render={(dataProvider, _, snapshot) =>
snapshot.isDragging ? (

11
x-pack/plugins/siem/public/components/page/network/network_top_n_flow_table/index.test.tsx
View file

@ -12,7 +12,12 @@ import { MockedProvider } from 'react-apollo/test-utils';
import { Provider as ReduxStoreProvider } from 'react-redux';
import { FlowDirection } from '../../../../graphql/types';
import { mockIndexPattern, mockGlobalState, TestProviders } from '../../../../mock';
import {
apolloClientObservable,
mockIndexPattern,
mockGlobalState,
TestProviders,
} from '../../../../mock';
import { createStore, networkModel, State } from '../../../../store';
import { NetworkTopNFlowTable, NetworkTopNFlowTableId } from '.';
@ -22,10 +27,10 @@ describe('NetworkTopNFlow Table Component', () => {
const loadMore = jest.fn();
const state: State = mockGlobalState;
let store = createStore(state);
let store = createStore(state, apolloClientObservable);
beforeEach(() => {
store = createStore(state);
store = createStore(state, apolloClientObservable);
});
describe('rendering', () => {

6
x-pack/plugins/siem/public/components/page/network/tls_table/index.test.tsx
View file

@ -11,7 +11,7 @@ import * as React from 'react';
import { MockedProvider } from 'react-apollo/test-utils';
import { Provider as ReduxStoreProvider } from 'react-redux';
import { mockGlobalState, TestProviders } from '../../../../mock';
import { apolloClientObservable, mockGlobalState, TestProviders } from '../../../../mock';
import { createStore, networkModel, State } from '../../../../store';
import { TlsTable } from '.';
@ -21,10 +21,10 @@ describe('Tls Table Component', () => {
const loadMore = jest.fn();
const state: State = mockGlobalState;
let store = createStore(state);
let store = createStore(state, apolloClientObservable);
beforeEach(() => {
store = createStore(state);
store = createStore(state, apolloClientObservable);
});
describe('Rendering', () => {

6
x-pack/plugins/siem/public/components/page/network/users_table/index.test.tsx
View file

@ -12,7 +12,7 @@ import { MockedProvider } from 'react-apollo/test-utils';
import { Provider as ReduxStoreProvider } from 'react-redux';
import { FlowTarget } from '../../../../graphql/types';
import { mockGlobalState, TestProviders } from '../../../../mock';
import { apolloClientObservable, mockGlobalState, TestProviders } from '../../../../mock';
import { createStore, networkModel, State } from '../../../../store';
import { UsersTable } from '.';
@ -22,10 +22,10 @@ describe('Users Table Component', () => {
const loadMore = jest.fn();
const state: State = mockGlobalState;
let store = createStore(state);
let store = createStore(state, apolloClientObservable);
beforeEach(() => {
store = createStore(state);
store = createStore(state, apolloClientObservable);
});
describe('Rendering', () => {

6
x-pack/plugins/siem/public/components/super_date_picker/index.test.tsx
View file

@ -8,7 +8,7 @@ import { mount } from 'enzyme';
import * as React from 'react';
import { Provider as ReduxStoreProvider } from 'react-redux';
import { mockGlobalState } from '../../mock';
import { apolloClientObservable, mockGlobalState } from '../../mock';
import { createStore, State } from '../../store';
import { SuperDatePicker } from '.';
@ -16,11 +16,11 @@ import { SuperDatePicker } from '.';
describe('SIEM Super Date Picker', () => {
describe('#SuperDatePicker', () => {
const state: State = mockGlobalState;
let store = createStore(state);
let store = createStore(state, apolloClientObservable);
beforeEach(() => {
jest.clearAllMocks();
store = createStore(state);
store = createStore(state, apolloClientObservable);
});
describe('Pick Relative Date', () => {

29
x-pack/plugins/siem/public/components/super_date_picker/index.tsx
View file

@ -18,7 +18,7 @@ import { connect } from 'react-redux';
import { ActionCreator } from 'typescript-fsa';
import { inputsModel, State } from '../../store';
import { inputsActions } from '../../store/actions';
import { inputsActions, timelineActions } from '../../store/actions';
const MAX_RECENTLY_USED_RANGES = 9;
@ -55,6 +55,7 @@ interface SuperDatePickerDispatchProps {
id: inputsModel.InputsModelId;
from: number;
to: number;
timelineId?: string;
}>;
setRelativeSuperDatePicker: ActionCreator<{
id: inputsModel.InputsModelId;
@ -62,14 +63,17 @@ interface SuperDatePickerDispatchProps {
from: number;
to: number;
toStr: string;
timelineId?: string;
}>;
startAutoReload: ActionCreator<{ id: inputsModel.InputsModelId }>;
stopAutoReload: ActionCreator<{ id: inputsModel.InputsModelId }>;
setDuration: ActionCreator<{ id: inputsModel.InputsModelId; duration: number }>;
updateTimelineRange: ActionCreator<{ id: string; start: number; end: number }>;
}
interface OwnProps {
id: inputsModel.InputsModelId;
disabled?: boolean;
timelineId?: string;
}
interface TimeArgs {
@ -199,22 +203,38 @@ export const SuperDatePickerComponent = class extends Component<
};
private updateReduxTime = ({ start, end, isQuickSelection }: OnTimeChangeProps) => {
const { id, setAbsoluteSuperDatePicker, setRelativeSuperDatePicker } = this.props;
const {
id,
setAbsoluteSuperDatePicker,
setRelativeSuperDatePicker,
timelineId,
updateTimelineRange,
} = this.props;
const fromDate = this.formatDate(start);
let toDate = this.formatDate(end, { roundUp: true });
if (isQuickSelection) {
setRelativeSuperDatePicker({
id,
fromStr: start,
toStr: end,
from: this.formatDate(start),
to: this.formatDate(end, { roundUp: true }),
from: fromDate,
to: toDate,
});
} else {
toDate = this.formatDate(end);
setAbsoluteSuperDatePicker({
id,
from: this.formatDate(start),
to: this.formatDate(end),
});
}
if (timelineId != null) {
updateTimelineRange({
id: timelineId,
start: fromDate,
end: toDate,
});
}
};
};
@ -241,5 +261,6 @@ export const SuperDatePicker = connect(
startAutoReload: inputsActions.startAutoReload,
stopAutoReload: inputsActions.stopAutoReload,
setDuration: inputsActions.setDuration,
updateTimelineRange: timelineActions.updateRange,
}
)(SuperDatePickerComponent);

4
x-pack/plugins/siem/public/components/tables/__snapshots__/helpers.test.tsx.snap generated
View file

@ -14,6 +14,7 @@ exports[`Table Helpers #getRowItemDraggable it returns correctly against snapsho
"queryMatch": Object {
"displayValue": "item1",
"field": "attrName",
"operator": ":",
"value": "item1",
},
}
@ -38,6 +39,7 @@ exports[`Table Helpers #getRowItemDraggables it returns correctly against snapsh
"queryMatch": Object {
"displayValue": "item1",
"field": "attrName",
"operator": ":",
"value": "item1",
},
}
@ -58,6 +60,7 @@ exports[`Table Helpers #getRowItemDraggables it returns correctly against snapsh
"queryMatch": Object {
"displayValue": "item2",
"field": "attrName",
"operator": ":",
"value": "item2",
},
}
@ -78,6 +81,7 @@ exports[`Table Helpers #getRowItemDraggables it returns correctly against snapsh
"queryMatch": Object {
"displayValue": "item3",
"field": "attrName",
"operator": ":",
"value": "item3",
},
}

3
x-pack/plugins/siem/public/components/tables/helpers.tsx
View file

@ -10,6 +10,7 @@ import React from 'react';
import { escapeDataProviderId } from '../drag_and_drop/helpers';
import { DragEffects, DraggableWrapper } from '../drag_and_drop/draggable_wrapper';
import { IS_OPERATOR } from '../timeline/data_providers/data_provider';
import { Provider } from '../timeline/data_providers/provider';
import { defaultToEmptyTag, getEmptyTagValue } from '../empty_value';
import { MoreRowItems } from '../page';
@ -45,6 +46,7 @@ export const getRowItemDraggable = ({
field: attrName,
value: rowItem,
displayValue: dragDisplayValue || rowItem,
operator: IS_OPERATOR,
},
}}
render={(dataProvider, _, snapshot) =>
@ -99,6 +101,7 @@ export const getRowItemDraggables = ({
field: attrName,
value: rowItem,
displayValue: dragDisplayValue || rowItem,
operator: IS_OPERATOR,
},
}}
render={(dataProvider, _, snapshot) =>

10
x-pack/plugins/siem/public/components/timeline/__snapshots__/timeline.test.tsx.snap generated
View file

@ -471,6 +471,7 @@ Can be one or multiple IPv4 or IPv6 addresses.",
"name": "Provider 1",
"queryMatch": Object {
"field": "name",
"operator": ":",
"value": "Provider 1",
},
},
@ -483,6 +484,7 @@ Can be one or multiple IPv4 or IPv6 addresses.",
"name": "Provider 2",
"queryMatch": Object {
"field": "name",
"operator": ":",
"value": "Provider 2",
},
},
@ -495,6 +497,7 @@ Can be one or multiple IPv4 or IPv6 addresses.",
"name": "Provider 3",
"queryMatch": Object {
"field": "name",
"operator": ":",
"value": "Provider 3",
},
},
@ -507,6 +510,7 @@ Can be one or multiple IPv4 or IPv6 addresses.",
"name": "Provider 4",
"queryMatch": Object {
"field": "name",
"operator": ":",
"value": "Provider 4",
},
},
@ -519,6 +523,7 @@ Can be one or multiple IPv4 or IPv6 addresses.",
"name": "Provider 5",
"queryMatch": Object {
"field": "name",
"operator": ":",
"value": "Provider 5",
},
},
@ -531,6 +536,7 @@ Can be one or multiple IPv4 or IPv6 addresses.",
"name": "Provider 6",
"queryMatch": Object {
"field": "name",
"operator": ":",
"value": "Provider 6",
},
},
@ -543,6 +549,7 @@ Can be one or multiple IPv4 or IPv6 addresses.",
"name": "Provider 7",
"queryMatch": Object {
"field": "name",
"operator": ":",
"value": "Provider 7",
},
},
@ -555,6 +562,7 @@ Can be one or multiple IPv4 or IPv6 addresses.",
"name": "Provider 8",
"queryMatch": Object {
"field": "name",
"operator": ":",
"value": "Provider 8",
},
},
@ -567,6 +575,7 @@ Can be one or multiple IPv4 or IPv6 addresses.",
"name": "Provider 9",
"queryMatch": Object {
"field": "name",
"operator": ":",
"value": "Provider 9",
},
},
@ -579,6 +588,7 @@ Can be one or multiple IPv4 or IPv6 addresses.",
"name": "Provider 10",
"queryMatch": Object {
"field": "name",
"operator": ":",
"value": "Provider 10",
},
},

112
x-pack/plugins/siem/public/components/timeline/auto_save_warning/index.tsx Normal file
View file

@ -0,0 +1,112 @@
/*
* 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 { EuiButton, EuiFlexGroup, EuiFlexItem, EuiGlobalToastList } from '@elastic/eui';
import { getOr } from 'lodash/fp';
import { pure } from 'recompose';
import * as React from 'react';
import { connect } from 'react-redux';
import { ActionCreator } from 'typescript-fsa';
import { State, timelineSelectors } from '../../../store';
import { setTimelineRangeDatePicker as dispatchSetTimelineRangeDatePicker } from '../../../store/inputs/actions';
import { TimelineModel } from '../../../store/timeline/model';
import { AutoSavedWarningMsg } from '../../../store/timeline/reducer';
import * as i18n from './translations';
import { timelineActions } from '../../../store/timeline';
interface ReduxProps {
timelineId: string | null;
newTimelineModel: TimelineModel | null;
}
interface DispatchProps {
setTimelineRangeDatePicker: ActionCreator<{
from: number;
to: number;
}>;
updateAutoSaveMsg: ActionCreator<{
timelineId: string | null;
newTimelineModel: TimelineModel | null;
}>;
updateTimeline: ActionCreator<{
id: string;
timeline: TimelineModel;
}>;
}
type OwnProps = ReduxProps & DispatchProps;
const AutoSaveWarningMsgComponent = pure<OwnProps>(
({
newTimelineModel,
setTimelineRangeDatePicker,
timelineId,
updateAutoSaveMsg,
updateTimeline,
}) => (
<EuiGlobalToastList
toasts={
timelineId != null && newTimelineModel != null
? [
{
id: 'AutoSaveWarningMsg',
title: i18n.TITLE,
color: 'warning',
iconType: 'alert',
toastLifeTimeMs: 15000,
text: (
<>
<p>{i18n.DESCRIPTION}</p>
<EuiFlexGroup justifyContent="flexEnd" gutterSize="s">
<EuiFlexItem grow={false}>
<EuiButton
size="s"
onClick={() => {
updateTimeline({ id: timelineId, timeline: newTimelineModel });
updateAutoSaveMsg({ timelineId: null, newTimelineModel: null });
setTimelineRangeDatePicker({
from: getOr(0, 'dateRange.start', newTimelineModel),
to: getOr(0, 'dateRange.end', newTimelineModel),
});
}}
>
{i18n.REFRESH_TIMELINE}
</EuiButton>
</EuiFlexItem>
</EuiFlexGroup>
</>
),
},
]
: []
}
dismissToast={() => {
updateAutoSaveMsg({ timelineId: null, newTimelineModel: null });
}}
toastLifeTimeMs={6000}
/>
)
);
const mapStateToProps = (state: State) => {
const autoSaveMessage: AutoSavedWarningMsg = timelineSelectors.autoSaveMsgSelector(state);
return {
timelineId: autoSaveMessage.timelineId,
newTimelineModel: autoSaveMessage.newTimelineModel,
};
};
export const AutoSaveWarningMsg = connect(
mapStateToProps,
{
setTimelineRangeDatePicker: dispatchSetTimelineRangeDatePicker,
updateAutoSaveMsg: timelineActions.updateAutoSaveMsg,
updateTimeline: timelineActions.updateTimeline,
}
)(AutoSaveWarningMsgComponent);

23
x-pack/plugins/siem/public/components/timeline/auto_save_warning/translations.ts Normal file
View file

@ -0,0 +1,23 @@
/*
* 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 { i18n } from '@kbn/i18n';
export const TITLE = i18n.translate('xpack.siem.timeline.autosave.warning.title', {
defaultMessage: 'Auto-save disabled until refresh',
});
export const DESCRIPTION = i18n.translate('xpack.siem.timeline.autosave.warning.description', {
defaultMessage:
'Another user has made changes to this timeline. Any changes you make will not be auto-saved until you have refreshed this timeline to absorb those changes.',
});
export const REFRESH_TIMELINE = i18n.translate(
'xpack.siem.timeline.autosave.warning.refresh.title',
{
defaultMessage: 'Refresh timeline',
}
);

1
x-pack/plugins/siem/public/components/timeline/body/events/event_column_view.tsx
View file

@ -65,7 +65,6 @@ export class EventColumnView extends React.PureComponent<Props> {
toggleShowNotes,
updateNote,
} = this.props;
return (
<EuiFlexGroup data-test-subj="event-column-view" gutterSize="none">
<EuiFlexItem data-test-subj="actions-column-item" grow={false}>

4
x-pack/plugins/siem/public/components/timeline/body/index.test.tsx
View file

@ -45,7 +45,6 @@ describe('Body', () => {
onColumnSorted={jest.fn()}
onFilterChange={jest.fn()}
onPinEvent={jest.fn()}
onRangeSelected={jest.fn()}
onUnPinEvent={jest.fn()}
onUpdateColumns={jest.fn()}
pinnedEventIds={{}}
@ -85,7 +84,6 @@ describe('Body', () => {
onColumnSorted={jest.fn()}
onFilterChange={jest.fn()}
onPinEvent={jest.fn()}
onRangeSelected={jest.fn()}
onUnPinEvent={jest.fn()}
onUpdateColumns={jest.fn()}
pinnedEventIds={{}}
@ -125,7 +123,6 @@ describe('Body', () => {
onColumnSorted={jest.fn()}
onFilterChange={jest.fn()}
onPinEvent={jest.fn()}
onRangeSelected={jest.fn()}
onUnPinEvent={jest.fn()}
onUpdateColumns={jest.fn()}
pinnedEventIds={{}}
@ -167,7 +164,6 @@ describe('Body', () => {
onColumnSorted={jest.fn()}
onFilterChange={jest.fn()}
onPinEvent={jest.fn()}
onRangeSelected={jest.fn()}
onUnPinEvent={jest.fn()}
onUpdateColumns={jest.fn()}
pinnedEventIds={{}}

2
x-pack/plugins/siem/public/components/timeline/body/index.tsx
View file

@ -19,7 +19,6 @@ import {
OnColumnSorted,
OnFilterChange,
OnPinEvent,
OnRangeSelected,
OnUnPinEvent,
OnUpdateColumns,
} from '../events';
@ -49,7 +48,6 @@ interface Props {
onColumnSorted: OnColumnSorted;
onFilterChange: OnFilterChange;
onPinEvent: OnPinEvent;
onRangeSelected: OnRangeSelected;
onUpdateColumns: OnUpdateColumns;
onUnPinEvent: OnUnPinEvent;
pinnedEventIds: Readonly<Record<string, boolean>>;

1
x-pack/plugins/siem/public/components/timeline/body/renderers/__snapshots__/empty_column_renderer.test.tsx.snap generated
View file

@ -13,6 +13,7 @@ exports[`empty_column_renderer renders correctly against snapshot 1`] = `
"name": "source.ip: ",
"queryMatch": Object {
"field": "source.ip",
"operator": ":",
"value": "",
},
}

1
x-pack/plugins/siem/public/components/timeline/body/renderers/__snapshots__/get_column_renderer.test.tsx.snap generated
View file

@ -13,6 +13,7 @@ exports[`get_column_renderer renders correctly against snapshot 1`] = `
"name": "event.severity: 3",
"queryMatch": Object {
"field": "event.severity",
"operator": ":",
"value": "3",
},
}

1
x-pack/plugins/siem/public/components/timeline/body/renderers/__snapshots__/plain_column_renderer.test.tsx.snap generated
View file

@ -13,6 +13,7 @@ exports[`plain_column_renderer rendering renders correctly against snapshot 1`]
"name": "event.category: Access",
"queryMatch": Object {
"field": "event.category",
"operator": ":",
"value": "Access",
},
}

7
x-pack/plugins/siem/public/components/timeline/body/renderers/empty_column_renderer.tsx
View file

@ -12,6 +12,7 @@ import { DraggableWrapper, DragEffects } from '../../../drag_and_drop/draggable_
import { escapeDataProviderId } from '../../../drag_and_drop/helpers';
import { escapeQueryValue } from '../../../../lib/keury';
import { parseQueryValue } from './parse_query_value';
import { IS_OPERATOR } from '../../data_providers/data_provider';
import { Provider } from '../../data_providers/provider';
import { TimelineNonEcsData } from '../../../../graphql/types';
import { getEmptyValue } from '../../../empty_value';
@ -41,7 +42,11 @@ export const emptyColumnRenderer: ColumnRenderer = {
`id-timeline-column-${columnName}-for-event-${eventId}-${field.id}`
),
name: `${columnName}: ${parseQueryValue(null)}`,
queryMatch: { field: field.id, value: escapeQueryValue(parseQueryValue(null)) },
queryMatch: {
field: field.id,
value: escapeQueryValue(parseQueryValue(null)),
operator: IS_OPERATOR,
},
excluded: false,
kqlQuery: '',
and: [],

9
x-pack/plugins/siem/public/components/timeline/body/renderers/plain_column_renderer.tsx
View file

@ -13,6 +13,7 @@ import { DragEffects, DraggableWrapper } from '../../../drag_and_drop/draggable_
import { escapeDataProviderId } from '../../../drag_and_drop/helpers';
import { getEmptyTagValue } from '../../../empty_value';
import { FormattedIp } from '../../../formatted_ip';
import { IS_OPERATOR, DataProvider } from '../../data_providers/data_provider';
import { Provider } from '../../data_providers/provider';
import { ColumnHeader } from '../column_headers/column_header';
import { IP_FIELD_TYPE, FormattedFieldValue } from './formatted_field';
@ -43,13 +44,17 @@ export const plainColumnRenderer: ColumnRenderer = {
}) =>
values != null
? values.map(value => {
const itemDataProvider = {
const itemDataProvider: DataProvider = {
enabled: true,
id: escapeDataProviderId(
`id-timeline-column-${columnName}-for-event-${eventId}-${field.id}-${value}`
),
name: `${columnName}: ${parseQueryValue(value)}`,
queryMatch: { field: field.id, value: escapeQueryValue(parseQueryValue(value)) },
queryMatch: {
field: field.id,
value: escapeQueryValue(parseQueryValue(value)),
operator: IS_OPERATOR,
},
excluded: false,
kqlQuery: '',
and: [],

2
x-pack/plugins/siem/public/components/timeline/body/renderers/suricata/suricata_signature.tsx
View file

@ -18,6 +18,7 @@ import { Provider } from '../../../../timeline/data_providers/provider';
import { TokensFlexItem } from '../helpers';
import { getBeginningTokens } from './suricata_links';
import { DefaultDraggable } from '../../../../draggables';
import { IS_OPERATOR } from '../../../data_providers/data_provider';
export const SURICATA_SIGNATURE_FIELD_NAME = 'suricata.eve.alert.signature';
export const SURICATA_SIGNATURE_ID_FIELD_NAME = 'suricata.eve.alert.signature_id';
@ -60,6 +61,7 @@ export const DraggableSignatureId = pure<{ id: string; signatureId: number }>(
queryMatch: {
field: SURICATA_SIGNATURE_ID_FIELD_NAME,
value: signatureId,
operator: IS_OPERATOR,
},
}}
render={(dataProvider, _, snapshot) =>

2
x-pack/plugins/siem/public/components/timeline/body/renderers/zeek/zeek_signature.tsx
View file

@ -17,6 +17,7 @@ import { escapeDataProviderId } from '../../../../drag_and_drop/helpers';
import { ExternalLinkIcon } from '../../../../external_link_icon';
import { GoogleLink, VirusTotalLink } from '../../../../links';
import { Provider } from '../../../../timeline/data_providers/provider';
import { IS_OPERATOR } from '../../../data_providers/data_provider';
import * as i18n from './translations';
@ -75,6 +76,7 @@ export const DraggableZeekElement = pure<{
queryMatch: {
field,
value: escapeQueryValue(value),
operator: IS_OPERATOR,
},
}}
render={(dataProvider, _, snapshot) =>

10
x-pack/plugins/siem/public/components/timeline/body/stateful_body.tsx
View file

@ -20,7 +20,6 @@ import {
OnColumnResized,
OnColumnSorted,
OnPinEvent,
OnRangeSelected,
OnUnPinEvent,
OnUpdateColumns,
} from '../events';
@ -74,10 +73,6 @@ interface DispatchProps {
id: string;
columns: ColumnHeader[];
}>;
updateRange?: ActionCreator<{
id: string;
range: string;
}>;
updateSort?: ActionCreator<{
id: string;
sort: Sort;
@ -121,7 +116,6 @@ class StatefulBodyComponent extends React.PureComponent<StatefulBodyComponentPro
onColumnSorted={this.onColumnSorted}
onFilterChange={noop} // TODO: this is the callback for column filters, which is out scope for this phase of delivery
onPinEvent={this.onPinEvent}
onRangeSelected={this.onRangeSelected}
onUpdateColumns={this.onUpdateColumns}
onUnPinEvent={this.onUnPinEvent}
pinnedEventIds={pinnedEventIds!}
@ -152,9 +146,6 @@ class StatefulBodyComponent extends React.PureComponent<StatefulBodyComponentPro
private onColumnResized: OnColumnResized = ({ columnId, delta }) =>
this.props.applyDeltaToColumnWidth!({ id: this.props.id, columnId, delta });
private onRangeSelected: OnRangeSelected = selectedRange =>
this.props.updateRange!({ id: this.props.id, range: selectedRange });
private onPinEvent: OnPinEvent = eventId => this.props.pinEvent!({ id: this.props.id, eventId });
private onUnPinEvent: OnUnPinEvent = eventId =>
@ -196,7 +187,6 @@ export const StatefulBody = connect(
applyDeltaToColumnWidth: timelineActions.applyDeltaToColumnWidth,
unPinEvent: timelineActions.unPinEvent,
updateColumns: timelineActions.updateColumns,
updateRange: timelineActions.updateRange,
updateSort: timelineActions.updateSort,
pinEvent: timelineActions.pinEvent,
removeColumn: timelineActions.removeColumn,

10
x-pack/plugins/siem/public/components/timeline/data_providers/__snapshots__/data_providers.test.tsx.snap generated
View file

@ -14,6 +14,7 @@ exports[`DataProviders rendering renders correctly against snapshot 1`] = `
"name": "Provider 1",
"queryMatch": Object {
"field": "name",
"operator": ":",
"value": "Provider 1",
},
},
@ -26,6 +27,7 @@ exports[`DataProviders rendering renders correctly against snapshot 1`] = `
"name": "Provider 2",
"queryMatch": Object {
"field": "name",
"operator": ":",
"value": "Provider 2",
},
},
@ -38,6 +40,7 @@ exports[`DataProviders rendering renders correctly against snapshot 1`] = `
"name": "Provider 3",
"queryMatch": Object {
"field": "name",
"operator": ":",
"value": "Provider 3",
},
},
@ -50,6 +53,7 @@ exports[`DataProviders rendering renders correctly against snapshot 1`] = `
"name": "Provider 4",
"queryMatch": Object {
"field": "name",
"operator": ":",
"value": "Provider 4",
},
},
@ -62,6 +66,7 @@ exports[`DataProviders rendering renders correctly against snapshot 1`] = `
"name": "Provider 5",
"queryMatch": Object {
"field": "name",
"operator": ":",
"value": "Provider 5",
},
},
@ -74,6 +79,7 @@ exports[`DataProviders rendering renders correctly against snapshot 1`] = `
"name": "Provider 6",
"queryMatch": Object {
"field": "name",
"operator": ":",
"value": "Provider 6",
},
},
@ -86,6 +92,7 @@ exports[`DataProviders rendering renders correctly against snapshot 1`] = `
"name": "Provider 7",
"queryMatch": Object {
"field": "name",
"operator": ":",
"value": "Provider 7",
},
},
@ -98,6 +105,7 @@ exports[`DataProviders rendering renders correctly against snapshot 1`] = `
"name": "Provider 8",
"queryMatch": Object {
"field": "name",
"operator": ":",
"value": "Provider 8",
},
},
@ -110,6 +118,7 @@ exports[`DataProviders rendering renders correctly against snapshot 1`] = `
"name": "Provider 9",
"queryMatch": Object {
"field": "name",
"operator": ":",
"value": "Provider 9",
},
},
@ -122,6 +131,7 @@ exports[`DataProviders rendering renders correctly against snapshot 1`] = `
"name": "Provider 10",
"queryMatch": Object {
"field": "name",
"operator": ":",
"value": "Provider 10",
},
},

1
x-pack/plugins/siem/public/components/timeline/data_providers/__snapshots__/provider.test.tsx.snap generated
View file

@ -12,6 +12,7 @@ exports[`Provider rendering renders correctly against snapshot 1`] = `
"name": "Provider 1",
"queryMatch": Object {
"field": "name",
"operator": ":",
"value": "Provider 1",
},
}

10
x-pack/plugins/siem/public/components/timeline/data_providers/__snapshots__/providers.test.tsx.snap generated
View file

@ -17,6 +17,7 @@ exports[`Providers rendering renders correctly against snapshot 1`] = `
"name": "Provider 1",
"queryMatch": Object {
"field": "name",
"operator": ":",
"value": "Provider 1",
},
},
@ -29,6 +30,7 @@ exports[`Providers rendering renders correctly against snapshot 1`] = `
"name": "Provider 2",
"queryMatch": Object {
"field": "name",
"operator": ":",
"value": "Provider 2",
},
},
@ -41,6 +43,7 @@ exports[`Providers rendering renders correctly against snapshot 1`] = `
"name": "Provider 3",
"queryMatch": Object {
"field": "name",
"operator": ":",
"value": "Provider 3",
},
},
@ -53,6 +56,7 @@ exports[`Providers rendering renders correctly against snapshot 1`] = `
"name": "Provider 4",
"queryMatch": Object {
"field": "name",
"operator": ":",
"value": "Provider 4",
},
},
@ -65,6 +69,7 @@ exports[`Providers rendering renders correctly against snapshot 1`] = `
"name": "Provider 5",
"queryMatch": Object {
"field": "name",
"operator": ":",
"value": "Provider 5",
},
},
@ -77,6 +82,7 @@ exports[`Providers rendering renders correctly against snapshot 1`] = `
"name": "Provider 6",
"queryMatch": Object {
"field": "name",
"operator": ":",
"value": "Provider 6",
},
},
@ -89,6 +95,7 @@ exports[`Providers rendering renders correctly against snapshot 1`] = `
"name": "Provider 7",
"queryMatch": Object {
"field": "name",
"operator": ":",
"value": "Provider 7",
},
},
@ -101,6 +108,7 @@ exports[`Providers rendering renders correctly against snapshot 1`] = `
"name": "Provider 8",
"queryMatch": Object {
"field": "name",
"operator": ":",
"value": "Provider 8",
},
},
@ -113,6 +121,7 @@ exports[`Providers rendering renders correctly against snapshot 1`] = `
"name": "Provider 9",
"queryMatch": Object {
"field": "name",
"operator": ":",
"value": "Provider 9",
},
},
@ -125,6 +134,7 @@ exports[`Providers rendering renders correctly against snapshot 1`] = `
"name": "Provider 10",
"queryMatch": Object {
"field": "name",
"operator": ":",
"value": "Provider 10",
},
},

6
x-pack/plugins/siem/public/components/timeline/data_providers/data_provider.ts
View file

@ -42,10 +42,12 @@ export interface DataProvider {
displayField?: string;
value: string | number;
displayValue?: string | number;
operator?: QueryOperator;
operator: QueryOperator;
};
/**
* Additional query clauses that are ANDed with this query to narrow results
*/
and: DataProvider[];
and: DataProvidersAnd[];
}
export type DataProvidersAnd = Pick<DataProvider, Exclude<keyof DataProvider, 'and'>>;

2
x-pack/plugins/siem/public/components/timeline/data_providers/index.tsx
View file

@ -84,7 +84,7 @@ export const DataProviders = pure<Props>(
}) => (
<DropTargetDataProviders data-test-subj="dataProviders">
<DroppableWrapper isDropDisabled={!show} droppableId={getDroppableId(id)}>
{dataProviders.length ? (
{dataProviders != null && dataProviders.length ? (
<Providers
browserFields={browserFields}
id={id}

28
x-pack/plugins/siem/public/components/timeline/data_providers/mock/mock_data_providers.tsx
View file

@ -4,7 +4,7 @@
* you may not use this file except in compliance with the Elastic License.
*/
import { DataProvider } from '../data_provider';
import { DataProvider, IS_OPERATOR } from '../data_provider';
interface NameToEventCount<TValue> {
[name: string]: TValue;
@ -39,16 +39,18 @@ export const getEventCount = (dataProviderName: string): number =>
* in the browser, and also used as mocks in unit and functional tests.
*/
export const mockDataProviders: DataProvider[] = Object.keys(mockSourceNameToEventCount).map(
name => ({
id: `id-${name}`,
name,
enabled: true,
excluded: false,
kqlQuery: '',
queryMatch: {
field: 'name',
value: name,
},
and: [],
})
name =>
({
id: `id-${name}`,
name,
enabled: true,
excluded: false,
kqlQuery: '',
queryMatch: {
field: 'name',
value: name,
operator: IS_OPERATOR,
},
and: [],
} as DataProvider)
);

6
x-pack/plugins/siem/public/components/timeline/data_providers/provider_item_and.tsx
View file

@ -17,12 +17,12 @@ import {
OnToggleDataProviderExcluded,
} from '../events';
import { DataProvider, IS_OPERATOR } from './data_provider';
import { DataProvidersAnd, IS_OPERATOR } from './data_provider';
import { ProviderItemBadge } from './provider_item_badge';
interface ProviderItemAndPopoverProps {
browserFields: BrowserFields;
dataProvidersAnd: DataProvider[];
dataProvidersAnd: DataProvidersAnd[];
onChangeDataProviderKqlQuery: OnChangeDataProviderKqlQuery;
onDataProviderEdited: OnDataProviderEdited;
onDataProviderRemoved: OnDataProviderRemoved;
@ -42,7 +42,7 @@ export class ProviderItemAnd extends React.PureComponent<ProviderItemAndPopoverP
timelineId,
} = this.props;
return dataProvidersAnd.map((providerAnd: DataProvider, index: number) => (
return dataProvidersAnd.map((providerAnd: DataProvidersAnd, index: number) => (
<React.Fragment key={`provider-item-and-${providerId}-${providerAnd.id}`}>
<EuiFlexItem>
<AndOrBadge type="and" />

10
x-pack/plugins/siem/public/components/timeline/header/__snapshots__/index.test.tsx.snap generated
View file

@ -14,6 +14,7 @@ exports[`Header rendering renders correctly against snapshot 1`] = `
"name": "Provider 1",
"queryMatch": Object {
"field": "name",
"operator": ":",
"value": "Provider 1",
},
},
@ -26,6 +27,7 @@ exports[`Header rendering renders correctly against snapshot 1`] = `
"name": "Provider 2",
"queryMatch": Object {
"field": "name",
"operator": ":",
"value": "Provider 2",
},
},
@ -38,6 +40,7 @@ exports[`Header rendering renders correctly against snapshot 1`] = `
"name": "Provider 3",
"queryMatch": Object {
"field": "name",
"operator": ":",
"value": "Provider 3",
},
},
@ -50,6 +53,7 @@ exports[`Header rendering renders correctly against snapshot 1`] = `
"name": "Provider 4",
"queryMatch": Object {
"field": "name",
"operator": ":",
"value": "Provider 4",
},
},
@ -62,6 +66,7 @@ exports[`Header rendering renders correctly against snapshot 1`] = `
"name": "Provider 5",
"queryMatch": Object {
"field": "name",
"operator": ":",
"value": "Provider 5",
},
},
@ -74,6 +79,7 @@ exports[`Header rendering renders correctly against snapshot 1`] = `
"name": "Provider 6",
"queryMatch": Object {
"field": "name",
"operator": ":",
"value": "Provider 6",
},
},
@ -86,6 +92,7 @@ exports[`Header rendering renders correctly against snapshot 1`] = `
"name": "Provider 7",
"queryMatch": Object {
"field": "name",
"operator": ":",
"value": "Provider 7",
},
},
@ -98,6 +105,7 @@ exports[`Header rendering renders correctly against snapshot 1`] = `
"name": "Provider 8",
"queryMatch": Object {
"field": "name",
"operator": ":",
"value": "Provider 8",
},
},
@ -110,6 +118,7 @@ exports[`Header rendering renders correctly against snapshot 1`] = `
"name": "Provider 9",
"queryMatch": Object {
"field": "name",
"operator": ":",
"value": "Provider 9",
},
},
@ -122,6 +131,7 @@ exports[`Header rendering renders correctly against snapshot 1`] = `
"name": "Provider 10",
"queryMatch": Object {
"field": "name",
"operator": ":",
"value": "Provider 10",
},
},

8
x-pack/plugins/siem/public/components/timeline/helpers.tsx
View file

@ -9,9 +9,9 @@ import { StaticIndexPattern } from 'ui/index_patterns';
import { convertKueryToElasticSearchQuery, escapeQueryValue } from '../../lib/keury';
import { DataProvider, EXISTS_OPERATOR } from './data_providers/data_provider';
import { DataProvider, DataProvidersAnd, EXISTS_OPERATOR } from './data_providers/data_provider';
const buildQueryMatch = (dataProvider: DataProvider) =>
const buildQueryMatch = (dataProvider: DataProvider | DataProvidersAnd) =>
`${dataProvider.excluded ? 'NOT ' : ''}${
dataProvider.queryMatch.operator !== EXISTS_OPERATOR
? `${dataProvider.queryMatch.field} : ${
@ -22,7 +22,7 @@ const buildQueryMatch = (dataProvider: DataProvider) =>
: `${dataProvider.queryMatch.field} ${EXISTS_OPERATOR}`
}`.trim();
const buildQueryForAndProvider = (dataAndProviders: DataProvider[]) =>
const buildQueryForAndProvider = (dataAndProviders: DataProvidersAnd[]) =>
dataAndProviders
.reduce((andQuery, andDataProvider) => {
const prepend = (q: string) => `${q !== '' ? `${q} and ` : ''}`;
@ -34,7 +34,7 @@ const buildQueryForAndProvider = (dataAndProviders: DataProvider[]) =>
export const buildGlobalQuery = (dataProviders: DataProvider[]) =>
dataProviders
.reduce((query, dataProvider) => {
.reduce((query, dataProvider: DataProvider) => {
const prepend = (q: string) => `${q !== '' ? `${q} or ` : ''}`;
return dataProvider.enabled
? `${prepend(query)}(

5
x-pack/plugins/siem/public/components/timeline/index.tsx
View file

@ -11,6 +11,8 @@ import { ActionCreator } from 'typescript-fsa';
import { WithSource } from '../../containers/source';
import { inputsModel, inputsSelectors, State, timelineSelectors } from '../../store';
import { timelineActions } from '../../store/actions';
import { KqlMode, TimelineModel } from '../../store/timeline/model';
import { ColumnHeader } from './body/column_headers/column_header';
import { DataProvider, QueryOperator } from './data_providers/data_provider';
@ -27,9 +29,6 @@ import {
} from './events';
import { Timeline } from './timeline';
import { timelineActions } from '../../store/actions';
import { KqlMode, TimelineModel } from '../../store/timeline/model';
export interface OwnProps {
id: string;
flyoutHeaderHeight: number;

6
x-pack/plugins/siem/public/components/timeline/properties/index.test.tsx
View file

@ -8,7 +8,7 @@ import { mount } from 'enzyme';
import * as React from 'react';
import { Provider as ReduxStoreProvider } from 'react-redux';
import { mockGlobalState } from '../../../mock';
import { mockGlobalState, apolloClientObservable } from '../../../mock';
import { createStore, State } from '../../../store';
import { Properties, showDescriptionThreshold, showNotesThreshold } from '.';
@ -17,11 +17,11 @@ describe('Properties', () => {
const usersViewing = ['elastic'];
const state: State = mockGlobalState;
let store = createStore(state);
let store = createStore(state, apolloClientObservable);
beforeEach(() => {
jest.clearAllMocks();
store = createStore(state);
store = createStore(state, apolloClientObservable);
});
test('renders correctly', () => {

2
x-pack/plugins/siem/public/components/timeline/properties/index.tsx
View file

@ -229,7 +229,7 @@ export class Properties extends React.PureComponent<Props, State> {
datePickerWidth > datePickerThreshold ? datePickerThreshold : datePickerWidth
}
>
<SuperDatePicker id="timeline" />
<SuperDatePicker id="timeline" timelineId={timelineId} />
</DatePicker>
</EuiFlexGroup>
</EuiFlexItem>

2
x-pack/plugins/siem/public/components/timeline/search_or_filter/index.tsx
View file

@ -63,7 +63,7 @@ class StatefulSearchOrFilterComponent extends React.PureComponent<Props> {
applyKqlFilterQuery({
id: timelineId,
filterQuery: {
query: {
kuery: {
kind: 'kuery',
expression,
},

6
x-pack/plugins/siem/public/components/url_state/index.test.tsx
View file

@ -16,7 +16,7 @@ import {
UrlStateContainerLifecycle,
UrlStateContainerLifecycleProps,
} from './';
import { mockGlobalState, TestProviders } from '../../mock';
import { apolloClientObservable, mockGlobalState, TestProviders } from '../../mock';
import {
createStore,
hostsModel,
@ -129,10 +129,10 @@ describe('UrlStateComponents', () => {
describe('UrlStateContainer', () => {
const state: State = mockGlobalState;
let store = createStore(state);
let store = createStore(state, apolloClientObservable);
beforeEach(() => {
store = createStore(state);
store = createStore(state, apolloClientObservable);
});
afterEach(() => {
jest.clearAllMocks();

2
x-pack/plugins/siem/public/components/url_state/index.tsx
View file

@ -266,7 +266,7 @@ export class UrlStateContainerLifecycle extends React.Component<UrlStateContaine
const kqlQueryStateData: KqlQuery = decodeRisonUrlState(newUrlStateString);
if (isKqlForRoute(location.pathname, kqlQueryStateData)) {
const filterQuery = {
query: kqlQueryStateData.filterQuery,
kuery: kqlQueryStateData.filterQuery,
serializedQuery: convertKueryToElasticSearchQuery(
kqlQueryStateData.filterQuery ? kqlQueryStateData.filterQuery.expression : '',
this.props.indexPattern

12
x-pack/plugins/siem/public/containers/errors/index.tsx
View file

@ -7,20 +7,22 @@
import { onError } from 'apollo-link-error';
import uuid from 'uuid';
import { store } from '../../store';
import * as i18n from './translations';
import { getStore } from '../../store';
import { appActions } from '../../store/actions';
import * as i18n from './translations';
export const errorLink = onError(({ graphQLErrors, networkError }) => {
if (graphQLErrors != null) {
const store = getStore();
if (graphQLErrors != null && store != null) {
graphQLErrors.forEach(({ message }) =>
store.dispatch(
appActions.addError({ id: uuid.v4(), title: i18n.DATA_FETCH_FAILURE, message })
)
);
}
if (networkError != null) {
if (networkError != null && store != null) {
store.dispatch(
appActions.addError({
id: uuid.v4(),

2
x-pack/plugins/siem/public/containers/hosts/filter.tsx
View file

@ -66,7 +66,7 @@ const HostsFilterComponent = pure<HostsFilterProps>(
applyFilterQueryFromKueryExpression: (expression: string) =>
applyHostsFilterQuery({
filterQuery: {
query: {
kuery: {
kind: 'kuery',
expression,
},

2
x-pack/plugins/siem/public/containers/network/filter.tsx
View file

@ -66,7 +66,7 @@ const NetworkFilterComponent = pure<NetworkFilterProps>(
applyFilterQueryFromKueryExpression: (expression: string) =>
applyNetworkFilterQuery({
filterQuery: {
query: {
kuery: {
kind: 'kuery',
expression,
},

66
x-pack/plugins/siem/public/containers/timeline/all/index.gql_query.ts Normal file
View file

@ -0,0 +1,66 @@
/*
* 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 gql from 'graphql-tag';
export const allTimelinesQuery = gql`
query GetAllTimeline(
$pageInfo: PageInfoTimeline!
$search: String
$sort: SortTimeline
$onlyUserFavorite: Boolean
) {
getAllTimeline(
pageInfo: $pageInfo
search: $search
sort: $sort
onlyUserFavorite: $onlyUserFavorite
) {
totalCount
timeline {
savedObjectId
description
favorite {
fullName
userName
favoriteDate
}
eventIdToNoteIds {
eventId
note
timelineId
noteId
created
createdBy
timelineVersion
updated
updatedBy
version
}
notes {
eventId
note
timelineId
timelineVersion
noteId
created
createdBy
updated
updatedBy
version
}
noteIds
pinnedEventIds
title
created
createdBy
updated
updatedBy
version
}
}
}
`;

114
x-pack/plugins/siem/public/containers/timeline/all/index.tsx Normal file
View file

@ -0,0 +1,114 @@
/*
* 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 { getOr } from 'lodash/fp';
import React from 'react';
import { Query } from 'react-apollo';
import memoizeOne from 'memoize-one';
import { OpenTimelineResult } from '../../../components/open_timeline/types';
import {
GetAllTimeline,
PageInfoTimeline,
SortTimeline,
TimelineResult,
} from '../../../graphql/types';
import { allTimelinesQuery } from './index.gql_query';
export interface AllTimelinesArgs {
timelines: OpenTimelineResult[];
loading: boolean;
totalCount: number;
}
export interface AllTimelinesVariables {
onlyUserFavorite: boolean;
pageInfo: PageInfoTimeline;
search: string;
sort: SortTimeline;
}
interface OwnProps extends AllTimelinesVariables {
children?: (args: AllTimelinesArgs) => React.ReactNode;
}
export class AllTimelinesQuery extends React.PureComponent<OwnProps> {
private memoizedAllTimeline: (
variables: string,
timelines: TimelineResult[]
) => OpenTimelineResult[];
constructor(props: OwnProps) {
super(props);
this.memoizedAllTimeline = memoizeOne(this.getAllTimeline);
}
public render() {
const { children, onlyUserFavorite, pageInfo, search, sort } = this.props;
const variables: GetAllTimeline.Variables = {
onlyUserFavorite,
pageInfo,
search,
sort,
};
return (
<Query<GetAllTimeline.Query, GetAllTimeline.Variables>
query={allTimelinesQuery}
fetchPolicy="network-only"
notifyOnNetworkStatusChange
variables={variables}
>
{({ data, loading }) => {
return children!({
loading,
totalCount: getOr(0, 'getAllTimeline.totalCount', data),
timelines: this.memoizedAllTimeline(
JSON.stringify(variables),
getOr([], 'getAllTimeline.timeline', data)
),
});
}}
</Query>
);
}
private getAllTimeline = (
variables: string,
timelines: TimelineResult[]
): OpenTimelineResult[] => {
return timelines.map(timeline => ({
created: timeline.created,
description: timeline.description,
eventIdToNoteIds:
timeline.eventIdToNoteIds != null
? timeline.eventIdToNoteIds.reduce((acc, note) => {
if (note.eventId != null) {
const notes = getOr([], note.eventId, acc);
return { ...acc, [note.eventId]: [...notes, note.noteId] };
}
return acc;
}, {})
: null,
favorite: timeline.favorite,
noteIds: timeline.noteIds,
notes:
timeline.notes != null
? timeline.notes.map(note => ({ ...note, savedObjectId: note.noteId }))
: null,
pinnedEventIds:
timeline.pinnedEventIds != null
? timeline.pinnedEventIds.reduce(
(acc, pinnedEventId) => ({ ...acc, [pinnedEventId]: true }),
{}
)
: null,
savedObjectId: timeline.savedObjectId,
title: timeline.title,
updated: timeline.updated,
updatedBy: timeline.updatedBy,
}));
};
}

13
x-pack/plugins/siem/public/containers/timeline/delete/persist.gql_query.ts Normal file
View file

@ -0,0 +1,13 @@
/*
* 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 gql from 'graphql-tag';
export const deleteTimelineMutation = gql`
mutation DeleteTimelineMutation($id: [ID!]!) {
deleteTimeline(id: $id)
}
`;

31
x-pack/plugins/siem/public/containers/timeline/details/index.tsx
View file

@ -5,10 +5,11 @@
*/
import { getOr } from 'lodash/fp';
import memoizeOne from 'memoize-one';
import React from 'react';
import { Query } from 'react-apollo';
import chrome from 'ui/chrome';
import { DEFAULT_INDEX_KEY } from '../../../..';
import { DetailItem, GetTimelineDetailsQuery } from '../../../graphql/types';
@ -28,24 +29,36 @@ export interface TimelineDetailsProps {
}
export class TimelineDetailsComponentQuery extends React.PureComponent<TimelineDetailsProps> {
private memoizedDetailsEvents: (variables: string, detail: DetailItem[]) => DetailItem[];
constructor(props: TimelineDetailsProps) {
super(props);
this.memoizedDetailsEvents = memoizeOne(this.getDetailsEvent);
}
public render() {
const { children, indexName, eventId, executeQuery, sourceId } = this.props;
const variables: GetTimelineDetailsQuery.Variables = {
sourceId,
indexName,
eventId,
defaultIndex: chrome.getUiSettingsClient().get(DEFAULT_INDEX_KEY),
};
return executeQuery ? (
<Query<GetTimelineDetailsQuery.Query, GetTimelineDetailsQuery.Variables>
query={timelineDetailsQuery}
fetchPolicy="network-only"
notifyOnNetworkStatusChange
variables={{
sourceId,
indexName,
eventId,
defaultIndex: chrome.getUiSettingsClient().get(DEFAULT_INDEX_KEY),
}}
variables={variables}
>
{({ data, loading, refetch }) => {
return children!({
loading,
detailsData: getOr([], 'source.TimelineDetails.data', data),
detailsData: this.memoizedDetailsEvents(
JSON.stringify(variables),
getOr([], 'source.TimelineDetails.data', data)
),
});
}}
</Query>
@ -53,4 +66,6 @@ export class TimelineDetailsComponentQuery extends React.PureComponent<TimelineD
children!({ loading: false, detailsData: null })
);
}
private getDetailsEvent = (variables: string, detail: DetailItem[]): DetailItem[] => detail;
}

21
x-pack/plugins/siem/public/containers/timeline/favorite/persist.gql_query.ts Normal file
View file

@ -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.
*/
import gql from 'graphql-tag';
export const persistTimelineFavoriteMutation = gql`
mutation PersistTimelineFavoriteMutation($timelineId: ID) {
persistFavorite(timelineId: $timelineId) {
savedObjectId
version
favorite {
fullName
userName
favoriteDate
}
}
}
`;

28
x-pack/plugins/siem/public/containers/timeline/notes/persist.gql_query.ts Normal file
View file

@ -0,0 +1,28 @@
/*
* 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 gql from 'graphql-tag';
export const persistTimelineNoteMutation = gql`
mutation PersistTimelineNoteMutation($noteId: ID, $version: String, $note: NoteInput!) {
persistNote(noteId: $noteId, version: $version, note: $note) {
code
message
note {
eventId
note
timelineId
timelineVersion
noteId
created
createdBy
updated
updatedBy
version
}
}
}
`;

121
x-pack/plugins/siem/public/containers/timeline/one/index.gql_query.ts Normal file
View file

@ -0,0 +1,121 @@
/*
* 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 gql from 'graphql-tag';
export const oneTimelineQuery = gql`
query GetOneTimeline($id: ID!) {
getOneTimeline(id: $id) {
savedObjectId
columns {
aggregatable
category
columnHeaderType
description
example
indexes
id
name
searchable
type
}
dataProviders {
id
name
enabled
excluded
kqlQuery
queryMatch {
field
displayField
value
displayValue
operator
}
and {
id
name
enabled
excluded
kqlQuery
queryMatch {
field
displayField
value
displayValue
operator
}
}
}
dateRange {
start
end
}
description
eventIdToNoteIds {
eventId
note
timelineId
noteId
created
createdBy
timelineVersion
updated
updatedBy
version
}
favorite {
fullName
userName
favoriteDate
}
kqlMode
kqlQuery {
filterQuery {
kuery {
kind
expression
}
serializedQuery
}
}
notes {
eventId
note
timelineId
timelineVersion
noteId
created
createdBy
updated
updatedBy
version
}
noteIds
pinnedEventIds
pinnedEventsSaveObject {
pinnedEventId
eventId
timelineId
created
createdBy
updated
updatedBy
version
}
title
sort {
columnId
sortDirection
}
created
createdBy
updated
updatedBy
version
}
}
`;

89
x-pack/plugins/siem/public/containers/timeline/persist.gql_query.ts Normal file
View file

@ -0,0 +1,89 @@
/*
* 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 gql from 'graphql-tag';
export const persistTimelineMutation = gql`
mutation PersistTimelineMutation($timelineId: ID, $version: String, $timeline: TimelineInput!) {
persistTimeline(id: $timelineId, version: $version, timeline: $timeline) {
code
message
timeline {
savedObjectId
version
columns {
aggregatable
category
columnHeaderType
description
example
indexes
id
name
searchable
type
}
dataProviders {
id
name
enabled
excluded
kqlQuery
queryMatch {
field
displayField
value
displayValue
operator
}
and {
id
name
enabled
excluded
kqlQuery
queryMatch {
field
displayField
value
displayValue
operator
}
}
}
description
favorite {
fullName
userName
favoriteDate
}
kqlMode
kqlQuery {
filterQuery {
kuery {
kind
expression
}
serializedQuery
}
}
title
dateRange {
start
end
}
sort {
columnId
sortDirection
}
created
createdBy
updated
updatedBy
}
}
}
`;

27
x-pack/plugins/siem/public/containers/timeline/pinned_event/persist.gql_query.ts Normal file
View file

@ -0,0 +1,27 @@
/*
* 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 gql from 'graphql-tag';
export const persistTimelinePinnedEventMutation = gql`
mutation PersistTimelinePinnedEventMutation($pinnedEventId: ID, $eventId: ID!, $timelineId: ID) {
persistPinnedEventOnTimeline(
pinnedEventId: $pinnedEventId
eventId: $eventId
timelineId: $timelineId
) {
pinnedEventId
eventId
timelineId
timelineVersion
created
createdBy
updated
updatedBy
version
}
}
`;

2172
x-pack/plugins/siem/public/graphql/introspection.json
View file

File diff suppressed because it is too large Load diff

1155
x-pack/plugins/siem/public/graphql/types.ts
View file

File diff suppressed because it is too large Load diff

3
x-pack/plugins/siem/public/lib/note/index.ts
View file

@ -16,4 +16,7 @@ export interface Note {
note: string;
/** The user who created the note */
user: string;
/** SaveObjectID for note */
saveObjectId: string | null | undefined;
version: string | null | undefined;
}

14
x-pack/plugins/siem/public/mock/global_state.ts
View file

@ -113,9 +113,14 @@ export const mockGlobalState: State = {
},
dragAndDrop: { dataProviders: {} },
timeline: {
autoSavedWarningMsg: {
timelineId: null,
newTimelineModel: null,
},
timelineById: {
test: {
id: 'test',
savedObjectId: null,
columns: defaultHeaders,
itemsPerPage: 5,
dataProviders: [],
@ -125,16 +130,23 @@ export const mockGlobalState: State = {
historyIds: [],
isFavorite: false,
isLive: false,
isLoading: false,
kqlMode: 'filter',
kqlQuery: { filterQuery: null, filterQueryDraft: null },
title: '',
noteIds: [],
range: '1 Day',
dateRange: {
start: 0,
end: 0,
},
show: false,
pinnedEventIds: {},
pinnedEventsSaveObject: {},
itemsPerPageOptions: [5, 10, 20],
sort: { columnId: '@timestamp', sortDirection: Direction.desc },
width: DEFAULT_TIMELINE_WIDTH,
isSaving: false,
version: null,
},
},
},

17
x-pack/plugins/siem/public/mock/test_providers.tsx
View file

@ -15,6 +15,7 @@ import { DragDropContext, DropResult, ResponderProvided } from 'react-beautiful-
import { Provider as ReduxStoreProvider } from 'react-redux';
import { pure } from 'recompose';
import { Store } from 'redux';
import { BehaviorSubject } from 'rxjs';
import { ThemeProvider } from 'styled-components';
import { KibanaConfigContext } from '../components/formatted_date';
@ -32,21 +33,23 @@ interface Props {
onDragEnd?: (result: DropResult, provided: ResponderProvided) => void;
}
const client = new ApolloClient({
export const apolloClient = new ApolloClient({
cache: new Cache(),
link: new ApolloLink((o, f) => (f ? f(o) : null)),
});
export const apolloClientObservable = new BehaviorSubject(apolloClient);
/** A utility for wrapping children in the providers required to run most tests */
export const TestProviders = pure<Props>(
({
children,
store = createStore(state),
store = createStore(state, apolloClientObservable),
mockFramework = mockFrameworks.default_UTC,
onDragEnd = jest.fn(),
}) => (
<I18nProvider>
<ApolloProvider client={client}>
<ApolloProvider client={apolloClient}>
<ReduxStoreProvider store={store}>
<ThemeProvider theme={() => ({ eui: euiDarkVars, darkMode: true })}>
<KibanaConfigContext.Provider value={mockFramework}>
@ -58,3 +61,11 @@ export const TestProviders = pure<Props>(
</I18nProvider>
)
);
export const TestProviderWithoutDragAndDrop = pure<Props>(
({ children, store = createStore(state, apolloClientObservable) }) => (
<I18nProvider>
<ReduxStoreProvider store={store}>{children}</ReduxStoreProvider>
</I18nProvider>
)
);

1689
x-pack/plugins/siem/public/mock/timeline_results.ts
View file

File diff suppressed because it is too large Load diff

Some files were not shown because too many files have changed in this diff Show more