[Security Solution] Move Endpoint details flyout and related middlewa…

…re to their own functions (#108330)

* Split function to load endpoint details using parameters

* Add action to load endpoint details

* Moving all the endpoint details content to a separate component

* Rename endpoint details to endpoint details content

* Rename temporal file into EndpointDetails

* Remove unused dispatch

* Refactor ingestPolicies dispatching in the middleware

x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/action.ts

@@ -166,6 +166,13 @@ export interface EndpointDetailsActivityLogUpdatePaging {
   };
 }
 
+export interface EndpointDetailsLoad {
+  type: 'endpointDetailsLoad';
+  payload: {
+    endpointId: string;
+  };
+}
+
 export interface EndpointDetailsActivityLogUpdateIsInvalidDateRange {
   type: 'endpointDetailsActivityLogUpdateIsInvalidDateRange';
   payload: {
@@ -187,6 +194,7 @@ export type EndpointAction =
   | EndpointDetailsActivityLogUpdatePaging
   | EndpointDetailsActivityLogUpdateIsInvalidDateRange
   | EndpointDetailsActivityLogChanged
+  | EndpointDetailsLoad
   | ServerReturnedEndpointPolicyResponse
   | ServerFailedToReturnEndpointPolicyResponse
   | ServerReturnedPoliciesForOnboarding

x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/middleware.ts

@@ -115,6 +115,10 @@ export const endpointMiddlewareFactory: ImmutableMiddlewareFactory<EndpointState
       endpointDetailsMiddleware({ store, coreStart });
     }
 
+    if (action.type === 'endpointDetailsLoad') {
+      loadEndpointDetails({ store, coreStart, selectedEndpoint: action.payload.endpointId });
+    }
+
     if (
       action.type === 'userChangedUrl' &&
       hasSelectedEndpoint(getState()) === true &&
@@ -420,30 +424,7 @@ async function endpointDetailsListMiddleware({
       });
     }
 
-    try {
-      const ingestPolicies = await getAgentAndPoliciesForEndpointsList(
-        coreStart.http,
-        endpointResponse.hosts,
-        nonExistingPolicies(getState())
-      );
-      if (ingestPolicies?.packagePolicy !== undefined) {
-        dispatch({
-          type: 'serverReturnedEndpointNonExistingPolicies',
-          payload: ingestPolicies.packagePolicy,
-        });
-      }
-      if (ingestPolicies?.agentPolicy !== undefined) {
-        dispatch({
-          type: 'serverReturnedEndpointAgentPolicies',
-          payload: ingestPolicies.agentPolicy,
-        });
-      }
-    } catch (error) {
-      // TODO should handle the error instead of logging it to the browser
-      // Also this is an anti-pattern we shouldn't use
-      // Ignore Errors, since this should not hinder the user's ability to use the UI
-      logError(error);
-    }
+    dispatchIngestPolicies({ http: coreStart.http, hosts: endpointResponse.hosts, store });
   } catch (error) {
     dispatch({
       type: 'serverFailedToReturnEndpointList',
@@ -613,71 +594,17 @@ async function endpointDetailsActivityLogPagingMiddleware({
   }
 }
 
-async function endpointDetailsMiddleware({
+async function loadEndpointDetails({
+  selectedEndpoint,
   store,
   coreStart,
 }: {
   store: ImmutableMiddlewareAPI<EndpointState, AppAction>;
   coreStart: CoreStart;
+  selectedEndpoint: string;
 }) {
   const { getState, dispatch } = store;
-  dispatch({
-    type: 'serverCancelledPolicyItemsLoading',
-  });
-
-  // If user navigated directly to a endpoint details page, load the endpoint list
-  if (listData(getState()).length === 0) {
-    const { page_index: pageIndex, page_size: pageSize } = uiQueryParams(getState());
-    try {
-      const response = await coreStart.http.post(HOST_METADATA_LIST_ROUTE, {
-        body: JSON.stringify({
-          paging_properties: [{ page_index: pageIndex }, { page_size: pageSize }],
-        }),
-      });
-      response.request_page_index = Number(pageIndex);
-      dispatch({
-        type: 'serverReturnedEndpointList',
-        payload: response,
-      });
-
-      try {
-        const ingestPolicies = await getAgentAndPoliciesForEndpointsList(
-          coreStart.http,
-          response.hosts,
-          nonExistingPolicies(getState())
-        );
-        if (ingestPolicies?.packagePolicy !== undefined) {
-          dispatch({
-            type: 'serverReturnedEndpointNonExistingPolicies',
-            payload: ingestPolicies.packagePolicy,
-          });
-        }
-        if (ingestPolicies?.agentPolicy !== undefined) {
-          dispatch({
-            type: 'serverReturnedEndpointAgentPolicies',
-            payload: ingestPolicies.agentPolicy,
-          });
-        }
-      } catch (error) {
-        // TODO should handle the error instead of logging it to the browser
-        // Also this is an anti-pattern we shouldn't use
-        // Ignore Errors, since this should not hinder the user's ability to use the UI
-        logError(error);
-      }
-    } catch (error) {
-      dispatch({
-        type: 'serverFailedToReturnEndpointList',
-        payload: error,
-      });
-    }
-  } else {
-    dispatch({
-      type: 'serverCancelledEndpointListLoading',
-    });
-  }
-
   // call the endpoint details api
-  const { selected_endpoint: selectedEndpoint } = uiQueryParams(getState());
   try {
     const response = await coreStart.http.get<HostInfo>(
       resolvePathVariables(HOST_METADATA_GET_ROUTE, { id: selectedEndpoint as string })
@@ -736,6 +663,51 @@ async function endpointDetailsMiddleware({
     });
   }
 }
+
+async function endpointDetailsMiddleware({
+  store,
+  coreStart,
+}: {
+  store: ImmutableMiddlewareAPI<EndpointState, AppAction>;
+  coreStart: CoreStart;
+}) {
+  const { getState, dispatch } = store;
+  dispatch({
+    type: 'serverCancelledPolicyItemsLoading',
+  });
+
+  // If user navigated directly to a endpoint details page, load the endpoint list
+  if (listData(getState()).length === 0) {
+    const { page_index: pageIndex, page_size: pageSize } = uiQueryParams(getState());
+    try {
+      const response = await coreStart.http.post(HOST_METADATA_LIST_ROUTE, {
+        body: JSON.stringify({
+          paging_properties: [{ page_index: pageIndex }, { page_size: pageSize }],
+        }),
+      });
+      response.request_page_index = Number(pageIndex);
+      dispatch({
+        type: 'serverReturnedEndpointList',
+        payload: response,
+      });
+
+      dispatchIngestPolicies({ http: coreStart.http, hosts: response.hosts, store });
+    } catch (error) {
+      dispatch({
+        type: 'serverFailedToReturnEndpointList',
+        payload: error,
+      });
+    }
+  } else {
+    dispatch({
+      type: 'serverCancelledEndpointListLoading',
+    });
+  }
+  const { selected_endpoint: selectedEndpoint } = uiQueryParams(getState());
+  if (selectedEndpoint !== undefined) {
+    loadEndpointDetails({ store, coreStart, selectedEndpoint });
+  }
+}
 async function endpointDetailsActivityLogChangedMiddleware({
   store,
   coreStart,
@@ -803,3 +775,39 @@ export async function handleLoadMetadataTransformStats(http: HttpStart, store: E
     });
   }
 }
+
+async function dispatchIngestPolicies({
+  store,
+  hosts,
+  http,
+}: {
+  store: EndpointPageStore;
+  hosts: HostResultList['hosts'];
+  http: HttpStart;
+}) {
+  const { getState, dispatch } = store;
+  try {
+    const ingestPolicies = await getAgentAndPoliciesForEndpointsList(
+      http,
+      hosts,
+      nonExistingPolicies(getState())
+    );
+    if (ingestPolicies?.packagePolicy !== undefined) {
+      dispatch({
+        type: 'serverReturnedEndpointNonExistingPolicies',
+        payload: ingestPolicies.packagePolicy,
+      });
+    }
+    if (ingestPolicies?.agentPolicy !== undefined) {
+      dispatch({
+        type: 'serverReturnedEndpointAgentPolicies',
+        payload: ingestPolicies.agentPolicy,
+      });
+    }
+  } catch (error) {
+    // TODO should handle the error instead of logging it to the browser
+    // Also this is an anti-pattern we shouldn't use
+    // Ignore Errors, since this should not hinder the user's ability to use the UI
+    logError(error);
+  }
+}