From fea3bfcebc2af2b8ff22660e015a044e32280cd0 Mon Sep 17 00:00:00 2001 From: Robert Austin Date: Tue, 28 Jul 2020 20:59:45 -0400 Subject: [PATCH 1/4] [Resolver] simulator and click through tests (#73310) Write a few jest tests for resolver's react code. --- .../resolver/data_access_layer/factory.ts | 70 ++++ .../mocks/one_ancestor_two_children.ts | 96 +++++ .../public/resolver/models/process_event.ts | 16 +- .../public/resolver/store/index.ts | 8 +- .../public/resolver/store/middleware/index.ts | 27 +- .../store/middleware/resolver_tree_fetcher.ts | 31 +- .../resolver/store/mocks/endpoint_event.ts | 2 +- .../connect_enzyme_wrapper_and_store.ts | 20 + .../resolver/test_utilities/extend_jest.ts | 88 +++++ .../resolver/test_utilities/react_wrapper.ts | 17 + .../test_utilities/simulator/index.tsx | 290 ++++++++++++++ .../simulator/mock_resolver.tsx | 109 ++++++ .../test_utilities/spy_middleware_factory.ts | 58 +++ .../public/resolver/types.ts | 136 ++++++- .../resolver/view/clickthrough.test.tsx | 99 +++++ .../public/resolver/view/index.tsx | 45 +-- .../panels/panel_content_process_detail.tsx | 368 +++++++++--------- .../resolver/view/process_event_dot.tsx | 13 +- .../view/resolver_without_providers.tsx | 139 +++++++ ...or.ts => side_effect_simulator_factory.ts} | 5 +- .../public/resolver/view/use_camera.test.tsx | 9 +- .../view/use_resolver_query_params.ts | 8 +- 22 files changed, 1347 insertions(+), 307 deletions(-) create mode 100644 x-pack/plugins/security_solution/public/resolver/data_access_layer/factory.ts create mode 100644 x-pack/plugins/security_solution/public/resolver/data_access_layer/mocks/one_ancestor_two_children.ts create mode 100644 x-pack/plugins/security_solution/public/resolver/test_utilities/connect_enzyme_wrapper_and_store.ts create mode 100644 x-pack/plugins/security_solution/public/resolver/test_utilities/extend_jest.ts create mode 100644 x-pack/plugins/security_solution/public/resolver/test_utilities/react_wrapper.ts create mode 100644 x-pack/plugins/security_solution/public/resolver/test_utilities/simulator/index.tsx create mode 100644 x-pack/plugins/security_solution/public/resolver/test_utilities/simulator/mock_resolver.tsx create mode 100644 x-pack/plugins/security_solution/public/resolver/test_utilities/spy_middleware_factory.ts create mode 100644 x-pack/plugins/security_solution/public/resolver/view/clickthrough.test.tsx create mode 100644 x-pack/plugins/security_solution/public/resolver/view/resolver_without_providers.tsx rename x-pack/plugins/security_solution/public/resolver/view/{side_effect_simulator.ts => side_effect_simulator_factory.ts} (95%) diff --git a/x-pack/plugins/security_solution/public/resolver/data_access_layer/factory.ts b/x-pack/plugins/security_solution/public/resolver/data_access_layer/factory.ts new file mode 100644 index 0000000000000..016ebfa0faee4 --- /dev/null +++ b/x-pack/plugins/security_solution/public/resolver/data_access_layer/factory.ts @@ -0,0 +1,70 @@ +/* + * 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 { KibanaReactContextValue } from '../../../../../../src/plugins/kibana_react/public'; +import { StartServices } from '../../types'; +import { DataAccessLayer } from '../types'; +import { + ResolverRelatedEvents, + ResolverTree, + ResolverEntityIndex, +} from '../../../common/endpoint/types'; +import { DEFAULT_INDEX_KEY as defaultIndexKey } from '../../../common/constants'; + +/** + * The data access layer for resolver. All communication with the Kibana server is done through this object. This object is provided to Resolver. In tests, a mock data access layer can be used instead. + */ +export function dataAccessLayerFactory( + context: KibanaReactContextValue +): DataAccessLayer { + const dataAccessLayer: DataAccessLayer = { + /** + * Used to get non-process related events for a node. + */ + async relatedEvents(entityID: string): Promise { + return context.services.http.get(`/api/endpoint/resolver/${entityID}/events`, { + query: { events: 100 }, + }); + }, + /** + * Used to get descendant and ancestor process events for a node. + */ + async resolverTree(entityID: string, signal: AbortSignal): Promise { + return context.services.http.get(`/api/endpoint/resolver/${entityID}`, { + signal, + }); + }, + + /** + * Used to get the default index pattern from the SIEM application. + */ + indexPatterns(): string[] { + return context.services.uiSettings.get(defaultIndexKey); + }, + + /** + * Used to get the entity_id for an _id. + */ + async entities({ + _id, + indices, + signal, + }: { + _id: string; + indices: string[]; + signal: AbortSignal; + }): Promise { + return context.services.http.get('/api/endpoint/resolver/entity', { + signal, + query: { + _id, + indices, + }, + }); + }, + }; + return dataAccessLayer; +} diff --git a/x-pack/plugins/security_solution/public/resolver/data_access_layer/mocks/one_ancestor_two_children.ts b/x-pack/plugins/security_solution/public/resolver/data_access_layer/mocks/one_ancestor_two_children.ts new file mode 100644 index 0000000000000..be0bc1b812a0b --- /dev/null +++ b/x-pack/plugins/security_solution/public/resolver/data_access_layer/mocks/one_ancestor_two_children.ts @@ -0,0 +1,96 @@ +/* + * 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 { + ResolverRelatedEvents, + ResolverTree, + ResolverEntityIndex, +} from '../../../../common/endpoint/types'; +import { mockEndpointEvent } from '../../store/mocks/endpoint_event'; +import { mockTreeWithNoAncestorsAnd2Children } from '../../store/mocks/resolver_tree'; +import { DataAccessLayer } from '../../types'; + +interface Metadata { + /** + * The `_id` of the document being analyzed. + */ + databaseDocumentID: string; + /** + * A record of entityIDs to be used in tests assertions. + */ + entityIDs: { + /** + * The entityID of the node related to the document being analyzed. + */ + origin: 'origin'; + /** + * The entityID of the first child of the origin. + */ + firstChild: 'firstChild'; + /** + * The entityID of the second child of the origin. + */ + secondChild: 'secondChild'; + }; +} + +/** + * A simple mock dataAccessLayer possible that returns a tree with 0 ancestors and 2 direct children. 1 related event is returned. The parameter to `entities` is ignored. + */ +export function oneAncestorTwoChildren(): { dataAccessLayer: DataAccessLayer; metadata: Metadata } { + const metadata: Metadata = { + databaseDocumentID: '_id', + entityIDs: { origin: 'origin', firstChild: 'firstChild', secondChild: 'secondChild' }, + }; + return { + metadata, + dataAccessLayer: { + /** + * Fetch related events for an entity ID + */ + relatedEvents(entityID: string): Promise { + return Promise.resolve({ + entityID, + events: [ + mockEndpointEvent({ + entityID, + name: 'event', + timestamp: 0, + }), + ], + nextEvent: null, + }); + }, + + /** + * Fetch a ResolverTree for a entityID + */ + resolverTree(): Promise { + return Promise.resolve( + mockTreeWithNoAncestorsAnd2Children({ + originID: metadata.entityIDs.origin, + firstChildID: metadata.entityIDs.firstChild, + secondChildID: metadata.entityIDs.secondChild, + }) + ); + }, + + /** + * Get an array of index patterns that contain events. + */ + indexPatterns(): string[] { + return ['index pattern']; + }, + + /** + * Get entities matching a document. + */ + entities(): Promise { + return Promise.resolve([{ entity_id: metadata.entityIDs.origin }]); + }, + }, + }; +} diff --git a/x-pack/plugins/security_solution/public/resolver/models/process_event.ts b/x-pack/plugins/security_solution/public/resolver/models/process_event.ts index 4f8df87b3ac0b..1a5c67f6a6f2f 100644 --- a/x-pack/plugins/security_solution/public/resolver/models/process_event.ts +++ b/x-pack/plugins/security_solution/public/resolver/models/process_event.ts @@ -29,7 +29,7 @@ export function isTerminatedProcess(passedEvent: ResolverEvent) { } /** - * ms since unix epoc, based on timestamp. + * ms since Unix epoc, based on timestamp. * may return NaN if the timestamp wasn't present or was invalid. */ export function datetime(passedEvent: ResolverEvent): number | null { @@ -85,7 +85,7 @@ export function eventType(passedEvent: ResolverEvent): ResolverProcessType { } /** - * Returns the process event's pid + * Returns the process event's PID */ export function uniquePidForProcess(passedEvent: ResolverEvent): string { if (event.isLegacyEvent(passedEvent)) { @@ -96,7 +96,7 @@ export function uniquePidForProcess(passedEvent: ResolverEvent): string { } /** - * Returns the pid for the process on the host + * Returns the PID for the process on the host */ export function processPid(passedEvent: ResolverEvent): number | undefined { if (event.isLegacyEvent(passedEvent)) { @@ -107,7 +107,7 @@ export function processPid(passedEvent: ResolverEvent): number | undefined { } /** - * Returns the process event's parent pid + * Returns the process event's parent PID */ export function uniqueParentPidForProcess(passedEvent: ResolverEvent): string | undefined { if (event.isLegacyEvent(passedEvent)) { @@ -118,7 +118,7 @@ export function uniqueParentPidForProcess(passedEvent: ResolverEvent): string | } /** - * Returns the process event's parent pid + * Returns the process event's parent PID */ export function processParentPid(passedEvent: ResolverEvent): number | undefined { if (event.isLegacyEvent(passedEvent)) { @@ -144,12 +144,12 @@ export function processPath(passedEvent: ResolverEvent): string | undefined { */ export function userInfoForProcess( passedEvent: ResolverEvent -): { user?: string; domain?: string } | undefined { +): { name?: string; domain?: string } | undefined { return passedEvent.user; } /** - * Returns the MD5 hash for the `passedEvent` param, or undefined if it can't be located + * Returns the MD5 hash for the `passedEvent` parameter, or undefined if it can't be located * @param {ResolverEvent} passedEvent The `ResolverEvent` to get the MD5 value for * @returns {string | undefined} The MD5 string for the event */ @@ -164,7 +164,7 @@ export function md5HashForProcess(passedEvent: ResolverEvent): string | undefine /** * Returns the command line path and arguments used to run the `passedEvent` if any * - * @param {ResolverEvent} passedEvent The `ResolverEvent` to get the arguemnts value for + * @param {ResolverEvent} passedEvent The `ResolverEvent` to get the arguments value for * @returns {string | undefined} The arguments (including the path) used to run the process */ export function argsForProcess(passedEvent: ResolverEvent): string | undefined { diff --git a/x-pack/plugins/security_solution/public/resolver/store/index.ts b/x-pack/plugins/security_solution/public/resolver/store/index.ts index d9e750241ced1..950a61db33f17 100644 --- a/x-pack/plugins/security_solution/public/resolver/store/index.ts +++ b/x-pack/plugins/security_solution/public/resolver/store/index.ts @@ -6,22 +6,20 @@ import { createStore, applyMiddleware, Store } from 'redux'; import { composeWithDevTools } from 'redux-devtools-extension/developmentOnly'; -import { KibanaReactContextValue } from '../../../../../../src/plugins/kibana_react/public'; -import { ResolverState } from '../types'; -import { StartServices } from '../../types'; +import { ResolverState, DataAccessLayer } from '../types'; import { resolverReducer } from './reducer'; import { resolverMiddlewareFactory } from './middleware'; import { ResolverAction } from './actions'; export const storeFactory = ( - context?: KibanaReactContextValue + dataAccessLayer: DataAccessLayer ): Store => { const actionsDenylist: Array = ['userMovedPointer']; const composeEnhancers = composeWithDevTools({ name: 'Resolver', actionsBlacklist: actionsDenylist, }); - const middlewareEnhancer = applyMiddleware(resolverMiddlewareFactory(context)); + const middlewareEnhancer = applyMiddleware(resolverMiddlewareFactory(dataAccessLayer)); return createStore(resolverReducer, composeEnhancers(middlewareEnhancer)); }; diff --git a/x-pack/plugins/security_solution/public/resolver/store/middleware/index.ts b/x-pack/plugins/security_solution/public/resolver/store/middleware/index.ts index 398e855a1f5d4..ef6b1f5eb3c6f 100644 --- a/x-pack/plugins/security_solution/public/resolver/store/middleware/index.ts +++ b/x-pack/plugins/security_solution/public/resolver/store/middleware/index.ts @@ -5,34 +5,26 @@ */ import { Dispatch, MiddlewareAPI } from 'redux'; -import { KibanaReactContextValue } from '../../../../../../../src/plugins/kibana_react/public'; -import { StartServices } from '../../../types'; -import { ResolverState } from '../../types'; +import { ResolverState, DataAccessLayer } from '../../types'; import { ResolverRelatedEvents } from '../../../../common/endpoint/types'; import { ResolverTreeFetcher } from './resolver_tree_fetcher'; import { ResolverAction } from '../actions'; type MiddlewareFactory = ( - context?: KibanaReactContextValue + dataAccessLayer: DataAccessLayer ) => ( api: MiddlewareAPI, S> ) => (next: Dispatch) => (action: ResolverAction) => unknown; /** - * The redux middleware that the app uses to trigger side effects. + * The `redux` middleware that the application uses to trigger side effects. * All data fetching should be done here. - * For actions that the app triggers directly, use `app` as a prefix for the type. + * For actions that the application triggers directly, use `app` as a prefix for the type. * For actions that are triggered as a result of server interaction, use `server` as a prefix for the type. */ -export const resolverMiddlewareFactory: MiddlewareFactory = (context) => { +export const resolverMiddlewareFactory: MiddlewareFactory = (dataAccessLayer: DataAccessLayer) => { return (api) => (next) => { - // This cannot work w/o `context`. - if (!context) { - return async (action: ResolverAction) => { - next(action); - }; - } - const resolverTreeFetcher = ResolverTreeFetcher(context, api); + const resolverTreeFetcher = ResolverTreeFetcher(dataAccessLayer, api); return async (action: ResolverAction) => { next(action); @@ -45,12 +37,7 @@ export const resolverMiddlewareFactory: MiddlewareFactory = (context) => { const entityIdToFetchFor = action.payload; let result: ResolverRelatedEvents | undefined; try { - result = await context.services.http.get( - `/api/endpoint/resolver/${entityIdToFetchFor}/events`, - { - query: { events: 100 }, - } - ); + result = await dataAccessLayer.relatedEvents(entityIdToFetchFor); } catch { api.dispatch({ type: 'serverFailedToReturnRelatedEventData', diff --git a/x-pack/plugins/security_solution/public/resolver/store/middleware/resolver_tree_fetcher.ts b/x-pack/plugins/security_solution/public/resolver/store/middleware/resolver_tree_fetcher.ts index 7d16dc251e6fc..2c98059d420e8 100644 --- a/x-pack/plugins/security_solution/public/resolver/store/middleware/resolver_tree_fetcher.ts +++ b/x-pack/plugins/security_solution/public/resolver/store/middleware/resolver_tree_fetcher.ts @@ -9,11 +9,8 @@ import { Dispatch, MiddlewareAPI } from 'redux'; import { ResolverTree, ResolverEntityIndex } from '../../../../common/endpoint/types'; -import { KibanaReactContextValue } from '../../../../../../../src/plugins/kibana_react/public'; -import { ResolverState } from '../../types'; +import { ResolverState, DataAccessLayer } from '../../types'; import * as selectors from '../selectors'; -import { StartServices } from '../../../types'; -import { DEFAULT_INDEX_KEY as defaultIndexKey } from '../../../../common/constants'; import { ResolverAction } from '../actions'; /** * A function that handles syncing ResolverTree data w/ the current entity ID. @@ -23,7 +20,7 @@ import { ResolverAction } from '../actions'; * This is a factory because it is stateful and keeps that state in closure. */ export function ResolverTreeFetcher( - context: KibanaReactContextValue, + dataAccessLayer: DataAccessLayer, api: MiddlewareAPI, ResolverState> ): () => void { let lastRequestAbortController: AbortController | undefined; @@ -48,17 +45,12 @@ export function ResolverTreeFetcher( payload: databaseDocumentIDToFetch, }); try { - const indices: string[] = context.services.uiSettings.get(defaultIndexKey); - const matchingEntities: ResolverEntityIndex = await context.services.http.get( - '/api/endpoint/resolver/entity', - { - signal: lastRequestAbortController.signal, - query: { - _id: databaseDocumentIDToFetch, - indices, - }, - } - ); + const indices: string[] = dataAccessLayer.indexPatterns(); + const matchingEntities: ResolverEntityIndex = await dataAccessLayer.entities({ + _id: databaseDocumentIDToFetch, + indices, + signal: lastRequestAbortController.signal, + }); if (matchingEntities.length < 1) { // If no entity_id could be found for the _id, bail out with a failure. api.dispatch({ @@ -68,9 +60,10 @@ export function ResolverTreeFetcher( return; } const entityIDToFetch = matchingEntities[0].entity_id; - result = await context.services.http.get(`/api/endpoint/resolver/${entityIDToFetch}`, { - signal: lastRequestAbortController.signal, - }); + result = await dataAccessLayer.resolverTree( + entityIDToFetch, + lastRequestAbortController.signal + ); } catch (error) { // https://developer.mozilla.org/en-US/docs/Web/API/DOMException#exception-AbortError if (error instanceof DOMException && error.name === 'AbortError') { diff --git a/x-pack/plugins/security_solution/public/resolver/store/mocks/endpoint_event.ts b/x-pack/plugins/security_solution/public/resolver/store/mocks/endpoint_event.ts index 8f2e0ad3a6d85..709f2faf13b00 100644 --- a/x-pack/plugins/security_solution/public/resolver/store/mocks/endpoint_event.ts +++ b/x-pack/plugins/security_solution/public/resolver/store/mocks/endpoint_event.ts @@ -18,7 +18,7 @@ export function mockEndpointEvent({ }: { entityID: string; name: string; - parentEntityId: string | undefined; + parentEntityId?: string; timestamp: number; lifecycleType?: string; }): EndpointEvent { diff --git a/x-pack/plugins/security_solution/public/resolver/test_utilities/connect_enzyme_wrapper_and_store.ts b/x-pack/plugins/security_solution/public/resolver/test_utilities/connect_enzyme_wrapper_and_store.ts new file mode 100644 index 0000000000000..3a4a1f7d634d1 --- /dev/null +++ b/x-pack/plugins/security_solution/public/resolver/test_utilities/connect_enzyme_wrapper_and_store.ts @@ -0,0 +1,20 @@ +/* + * 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 { Store } from 'redux'; +import { ReactWrapper } from 'enzyme'; + +/** + * We use the full-DOM emulation mode of `enzyme` via `mount`. Even though we use `react-redux`, `enzyme` + * does not update the DOM after state transitions. This subscribes to the `redux` store and after any state + * transition it asks `enzyme` to update the DOM to match the React state. + */ +export function connectEnzymeWrapperAndStore(store: Store, wrapper: ReactWrapper): void { + store.subscribe(() => { + // See https://enzymejs.github.io/enzyme/docs/api/ReactWrapper/update.html + return wrapper.update(); + }); +} diff --git a/x-pack/plugins/security_solution/public/resolver/test_utilities/extend_jest.ts b/x-pack/plugins/security_solution/public/resolver/test_utilities/extend_jest.ts new file mode 100644 index 0000000000000..9fc7af38beb42 --- /dev/null +++ b/x-pack/plugins/security_solution/public/resolver/test_utilities/extend_jest.ts @@ -0,0 +1,88 @@ +/* + * 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. + */ + +/** + * Typescript won't allow global namespace stuff unless you're in a module. + * This wouldn't otherwise be a module. The code runs as soon as it's imported. + * This is done this way because the `declare` will be active on import, so in + * order to be correct, the code that the `declare` declares needs to be available on import as well. + */ +export {}; + +declare global { + /* eslint-disable @typescript-eslint/no-namespace */ + namespace jest { + interface Matchers { + toYieldEqualTo(expectedYield: T extends AsyncIterable ? E : never): Promise; + } + } +} + +expect.extend({ + /** + * A custom matcher that takes an async generator and compares each value it yields to an expected value. + * If any yielded value deep-equals the expected value, the matcher will pass. + * If the generator ends with none of the yielded values matching, it will fail. + */ + async toYieldEqualTo( + this: jest.MatcherContext, + receivedIterable: AsyncIterable, + expected: T + ): Promise<{ pass: boolean; message: () => string }> { + // Used in printing out the pass or fail message + const matcherName = 'toSometimesYieldEqualTo'; + const options: jest.MatcherHintOptions = { + comment: 'deep equality with any yielded value', + isNot: this.isNot, + promise: this.promise, + }; + // The last value received: Used in printing the message + const received: T[] = []; + + // Set to true if the test passes. + let pass: boolean = false; + + // Async iterate over the iterable + for await (const next of receivedIterable) { + // keep track of all received values. Used in pass and fail messages + received.push(next); + // Use deep equals to compare the value to the expected value + if (this.equals(next, expected)) { + // If the value is equal, break + pass = true; + break; + } + } + + // Use `pass` as set in the above loop (or initialized to `false`) + // See https://jestjs.io/docs/en/expect#custom-matchers-api and https://jestjs.io/docs/en/expect#thisutils + const message = pass + ? () => + `${this.utils.matcherHint(matcherName, undefined, undefined, options)}\n\n` + + `Expected: not ${this.utils.printExpected(expected)}\n${ + this.utils.stringify(expected) !== this.utils.stringify(received[received.length - 1]!) + ? `Received: ${this.utils.printReceived(received[received.length - 1])}` + : '' + }` + : () => + `${this.utils.matcherHint(matcherName, undefined, undefined, options)}\n\nCompared ${ + received.length + } yields.\n\n${received + .map( + (next, index) => + `yield ${index + 1}:\n\n${this.utils.printDiffOrStringify( + expected, + next, + 'Expected', + 'Received', + this.expand + )}` + ) + .join(`\n\n`)}`; + + return { message, pass }; + }, +}); diff --git a/x-pack/plugins/security_solution/public/resolver/test_utilities/react_wrapper.ts b/x-pack/plugins/security_solution/public/resolver/test_utilities/react_wrapper.ts new file mode 100644 index 0000000000000..40267d83c30f8 --- /dev/null +++ b/x-pack/plugins/security_solution/public/resolver/test_utilities/react_wrapper.ts @@ -0,0 +1,17 @@ +/* + * 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 { ReactWrapper } from 'enzyme'; + +/** + * Return a collection of attribute 'entries'. + * The 'entries' are attributeName-attributeValue tuples. + */ +export function attributeEntries(wrapper: ReactWrapper): Array<[string, string]> { + return Array.prototype.slice + .call(wrapper.getDOMNode().attributes) + .map(({ name, value }) => [name, value]); +} diff --git a/x-pack/plugins/security_solution/public/resolver/test_utilities/simulator/index.tsx b/x-pack/plugins/security_solution/public/resolver/test_utilities/simulator/index.tsx new file mode 100644 index 0000000000000..7a61427c56a3b --- /dev/null +++ b/x-pack/plugins/security_solution/public/resolver/test_utilities/simulator/index.tsx @@ -0,0 +1,290 @@ +/* + * 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 React from 'react'; +import { Store, createStore, applyMiddleware } from 'redux'; +import { mount, ReactWrapper } from 'enzyme'; +import { createMemoryHistory, History as HistoryPackageHistoryInterface } from 'history'; +import { CoreStart } from '../../../../../../../src/core/public'; +import { coreMock } from '../../../../../../../src/core/public/mocks'; +import { connectEnzymeWrapperAndStore } from '../connect_enzyme_wrapper_and_store'; +import { spyMiddlewareFactory } from '../spy_middleware_factory'; +import { resolverMiddlewareFactory } from '../../store/middleware'; +import { resolverReducer } from '../../store/reducer'; +import { MockResolver } from './mock_resolver'; +import { ResolverState, DataAccessLayer, SpyMiddleware } from '../../types'; +import { ResolverAction } from '../../store/actions'; + +/** + * Test a Resolver instance using jest, enzyme, and a mock data layer. + */ +export class Simulator { + /** + * A string that uniquely identifies this Resolver instance among others mounted in the DOM. + */ + private readonly resolverComponentInstanceID: string; + /** + * The redux store, creating in the constructor using the `dataAccessLayer`. + * This code subscribes to state transitions. + */ + private readonly store: Store; + /** + * A fake 'History' API used with `react-router` to simulate a browser history. + */ + private readonly history: HistoryPackageHistoryInterface; + /** + * The 'wrapper' returned by `enzyme` that contains the rendered Resolver react code. + */ + private readonly wrapper: ReactWrapper; + /** + * A `redux` middleware that exposes all actions dispatched (along with the state at that point.) + * This is used by `debugActions`. + */ + private readonly spyMiddleware: SpyMiddleware; + constructor({ + dataAccessLayer, + resolverComponentInstanceID, + databaseDocumentID, + }: { + /** + * A (mock) data access layer that will be used to create the Resolver store. + */ + dataAccessLayer: DataAccessLayer; + /** + * A string that uniquely identifies this Resolver instance among others mounted in the DOM. + */ + resolverComponentInstanceID: string; + /** + * a databaseDocumentID to pass to Resolver. Resolver will use this in requests to the mock data layer. + */ + databaseDocumentID?: string; + }) { + this.resolverComponentInstanceID = resolverComponentInstanceID; + // create the spy middleware (for debugging tests) + this.spyMiddleware = spyMiddlewareFactory(); + + /** + * Create the real resolver middleware with a fake data access layer. + * By providing different data access layers, you can simulate different data and server environments. + */ + const middlewareEnhancer = applyMiddleware( + resolverMiddlewareFactory(dataAccessLayer), + // install the spyMiddleware + this.spyMiddleware.middleware + ); + + // Create a redux store w/ the top level Resolver reducer and the enhancer that includes the Resolver middleware and the `spyMiddleware` + this.store = createStore(resolverReducer, middlewareEnhancer); + + // Create a fake 'history' instance that Resolver will use to read and write query string values + this.history = createMemoryHistory(); + + // Used for `KibanaContextProvider` + const coreStart: CoreStart = coreMock.createStart(); + + // Render Resolver via the `MockResolver` component, using `enzyme`. + this.wrapper = mount( + + ); + + // Update the enzyme wrapper after each state transition + connectEnzymeWrapperAndStore(this.store, this.wrapper); + } + + /** + * Call this to console.log actions (and state). Use this to debug your tests. + * State and actions aren't exposed otherwise because the tests using this simulator should + * assert stuff about the DOM instead of internal state. Use selector/middleware/reducer + * unit tests to test that stuff. + */ + public debugActions(): /** + * Optionally call this to stop debugging actions. + */ () => void { + return this.spyMiddleware.debugActions(); + } + + /** + * Return a promise that resolves after the `store`'s next state transition. + * Used by `mapStateTransitions` + */ + private stateTransitioned(): Promise { + // keep track of the resolve function of the promise that has been returned. + let resolveState: (() => void) | null = null; + + const promise: Promise = new Promise((resolve) => { + // Immediately expose the resolve function in the outer scope. It will be resolved when the next state transition occurs. + resolveState = resolve; + }); + + // Subscribe to the store + const unsubscribe = this.store.subscribe(() => { + // Once a state transition occurs, unsubscribe. + unsubscribe(); + // Resolve the promise. The null assertion is safe here as Promise initializers run immediately (according to spec and node/browser implementations.) + // NB: the state is not resolved here. Code using the simulator should not rely on state or selectors of state. + resolveState!(); + }); + + // Return the promise that will be resolved on the next state transition, allowing code to `await` for the next state transition. + return promise; + } + + /** + * This will yield the return value of `mapper` after each state transition. If no state transition occurs for 10 event loops in a row, this will give up. + */ + public async *mapStateTransitions(mapper: () => R): AsyncIterable { + // Yield the value before any state transitions have occurred. + yield mapper(); + + /** Increment this each time an event loop completes without a state transition. + * If this value hits `10`, end the loop. + * + * Code will test assertions after each state transition. If the assertion hasn't passed and no further state transitions occur, + * then the jest timeout will happen. The timeout doesn't give a useful message about the assertion. + * By short-circuiting this function, code that uses it can short circuit the test timeout and print a useful error message. + * + * NB: the logic to short-circuit the loop is here because knowledge of state is a concern of the simulator, not tests. + */ + let timeoutCount = 0; + while (true) { + /** + * `await` a race between the next state transition and a timeout that happens after `0`ms. + * If the timeout wins, no `dispatch` call caused a state transition in the last loop. + * If this keeps happening, assume that Resolver isn't going to do anything else. + * + * If Resolver adds intentional delay logic (e.g. waiting before making a request), this code might have to change. + * In that case, Resolver should use the side effect context to schedule future work. This code could then subscribe to some event published by the side effect context. That way, this code will be aware of Resolver's intention to do work. + */ + const timedOut: boolean = await Promise.race([ + (async (): Promise => { + await this.stateTransitioned(); + // If a state transition occurs, return false for `timedOut` + return false; + })(), + new Promise((resolve) => { + setTimeout(() => { + // If a timeout occurs, resolve `timedOut` as true + return resolve(true); + }, 0); + }), + ]); + + if (timedOut) { + // If a timout occurred, note it. + timeoutCount++; + if (timeoutCount === 10) { + // if 10 timeouts happen in a row, end the loop early + return; + } + } else { + // If a state transition occurs, reset the timeout count and yield the value + timeoutCount = 0; + yield mapper(); + } + } + } + + /** + * Find a process node element. Takes options supported by `resolverNodeSelector`. + * returns a `ReactWrapper` even if nothing is found, as that is how `enzyme` does things. + */ + public processNodeElements(options: ProcessNodeElementSelectorOptions = {}): ReactWrapper { + return this.findInDOM(processNodeElementSelector(options)); + } + + /** + * true if a process node element is found for the entityID and if it has an [aria-selected] attribute. + */ + public processNodeElementLooksSelected(entityID: string): boolean { + return this.processNodeElements({ entityID, selected: true }).length === 1; + } + + /** + * true if a process node element is found for the entityID and if it *does not have* an [aria-selected] attribute. + */ + public processNodeElementLooksUnselected(entityID: string): boolean { + // find the process node, then exclude it if its selected. + return ( + this.processNodeElements({ entityID }).not( + processNodeElementSelector({ entityID, selected: true }) + ).length === 1 + ); + } + + /** + * Return the selected node query string values. + */ + public queryStringValues(): { selectedNode: string[] } { + const urlSearchParams = new URLSearchParams(this.history.location.search); + return { + selectedNode: urlSearchParams.getAll(`resolver-${this.resolverComponentInstanceID}-id`), + }; + } + + /** + * The element that shows when Resolver is waiting for the graph data. + */ + public graphLoadingElement(): ReactWrapper { + return this.findInDOM('[data-test-subj="resolver:graph:loading"]'); + } + + /** + * The element that shows if Resolver couldn't draw the graph. + */ + public graphErrorElement(): ReactWrapper { + return this.findInDOM('[data-test-subj="resolver:graph:error"]'); + } + + /** + * The element where nodes get drawn. + */ + public graphElement(): ReactWrapper { + return this.findInDOM('[data-test-subj="resolver:graph"]'); + } + + /** + * Like `this.wrapper.find` but only returns DOM nodes. + */ + private findInDOM(selector: string): ReactWrapper { + return this.wrapper.find(selector).filterWhere((wrapper) => typeof wrapper.type() === 'string'); + } +} + +const baseResolverSelector = '[data-test-subj="resolver:node"]'; + +interface ProcessNodeElementSelectorOptions { + /** + * Entity ID of the node. If passed, will be used to create an data-attribute CSS selector that should only get the related node element. + */ + entityID?: string; + /** + * If true, only get nodes with an `[aria-selected="true"]` attribute. + */ + selected?: boolean; +} + +/** + * An `enzyme` supported CSS selector for process node elements. + */ +function processNodeElementSelector({ + entityID, + selected = false, +}: ProcessNodeElementSelectorOptions = {}): string { + let selector: string = baseResolverSelector; + if (entityID !== undefined) { + selector += `[data-test-resolver-node-id="${entityID}"]`; + } + if (selected) { + selector += '[aria-selected="true"]'; + } + return selector; +} diff --git a/x-pack/plugins/security_solution/public/resolver/test_utilities/simulator/mock_resolver.tsx b/x-pack/plugins/security_solution/public/resolver/test_utilities/simulator/mock_resolver.tsx new file mode 100644 index 0000000000000..36bb2a5ffc9fe --- /dev/null +++ b/x-pack/plugins/security_solution/public/resolver/test_utilities/simulator/mock_resolver.tsx @@ -0,0 +1,109 @@ +/* + * 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. + */ + +/* eslint-disable no-duplicate-imports */ +/* eslint-disable react/display-name */ + +import React, { useMemo, useEffect, useState, useCallback } from 'react'; +import { Router } from 'react-router-dom'; +import { I18nProvider } from '@kbn/i18n/react'; +import { Provider } from 'react-redux'; +import { Store } from 'redux'; +import { KibanaContextProvider } from '../../../../../../../src/plugins/kibana_react/public'; +import { CoreStart } from '../../../../../../../src/core/public'; +import { ResolverState, SideEffectSimulator, ResolverProps } from '../../types'; +import { ResolverAction } from '../../store/actions'; +import { ResolverWithoutProviders } from '../../view/resolver_without_providers'; +import { SideEffectContext } from '../../view/side_effect_context'; +import { sideEffectSimulatorFactory } from '../../view/side_effect_simulator_factory'; + +type MockResolverProps = { + /** + * Used to simulate a raster width. Defaults to 1600. + */ + rasterWidth?: number; + /** + * Used to simulate a raster height. Defaults to 1200. + */ + rasterHeight?: number; + /** + * Used for the `KibanaContextProvider` + */ + coreStart: CoreStart; + /** + * Used for `react-router`. + */ + history: React.ComponentProps['history']; + /** Pass a resolver store. See `storeFactory` and `mockDataAccessLayer` */ + store: Store; + /** + * All the props from `ResolverWithoutStore` can be passed. These aren't defaulted to anything (you might want to test what happens when they aren't present.) + */ +} & ResolverProps; + +/** + * This is a mock Resolver component. It is intended to be used with `enzyme` tests via the `Simulator` class. It wraps Resolver in the required providers: + * * `i18n` + * * `Router` using a provided `History` + * * `SideEffectContext.Provider` using side effect simulator it creates + * * `KibanaContextProvider` using a provided `CoreStart` instance + * * `react-redux`'s `Provider` using a provided `Store`. + * + * Resolver needs to measure its size in the DOM. The `SideEffectSimulator` instance can fake the size of an element. + * However in tests, React doesn't have good DOM reconciliation and the root element is often swapped out. When the + * element is replaced, the fake dimensions stop being applied. In order to get around this issue, this component will + * trigger a simulated resize on the root node reference any time it changes. This simulates the layout process a real + * browser would do when an element is attached to the DOM. + */ +export const MockResolver = React.memo((props: MockResolverProps) => { + const [resolverElement, setResolverElement] = useState(null); + + // Get a ref to the underlying Resolver element so we can resize. + // Use a callback function because the underlying DOM node can change. In fact, `enzyme` seems to change it a lot. + const resolverRef = useCallback((element: HTMLDivElement | null) => { + setResolverElement(element); + }, []); + + const simulator: SideEffectSimulator = useMemo(() => sideEffectSimulatorFactory(), []); + + // Resize the Resolver element to match the passed in props. Resolver is size dependent. + useEffect(() => { + if (resolverElement) { + const size: DOMRect = { + width: props.rasterWidth ?? 1600, + height: props.rasterHeight ?? 1200, + x: 0, + y: 0, + bottom: 0, + left: 0, + top: 0, + right: 0, + toJSON() { + return this; + }, + }; + simulator.controls.simulateElementResize(resolverElement, size); + } + }, [props.rasterWidth, props.rasterHeight, simulator.controls, resolverElement]); + + return ( + + + + + + + + + + + + ); +}); diff --git a/x-pack/plugins/security_solution/public/resolver/test_utilities/spy_middleware_factory.ts b/x-pack/plugins/security_solution/public/resolver/test_utilities/spy_middleware_factory.ts new file mode 100644 index 0000000000000..45730531cf467 --- /dev/null +++ b/x-pack/plugins/security_solution/public/resolver/test_utilities/spy_middleware_factory.ts @@ -0,0 +1,58 @@ +/* + * 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 { ResolverAction } from '../store/actions'; +import { SpyMiddleware, SpyMiddlewareStateActionPair } from '../types'; + +/** + * Return a `SpyMiddleware` to be used in testing. Use `debugActions` to console.log actions and the state they produced. + * For reducer/middleware tests, you can use `actions` to get access to each dispatched action along with the state it produced. + */ +export const spyMiddlewareFactory: () => SpyMiddleware = () => { + const resolvers: Set<(stateActionPair: SpyMiddlewareStateActionPair) => void> = new Set(); + + const actions = async function* actions() { + while (true) { + const promise: Promise = new Promise((resolve) => { + resolvers.add(resolve); + }); + yield await promise; + } + }; + + return { + middleware: (api) => (next) => (action: ResolverAction) => { + // handle the action first so we get the state after the reducer + next(action); + + const state = api.getState(); + + // Resolving these promises may cause code to await the next result. That will add more resolve functions to `resolvers`. + // For this reason, copy all the existing resolvers to an array and clear the set. + const oldResolvers = [...resolvers]; + resolvers.clear(); + for (const resolve of oldResolvers) { + resolve({ action, state }); + } + }, + actions, + debugActions() { + let stop: boolean = false; + (async () => { + for await (const actionStatePair of actions()) { + if (stop) { + break; + } + // eslint-disable-next-line no-console + console.log('action', actionStatePair.action, 'state', actionStatePair.state); + } + })(); + return () => { + stop = true; + }; + }, + }; +}; diff --git a/x-pack/plugins/security_solution/public/resolver/types.ts b/x-pack/plugins/security_solution/public/resolver/types.ts index 02a890ca13ee8..38e0cd0483559 100644 --- a/x-pack/plugins/security_solution/public/resolver/types.ts +++ b/x-pack/plugins/security_solution/public/resolver/types.ts @@ -4,10 +4,18 @@ * you may not use this file except in compliance with the Elastic License. */ +/* eslint-disable no-duplicate-imports */ + import { Store } from 'redux'; +import { Middleware, Dispatch } from 'redux'; import { BBox } from 'rbush'; import { ResolverAction } from './store/actions'; -import { ResolverEvent, ResolverRelatedEvents, ResolverTree } from '../../common/endpoint/types'; +import { + ResolverEvent, + ResolverRelatedEvents, + ResolverTree, + ResolverEntityIndex, +} from '../../common/endpoint/types'; /** * Redux state for the Resolver feature. Properties on this interface are populated via multiple reducers using redux's `combineReducers`. @@ -30,21 +38,21 @@ export interface ResolverState { } /** - * Piece of redux state that models an animation for the camera. + * Piece of `redux` state that models an animation for the camera. */ export interface ResolverUIState { /** - * The nodeID for the process that is selected (in the aria-activedescendent sense of being selected.) + * The `nodeID` for the process that is selected (in the `aria-activedescendent` sense of being selected.) */ readonly ariaActiveDescendant: string | null; /** - * nodeID of the selected node + * `nodeID` of the selected node */ readonly selectedNode: string | null; } /** - * Piece of redux state that models an animation for the camera. + * Piece of `redux` state that models an animation for the camera. */ export interface CameraAnimationState { /** @@ -68,7 +76,7 @@ export interface CameraAnimationState { } /** - * The redux state for the `useCamera` hook. + * The `redux` state for the `useCamera` hook. */ export type CameraState = { /** @@ -88,7 +96,7 @@ export type CameraState = { readonly translationNotCountingCurrentPanning: Vector2; /** - * The world coordinates that the pointing device was last over. This is used during mousewheel zoom. + * The world coordinates that the pointing device was last over. This is used during mouse-wheel zoom. */ readonly latestFocusedWorldCoordinates: Vector2 | null; } & ( @@ -135,7 +143,7 @@ export type CameraState = { export type IndexedEntity = IndexedEdgeLineSegment | IndexedProcessNode; /** - * The entity stored in rbush for resolver edge lines. + * The entity stored in `rbush` for resolver edge lines. */ export interface IndexedEdgeLineSegment extends BBox { type: 'edgeLine'; @@ -143,7 +151,7 @@ export interface IndexedEdgeLineSegment extends BBox { } /** - * The entity store in rbush for resolver process nodes. + * The entity store in `rbush` for resolver process nodes. */ export interface IndexedProcessNode extends BBox { type: 'processNode'; @@ -160,7 +168,7 @@ export interface VisibleEntites { } /** - * State for `data` reducer which handles receiving Resolver data from the backend. + * State for `data` reducer which handles receiving Resolver data from the back-end. */ export interface DataState { readonly relatedEvents: Map; @@ -213,11 +221,11 @@ export type Vector2 = readonly [number, number]; */ export interface AABB { /** - * Vector who's `x` component is the _left_ side of the AABB and who's `y` component is the _bottom_ side of the AABB. + * Vector who's `x` component is the _left_ side of the `AABB` and who's `y` component is the _bottom_ side of the `AABB`. **/ readonly minimum: Vector2; /** - * Vector who's `x` component is the _right_ side of the AABB and who's `y` component is the _bottom_ side of the AABB. + * Vector who's `x` component is the _right_ side of the `AABB` and who's `y` component is the _bottom_ side of the `AABB`. **/ readonly maximum: Vector2; } @@ -266,7 +274,7 @@ export interface ProcessEvent { } /** - * A represention of a process tree with indices for O(1) access to children and values by id. + * A representation of a process tree with indices for O(1) access to children and values by id. */ export interface IndexedProcessTree { /** @@ -280,7 +288,7 @@ export interface IndexedProcessTree { } /** - * A map of ProcessEvents (representing process nodes) to the 'width' of their subtrees as calculated by `widthsOfProcessSubtrees` + * A map of `ProcessEvents` (representing process nodes) to the 'width' of their subtrees as calculated by `widthsOfProcessSubtrees` */ export type ProcessWidths = Map; /** @@ -318,16 +326,16 @@ export interface DurationDetails { */ export interface EdgeLineMetadata { elapsedTime?: DurationDetails; - // A string of the two joined process nodes concatted together. + // A string of the two joined process nodes concatenated together. uniqueId: string; } /** - * A tuple of 2 vector2 points forming a polyline. Used to connect process nodes in the graph. + * A tuple of 2 vector2 points forming a poly-line. Used to connect process nodes in the graph. */ export type EdgeLinePoints = Vector2[]; /** - * Edge line components including the points joining the edgeline and any optional associated metadata + * Edge line components including the points joining the edge-line and any optional associated metadata */ export interface EdgeLineSegment { points: EdgeLinePoints; @@ -335,7 +343,7 @@ export interface EdgeLineSegment { } /** - * Used to provide precalculated info from `widthsOfProcessSubtrees`. These 'width' values are used in the layout of the graph. + * Used to provide pre-calculated info from `widthsOfProcessSubtrees`. These 'width' values are used in the layout of the graph. */ export type ProcessWithWidthMetadata = { process: ResolverEvent; @@ -423,11 +431,11 @@ export type ResolverStore = Store; */ export interface IsometricTaxiLayout { /** - * A map of events to position. each event represents its own node. + * A map of events to position. Each event represents its own node. */ processNodePositions: Map; /** - * A map of edgline segments, which graphically connect nodes. + * A map of edge-line segments, which graphically connect nodes. */ edgeLineSegments: EdgeLineSegment[]; @@ -436,3 +444,91 @@ export interface IsometricTaxiLayout { */ ariaLevels: Map; } + +/** + * An object with methods that can be used to access data from the Kibana server. + * This is injected into Resolver. + * This allows tests to provide a mock data access layer. + * In the future, other implementations of Resolver could provide different data access layers. + */ +export interface DataAccessLayer { + /** + * Fetch related events for an entity ID + */ + relatedEvents: (entityID: string) => Promise; + + /** + * Fetch a ResolverTree for a entityID + */ + resolverTree: (entityID: string, signal: AbortSignal) => Promise; + + /** + * Get an array of index patterns that contain events. + */ + indexPatterns: () => string[]; + + /** + * Get entities matching a document. + */ + entities: (parameters: { + /** _id of the document to find an entity in. */ + _id: string; + /** indices to search in */ + indices: string[]; + /** signal to abort the request */ + signal: AbortSignal; + }) => Promise; +} + +/** + * The externally provided React props. + */ +export interface ResolverProps { + /** + * Used by `styled-components`. + */ + className?: string; + /** + * The `_id` value of an event in ES. + * Used as the origin of the Resolver graph. + */ + databaseDocumentID?: string; + /** + * A string literal describing where in the application resolver is located. + * Used to prevent collisions in things like query parameters. + */ + resolverComponentInstanceID: string; +} + +/** + * Used by `SpyMiddleware`. + */ +export interface SpyMiddlewareStateActionPair { + /** An action dispatched, `state` is the state that the reducer returned when handling this action. + */ + action: ResolverAction; + /** + * A resolver state that was returned by the reducer when handling `action`. + */ + state: ResolverState; +} + +/** + * A wrapper object that has a middleware along with an async generator that returns the actions dispatched to the store (along with state.) + */ +export interface SpyMiddleware { + /** + * A middleware to use with `applyMiddleware`. + */ + middleware: Middleware<{}, ResolverState, Dispatch>; + /** + * A generator that returns all state and action pairs that pass through the middleware. + */ + actions: () => AsyncGenerator; + + /** + * Prints actions to the console. + * Call the returned function to stop debugging. + */ + debugActions: () => () => void; +} diff --git a/x-pack/plugins/security_solution/public/resolver/view/clickthrough.test.tsx b/x-pack/plugins/security_solution/public/resolver/view/clickthrough.test.tsx new file mode 100644 index 0000000000000..9cb900736677e --- /dev/null +++ b/x-pack/plugins/security_solution/public/resolver/view/clickthrough.test.tsx @@ -0,0 +1,99 @@ +/* + * 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 { oneAncestorTwoChildren } from '../data_access_layer/mocks/one_ancestor_two_children'; +import { Simulator } from '../test_utilities/simulator'; +// Extend jest with a custom matcher +import '../test_utilities/extend_jest'; + +describe('Resolver, when analyzing a tree that has 1 ancestor and 2 children', () => { + let simulator: Simulator; + let databaseDocumentID: string; + let entityIDs: { origin: string; firstChild: string; secondChild: string }; + + // the resolver component instance ID, used by the react code to distinguish piece of global state from those used by other resolver instances + const resolverComponentInstanceID = 'resolverComponentInstanceID'; + + beforeEach(async () => { + // create a mock data access layer + const { metadata: dataAccessLayerMetadata, dataAccessLayer } = oneAncestorTwoChildren(); + + // save a reference to the entity IDs exposed by the mock data layer + entityIDs = dataAccessLayerMetadata.entityIDs; + + // save a reference to the `_id` supported by the mock data layer + databaseDocumentID = dataAccessLayerMetadata.databaseDocumentID; + + // create a resolver simulator, using the data access layer and an arbitrary component instance ID + simulator = new Simulator({ databaseDocumentID, dataAccessLayer, resolverComponentInstanceID }); + }); + + describe('when it has loaded', () => { + beforeEach(async () => { + await expect( + /** + * It's important that all of these are done in a single `expect`. + * If you do them concurrently with each other, you'll have incorrect results. + * + * For example, there might be no loading element at one point, and 1 graph element at one point, but never a single time when there is both 1 graph element and 0 loading elements. + */ + simulator.mapStateTransitions(() => ({ + graphElements: simulator.graphElement().length, + graphLoadingElements: simulator.graphLoadingElement().length, + graphErrorElements: simulator.graphErrorElement().length, + })) + ).toYieldEqualTo({ + // it should have 1 graph element, an no error or loading elements. + graphElements: 1, + graphLoadingElements: 0, + graphErrorElements: 0, + }); + }); + + // Combining assertions here for performance. Unfortunately, Enzyme + jsdom + React is slow. + it(`should have 3 nodes, with the entityID's 'origin', 'firstChild', and 'secondChild'. 'origin' should be selected.`, async () => { + expect(simulator.processNodeElementLooksSelected(entityIDs.origin)).toBe(true); + + expect(simulator.processNodeElementLooksUnselected(entityIDs.firstChild)).toBe(true); + expect(simulator.processNodeElementLooksUnselected(entityIDs.secondChild)).toBe(true); + + expect(simulator.processNodeElements().length).toBe(3); + }); + + describe("when the second child node's first button has been clicked", () => { + beforeEach(() => { + // Click the first button under the second child element. + simulator + .processNodeElements({ entityID: entityIDs.secondChild }) + .find('button') + .simulate('click'); + }); + it('should render the second child node as selected, and the first child not as not selected, and the query string should indicate that the second child is selected', async () => { + await expect( + simulator.mapStateTransitions(function value() { + return { + // the query string has a key showing that the second child is selected + queryStringSelectedNode: simulator.queryStringValues().selectedNode, + // the second child is rendered in the DOM, and shows up as selected + secondChildLooksSelected: simulator.processNodeElementLooksSelected( + entityIDs.secondChild + ), + // the origin is in the DOM, but shows up as unselected + originLooksUnselected: simulator.processNodeElementLooksUnselected(entityIDs.origin), + }; + }) + ).toYieldEqualTo({ + // Just the second child should be marked as selected in the query string + queryStringSelectedNode: [entityIDs.secondChild], + // The second child is rendered and has `[aria-selected]` + secondChildLooksSelected: true, + // The origin child is rendered and doesn't have `[aria-selected]` + originLooksUnselected: true, + }); + }); + }); + }); +}); diff --git a/x-pack/plugins/security_solution/public/resolver/view/index.tsx b/x-pack/plugins/security_solution/public/resolver/view/index.tsx index c1ffa42d02abb..d9a0bf291d0e4 100644 --- a/x-pack/plugins/security_solution/public/resolver/view/index.tsx +++ b/x-pack/plugins/security_solution/public/resolver/view/index.tsx @@ -7,50 +7,29 @@ import React, { useMemo } from 'react'; import { Provider } from 'react-redux'; -import { ResolverMap } from './map'; import { storeFactory } from '../store'; import { StartServices } from '../../types'; import { useKibana } from '../../../../../../src/plugins/kibana_react/public'; +import { DataAccessLayer, ResolverProps } from '../types'; +import { dataAccessLayerFactory } from '../data_access_layer/factory'; +import { ResolverWithoutProviders } from './resolver_without_providers'; /** - * The top level, unconnected, Resolver component. + * The `Resolver` component to use. This sets up the DataAccessLayer provider. Use `ResolverWithoutProviders` in tests or in other scenarios where you want to provide a different (or fake) data access layer. */ -export const Resolver = React.memo(function ({ - className, - databaseDocumentID, - resolverComponentInstanceID, -}: { - /** - * Used by `styled-components`. - */ - className?: string; - /** - * The `_id` value of an event in ES. - * Used as the origin of the Resolver graph. - */ - databaseDocumentID?: string; - /** - * A string literal describing where in the app resolver is located, - * used to prevent collisions in things like query params - */ - resolverComponentInstanceID: string; -}) { +export const Resolver = React.memo((props: ResolverProps) => { const context = useKibana(); + const dataAccessLayer: DataAccessLayer = useMemo(() => dataAccessLayerFactory(context), [ + context, + ]); + const store = useMemo(() => { - return storeFactory(context); - }, [context]); + return storeFactory(dataAccessLayer); + }, [dataAccessLayer]); - /** - * Setup the store and use `Provider` here. This allows the ResolverMap component to - * dispatch actions and read from state. - */ return ( - + ); }); diff --git a/x-pack/plugins/security_solution/public/resolver/view/panels/panel_content_process_detail.tsx b/x-pack/plugins/security_solution/public/resolver/view/panels/panel_content_process_detail.tsx index 29c7676d2167d..7b5eb13359dbb 100644 --- a/x-pack/plugins/security_solution/public/resolver/view/panels/panel_content_process_detail.tsx +++ b/x-pack/plugins/security_solution/public/resolver/view/panels/panel_content_process_detail.tsx @@ -1,184 +1,184 @@ -/* - * 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 React, { memo, useMemo } from 'react'; -import { useSelector } from 'react-redux'; -import { i18n } from '@kbn/i18n'; -import { - htmlIdGenerator, - EuiSpacer, - EuiTitle, - EuiText, - EuiTextColor, - EuiDescriptionList, -} from '@elastic/eui'; -import styled from 'styled-components'; -import { FormattedMessage } from 'react-intl'; -import * as selectors from '../../store/selectors'; -import * as event from '../../../../common/endpoint/models/event'; -import { CrumbInfo, formatDate, StyledBreadcrumbs } from './panel_content_utilities'; -import { - processPath, - processPid, - userInfoForProcess, - processParentPid, - md5HashForProcess, - argsForProcess, -} from '../../models/process_event'; -import { CubeForProcess } from './process_cube_icon'; -import { ResolverEvent } from '../../../../common/endpoint/types'; -import { useResolverTheme } from '../assets'; - -const StyledDescriptionList = styled(EuiDescriptionList)` - &.euiDescriptionList.euiDescriptionList--column dt.euiDescriptionList__title.desc-title { - max-width: 10em; - } -`; - -/** - * A description list view of all the Metadata that goes with a particular process event, like: - * Created, Pid, User/Domain, etc. - */ -export const ProcessDetails = memo(function ProcessDetails({ - processEvent, - pushToQueryParams, -}: { - processEvent: ResolverEvent; - pushToQueryParams: (queryStringKeyValuePair: CrumbInfo) => unknown; -}) { - const processName = event.eventName(processEvent); - const entityId = event.entityId(processEvent); - const isProcessTerminated = useSelector(selectors.isProcessTerminated)(entityId); - const processInfoEntry = useMemo(() => { - const eventTime = event.eventTimestamp(processEvent); - const dateTime = eventTime ? formatDate(eventTime) : ''; - - const createdEntry = { - title: '@timestamp', - description: dateTime, - }; - - const pathEntry = { - title: 'process.executable', - description: processPath(processEvent), - }; - - const pidEntry = { - title: 'process.pid', - description: processPid(processEvent), - }; - - const userEntry = { - title: 'user.name', - description: (userInfoForProcess(processEvent) as { name: string }).name, - }; - - const domainEntry = { - title: 'user.domain', - description: (userInfoForProcess(processEvent) as { domain: string }).domain, - }; - - const parentPidEntry = { - title: 'process.parent.pid', - description: processParentPid(processEvent), - }; - - const md5Entry = { - title: 'process.hash.md5', - description: md5HashForProcess(processEvent), - }; - - const commandLineEntry = { - title: 'process.args', - description: argsForProcess(processEvent), - }; - - // This is the data in {title, description} form for the EUIDescriptionList to display - const processDescriptionListData = [ - createdEntry, - pathEntry, - pidEntry, - userEntry, - domainEntry, - parentPidEntry, - md5Entry, - commandLineEntry, - ] - .filter((entry) => { - return entry.description; - }) - .map((entry) => { - return { - ...entry, - description: String(entry.description), - }; - }); - - return processDescriptionListData; - }, [processEvent]); - - const crumbs = useMemo(() => { - return [ - { - text: i18n.translate( - 'xpack.securitySolution.endpoint.resolver.panel.processDescList.events', - { - defaultMessage: 'Events', - } - ), - onClick: () => { - pushToQueryParams({ crumbId: '', crumbEvent: '' }); - }, - }, - { - text: ( - <> - - - ), - onClick: () => {}, - }, - ]; - }, [processName, pushToQueryParams]); - const { cubeAssetsForNode } = useResolverTheme(); - const { descriptionText } = useMemo(() => { - if (!processEvent) { - return { descriptionText: '' }; - } - return cubeAssetsForNode(isProcessTerminated, false); - }, [processEvent, cubeAssetsForNode, isProcessTerminated]); - - const titleId = useMemo(() => htmlIdGenerator('resolverTable')(), []); - return ( - <> - - - -

- - {processName} -

- - - - {descriptionText} - - - - - - ); -}); -ProcessDetails.displayName = 'ProcessDetails'; +/* + * 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 React, { memo, useMemo } from 'react'; +import { useSelector } from 'react-redux'; +import { i18n } from '@kbn/i18n'; +import { + htmlIdGenerator, + EuiSpacer, + EuiTitle, + EuiText, + EuiTextColor, + EuiDescriptionList, +} from '@elastic/eui'; +import styled from 'styled-components'; +import { FormattedMessage } from 'react-intl'; +import * as selectors from '../../store/selectors'; +import * as event from '../../../../common/endpoint/models/event'; +import { CrumbInfo, formatDate, StyledBreadcrumbs } from './panel_content_utilities'; +import { + processPath, + processPid, + userInfoForProcess, + processParentPid, + md5HashForProcess, + argsForProcess, +} from '../../models/process_event'; +import { CubeForProcess } from './process_cube_icon'; +import { ResolverEvent } from '../../../../common/endpoint/types'; +import { useResolverTheme } from '../assets'; + +const StyledDescriptionList = styled(EuiDescriptionList)` + &.euiDescriptionList.euiDescriptionList--column dt.euiDescriptionList__title.desc-title { + max-width: 10em; + } +`; + +/** + * A description list view of all the Metadata that goes with a particular process event, like: + * Created, PID, User/Domain, etc. + */ +export const ProcessDetails = memo(function ProcessDetails({ + processEvent, + pushToQueryParams, +}: { + processEvent: ResolverEvent; + pushToQueryParams: (queryStringKeyValuePair: CrumbInfo) => unknown; +}) { + const processName = event.eventName(processEvent); + const entityId = event.entityId(processEvent); + const isProcessTerminated = useSelector(selectors.isProcessTerminated)(entityId); + const processInfoEntry = useMemo(() => { + const eventTime = event.eventTimestamp(processEvent); + const dateTime = eventTime ? formatDate(eventTime) : ''; + + const createdEntry = { + title: '@timestamp', + description: dateTime, + }; + + const pathEntry = { + title: 'process.executable', + description: processPath(processEvent), + }; + + const pidEntry = { + title: 'process.pid', + description: processPid(processEvent), + }; + + const userEntry = { + title: 'user.name', + description: userInfoForProcess(processEvent)?.name, + }; + + const domainEntry = { + title: 'user.domain', + description: userInfoForProcess(processEvent)?.domain, + }; + + const parentPidEntry = { + title: 'process.parent.pid', + description: processParentPid(processEvent), + }; + + const md5Entry = { + title: 'process.hash.md5', + description: md5HashForProcess(processEvent), + }; + + const commandLineEntry = { + title: 'process.args', + description: argsForProcess(processEvent), + }; + + // This is the data in {title, description} form for the EUIDescriptionList to display + const processDescriptionListData = [ + createdEntry, + pathEntry, + pidEntry, + userEntry, + domainEntry, + parentPidEntry, + md5Entry, + commandLineEntry, + ] + .filter((entry) => { + return entry.description; + }) + .map((entry) => { + return { + ...entry, + description: String(entry.description), + }; + }); + + return processDescriptionListData; + }, [processEvent]); + + const crumbs = useMemo(() => { + return [ + { + text: i18n.translate( + 'xpack.securitySolution.endpoint.resolver.panel.processDescList.events', + { + defaultMessage: 'Events', + } + ), + onClick: () => { + pushToQueryParams({ crumbId: '', crumbEvent: '' }); + }, + }, + { + text: ( + <> + + + ), + onClick: () => {}, + }, + ]; + }, [processName, pushToQueryParams]); + const { cubeAssetsForNode } = useResolverTheme(); + const { descriptionText } = useMemo(() => { + if (!processEvent) { + return { descriptionText: '' }; + } + return cubeAssetsForNode(isProcessTerminated, false); + }, [processEvent, cubeAssetsForNode, isProcessTerminated]); + + const titleId = useMemo(() => htmlIdGenerator('resolverTable')(), []); + return ( + <> + + + +

+ + {processName} +

+ + + + {descriptionText} + + + + + + ); +}); +ProcessDetails.displayName = 'ProcessDetails'; diff --git a/x-pack/plugins/security_solution/public/resolver/view/process_event_dot.tsx b/x-pack/plugins/security_solution/public/resolver/view/process_event_dot.tsx index aed292e4a39d1..24de45ee894dc 100644 --- a/x-pack/plugins/security_solution/public/resolver/view/process_event_dot.tsx +++ b/x-pack/plugins/security_solution/public/resolver/view/process_event_dot.tsx @@ -195,7 +195,7 @@ const UnstyledProcessEventDot = React.memo( * `beginElement` is by [w3](https://www.w3.org/TR/SVG11/animate.html#__smil__ElementTimeControl__beginElement) * but missing in [TSJS-lib-generator](https://github.com/microsoft/TSJS-lib-generator/blob/15a4678e0ef6de308e79451503e444e9949ee849/inputfiles/addedTypes.json#L1819) */ - beginElement: () => void; + beginElement?: () => void; }) | null; } = React.createRef(); @@ -238,10 +238,8 @@ const UnstyledProcessEventDot = React.memo( const { pushToQueryParams } = useResolverQueryParams(); const handleClick = useCallback(() => { - if (animationTarget.current !== null) { - // This works but the types are missing in the typescript DOM lib - // eslint-disable-next-line @typescript-eslint/no-explicit-any - (animationTarget.current as any).beginElement(); + if (animationTarget.current?.beginElement) { + animationTarget.current.beginElement(); } dispatch({ type: 'userSelectedResolverNode', @@ -297,7 +295,8 @@ const UnstyledProcessEventDot = React.memo( */ return (
{ handleFocus(); handleClick(); - } /* a11y note: this is strictly an alternate to the button, so no tabindex is necessary*/ + } /* a11y note: this is strictly an alternate to the button, so no tabindex is necessary*/ } role="img" aria-labelledby={labelHTMLID} diff --git a/x-pack/plugins/security_solution/public/resolver/view/resolver_without_providers.tsx b/x-pack/plugins/security_solution/public/resolver/view/resolver_without_providers.tsx new file mode 100644 index 0000000000000..f444d5a25e1ef --- /dev/null +++ b/x-pack/plugins/security_solution/public/resolver/view/resolver_without_providers.tsx @@ -0,0 +1,139 @@ +/* + * 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. + */ + +/* eslint-disable no-duplicate-imports */ + +/* eslint-disable react/display-name */ + +import React, { useContext, useCallback } from 'react'; +import { useSelector } from 'react-redux'; +import { useEffectOnce } from 'react-use'; +import { EuiLoadingSpinner } from '@elastic/eui'; +import { FormattedMessage } from '@kbn/i18n/react'; +import * as selectors from '../store/selectors'; +import { EdgeLine } from './edge_line'; +import { GraphControls } from './graph_controls'; +import { ProcessEventDot } from './process_event_dot'; +import { useCamera } from './use_camera'; +import { SymbolDefinitions, useResolverTheme } from './assets'; +import { useStateSyncingActions } from './use_state_syncing_actions'; +import { useResolverQueryParams } from './use_resolver_query_params'; +import { StyledMapContainer, StyledPanel, GraphContainer } from './styles'; +import { entityId } from '../../../common/endpoint/models/event'; +import { SideEffectContext } from './side_effect_context'; +import { ResolverProps } from '../types'; + +/** + * The highest level connected Resolver component. Needs a `Provider` in its ancestry to work. + */ +export const ResolverWithoutProviders = React.memo( + /** + * Use `forwardRef` so that the `Simulator` used in testing can access the top level DOM element. + */ + React.forwardRef(function ( + { className, databaseDocumentID, resolverComponentInstanceID }: ResolverProps, + refToForward + ) { + /** + * This is responsible for dispatching actions that include any external data. + * `databaseDocumentID` + */ + useStateSyncingActions({ databaseDocumentID, resolverComponentInstanceID }); + + const { timestamp } = useContext(SideEffectContext); + + // use this for the entire render in order to keep things in sync + const timeAtRender = timestamp(); + + const { processNodePositions, connectingEdgeLineSegments } = useSelector( + selectors.visibleNodesAndEdgeLines + )(timeAtRender); + const terminatedProcesses = useSelector(selectors.terminatedProcesses); + const { projectionMatrix, ref: cameraRef, onMouseDown } = useCamera(); + + const ref = useCallback( + (element: HTMLDivElement | null) => { + // Supply `useCamera` with the ref + cameraRef(element); + + // If a ref is being forwarded, populate that as well. + if (typeof refToForward === 'function') { + refToForward(element); + } else if (refToForward !== null) { + refToForward.current = element; + } + }, + [cameraRef, refToForward] + ); + const isLoading = useSelector(selectors.isLoading); + const hasError = useSelector(selectors.hasError); + const activeDescendantId = useSelector(selectors.ariaActiveDescendant); + const { colorMap } = useResolverTheme(); + const { cleanUpQueryParams } = useResolverQueryParams(); + + useEffectOnce(() => { + return () => cleanUpQueryParams(); + }); + + return ( + + {isLoading ? ( +
+ +
+ ) : hasError ? ( +
+
+ {' '} + +
+
+ ) : ( + + {connectingEdgeLineSegments.map( + ({ points: [startPosition, endPosition], metadata }) => ( + + ) + )} + {[...processNodePositions].map(([processEvent, position]) => { + const processEntityId = entityId(processEvent); + return ( + + ); + })} + + )} + + + + + ); + }) +); diff --git a/x-pack/plugins/security_solution/public/resolver/view/side_effect_simulator.ts b/x-pack/plugins/security_solution/public/resolver/view/side_effect_simulator_factory.ts similarity index 95% rename from x-pack/plugins/security_solution/public/resolver/view/side_effect_simulator.ts rename to x-pack/plugins/security_solution/public/resolver/view/side_effect_simulator_factory.ts index 5e9073ba2d3c9..25be222e2fe4a 100644 --- a/x-pack/plugins/security_solution/public/resolver/view/side_effect_simulator.ts +++ b/x-pack/plugins/security_solution/public/resolver/view/side_effect_simulator_factory.ts @@ -11,12 +11,13 @@ import { SideEffectSimulator } from '../types'; * Create mock `SideEffectors` for `SideEffectContext.Provider`. The `control` * object is used to control the mocks. */ -export const sideEffectSimulator: () => SideEffectSimulator = () => { +export const sideEffectSimulatorFactory: () => SideEffectSimulator = () => { // The set of mock `ResizeObserver` instances that currently exist const resizeObserverInstances: Set = new Set(); // A map of `Element`s to their fake `DOMRect`s - const contentRects: Map = new Map(); + // Use a `WeakMap` since elements can be removed from the DOM. + const contentRects: WeakMap = new Map(); /** * Simulate an element's size changing. This will trigger any `ResizeObserverCallback`s which diff --git a/x-pack/plugins/security_solution/public/resolver/view/use_camera.test.tsx b/x-pack/plugins/security_solution/public/resolver/view/use_camera.test.tsx index a27f157bc9364..b32d63283b547 100644 --- a/x-pack/plugins/security_solution/public/resolver/view/use_camera.test.tsx +++ b/x-pack/plugins/security_solution/public/resolver/view/use_camera.test.tsx @@ -10,15 +10,16 @@ import { renderHook, act as hooksAct } from '@testing-library/react-hooks'; import { useCamera, useAutoUpdatingClientRect } from './use_camera'; import { Provider } from 'react-redux'; import * as selectors from '../store/selectors'; -import { storeFactory } from '../store'; import { Matrix3, ResolverStore, SideEffectSimulator } from '../types'; import { ResolverEvent } from '../../../common/endpoint/types'; import { SideEffectContext } from './side_effect_context'; import { applyMatrix3 } from '../models/vector2'; -import { sideEffectSimulator } from './side_effect_simulator'; +import { sideEffectSimulatorFactory } from './side_effect_simulator_factory'; import { mockProcessEvent } from '../models/process_event_test_helpers'; import { mock as mockResolverTree } from '../models/resolver_tree'; import { ResolverAction } from '../store/actions'; +import { createStore } from 'redux'; +import { resolverReducer } from '../store/reducer'; describe('useCamera on an unpainted element', () => { let element: HTMLElement; @@ -29,7 +30,7 @@ describe('useCamera on an unpainted element', () => { let simulator: SideEffectSimulator; beforeEach(async () => { - store = storeFactory(); + store = createStore(resolverReducer); const Test = function Test() { const camera = useCamera(); @@ -38,7 +39,7 @@ describe('useCamera on an unpainted element', () => { return
; }; - simulator = sideEffectSimulator(); + simulator = sideEffectSimulatorFactory(); reactRenderResult = render( diff --git a/x-pack/plugins/security_solution/public/resolver/view/use_resolver_query_params.ts b/x-pack/plugins/security_solution/public/resolver/view/use_resolver_query_params.ts index 84d954de6ef27..ed514a61d4e06 100644 --- a/x-pack/plugins/security_solution/public/resolver/view/use_resolver_query_params.ts +++ b/x-pack/plugins/security_solution/public/resolver/view/use_resolver_query_params.ts @@ -20,12 +20,12 @@ export function useResolverQueryParams() { const history = useHistory(); const urlSearch = useLocation().search; const resolverComponentInstanceID = useSelector(selectors.resolverComponentInstanceID); - const uniqueCrumbIdKey: string = `resolver-id:${resolverComponentInstanceID}`; - const uniqueCrumbEventKey: string = `resolver-event:${resolverComponentInstanceID}`; + const uniqueCrumbIdKey: string = `resolver-${resolverComponentInstanceID}-id`; + const uniqueCrumbEventKey: string = `resolver-${resolverComponentInstanceID}-event`; const pushToQueryParams = useCallback( (newCrumbs: CrumbInfo) => { - // Construct a new set of params from the current set (minus empty params) - // by assigning the new set of params provided in `newCrumbs` + // Construct a new set of parameters from the current set (minus empty parameters) + // by assigning the new set of parameters provided in `newCrumbs` const crumbsToPass = { ...querystring.parse(urlSearch.slice(1)), [uniqueCrumbIdKey]: newCrumbs.crumbId, From a6a09370625240eb1891613b8b39a18485d7ded3 Mon Sep 17 00:00:00 2001 From: Marshall Main <55718608+marshallmain@users.noreply.github.com> Date: Tue, 28 Jul 2020 21:24:04 -0400 Subject: [PATCH 2/4] [Security Solution] Validate exception list size when adding new items (#73399) * Validate exception list size when adding new items * Update comment * Extract list size validation and apply to endpoint route also Co-authored-by: Elastic Machine --- x-pack/plugins/lists/common/constants.ts | 2 + .../routes/create_endpoint_list_item_route.ts | 15 ++++- .../create_exception_list_item_route.ts | 13 +++++ .../plugins/lists/server/routes/validate.ts | 56 +++++++++++++++++++ .../delete_exception_list_item.ts | 16 ++++++ .../exception_lists/exception_list_client.ts | 15 ++++- .../exception_list_client_types.ts | 6 ++ .../lib/detection_engine/signals/utils.ts | 3 +- 8 files changed, 123 insertions(+), 3 deletions(-) create mode 100644 x-pack/plugins/lists/server/routes/validate.ts diff --git a/x-pack/plugins/lists/common/constants.ts b/x-pack/plugins/lists/common/constants.ts index df16085b53405..6c73dc1656302 100644 --- a/x-pack/plugins/lists/common/constants.ts +++ b/x-pack/plugins/lists/common/constants.ts @@ -48,3 +48,5 @@ export const ENDPOINT_LIST_NAME = 'Elastic Endpoint Security Exception List'; /** The description of the single global space agnostic endpoint list */ export const ENDPOINT_LIST_DESCRIPTION = 'Elastic Endpoint Security Exception List'; + +export const MAX_EXCEPTION_LIST_SIZE = 10000; diff --git a/x-pack/plugins/lists/server/routes/create_endpoint_list_item_route.ts b/x-pack/plugins/lists/server/routes/create_endpoint_list_item_route.ts index 5ff2a9d9df9f4..22aa1fb59858b 100644 --- a/x-pack/plugins/lists/server/routes/create_endpoint_list_item_route.ts +++ b/x-pack/plugins/lists/server/routes/create_endpoint_list_item_route.ts @@ -6,7 +6,7 @@ import { IRouter } from 'kibana/server'; -import { ENDPOINT_LIST_ITEM_URL } from '../../common/constants'; +import { ENDPOINT_LIST_ID, ENDPOINT_LIST_ITEM_URL } from '../../common/constants'; import { buildRouteValidation, buildSiemResponse, transformError } from '../siem_server_deps'; import { validate } from '../../common/siem_common_deps'; import { @@ -16,6 +16,7 @@ import { } from '../../common/schemas'; import { getExceptionListClient } from './utils/get_exception_list_client'; +import { validateExceptionListSize } from './validate'; export const createEndpointListItemRoute = (router: IRouter): void => { router.post( @@ -71,6 +72,18 @@ export const createEndpointListItemRoute = (router: IRouter): void => { if (errors != null) { return siemResponse.error({ body: errors, statusCode: 500 }); } else { + const listSizeError = await validateExceptionListSize( + exceptionLists, + ENDPOINT_LIST_ID, + 'agnostic' + ); + if (listSizeError != null) { + await exceptionLists.deleteExceptionListItemById({ + id: createdList.id, + namespaceType: 'agnostic', + }); + return siemResponse.error(listSizeError); + } return response.ok({ body: validated ?? {} }); } } diff --git a/x-pack/plugins/lists/server/routes/create_exception_list_item_route.ts b/x-pack/plugins/lists/server/routes/create_exception_list_item_route.ts index e4885c7393bd4..ed58621dae973 100644 --- a/x-pack/plugins/lists/server/routes/create_exception_list_item_route.ts +++ b/x-pack/plugins/lists/server/routes/create_exception_list_item_route.ts @@ -17,6 +17,7 @@ import { import { getExceptionListClient } from './utils/get_exception_list_client'; import { endpointDisallowedFields } from './endpoint_disallowed_fields'; +import { validateExceptionListSize } from './validate'; export const createExceptionListItemRoute = (router: IRouter): void => { router.post( @@ -104,6 +105,18 @@ export const createExceptionListItemRoute = (router: IRouter): void => { if (errors != null) { return siemResponse.error({ body: errors, statusCode: 500 }); } else { + const listSizeError = await validateExceptionListSize( + exceptionLists, + listId, + namespaceType + ); + if (listSizeError != null) { + await exceptionLists.deleteExceptionListItemById({ + id: createdList.id, + namespaceType, + }); + return siemResponse.error(listSizeError); + } return response.ok({ body: validated ?? {} }); } } diff --git a/x-pack/plugins/lists/server/routes/validate.ts b/x-pack/plugins/lists/server/routes/validate.ts new file mode 100644 index 0000000000000..bbd4b0eaf0e33 --- /dev/null +++ b/x-pack/plugins/lists/server/routes/validate.ts @@ -0,0 +1,56 @@ +/* + * 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 { ExceptionListClient } from '../services/exception_lists/exception_list_client'; +import { MAX_EXCEPTION_LIST_SIZE } from '../../common/constants'; +import { foundExceptionListItemSchema } from '../../common/schemas'; +import { NamespaceType } from '../../common/schemas/types'; +import { validate } from '../../common/siem_common_deps'; + +export const validateExceptionListSize = async ( + exceptionLists: ExceptionListClient, + listId: string, + namespaceType: NamespaceType +): Promise<{ body: string; statusCode: number } | null> => { + const exceptionListItems = await exceptionLists.findExceptionListItem({ + filter: undefined, + listId, + namespaceType, + page: undefined, + perPage: undefined, + sortField: undefined, + sortOrder: undefined, + }); + if (exceptionListItems == null) { + // If exceptionListItems is null then we couldn't find the list so it may have been deleted + return { + body: `Unable to find list id: ${listId} to verify max exception list size`, + statusCode: 500, + }; + } + const [validatedItems, err] = validate(exceptionListItems, foundExceptionListItemSchema); + if (err != null) { + return { + body: err, + statusCode: 500, + }; + } + // Unnecessary since validatedItems comes from exceptionListItems which is already + // checked for null, but typescript fails to detect that + if (validatedItems == null) { + return { + body: `Unable to find list id: ${listId} to verify max exception list size`, + statusCode: 500, + }; + } + if (validatedItems.total > MAX_EXCEPTION_LIST_SIZE) { + return { + body: `Failed to add exception item, exception list would exceed max size of ${MAX_EXCEPTION_LIST_SIZE}`, + statusCode: 400, + }; + } + return null; +}; diff --git a/x-pack/plugins/lists/server/services/exception_lists/delete_exception_list_item.ts b/x-pack/plugins/lists/server/services/exception_lists/delete_exception_list_item.ts index 8dce1f1f79e35..ee85cf36a48b5 100644 --- a/x-pack/plugins/lists/server/services/exception_lists/delete_exception_list_item.ts +++ b/x-pack/plugins/lists/server/services/exception_lists/delete_exception_list_item.ts @@ -8,6 +8,7 @@ import { SavedObjectsClientContract } from 'kibana/server'; import { ExceptionListItemSchema, + Id, IdOrUndefined, ItemIdOrUndefined, NamespaceType, @@ -23,6 +24,12 @@ interface DeleteExceptionListItemOptions { savedObjectsClient: SavedObjectsClientContract; } +interface DeleteExceptionListItemByIdOptions { + id: Id; + namespaceType: NamespaceType; + savedObjectsClient: SavedObjectsClientContract; +} + export const deleteExceptionListItem = async ({ itemId, id, @@ -43,3 +50,12 @@ export const deleteExceptionListItem = async ({ return exceptionListItem; } }; + +export const deleteExceptionListItemById = async ({ + id, + namespaceType, + savedObjectsClient, +}: DeleteExceptionListItemByIdOptions): Promise => { + const savedObjectType = getSavedObjectType({ namespaceType }); + await savedObjectsClient.delete(savedObjectType, id); +}; diff --git a/x-pack/plugins/lists/server/services/exception_lists/exception_list_client.ts b/x-pack/plugins/lists/server/services/exception_lists/exception_list_client.ts index 11302e64b3538..83b44ababf9de 100644 --- a/x-pack/plugins/lists/server/services/exception_lists/exception_list_client.ts +++ b/x-pack/plugins/lists/server/services/exception_lists/exception_list_client.ts @@ -20,6 +20,7 @@ import { CreateExceptionListItemOptions, CreateExceptionListOptions, DeleteEndpointListItemOptions, + DeleteExceptionListItemByIdOptions, DeleteExceptionListItemOptions, DeleteExceptionListOptions, FindEndpointListItemOptions, @@ -40,7 +41,7 @@ import { createExceptionListItem } from './create_exception_list_item'; import { updateExceptionList } from './update_exception_list'; import { updateExceptionListItem } from './update_exception_list_item'; import { deleteExceptionList } from './delete_exception_list'; -import { deleteExceptionListItem } from './delete_exception_list_item'; +import { deleteExceptionListItem, deleteExceptionListItemById } from './delete_exception_list_item'; import { findExceptionListItem } from './find_exception_list_item'; import { findExceptionList } from './find_exception_list'; import { findExceptionListsItem } from './find_exception_list_items'; @@ -326,6 +327,18 @@ export class ExceptionListClient { }); }; + public deleteExceptionListItemById = async ({ + id, + namespaceType, + }: DeleteExceptionListItemByIdOptions): Promise => { + const { savedObjectsClient } = this; + return deleteExceptionListItemById({ + id, + namespaceType, + savedObjectsClient, + }); + }; + /** * This is the same as "deleteExceptionListItem" except it applies specifically to the endpoint list. */ diff --git a/x-pack/plugins/lists/server/services/exception_lists/exception_list_client_types.ts b/x-pack/plugins/lists/server/services/exception_lists/exception_list_client_types.ts index 555b9c5e95a77..963716b55ea77 100644 --- a/x-pack/plugins/lists/server/services/exception_lists/exception_list_client_types.ts +++ b/x-pack/plugins/lists/server/services/exception_lists/exception_list_client_types.ts @@ -19,6 +19,7 @@ import { ExceptionListType, ExceptionListTypeOrUndefined, FilterOrUndefined, + Id, IdOrUndefined, Immutable, ItemId, @@ -93,6 +94,11 @@ export interface DeleteExceptionListItemOptions { namespaceType: NamespaceType; } +export interface DeleteExceptionListItemByIdOptions { + id: Id; + namespaceType: NamespaceType; +} + export interface DeleteEndpointListItemOptions { id: IdOrUndefined; itemId: ItemIdOrUndefined; diff --git a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/utils.ts b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/utils.ts index 90373ee676121..ae4274f31e145 100644 --- a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/utils.ts +++ b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/utils.ts @@ -15,6 +15,7 @@ import { ListArrayOrUndefined } from '../../../../common/detection_engine/schema import { BulkResponse, BulkResponseErrorAggregation, isValidUnit } from './types'; import { BuildRuleMessage } from './rule_messages'; import { hasLargeValueList } from '../../../../common/detection_engine/utils'; +import { MAX_EXCEPTION_LIST_SIZE } from '../../../../../lists/common/constants'; interface SortExceptionsReturn { exceptionsWithValueLists: ExceptionListItemSchema[]; @@ -183,7 +184,7 @@ export const getExceptions = async ({ listId: foundList.list_id, namespaceType, page: 1, - perPage: 10000, + perPage: MAX_EXCEPTION_LIST_SIZE, filter: undefined, sortOrder: undefined, sortField: undefined, From 9c08978cc9861263178a54a757cf1e008e6f3afb Mon Sep 17 00:00:00 2001 From: Robert Austin Date: Tue, 28 Jul 2020 21:48:38 -0400 Subject: [PATCH 3/4] [Resolver] Remove useless check that breaks when tree has no nodes (#73583) --- .../resolver/store/data/selectors.test.ts | 23 ++++++++++++++ .../public/resolver/store/data/selectors.ts | 6 ++-- .../resolver/store/mocks/resolver_tree.ts | 30 +++++++++++++++++++ 3 files changed, 56 insertions(+), 3 deletions(-) diff --git a/x-pack/plugins/security_solution/public/resolver/store/data/selectors.test.ts b/x-pack/plugins/security_solution/public/resolver/store/data/selectors.test.ts index 0826391a10688..6786a93f1d9ca 100644 --- a/x-pack/plugins/security_solution/public/resolver/store/data/selectors.test.ts +++ b/x-pack/plugins/security_solution/public/resolver/store/data/selectors.test.ts @@ -14,6 +14,7 @@ import { mockTreeWith2AncestorsAndNoChildren, mockTreeWith1AncestorAnd2ChildrenAndAllNodesHave2GraphableEvents, mockTreeWithAllProcessesTerminated, + mockTreeWithNoProcessEvents, } from '../mocks/resolver_tree'; import { uniquePidForProcess } from '../../models/process_event'; import { EndpointEvent } from '../../../../common/endpoint/types'; @@ -408,4 +409,26 @@ describe('data state', () => { expect(selectors.graphableProcesses(state()).length).toBe(4); }); }); + describe('with a tree with no process events', () => { + beforeEach(() => { + const tree = mockTreeWithNoProcessEvents(); + actions.push({ + type: 'serverReturnedResolverData', + payload: { + result: tree, + // this value doesn't matter + databaseDocumentID: '', + }, + }); + }); + it('should return an empty layout', () => { + expect(selectors.layout(state())).toMatchInlineSnapshot(` + Object { + "ariaLevels": Map {}, + "edgeLineSegments": Array [], + "processNodePositions": Map {}, + } + `); + }); + }); }); diff --git a/x-pack/plugins/security_solution/public/resolver/store/data/selectors.ts b/x-pack/plugins/security_solution/public/resolver/store/data/selectors.ts index ea0cb8663d11d..10ace895b3267 100644 --- a/x-pack/plugins/security_solution/public/resolver/store/data/selectors.ts +++ b/x-pack/plugins/security_solution/public/resolver/store/data/selectors.ts @@ -374,9 +374,9 @@ export const layout = createSelector( // find the origin node const originNode = indexedProcessTreeModel.processEvent(indexedProcessTree, originID); - if (!originNode) { - // this should only happen if the `ResolverTree` from the server has an entity ID with no matching lifecycle events. - throw new Error('Origin node not found in ResolverTree'); + if (originNode === null) { + // If a tree is returned that has no process events for the origin, this can happen. + return taxiLayout; } // Find the position of the origin, we'll center the map on it intrinsically diff --git a/x-pack/plugins/security_solution/public/resolver/store/mocks/resolver_tree.ts b/x-pack/plugins/security_solution/public/resolver/store/mocks/resolver_tree.ts index ae43955f4c47c..6a8ab61ccf9b6 100644 --- a/x-pack/plugins/security_solution/public/resolver/store/mocks/resolver_tree.ts +++ b/x-pack/plugins/security_solution/public/resolver/store/mocks/resolver_tree.ts @@ -226,3 +226,33 @@ export function mockTreeWith1AncestorAnd2ChildrenAndAllNodesHave2GraphableEvents lifecycle: [origin, originClone], } as unknown) as ResolverTree; } + +export function mockTreeWithNoProcessEvents(): ResolverTree { + return { + entityID: 'entityID', + children: { + childNodes: [], + nextChild: null, + }, + relatedEvents: { + events: [], + nextEvent: null, + }, + relatedAlerts: { + alerts: [], + nextAlert: null, + }, + lifecycle: [], + ancestry: { + ancestors: [], + nextAncestor: null, + }, + stats: { + totalAlerts: 0, + events: { + total: 0, + byCategory: {}, + }, + }, + }; +} From e105bc514d5040a8d8980abd497d64ae51d42e46 Mon Sep 17 00:00:00 2001 From: spalger Date: Tue, 28 Jul 2020 18:53:31 -0700 Subject: [PATCH 4/4] skip flaky suite (#72339) --- .../cypress/integration/timeline_local_storage.spec.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/x-pack/plugins/security_solution/cypress/integration/timeline_local_storage.spec.ts b/x-pack/plugins/security_solution/cypress/integration/timeline_local_storage.spec.ts index 383ebe2220585..2fb265c55e3ad 100644 --- a/x-pack/plugins/security_solution/cypress/integration/timeline_local_storage.spec.ts +++ b/x-pack/plugins/security_solution/cypress/integration/timeline_local_storage.spec.ts @@ -13,7 +13,8 @@ import { TABLE_COLUMN_EVENTS_MESSAGE } from '../screens/hosts/external_events'; import { waitsForEventsToBeLoaded, openEventsViewerFieldsBrowser } from '../tasks/hosts/events'; import { removeColumn, resetFields } from '../tasks/timeline'; -describe('persistent timeline', () => { +// FLAKY: https://github.com/elastic/kibana/issues/72339 +describe.skip('persistent timeline', () => { before(() => { loginAndWaitForPage(HOSTS_URL); openEvents();