[Security Solution] Show proper icon for termination status of all processes

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

@@ -105,6 +105,19 @@ export const terminatedProcesses = createSelector(resolverTreeResponse, function
   );
 });
 
+/**
+ * A function that given an entity id returns a boolean indicating if the id is in the set of terminated processes.
+ */
+export const isProcessTerminated = createSelector(terminatedProcesses, function (
+  /* eslint-disable no-shadow */
+  terminatedProcesses
+  /* eslint-enable no-shadow */
+) {
+  return (entityId: string) => {
+    return terminatedProcesses.has(entityId);
+  };
+});
+
 /**
  * Process events that will be graphed.
  */

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

@@ -53,6 +53,14 @@ export const userIsPanning = composeSelectors(cameraStateSelector, cameraSelecto
  */
 export const isAnimating = composeSelectors(cameraStateSelector, cameraSelectors.isAnimating);
 
+/**
+ * Whether or not a given entity id is in the set of termination events.
+ */
+export const isProcessTerminated = composeSelectors(
+  dataStateSelector,
+  dataSelectors.isProcessTerminated
+);
+
 /**
  * Given a nodeID (aka entity_id) get the indexed process event.
  * Legacy functions take process events instead of nodeID, use this to get

x-pack/plugins/security_solution/public/resolver/view/panel.tsx

@@ -162,19 +162,10 @@ const PanelContent = memo(function PanelContent() {
     return 'processListWithCounts';
   }, [uiSelectedEvent, crumbEvent, crumbId, graphableProcessEntityIds]);
 
-  const terminatedProcesses = useSelector(selectors.terminatedProcesses);
-  const processEntityId = uiSelectedEvent ? event.entityId(uiSelectedEvent) : undefined;
-  const isProcessTerminated = processEntityId ? terminatedProcesses.has(processEntityId) : false;
-
   const panelInstance = useMemo(() => {
     if (panelToShow === 'processDetails') {
       return (
-        <ProcessDetails
-          processEvent={uiSelectedEvent!}
-          pushToQueryParams={pushToQueryParams}
-          isProcessTerminated={isProcessTerminated}
-          isProcessOrigin={false}
-        />
+        <ProcessDetails processEvent={uiSelectedEvent!} pushToQueryParams={pushToQueryParams} />
       );
     }
 
@@ -213,21 +204,14 @@ const PanelContent = memo(function PanelContent() {
       );
     }
     // The default 'Event List' / 'List of all processes' view
-    return (
-      <ProcessListWithCounts
-        pushToQueryParams={pushToQueryParams}
-        isProcessTerminated={isProcessTerminated}
-        isProcessOrigin={false}
-      />
-    );
+    return <ProcessListWithCounts pushToQueryParams={pushToQueryParams} />;
   }, [
     uiSelectedEvent,
     crumbEvent,
     crumbId,
     pushToQueryParams,
     relatedStatsForIdFromParams,
     panelToShow,
-    isProcessTerminated,
   ]);
 
   return <>{panelInstance}</>;

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

@@ -4,6 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 import React, { memo, useMemo } from 'react';
+import { useSelector } from 'react-redux';
 import { i18n } from '@kbn/i18n';
 import {
   htmlIdGenerator,
@@ -15,6 +16,7 @@ import {
 } from '@elastic/eui';
 import styled from 'styled-components';
 import { FormattedMessage } from 'react-intl';
+import * as selectors from '../../store/selectors';
 import * as event from '../../../../common/endpoint/models/event';
 import { CrumbInfo, formatDate, StyledBreadcrumbs } from './panel_content_utilities';
 import {
@@ -41,16 +43,14 @@ const StyledDescriptionList = styled(EuiDescriptionList)`
  */
 export const ProcessDetails = memo(function ProcessDetails({
   processEvent,
-  isProcessTerminated,
-  isProcessOrigin,
   pushToQueryParams,
 }: {
   processEvent: ResolverEvent;
-  isProcessTerminated: boolean;
-  isProcessOrigin: boolean;
   pushToQueryParams: (queryStringKeyValuePair: CrumbInfo) => unknown;
 }) {
   const processName = event.eventName(processEvent);
+  const entityId = event.entityId(processEvent);
+  const isProcessTerminated = useSelector(selectors.isProcessTerminated)(entityId);
   const processInfoEntry = useMemo(() => {
     const eventTime = event.eventTimestamp(processEvent);
     const dateTime = eventTime ? formatDate(eventTime) : '';
@@ -151,8 +151,8 @@ export const ProcessDetails = memo(function ProcessDetails({
     if (!processEvent) {
       return { descriptionText: '' };
     }
-    return cubeAssetsForNode(isProcessTerminated, isProcessOrigin);
-  }, [processEvent, cubeAssetsForNode, isProcessTerminated, isProcessOrigin]);
+    return cubeAssetsForNode(isProcessTerminated, false);
+  }, [processEvent, cubeAssetsForNode, isProcessTerminated]);
 
   const titleId = useMemo(() => htmlIdGenerator('resolverTable')(), []);
   return (
@@ -161,10 +161,7 @@ export const ProcessDetails = memo(function ProcessDetails({
       <EuiSpacer size="l" />
       <EuiTitle size="xs">
         <h4 aria-describedby={titleId}>
-          <CubeForProcess
-            isProcessTerminated={isProcessTerminated}
-            isProcessOrigin={isProcessOrigin}
-          />
+          <CubeForProcess isProcessTerminated={isProcessTerminated} />
           {processName}
         </h4>
       </EuiTitle>

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

@@ -50,12 +50,8 @@ const StyledLimitWarning = styled(LimitWarning)`
  */
 export const ProcessListWithCounts = memo(function ProcessListWithCounts({
   pushToQueryParams,
-  isProcessTerminated,
-  isProcessOrigin,
 }: {
   pushToQueryParams: (queryStringKeyValuePair: CrumbInfo) => unknown;
-  isProcessTerminated: boolean;
-  isProcessOrigin: boolean;
 }) {
   interface ProcessTableView {
     name: string;
@@ -65,6 +61,7 @@ export const ProcessListWithCounts = memo(function ProcessListWithCounts({
 
   const dispatch = useResolverDispatch();
   const { timestamp } = useContext(SideEffectContext);
+  const isProcessTerminated = useSelector(selectors.isProcessTerminated);
   const handleBringIntoViewClick = useCallback(
     (processTableViewItem) => {
       dispatch({
@@ -92,6 +89,8 @@ export const ProcessListWithCounts = memo(function ProcessListWithCounts({
         sortable: true,
         truncateText: true,
         render(name: string, item: ProcessTableView) {
+          const entityId = event.entityId(item.event);
+          const isTerminated = isProcessTerminated(entityId);
           return name === '' ? (
             <EuiBadge color="warning">
               {i18n.translate(
@@ -108,10 +107,7 @@ export const ProcessListWithCounts = memo(function ProcessListWithCounts({
                 pushToQueryParams({ crumbId: event.entityId(item.event), crumbEvent: '' });
               }}
             >
-              <CubeForProcess
-                isProcessTerminated={isProcessTerminated}
-                isProcessOrigin={isProcessOrigin}
-              />
+              <CubeForProcess isProcessTerminated={isTerminated} />
               {name}
             </EuiButtonEmpty>
           );
@@ -143,7 +139,7 @@ export const ProcessListWithCounts = memo(function ProcessListWithCounts({
         },
       },
     ],
-    [pushToQueryParams, handleBringIntoViewClick, isProcessOrigin, isProcessTerminated]
+    [pushToQueryParams, handleBringIntoViewClick, isProcessTerminated]
   );
 
   const { processNodePositions } = useSelector(selectors.layout);

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

@@ -13,13 +13,11 @@ import { useResolverTheme } from '../assets';
  */
 export const CubeForProcess = memo(function CubeForProcess({
   isProcessTerminated,
-  isProcessOrigin,
 }: {
   isProcessTerminated: boolean;
-  isProcessOrigin: boolean;
 }) {
   const { cubeAssetsForNode } = useResolverTheme();
-  const { cubeSymbol, descriptionText } = cubeAssetsForNode(isProcessTerminated, isProcessOrigin);
+  const { cubeSymbol, descriptionText } = cubeAssetsForNode(isProcessTerminated, false);
 
   return (
     <>