[Security Solution][Resolver] Analyzed event styling (#77115)

Author: michaelolo24

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

@@ -477,7 +477,7 @@ export const useResolverTheme = (): {
       ),
       isLabelFilled: false,
       labelButtonFill: 'primary',
-      strokeColor: `${theme.euiColorPrimary}33`, // 33 = 20% opacity
+      strokeColor: theme.euiColorPrimary,
     },
     terminatedTriggerCube: {
       backingFill: colorMap.triggerBackingFill,
@@ -491,7 +491,7 @@ export const useResolverTheme = (): {
       ),
       isLabelFilled: false,
       labelButtonFill: 'danger',
-      strokeColor: `${theme.euiColorDanger}33`,
+      strokeColor: theme.euiColorDanger,
     },
   };
 

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

@@ -10,6 +10,7 @@ import React, { useCallback, useMemo } from 'react';
 import styled from 'styled-components';
 import { htmlIdGenerator, EuiButton, EuiI18nNumber, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { useSelector } from 'react-redux';
+import { FormattedMessage } from '@kbn/i18n/react';
 import { NodeSubMenu, subMenuAssets } from './submenu';
 import { applyMatrix3 } from '../models/vector2';
 import { Vector2, Matrix3, ResolverState } from '../types';
@@ -119,6 +120,7 @@ const UnstyledProcessEventDot = React.memo(
     // Node (html id=) IDs
     const ariaActiveDescendant = useSelector(selectors.ariaActiveDescendant);
     const selectedNode = useSelector(selectors.selectedNode);
+    const originID = useSelector(selectors.originID);
     const nodeID: string | undefined = eventModel.entityIDSafeVersion(event);
     if (nodeID === undefined) {
       // NB: this component should be taking nodeID as a `string` instead of handling this logic here
@@ -231,6 +233,7 @@ const UnstyledProcessEventDot = React.memo(
 
     const isAriaCurrent = nodeID === ariaActiveDescendant;
     const isAriaSelected = nodeID === selectedNode;
+    const isOrigin = nodeID === originID;
 
     const dispatch = useResolverDispatch();
 
@@ -359,6 +362,20 @@ const UnstyledProcessEventDot = React.memo(
               height={markerSize * 1.5}
               className="backing"
             />
+            {isOrigin && (
+              <use
+                xlinkHref={`#${SymbolIds.processCubeActiveBacking}`}
+                fill="transparent" // Transparent so we don't double up on the default hover
+                x={-15.35}
+                y={-15.35}
+                stroke={strokeColor}
+                strokeOpacity={0.35}
+                strokeDashoffset={0}
+                width={markerSize * 1.5}
+                height={markerSize * 1.5}
+                className="origin"
+              />
+            )}
             <use
               role="presentation"
               xlinkHref={cubeSymbol}
@@ -392,7 +409,14 @@ const UnstyledProcessEventDot = React.memo(
             color={colorMap.descriptionText}
             isDisplaying={isShowingDescriptionText}
           >
-            {descriptionText}
+            <FormattedMessage
+              id="xpack.securitySolution.endpoint.resolver.processDescription"
+              defaultMessage="{originText}{descriptionText}"
+              values={{
+                originText: isOrigin ? 'Analyzed Event · ' : '',
+                descriptionText,
+              }}
+            />
           </StyledDescriptionText>
           <div
             className={xScale >= 2 ? 'euiButton' : 'euiButton euiButton--small'}