[7.x] [Security Solution][Resolver] Request data from new event api (#78782) (#78862)

Author: michaelolo24

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

@@ -8,6 +8,7 @@ import {
   ResolverRelatedEvents,
   ResolverTree,
   SafeEndpointEvent,
+  SafeResolverEvent,
 } from '../../../../common/endpoint/types';
 import { TreeFetcherParameters } from '../../types';
 
@@ -78,10 +79,25 @@ interface ServerReturnedNodeEventsInCategory {
     eventCategory: string;
   };
 }
+interface AppRequestedCurrentRelatedEventData {
+  type: 'appRequestedCurrentRelatedEventData';
+}
+
+interface ServerFailedToReturnCurrentRelatedEventData {
+  type: 'serverFailedToReturnCurrentRelatedEventData';
+}
+
+interface ServerReturnedCurrentRelatedEventData {
+  readonly type: 'serverReturnedCurrentRelatedEventData';
+  readonly payload: SafeResolverEvent;
+}
 
 export type DataAction =
   | ServerReturnedResolverData
   | ServerFailedToReturnResolverData
+  | AppRequestedCurrentRelatedEventData
+  | ServerReturnedCurrentRelatedEventData
+  | ServerFailedToReturnCurrentRelatedEventData
   | ServerReturnedRelatedEventData
   | ServerReturnedNodeEventsInCategory
   | AppRequestedResolverData

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

@@ -12,6 +12,10 @@ import * as selectors from './selectors';
 import * as nodeEventsInCategoryModel from './node_events_in_category_model';
 
 const initialState: DataState = {
+  currentRelatedEvent: {
+    loading: false,
+    data: null,
+  },
   relatedEvents: new Map(),
   resolverComponentInstanceID: undefined,
 };
@@ -153,6 +157,33 @@ export const dataReducer: Reducer<DataState, ResolverAction> = (state = initialS
       // the action is stale, ignore it
       return state;
     }
+  } else if (action.type === 'appRequestedCurrentRelatedEventData') {
+    const nextState: DataState = {
+      ...state,
+      currentRelatedEvent: {
+        loading: true,
+        data: null,
+      },
+    };
+    return nextState;
+  } else if (action.type === 'serverReturnedCurrentRelatedEventData') {
+    const nextState: DataState = {
+      ...state,
+      currentRelatedEvent: {
+        loading: false,
+        data: action.payload,
+      },
+    };
+    return nextState;
+  } else if (action.type === 'serverFailedToReturnCurrentRelatedEventData') {
+    const nextState: DataState = {
+      ...state,
+      currentRelatedEvent: {
+        loading: false,
+        data: null,
+      },
+    };
+    return nextState;
   } else {
     return state;
   }

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

@@ -183,6 +183,27 @@ export function relatedEventsByEntityId(data: DataState): Map<string, ResolverRe
   return data.relatedEvents;
 }
 
+/**
+ *
+ *
+ * @export
+ * @param {DataState} state
+ * @returns the loading state of the current related event data for the `event_detail` view
+ */
+export function isCurrentRelatedEventLoading(state: DataState) {
+  return state.currentRelatedEvent.loading;
+}
+
+/**
+ *
+ *
+ * @export
+ * @param {DataState} state
+ * @returns {(SafeResolverEvent | null)} the current related event data for the `event_detail` view
+ */
+export function currentRelatedEventData(state: DataState): SafeResolverEvent | null {
+  return state.currentRelatedEvent.data;
+}
 /**
  * Get an event (from memory) by its `event.id`.
  * @deprecated Use the API to find events by ID

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

@@ -0,0 +1,67 @@
+/*
+ * 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 { Dispatch, MiddlewareAPI } from 'redux';
+import { isEqual } from 'lodash';
+import { SafeResolverEvent } from '../../../../common/endpoint/types';
+
+import { ResolverState, DataAccessLayer, PanelViewAndParameters } from '../../types';
+import * as selectors from '../selectors';
+import { ResolverAction } from '../actions';
+
+/**
+ *
+ * @description - This api is called after every state change.
+ * If the current view is the `eventDetail` view it will request the event details from the server.
+ * @export
+ * @param {DataAccessLayer} dataAccessLayer
+ * @param {MiddlewareAPI<Dispatch<ResolverAction>, ResolverState>} api
+ * @returns {() => void}
+ */
+export function CurrentRelatedEventFetcher(
+  dataAccessLayer: DataAccessLayer,
+  api: MiddlewareAPI<Dispatch<ResolverAction>, ResolverState>
+): () => void {
+  let last: PanelViewAndParameters | undefined;
+
+  return async () => {
+    const state = api.getState();
+
+    const newParams = selectors.panelViewAndParameters(state);
+
+    const oldParams = last;
+    last = newParams;
+
+    // If the panel view params have changed and the current panel view is the `eventDetail`, then fetch the event details for that eventID.
+    if (!isEqual(newParams, oldParams) && newParams.panelView === 'eventDetail') {
+      const currentEventID = newParams.panelParameters.eventID;
+
+      api.dispatch({
+        type: 'appRequestedCurrentRelatedEventData',
+      });
+
+      let result: SafeResolverEvent | undefined | null;
+      try {
+        result = await dataAccessLayer.event(currentEventID);
+      } catch (error) {
+        api.dispatch({
+          type: 'serverFailedToReturnCurrentRelatedEventData',
+        });
+      }
+
+      if (result) {
+        api.dispatch({
+          type: 'serverReturnedCurrentRelatedEventData',
+          payload: result,
+        });
+      } else {
+        api.dispatch({
+          type: 'serverFailedToReturnCurrentRelatedEventData',
+        });
+      }
+    }
+  };
+}

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

@@ -10,6 +10,7 @@ import { ResolverTreeFetcher } from './resolver_tree_fetcher';
 
 import { ResolverAction } from '../actions';
 import { RelatedEventsFetcher } from './related_events_fetcher';
+import { CurrentRelatedEventFetcher } from './current_related_event_fetcher';
 
 type MiddlewareFactory<S = ResolverState> = (
   dataAccessLayer: DataAccessLayer
@@ -27,11 +28,13 @@ export const resolverMiddlewareFactory: MiddlewareFactory = (dataAccessLayer: Da
   return (api) => (next) => {
     const resolverTreeFetcher = ResolverTreeFetcher(dataAccessLayer, api);
     const relatedEventsFetcher = RelatedEventsFetcher(dataAccessLayer, api);
+    const currentRelatedEventFetcher = CurrentRelatedEventFetcher(dataAccessLayer, api);
     return async (action: ResolverAction) => {
       next(action);
 
       resolverTreeFetcher();
       relatedEventsFetcher();
+      currentRelatedEventFetcher();
     };
   };
 };

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

@@ -138,6 +138,22 @@ export const relatedEventCountByCategory: (
   dataSelectors.relatedEventCountByCategory
 );
 
+/**
+ * the loading state of the current related event data for the `event_detail` view
+ */
+export const isCurrentRelatedEventLoading = composeSelectors(
+  dataStateSelector,
+  dataSelectors.isCurrentRelatedEventLoading
+);
+
+/**
+ * the current related event data for the `event_detail` view
+ */
+export const currentRelatedEventData = composeSelectors(
+  dataStateSelector,
+  dataSelectors.currentRelatedEventData
+);
+
 /**
  * Map of related events... by entity id
  * @deprecated

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

@@ -245,6 +245,15 @@ export interface DataState {
    */
   readonly nodeEventsInCategory?: NodeEventsInCategoryState;
 
+  /**
+   * Used when the panelView is `eventDetail`.
+   *
+   */
+  readonly currentRelatedEvent: {
+    loading: boolean;
+    data: SafeResolverEvent | null;
+  };
+
   readonly tree?: {
     /**
      * The parameters passed from the resolver properties

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

@@ -25,13 +25,21 @@ import { Breadcrumbs } from './breadcrumbs';
 import * as eventModel from '../../../../common/endpoint/models/event';
 import * as selectors from '../../store/selectors';
 import { PanelLoading } from './panel_loading';
+import { PanelContentError } from './panel_content_error';
 import { ResolverState } from '../../types';
 import { DescriptiveName } from './descriptive_name';
 import { useLinkProps } from '../use_link_props';
 import { SafeResolverEvent } from '../../../../common/endpoint/types';
 import { deepObjectEntries } from './deep_object_entries';
 import { useFormattedDate } from './use_formatted_date';
 
+const eventDetailRequestError = i18n.translate(
+  'xpack.securitySolution.resolver.panel.eventDetail.requestError',
+  {
+    defaultMessage: 'Event details were unable to be retrieved',
+  }
+);
+
 export const EventDetail = memo(function EventDetail({
   nodeID,
   eventID,
@@ -42,28 +50,31 @@ export const EventDetail = memo(function EventDetail({
   /** The event type to show in the breadcrumbs */
   eventCategory: string;
 }) {
-  const event = useSelector((state: ResolverState) =>
-    selectors.eventByID(state)({ nodeID, eventID })
-  );
+  const isEventLoading = useSelector(selectors.isCurrentRelatedEventLoading);
+  const isProcessTreeLoading = useSelector(selectors.isTreeLoading);
+
+  const isLoading = isEventLoading || isProcessTreeLoading;
+
+  const event = useSelector(selectors.currentRelatedEventData);
   const processEvent = useSelector((state: ResolverState) =>
     selectors.processEventForID(state)(nodeID)
   );
-  if (event && processEvent) {
-    return (
-      <EventDetailContents
-        nodeID={nodeID}
-        event={event}
-        processEvent={processEvent}
-        eventType={eventType}
-      />
-    );
-  } else {
-    return (
-      <StyledPanel>
-        <PanelLoading />
-      </StyledPanel>
-    );
-  }
+  return isLoading ? (
+    <StyledPanel>
+      <PanelLoading />
+    </StyledPanel>
+  ) : event ? (
+    <EventDetailContents
+      nodeID={nodeID}
+      event={event}
+      processEvent={processEvent}
+      eventType={eventType}
+    />
+  ) : (
+    <StyledPanel>
+      <PanelContentError translatedErrorMessage={eventDetailRequestError} />
+    </StyledPanel>
+  );
 });
 
 /**
@@ -82,16 +93,17 @@ const EventDetailContents = memo(function ({
    * Event type to use in the breadcrumbs
    */
   eventType: string;
-  processEvent: SafeResolverEvent;
+  processEvent: SafeResolverEvent | null;
 }) {
   const timestamp = eventModel.timestampSafeVersion(event);
   const formattedDate = useFormattedDate(timestamp) || noTimestampRetrievedText;
+  const nodeName = processEvent ? eventModel.processNameSafeVersion(processEvent) : null;
 
   return (
     <StyledPanel>
       <EventDetailBreadcrumbs
         nodeID={nodeID}
-        nodeName={eventModel.processNameSafeVersion(processEvent)}
+        nodeName={nodeName}
         event={event}
         breadcrumbEventCategory={eventType}
       />
@@ -188,7 +200,7 @@ function EventDetailBreadcrumbs({
   breadcrumbEventCategory,
 }: {
   nodeID: string;
-  nodeName?: string;
+  nodeName: string | null | undefined;
   event: SafeResolverEvent;
   breadcrumbEventCategory: string;
 }) {
@@ -217,7 +229,7 @@ function EventDetailBreadcrumbs({
     panelParameters: { nodeID, eventCategory: breadcrumbEventCategory },
   });
   const breadcrumbs = useMemo(() => {
-    return [
+    const crumbs = [
       {
         text: i18n.translate(
           'xpack.securitySolution.endpoint.resolver.panel.relatedEventDetail.events',
@@ -227,10 +239,6 @@ function EventDetailBreadcrumbs({
         ),
         ...nodesLinkNavProps,
       },
-      {
-        text: nodeName,
-        ...nodeDetailLinkNavProps,
-      },
       {
         text: (
           <FormattedMessage
@@ -255,6 +263,15 @@ function EventDetailBreadcrumbs({
         text: <DescriptiveName event={event} />,
       },
     ];
+
+    if (nodeName) {
+      crumbs.splice(1, 0, {
+        text: nodeName,
+        ...nodeDetailLinkNavProps,
+      });
+    }
+
+    return crumbs;
   }, [
     breadcrumbEventCategory,
     countByCategory,

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

@@ -48,7 +48,7 @@ export const PanelContentError = memo(function ({
       <EuiSpacer size="l" />
       <EuiButtonEmpty {...nodesLinkNavProps}>
         {i18n.translate('xpack.securitySolution.endpoint.resolver.panel.error.goBack', {
-          defaultMessage: 'Click this link to return to the list of all processes.',
+          defaultMessage: 'Click here to return to the list of all processes.',
         })}
       </EuiButtonEmpty>
     </>