[7.x] [Security_Solution][Resolver] Resolver loading and error state (#…

…75600) (#76192)

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

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<T> {
+ /**
+ * 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<T>(
+ {
+ metadata,
+ dataAccessLayer,
+ }: {
+ dataAccessLayer: DataAccessLayer;
+ metadata: Metadata<T>;
+ },
+ dataShouldBeEmpty: EmptiableRequests[]
+): {
+ dataAccessLayer: DataAccessLayer;
+ metadata: Metadata<T>;
+} {
+ return {
+ metadata,
+ dataAccessLayer: {
+ /**
+ * Fetch related events for an entity ID
+ */
+ async relatedEvents(...args): Promise<ResolverRelatedEvents> {
+ 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<ResolverTree> {
+ 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<ResolverEntityIndex> {
+ return dataShouldBeEmpty.includes('entities')
+ ? Promise.resolve([])
+ : dataAccessLayer.entities(...args);
+ },
+ },
+ };
+}

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<T> {
+ /**
+ * 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<T>({
+ metadata,
+ dataAccessLayer,
+}: {
+ dataAccessLayer: DataAccessLayer;
+ metadata: Metadata<T>;
+}): {
+ dataAccessLayer: DataAccessLayer;
+ metadata: Metadata<T>;
+ 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<ResolverRelatedEvents> {
+ await relatedEventsPromise;
+ return dataAccessLayer.relatedEvents(...args);
+ },
+
+ /**
+ * Fetch a ResolverTree for a entityID
+ */
+ async resolverTree(...args): Promise<ResolverTree> {
+ 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<ResolverEntityIndex> {
+ await entitiesPromise;
+ return dataAccessLayer.entities(...args);
+ },
+ },
+ };
+}

x-pack/plugins/security_solution/public/resolver/test_utilities/extend_jest.ts

@@ -44,23 +44,25 @@ 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) {
  // 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;
+ 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.

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 () => {