From 20c6efe95c4698e956063d52c079f8698dc73019 Mon Sep 17 00:00:00 2001 From: Michael Olorunnisola Date: Tue, 1 Sep 2020 08:55:06 -0600 Subject: [PATCH] [7.x] [Security_Solution][Resolver] Resolver loading and error state (#75600) (#76192) Co-authored-by: Elastic Machine --- .../data_access_layer/mocks/emptify_mock.ts | 88 +++++++++ .../data_access_layer/mocks/pausify_mock.ts | 124 +++++++++++++ .../resolver/test_utilities/extend_jest.ts | 12 +- .../resolver/view/clickthrough.test.tsx | 1 + .../view/resolver_loading_state.test.tsx | 167 ++++++++++++++++++ 5 files changed, 387 insertions(+), 5 deletions(-) create mode 100644 x-pack/plugins/security_solution/public/resolver/data_access_layer/mocks/emptify_mock.ts create mode 100644 x-pack/plugins/security_solution/public/resolver/data_access_layer/mocks/pausify_mock.ts create mode 100644 x-pack/plugins/security_solution/public/resolver/view/resolver_loading_state.test.tsx diff --git a/x-pack/plugins/security_solution/public/resolver/data_access_layer/mocks/emptify_mock.ts b/x-pack/plugins/security_solution/public/resolver/data_access_layer/mocks/emptify_mock.ts new file mode 100644 index 0000000000000..43282848dcf9a --- /dev/null +++ b/x-pack/plugins/security_solution/public/resolver/data_access_layer/mocks/emptify_mock.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. + */ + +import { + ResolverRelatedEvents, + ResolverTree, + ResolverEntityIndex, +} from '../../../../common/endpoint/types'; +import { mockTreeWithNoProcessEvents } from '../../mocks/resolver_tree'; +import { DataAccessLayer } from '../../types'; + +type EmptiableRequests = 'relatedEvents' | 'resolverTree' | 'entities' | 'indexPatterns'; + +interface Metadata { + /** + * The `_id` of the document being analyzed. + */ + databaseDocumentID: string; + /** + * A record of entityIDs to be used in tests assertions. + */ + entityIDs: T; +} + +/** + * A simple mock dataAccessLayer that allows you to control whether a request comes back with data or empty. + */ +export function emptifyMock( + { + metadata, + dataAccessLayer, + }: { + dataAccessLayer: DataAccessLayer; + metadata: Metadata; + }, + dataShouldBeEmpty: EmptiableRequests[] +): { + dataAccessLayer: DataAccessLayer; + metadata: Metadata; +} { + return { + metadata, + dataAccessLayer: { + /** + * Fetch related events for an entity ID + */ + async relatedEvents(...args): Promise { + return dataShouldBeEmpty.includes('relatedEvents') + ? Promise.resolve({ + entityID: args[0], + events: [], + nextEvent: null, + }) + : dataAccessLayer.relatedEvents(...args); + }, + + /** + * Fetch a ResolverTree for a entityID + */ + async resolverTree(...args): Promise { + return dataShouldBeEmpty.includes('resolverTree') + ? Promise.resolve(mockTreeWithNoProcessEvents()) + : dataAccessLayer.resolverTree(...args); + }, + + /** + * Get an array of index patterns that contain events. + */ + indexPatterns(...args): string[] { + return dataShouldBeEmpty.includes('indexPatterns') + ? [] + : dataAccessLayer.indexPatterns(...args); + }, + + /** + * Get entities matching a document. + */ + async entities(...args): Promise { + return dataShouldBeEmpty.includes('entities') + ? Promise.resolve([]) + : dataAccessLayer.entities(...args); + }, + }, + }; +} diff --git a/x-pack/plugins/security_solution/public/resolver/data_access_layer/mocks/pausify_mock.ts b/x-pack/plugins/security_solution/public/resolver/data_access_layer/mocks/pausify_mock.ts new file mode 100644 index 0000000000000..baddcdfd0cd84 --- /dev/null +++ b/x-pack/plugins/security_solution/public/resolver/data_access_layer/mocks/pausify_mock.ts @@ -0,0 +1,124 @@ +/* + * 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 { DataAccessLayer } from '../../types'; + +type PausableRequests = 'relatedEvents' | 'resolverTree' | 'entities'; + +interface Metadata { + /** + * The `_id` of the document being analyzed. + */ + databaseDocumentID: string; + /** + * A record of entityIDs to be used in tests assertions. + */ + entityIDs: T; +} + +/** + * A simple mock dataAccessLayer that allows you to manually pause and resume a request. + */ +export function pausifyMock({ + metadata, + dataAccessLayer, +}: { + dataAccessLayer: DataAccessLayer; + metadata: Metadata; +}): { + dataAccessLayer: DataAccessLayer; + metadata: Metadata; + pause: (pausableRequests: PausableRequests[]) => void; + resume: (pausableRequests: PausableRequests[]) => void; +} { + let relatedEventsPromise = Promise.resolve(); + let resolverTreePromise = Promise.resolve(); + let entitiesPromise = Promise.resolve(); + + let relatedEventsResolver: (() => void) | null; + let resolverTreeResolver: (() => void) | null; + let entitiesResolver: (() => void) | null; + + return { + metadata, + pause: (pausableRequests: PausableRequests[]) => { + const pauseRelatedEventsRequest = pausableRequests.includes('relatedEvents'); + const pauseResolverTreeRequest = pausableRequests.includes('resolverTree'); + const pauseEntitiesRequest = pausableRequests.includes('entities'); + + if (pauseRelatedEventsRequest && !relatedEventsResolver) { + relatedEventsPromise = new Promise((resolve) => { + relatedEventsResolver = resolve; + }); + } + if (pauseResolverTreeRequest && !resolverTreeResolver) { + resolverTreePromise = new Promise((resolve) => { + resolverTreeResolver = resolve; + }); + } + if (pauseEntitiesRequest && !entitiesResolver) { + entitiesPromise = new Promise((resolve) => { + entitiesResolver = resolve; + }); + } + }, + resume: (pausableRequests: PausableRequests[]) => { + const resumeEntitiesRequest = pausableRequests.includes('entities'); + const resumeResolverTreeRequest = pausableRequests.includes('resolverTree'); + const resumeRelatedEventsRequest = pausableRequests.includes('relatedEvents'); + + if (resumeEntitiesRequest && entitiesResolver) { + entitiesResolver(); + entitiesResolver = null; + } + if (resumeResolverTreeRequest && resolverTreeResolver) { + resolverTreeResolver(); + resolverTreeResolver = null; + } + if (resumeRelatedEventsRequest && relatedEventsResolver) { + relatedEventsResolver(); + relatedEventsResolver = null; + } + }, + dataAccessLayer: { + /** + * Fetch related events for an entity ID + */ + async relatedEvents(...args): Promise { + await relatedEventsPromise; + return dataAccessLayer.relatedEvents(...args); + }, + + /** + * Fetch a ResolverTree for a entityID + */ + async resolverTree(...args): Promise { + await resolverTreePromise; + return dataAccessLayer.resolverTree(...args); + }, + + /** + * Get an array of index patterns that contain events. + */ + indexPatterns(...args): string[] { + return dataAccessLayer.indexPatterns(...args); + }, + + /** + * Get entities matching a document. + */ + async entities(...args): Promise { + await entitiesPromise; + return dataAccessLayer.entities(...args); + }, + }, + }; +} 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 index df8f32d15a7ab..aa04221361de0 100644 --- 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 @@ -44,7 +44,7 @@ expect.extend({ const received: T[] = []; // Set to true if the test passes. - let pass: boolean = false; + let lastCheckPassed: boolean = false; // Async iterate over the iterable for await (const next of receivedIterable) { @@ -52,15 +52,17 @@ expect.extend({ 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; + lastCheckPassed = true; + } else if (lastCheckPassed) { + // the previous check passed but this one didn't + lastCheckPassed = false; 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 + const message = lastCheckPassed ? () => `${this.utils.matcherHint(matcherName, undefined, undefined, options)}\n\n` + `Expected: not ${this.utils.printExpected(expected)}\n${ @@ -84,7 +86,7 @@ expect.extend({ ) .join(`\n\n`)}`; - return { message, pass }; + return { message, pass: lastCheckPassed }; }, /** * A custom matcher that takes an async generator and compares each value it yields to an expected value. 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 index 358fcd17b998a..1e5ac093cac77 100644 --- a/x-pack/plugins/security_solution/public/resolver/view/clickthrough.test.tsx +++ b/x-pack/plugins/security_solution/public/resolver/view/clickthrough.test.tsx @@ -242,6 +242,7 @@ describe('Resolver, when analyzing a tree that has two related events for the or ); if (button) { button.simulate('click'); + button.simulate('click'); // The first click opened the menu, this second click closes it } }); it('should close the submenu', async () => { diff --git a/x-pack/plugins/security_solution/public/resolver/view/resolver_loading_state.test.tsx b/x-pack/plugins/security_solution/public/resolver/view/resolver_loading_state.test.tsx new file mode 100644 index 0000000000000..c357ee18acfeb --- /dev/null +++ b/x-pack/plugins/security_solution/public/resolver/view/resolver_loading_state.test.tsx @@ -0,0 +1,167 @@ +/* + * 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 { Simulator } from '../test_utilities/simulator'; +import { pausifyMock } from '../data_access_layer/mocks/pausify_mock'; +import { emptifyMock } from '../data_access_layer/mocks/emptify_mock'; +import { noAncestorsTwoChildren } from '../data_access_layer/mocks/no_ancestors_two_children'; +import '../test_utilities/extend_jest'; + +describe('Resolver: data loading and resolution states', () => { + let simulator: Simulator; + const resolverComponentInstanceID = 'resolver-loading-resolution-states'; + + describe('When entities data is being requested', () => { + beforeEach(() => { + const { + metadata: { databaseDocumentID }, + dataAccessLayer, + pause, + } = pausifyMock(noAncestorsTwoChildren()); + pause(['entities']); + simulator = new Simulator({ + dataAccessLayer, + databaseDocumentID, + resolverComponentInstanceID, + }); + }); + + it('should display a loading state', async () => { + await expect( + simulator.map(() => ({ + resolverGraphLoading: simulator.testSubject('resolver:graph:loading').length, + resolverGraphError: simulator.testSubject('resolver:graph:error').length, + resolverGraph: simulator.testSubject('resolver:graph').length, + })) + ).toYieldEqualTo({ + resolverGraphLoading: 1, + resolverGraphError: 0, + resolverGraph: 0, + }); + }); + }); + + describe('When resolver tree data is being requested', () => { + beforeEach(() => { + const { + metadata: { databaseDocumentID }, + dataAccessLayer, + pause, + } = pausifyMock(noAncestorsTwoChildren()); + pause(['resolverTree']); + simulator = new Simulator({ + dataAccessLayer, + databaseDocumentID, + resolverComponentInstanceID, + }); + }); + + it('should display a loading state', async () => { + await expect( + simulator.map(() => ({ + resolverGraphLoading: simulator.testSubject('resolver:graph:loading').length, + resolverGraphError: simulator.testSubject('resolver:graph:error').length, + resolverGraph: simulator.testSubject('resolver:graph').length, + })) + ).toYieldEqualTo({ + resolverGraphLoading: 1, + resolverGraphError: 0, + resolverGraph: 0, + }); + }); + }); + + describe("When the entities request doesn't return any data", () => { + beforeEach(() => { + const { + metadata: { databaseDocumentID }, + dataAccessLayer, + } = emptifyMock(noAncestorsTwoChildren(), ['entities']); + + simulator = new Simulator({ + dataAccessLayer, + databaseDocumentID, + resolverComponentInstanceID, + }); + }); + + it('should display an error', async () => { + await expect( + simulator.map(() => ({ + resolverGraphLoading: simulator.testSubject('resolver:graph:loading').length, + resolverGraphError: simulator.testSubject('resolver:graph:error').length, + resolverGraph: simulator.testSubject('resolver:graph').length, + })) + ).toYieldEqualTo({ + resolverGraphLoading: 0, + resolverGraphError: 1, + resolverGraph: 0, + }); + }); + }); + + describe("When the resolver tree request doesn't return any data", () => { + beforeEach(() => { + const { + metadata: { databaseDocumentID }, + dataAccessLayer, + } = emptifyMock(noAncestorsTwoChildren(), ['resolverTree']); + + simulator = new Simulator({ + dataAccessLayer, + databaseDocumentID, + resolverComponentInstanceID, + }); + }); + + it('should display a resolver graph with 0 nodes', async () => { + await expect( + simulator.map(() => ({ + resolverGraphLoading: simulator.testSubject('resolver:graph:loading').length, + resolverGraphError: simulator.testSubject('resolver:graph:error').length, + resolverGraph: simulator.testSubject('resolver:graph').length, + resolverGraphNodes: simulator.testSubject('resolver:node').length, + })) + ).toYieldEqualTo({ + resolverGraphLoading: 0, + resolverGraphError: 0, + resolverGraph: 1, + resolverGraphNodes: 0, + }); + }); + }); + + describe('When all resolver data requests successfully resolve', () => { + beforeEach(async () => { + const { + metadata: { databaseDocumentID }, + dataAccessLayer, + } = noAncestorsTwoChildren(); + + simulator = new Simulator({ + dataAccessLayer, + databaseDocumentID, + resolverComponentInstanceID, + }); + }); + + it('should display the resolver graph with 3 nodes', async () => { + await expect( + simulator.map(() => ({ + resolverGraphLoading: simulator.testSubject('resolver:graph:loading').length, + resolverGraphError: simulator.testSubject('resolver:graph:error').length, + resolverGraph: simulator.testSubject('resolver:graph').length, + resolverGraphNodes: simulator.testSubject('resolver:node').length, + })) + ).toYieldEqualTo({ + resolverGraphLoading: 0, + resolverGraphError: 0, + resolverGraph: 1, + resolverGraphNodes: 3, + }); + }); + }); +});