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

gmmorris · Sep 14, 2020 · 5c457d1 · 5c457d1
1 parent 8f54c50
commit 5c457d1
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 3 deletions.
diff --git a/x-pack/plugins/security_solution/public/resolver/view/assets.tsx b/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,
  },
  };
 

diff --git a/x-pack/plugins/security_solution/public/resolver/view/process_event_dot.tsx b/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'}