[Security Solution][Resolver] Resolver query panel load more

x-pack/plugins/security_solution/public/resolver/data_access_layer/factory.ts

@@ -50,7 +50,7 @@ export function dataAccessLayerFactory(
       after?: string
     ): Promise<ResolverPaginatedEvents> {
       return context.services.http.post('/api/endpoint/resolver/events', {
-        query: { afterEvent: after },
+        query: { afterEvent: after, limit: 25 },
         body: JSON.stringify({
           filter: `process.entity_id:"${entityID}" and event.category:"${category}"`,
         }),

x-pack/plugins/security_solution/public/resolver/data_access_layer/mocks/one_node_with_paginated_related_events.ts

@@ -0,0 +1,110 @@
+/*
+ * 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 { DataAccessLayer } from '../../types';
+import { mockTreeWithOneNodeAndTwoPagesOfRelatedEvents } from '../../mocks/resolver_tree';
+import {
+  ResolverRelatedEvents,
+  ResolverTree,
+  ResolverEntityIndex,
+  SafeResolverEvent,
+} from '../../../../common/endpoint/types';
+import * as eventModel from '../../../../common/endpoint/models/event';
+
+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';
+  };
+}
+export function oneNodeWithPaginatedEvents(): {
+  dataAccessLayer: DataAccessLayer;
+  metadata: Metadata;
+} {
+  const metadata: Metadata = {
+    databaseDocumentID: '_id',
+    entityIDs: { origin: 'origin' },
+  };
+  const tree = mockTreeWithOneNodeAndTwoPagesOfRelatedEvents({
+    originID: metadata.entityIDs.origin,
+  });
+
+  return {
+    metadata,
+    dataAccessLayer: {
+      /**
+       * Fetch related events for an entity ID
+       */
+      async relatedEvents(entityID: string): Promise<ResolverRelatedEvents> {
+        /**
+         * Respond with the mocked related events when the origin's related events are fetched.
+         **/
+        const events = entityID === metadata.entityIDs.origin ? tree.relatedEvents.events : [];
+
+        return {
+          entityID,
+          events,
+          nextEvent: null,
+        };
+      },
+
+      /**
+       * If called with an "after" cursor, return the 2nd page, else return the first.
+       */
+      async eventsWithEntityIDAndCategory(
+        entityID: string,
+        category: string,
+        after?: string
+      ): Promise<{ events: SafeResolverEvent[]; nextEvent: string | null }> {
+        let events: SafeResolverEvent[] = [];
+        const eventsOfCategory = tree.relatedEvents.events.filter(
+          (event) => event.event?.category === category
+        );
+        if (after === undefined) {
+          events = eventsOfCategory.slice(0, 25);
+        } else {
+          events = eventsOfCategory.slice(25);
+        }
+        return {
+          events,
+          nextEvent: typeof after === 'undefined' ? 'firstEventPage2' : null,
+        };
+      },
+
+      /**
+       * Any of the origin's related events by event.id
+       */
+      async event(eventID: string): Promise<SafeResolverEvent | null> {
+        return (
+          tree.relatedEvents.events.find((event) => eventModel.eventID(event) === eventID) ?? null
+        );
+      },
+
+      /**
+       * Fetch a ResolverTree for a entityID
+       */
+      async resolverTree(): Promise<ResolverTree> {
+        return tree;
+      },
+
+      /**
+       * Get entities matching a document.
+       */
+      async entities(): Promise<ResolverEntityIndex> {
+        return [{ entity_id: metadata.entityIDs.origin }];
+      },
+    },
+  };
+}

x-pack/plugins/security_solution/public/resolver/mocks/resolver_tree.ts

@@ -8,6 +8,47 @@ import { mockEndpointEvent } from './endpoint_event';
 import { ResolverTree, SafeResolverEvent } from '../../../common/endpoint/types';
 import * as eventModel from '../../../common/endpoint/models/event';
 
+export function mockTreeWithOneNodeAndTwoPagesOfRelatedEvents({
+  originID,
+}: {
+  originID: string;
+}): ResolverTree {
+  const originEvent: SafeResolverEvent = mockEndpointEvent({
+    entityID: originID,
+    processName: 'c',
+    parentEntityID: undefined,
+    timestamp: 1600863932318,
+  });
+  const events = [];
+  // page size is currently 25
+  const eventsToGenerate = 30;
+  for (let i = 0; i < eventsToGenerate; i++) {
+    const newEvent = mockEndpointEvent({
+      entityID: originID,
+      eventID: 'test',
+      eventType: 'access',
+      eventCategory: 'registry',
+      timestamp: 1600863932318,
+    });
+    events.push(newEvent);
+  }
+  return {
+    entityID: originID,
+    children: {
+      childNodes: [],
+      nextChild: null,
+    },
+    ancestry: {
+      nextAncestor: null,
+      ancestors: [],
+    },
+    lifecycle: [originEvent],
+    relatedEvents: { events, nextEvent: null },
+    relatedAlerts: { alerts: [], nextAlert: null },
+    stats: { events: { total: eventsToGenerate, byCategory: {} }, totalAlerts: 0 },
+  };
+}
+
 export function mockTreeWith2AncestorsAndNoChildren({
   originID,
   firstAncestorID,

x-pack/plugins/security_solution/public/resolver/store/data/action.ts

@@ -34,6 +34,32 @@ interface AppRequestedResolverData {
   readonly payload: TreeFetcherParameters;
 }
 
+interface AppRequestedRelatedEventData {
+  readonly type: 'appRequestedRelatedEventData';
+}
+
+interface UserRequestedAdditionalRelatedEvents {
+  readonly type: 'userRequestedAdditionalRelatedEvents';
+}
+
+interface ServerFailedToReturnNodeEventsInCategory {
+  readonly type: 'serverFailedToReturnNodeEventsInCategory';
+  readonly payload: {
+    /**
+     * The cursor, if any, that can be used to retrieve more events.
+     */
+    cursor: string | null;
+    /**
+     * The nodeID that `events` are related to.
+     */
+    nodeID: string;
+    /**
+     * The category that `events` have in common.
+     */
+    eventCategory: string;
+  };
+}
+
 interface ServerFailedToReturnResolverData {
   readonly type: 'serverFailedToReturnResolverData';
   /**
@@ -101,4 +127,7 @@ export type DataAction =
   | ServerReturnedRelatedEventData
   | ServerReturnedNodeEventsInCategory
   | AppRequestedResolverData
+  | AppRequestedRelatedEventData
+  | UserRequestedAdditionalRelatedEvents
+  | ServerFailedToReturnNodeEventsInCategory
   | AppAbortedResolverDataRequest;

x-pack/plugins/security_solution/public/resolver/store/data/node_events_in_category_model.ts

@@ -39,6 +39,7 @@ export function updatedWith(
       eventCategory: first.eventCategory,
       events: [...first.events, ...second.events],
       cursor: second.cursor,
+      lastCursorRequested: null,
     };
   } else {
     return undefined;

x-pack/plugins/security_solution/public/resolver/store/data/reducer.ts

@@ -19,7 +19,7 @@ const initialState: DataState = {
   relatedEvents: new Map(),
   resolverComponentInstanceID: undefined,
 };
-
+/* eslint-disable complexity */
 export const dataReducer: Reducer<DataState, ResolverAction> = (state = initialState, action) => {
   if (action.type === 'appReceivedNewExternalProperties') {
     const nextState: DataState = {
@@ -157,6 +157,32 @@ export const dataReducer: Reducer<DataState, ResolverAction> = (state = initialS
       // the action is stale, ignore it
       return state;
     }
+  } else if (action.type === 'userRequestedAdditionalRelatedEvents') {
+    if (state.nodeEventsInCategory) {
+      const nextState: DataState = {
+        ...state,
+        nodeEventsInCategory: {
+          ...state.nodeEventsInCategory,
+          lastCursorRequested: state.nodeEventsInCategory?.cursor,
+        },
+      };
+      return nextState;
+    } else {
+      return state;
+    }
+  } else if (action.type === 'serverFailedToReturnNodeEventsInCategory') {
+    if (state.nodeEventsInCategory) {
+      const nextState: DataState = {
+        ...state,
+        nodeEventsInCategory: {
+          ...state.nodeEventsInCategory,
+          error: true,
+        },
+      };
+      return nextState;
+    } else {
+      return state;
+    }
   } else if (action.type === 'appRequestedCurrentRelatedEventData') {
     const nextState: DataState = {
       ...state,

x-pack/plugins/security_solution/public/resolver/store/data/selectors.ts

@@ -20,7 +20,7 @@ import {
 import { isGraphableProcess, isTerminatedProcess } from '../../models/process_event';
 import * as indexedProcessTreeModel from '../../models/indexed_process_tree';
 import * as eventModel from '../../../../common/endpoint/models/event';
-
+import * as nodeEventsInCategoryModel from './node_events_in_category_model';
 import {
   ResolverTree,
   ResolverNodeStats,
@@ -665,3 +665,74 @@ export const panelViewAndParameters = createSelector(
 export const nodeEventsInCategory = (state: DataState) => {
   return state.nodeEventsInCategory?.events ?? [];
 };
+
+export const userCanRequestMoreNodeEventsInCategory = createSelector(
+  (state: DataState) => state.nodeEventsInCategory,
+  panelViewAndParameters,
+  /* eslint-disable-next-line no-shadow */
+  function (nodeEventsInCategory, panelViewAndParameters) {
+    if (
+      nodeEventsInCategory !== undefined &&
+      nodeEventsInCategoryModel.isRelevantToPanelViewAndParameters(
+        nodeEventsInCategory,
+        panelViewAndParameters
+      )
+    ) {
+      return nodeEventsInCategory.cursor !== null;
+    } else {
+      return false;
+    }
+  }
+);
+
+export const hadErrorLoadingNodeEventsInCategory = createSelector(
+  (state: DataState) => state.nodeEventsInCategory,
+  panelViewAndParameters,
+  /* eslint-disable-next-line no-shadow */
+  function (nodeEventsInCategory, panelViewAndParameters) {
+    if (
+      nodeEventsInCategory !== undefined &&
+      nodeEventsInCategoryModel.isRelevantToPanelViewAndParameters(
+        nodeEventsInCategory,
+        panelViewAndParameters
+      )
+    ) {
+      return nodeEventsInCategory && nodeEventsInCategory.error === true;
+    } else {
+      return false;
+    }
+  }
+);
+
+export const isLoadingNodeEventsInCategory = createSelector(
+  (state: DataState) => state.nodeEventsInCategory,
+  panelViewAndParameters,
+  /* eslint-disable-next-line no-shadow */
+  function (nodeEventsInCategory, panelViewAndParameters) {
+    const { panelView } = panelViewAndParameters;
+    return panelView === 'nodeEventsInCategory' && nodeEventsInCategory === undefined;
+  }
+);
+
+export const isLoadingMoreNodeEventsInCategory = createSelector(
+  (state: DataState) => state.nodeEventsInCategory,
+  panelViewAndParameters,
+  /* eslint-disable-next-line no-shadow */
+  function (nodeEventsInCategory, panelViewAndParameters) {
+    if (
+      nodeEventsInCategory !== undefined &&
+      nodeEventsInCategoryModel.isRelevantToPanelViewAndParameters(
+        nodeEventsInCategory,
+        panelViewAndParameters
+      )
+    ) {
+      return (
+        nodeEventsInCategory &&
+        nodeEventsInCategory.lastCursorRequested !== null &&
+        nodeEventsInCategory.cursor === nodeEventsInCategory.lastCursorRequested
+      );
+    } else {
+      return false;
+    }
+  }
+);