[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/store/data/action.ts

@@ -34,6 +34,42 @@ interface AppRequestedResolverData {
   readonly payload: TreeFetcherParameters;
 }
 
+interface AppRequestedRelatedEventData {
+  readonly type: 'appRequestedRelatedEventData';
+
+  readonly payload: {};
+}
+
+interface UserRequestedAdditionalRelatedEvents {
+  readonly type: 'userRequestedAdditionalRelatedEvents';
+  readonly payload: {};
+}
+
+interface AppRequestedAdditionalRelatedEvents {
+  readonly type: 'appRequestedAdditionalRelatedEvents';
+  readonly payload: {};
+}
+
+interface ServerFailedToReturnNodeEventsInCategory {
+  readonly type: 'serverFailedToReturnNodeEventsInCategory';
+}
+
+/**
+ * When an additional page of related events is returned
+ */
+interface ServerReturnedAdditionalRelatedEventData {
+  readonly type: 'serverReturnedAdditionalRelatedEventData';
+  readonly payload: ResolverRelatedEvents;
+}
+
+interface ServerFailedToReturnAdditionalRelatedEventData {
+  readonly type: 'serverFailedToReturnAdditionalRelatedEventData';
+  /**
+   * entity ID used to make the failed request
+   */
+  readonly payload: TreeFetcherParameters;
+}
+
 interface ServerFailedToReturnResolverData {
   readonly type: 'serverFailedToReturnResolverData';
   /**
@@ -101,4 +137,10 @@ export type DataAction =
   | ServerReturnedRelatedEventData
   | ServerReturnedNodeEventsInCategory
   | AppRequestedResolverData
+  | AppRequestedRelatedEventData
+  | UserRequestedAdditionalRelatedEvents
+  | AppRequestedAdditionalRelatedEvents
+  | ServerFailedToReturnAdditionalRelatedEventData
+  | ServerReturnedAdditionalRelatedEventData
+  | ServerFailedToReturnNodeEventsInCategory
   | AppAbortedResolverDataRequest;

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 = {
@@ -140,6 +140,9 @@ export const dataReducer: Reducer<DataState, ResolverAction> = (state = initialS
             ...state,
             nodeEventsInCategory: updated,
           };
+          if (next.nodeEventsInCategory) {
+            next.nodeEventsInCategory.loading = false;
+          }
           return next;
         } else {
           // this should never happen. This reducer ensures that any `nodeEventsInCategory` that are in state are relevant to the `panelViewAndParameters`.
@@ -151,12 +154,28 @@ export const dataReducer: Reducer<DataState, ResolverAction> = (state = initialS
           ...state,
           nodeEventsInCategory: action.payload,
         };
+        if (next.nodeEventsInCategory) {
+          next.nodeEventsInCategory.loading = false;
+        }
         return next;
       }
     } else {
       // the action is stale, ignore it
       return state;
     }
+  } else if (action.type === 'appRequestedAdditionalRelatedEvents') {
+    const nextState: DataState = {
+      ...state,
+      nodeEventsInCategory: {
+        nodeID: '',
+        eventCategory: '',
+        events: [],
+        cursor: null,
+        ...state.nodeEventsInCategory,
+        loading: true,
+      },
+    };
+    return nextState;
   } else if (action.type === 'appRequestedCurrentRelatedEventData') {
     const nextState: DataState = {
       ...state,

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

@@ -665,3 +665,11 @@ export const panelViewAndParameters = createSelector(
 export const nodeEventsInCategory = (state: DataState) => {
   return state.nodeEventsInCategory?.events ?? [];
 };
+
+export const nodeEventsInCategoryAreLoading = (state: DataState) => {
+  return state.nodeEventsInCategory?.loading ?? false;
+};
+
+export const nodeEventsInCategoryNextCursor = (state: DataState) => {
+  return state.nodeEventsInCategory?.cursor ?? null;
+};

x-pack/plugins/security_solution/public/resolver/store/middleware/index.ts

@@ -33,7 +33,7 @@ export const resolverMiddlewareFactory: MiddlewareFactory = (dataAccessLayer: Da
       next(action);
 
       resolverTreeFetcher();
-      relatedEventsFetcher();
+      relatedEventsFetcher(action);
       currentRelatedEventFetcher();
     };
   };

x-pack/plugins/security_solution/public/resolver/store/middleware/related_events_fetcher.ts

@@ -15,13 +15,13 @@ import { ResolverAction } from '../actions';
 export function RelatedEventsFetcher(
   dataAccessLayer: DataAccessLayer,
   api: MiddlewareAPI<Dispatch<ResolverAction>, ResolverState>
-): () => void {
+): (action: ResolverAction) => void {
   let last: PanelViewAndParameters | undefined;
 
   // Call this after each state change.
   // This fetches the ResolverTree for the current entityID
   // if the entityID changes while
-  return async () => {
+  return async (action: ResolverAction) => {
     const state = api.getState();
 
     const newParams = selectors.panelViewAndParameters(state);
@@ -66,6 +66,43 @@ export function RelatedEventsFetcher(
           });
         }
       }
+    } else if (action.type === 'userRequestedAdditionalRelatedEvents') {
+      const nodeEventsInCategory = state.data.nodeEventsInCategory;
+      if (nodeEventsInCategory !== undefined) {
+        api.dispatch({
+          type: 'appRequestedAdditionalRelatedEvents',
+          payload: {},
+        });
+        const { nodeID, eventCategory, cursor } = nodeEventsInCategory;
+        let result: ResolverPaginatedEvents | null = null;
+        try {
+          if (cursor) {
+            result = await dataAccessLayer.eventsWithEntityIDAndCategory(
+              nodeID,
+              eventCategory,
+              cursor
+            );
+          } else {
+            result = await dataAccessLayer.eventsWithEntityIDAndCategory(nodeID, eventCategory);
+          }
+        } catch (error) {
+          api.dispatch({
+            type: 'serverFailedToReturnNodeEventsInCategory',
+          });
+        }
+
+        if (result) {
+          api.dispatch({
+            type: 'serverReturnedNodeEventsInCategory',
+            payload: {
+              events: result.events,
+              eventCategory,
+              cursor: result.nextEvent,
+              nodeID,
+            },
+          });
+        }
+      }
     }
   };
 }

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

@@ -320,6 +320,16 @@ export const ariaFlowtoNodeID: (
   }
 );
 
+export const nodeEventsInCategoryAreLoading = composeSelectors(
+  dataStateSelector,
+  dataSelectors.nodeEventsInCategoryAreLoading
+);
+
+export const nodeEventsInCategoryNextCursor = composeSelectors(
+  dataStateSelector,
+  dataSelectors.nodeEventsInCategoryNextCursor
+);
+
 export const panelViewAndParameters = composeSelectors(
   uiStateSelector,
   uiSelectors.panelViewAndParameters

x-pack/plugins/security_solution/public/resolver/types.ts

@@ -227,6 +227,8 @@ export interface NodeEventsInCategoryState {
    * The cursor, if any, that can be used to retrieve more events.
    */
   cursor: null | string;
+
+  loading?: boolean;
 }
 
 /**

x-pack/plugins/security_solution/public/resolver/view/panels/node_events_of_type.tsx

@@ -4,11 +4,16 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-/* eslint-disable react/display-name */
-
-import React, { memo, Fragment } from 'react';
+import React, { memo, useCallback, Fragment } from 'react';
 import { i18n } from '@kbn/i18n';
-import { EuiSpacer, EuiText, EuiButtonEmpty, EuiHorizontalRule } from '@elastic/eui';
+import {
+  EuiSpacer,
+  EuiText,
+  EuiButtonEmpty,
+  EuiHorizontalRule,
+  EuiFlexItem,
+  EuiButton,
+} from '@elastic/eui';
 import { useSelector } from 'react-redux';
 import { FormattedMessage } from 'react-intl';
 import { StyledPanel } from '../styles';
@@ -21,6 +26,7 @@ import { ResolverState } from '../../types';
 import { PanelLoading } from './panel_loading';
 import { DescriptiveName } from './descriptive_name';
 import { useLinkProps } from '../use_link_props';
+import { useResolverDispatch } from '../use_resolver_dispatch';
 import { useFormattedDate } from './use_formatted_date';
 
 /**
@@ -67,6 +73,8 @@ export const NodeEventsInCategory = memo(function ({
   );
 });
 
+NodeEventsInCategory.displayName = 'NodeEventsInCategory';
+
 /**
  * Rendered for each event in the list.
  */
@@ -136,6 +144,15 @@ const NodeEventList = memo(function NodeEventList({
   events: SafeResolverEvent[];
   nodeID: string;
 }) {
+  const dispatch = useResolverDispatch();
+  const handleLoadMore = useCallback(() => {
+    dispatch({
+      type: 'userRequestedAdditionalRelatedEvents',
+      payload: {},
+    });
+  }, [dispatch]);
+  const isLoading = useSelector(selectors.nodeEventsInCategoryAreLoading);
+  const hasMore = useSelector(selectors.nodeEventsInCategoryNextCursor);
   return (
     <>
       {events.map((event, index) => (
@@ -144,6 +161,13 @@ const NodeEventList = memo(function NodeEventList({
           {index === events.length - 1 ? null : <EuiHorizontalRule margin="m" />}
         </Fragment>
       ))}
+      {hasMore && (
+        <EuiFlexItem grow={false}>
+          <EuiButton color={'primary'} size="s" fill onClick={handleLoadMore} isLoading={isLoading}>
+            {'Load More Data'}
+          </EuiButton>
+        </EuiFlexItem>
+      )}
     </>
   );
 });