WIP: style changes, renaming

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

@@ -17,8 +17,9 @@ import {
   Vector2,
   RelatedEventData,
   RelatedEventDataEntryWithStats,
+  EdgeLineMetadata,
 } from '../../types';
-import { ResolverEvent } from '../../../../common/endpoint/types';
+import { ResolverEvent, EndpointEvent } from '../../../../common/endpoint/types';
 import { eventTimestamp } from '../../../../common/endpoint/models/event';
 import { add as vector2Add, applyMatrix3 } from '../../lib/vector2';
 import { isGraphableProcess, uniquePidForProcess } from '../../models/process_event';
@@ -29,7 +30,7 @@ import {
   size,
   levelOrder,
 } from '../../models/indexed_process_tree';
-import { getRelativeTimeDifference } from '../../lib/dates';
+import { getRelativeTimeDifference } from '../../lib/date';
 
 const unit = 100;
 const distanceBetweenNodesInUnits = 2;
@@ -157,8 +158,8 @@ function processEdgeLineSegments(
   positions: ProcessPositions
 ): EdgeLineSegment[] {
   const edgeLineSegments: EdgeLineSegment[] = [];
-  let elapsedTime: string = '';
   for (const metadata of levelOrderWithWidths(indexedProcessTree, widths)) {
+    const edgeLineMetadata: EdgeLineMetadata = {};
     /**
      * We only handle children, drawing lines back to their parents. The root has no parent, so we skip it
      */
@@ -180,7 +181,7 @@ function processEdgeLineSegments(
     const parentTime = eventTimestamp(parent);
     const processTime = eventTimestamp(process);
     if (parentTime && processTime) {
-      elapsedTime = getRelativeTimeDifference(parentTime, processTime);
+      edgeLineMetadata.elapsedTime = getRelativeTimeDifference(parentTime, processTime);
     }
 
     /**
@@ -201,15 +202,15 @@ function processEdgeLineSegments(
     const lineFromProcessToMidwayLine: EdgeLineSegment = [
       [position[0], midwayY],
       position,
-      elapsedTime,
+      edgeLineMetadata,
     ];
 
     const siblings = indexedProcessTreeChildren(indexedProcessTree, parent);
     const isFirstChild = process === siblings[0];
 
     if (metadata.isOnlyChild) {
       // add a single line segment directly from parent to child. We don't do the 'pitchfork' in this case.
-      edgeLineSegments.push([parentPosition, position, elapsedTime]);
+      edgeLineSegments.push([parentPosition, position, edgeLineMetadata]);
     } else if (isFirstChild) {
       /**
        * If the parent has multiple children, we draw the 'midway' line, and the line from the
@@ -566,12 +567,12 @@ export const processNodePositionsAndEdgeLineSegments = createSelector(
 
     for (const edgeLineSegment of edgeLineSegments) {
       // const transformedSegment = [];
-      const [startPoint, endPoint, elapsedTime] = edgeLineSegment;
+      const [startPoint, endPoint, edgeLineMetadata] = edgeLineSegment;
       const transformedSegment: EdgeLineSegment = [
         applyMatrix3(startPoint, isometricTransformMatrix),
         applyMatrix3(endPoint, isometricTransformMatrix),
-        elapsedTime,
       ];
+      if (edgeLineMetadata) transformedSegment.push(edgeLineMetadata);
 
       transformedEdgeLineSegments.push(transformedSegment);
     }

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

@@ -288,10 +288,18 @@ export type ProcessWidths = Map<ResolverEvent, number>;
  * Map of ProcessEvents (representing process nodes) to their positions. Calculated by `processPositions`
  */
 export type ProcessPositions = Map<ResolverEvent, Vector2>;
+
+/**
+ * Values shared between two vertices joined by an edge line.
+ */
+export interface EdgeLineMetadata {
+  elapsedTime?: string;
+}
+
 /**
- * An array of vectors2 forming an polyline. Used to connect process nodes in the graph.
+ * A tuple of 2 vector2 points and optional EdgeLineMetadata forming a polyline. Used to connect process nodes in the graph and display relevant information.
  */
-export type EdgeLineSegment = [Vector2, Vector2, string?];
+export type EdgeLineSegment = [Vector2, Vector2, EdgeLineMetadata?];
 
 /**
  * Used to provide precalculated info from `widthsOfProcessSubtrees`. These 'width' values are used in the layout of the graph.

x-pack/plugins/siem/public/resolver/view/defs.tsx → x-pack/plugins/siem/public/resolver/view/assets.tsx

@@ -24,6 +24,7 @@ type ResolverColorNames =
 
 type ColorMap = Record<ResolverColorNames, string>;
 interface NodeStyleConfig {
+  backingFill: string;
   cubeSymbol: string;
   descriptionFill: string;
   descriptionText: string;
@@ -54,32 +55,9 @@ export const PaintServerIds = {
  * PaintServers: Where color palettes, grandients, patterns and other similar concerns
  * are exposed to the component
  */
-const PaintServers = memo(() => (
+
+const PaintServers = memo(({ isDarkMode }: { isDarkMode: boolean }) => (
   <>
-    <linearGradient
-      id={PaintServerIds.terminatedProcessCube}
-      x1="-381.23752"
-      y1="264.24026"
-      x2="-380.48514"
-      y2="263.3816"
-      gradientTransform="matrix(70.05178, 0, 0, -79.94771, 26724.01313, 21140.72096)"
-      gradientUnits="userSpaceOnUse"
-    >
-      <stop offset="0" stopColor="#4c82c3" />
-      <stop offset="1" stopColor="#8bd1c7" />
-    </linearGradient>
-    <linearGradient
-      id={PaintServerIds.runningTriggerCube}
-      x1="-381.18643"
-      y1="264.68195"
-      x2="-380.48514"
-      y2="263.8816"
-      gradientTransform="matrix(70.05179, 0, 0, -79.94774, 26724.01618, 21181.09848)"
-      gradientUnits="userSpaceOnUse"
-    >
-      <stop offset="0" stopColor="#dd0a73" />
-      <stop offset="1" stopColor="#f66" />
-    </linearGradient>
     <linearGradient
       id={PaintServerIds.runningProcessCube}
       x1="-381.23556"
@@ -93,17 +71,70 @@ const PaintServers = memo(() => (
       <stop offset="1" stopColor="#54b399" />
     </linearGradient>
     <linearGradient
-      id={PaintServerIds.terminatedTriggerCube}
-      x1="-381.18658"
-      y1="264.68187"
-      x2="-380.48546"
-      y2="263.8817"
+      id={PaintServerIds.runningTriggerCube}
+      x1="-381.18643"
+      y1="264.68195"
+      x2="-380.48514"
+      y2="263.8816"
       gradientTransform="matrix(70.05179, 0, 0, -79.94774, 26724.01618, 21181.09848)"
       gradientUnits="userSpaceOnUse"
     >
       <stop offset="0" stopColor="#dd0a73" />
       <stop offset="1" stopColor="#f66" />
     </linearGradient>
+    {isDarkMode ? (
+      <>
+        <linearGradient
+          id={PaintServerIds.terminatedProcessCube}
+          x1="-381.23752"
+          y1="264.24026"
+          x2="-380.48514"
+          y2="263.3816"
+          gradientTransform="matrix(70.05178, 0, 0, -79.94771, 26724.01313, 21140.72096)"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0" stopColor="#4c82c3" />
+          <stop offset="1" stopColor="#8bd1c7" />
+        </linearGradient>
+        <linearGradient
+          id={PaintServerIds.terminatedTriggerCube}
+          x1="-381.18658"
+          y1="264.68187"
+          x2="-380.48546"
+          y2="263.8817"
+          gradientTransform="matrix(70.05179, 0, 0, -79.94774, 26724.01618, 21181.09848)"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0" stopColor="#dd0a73" />
+          <stop offset="1" stopColor="#f66" />
+        </linearGradient>
+      </>
+    ) : (
+      <>
+        <linearGradient
+          id={PaintServerIds.terminatedProcessCube}
+          x1="10.5206"
+          y1="9.49068"
+          x2="46.8141"
+          y2="45.7844"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0" stopColor="#2F6EB6" />
+          <stop offset="1" stopColor="#00B4AC" />
+        </linearGradient>
+        <linearGradient
+          id={PaintServerIds.terminatedTriggerCube}
+          x1="15.4848"
+          y1="12.0468"
+          x2="43.1049"
+          y2="47.2331"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#DD0A73" />
+          <stop offset="1" stopColor="#FF6666" />
+        </linearGradient>
+      </>
+    )}
   </>
 ));
 
@@ -124,7 +155,7 @@ export const SymbolIds = {
 /**
  * Defs entries that define shapes, masks and other spatial elements
  */
-const SymbolsAndShapes = memo(() => (
+const SymbolsAndShapes = memo(({ isDarkMode }: { isDarkMode: boolean }) => (
   <>
     <symbol
       id={SymbolIds.processNodeLabel}
@@ -266,39 +297,52 @@ const SymbolsAndShapes = memo(() => (
       <path
         d="M87.52113,24.73352a3.7956,3.7956,0,0,0-1.43182-1.47166L45.91012.17918a3.8365,3.8365,0,0,0-3.82049,0L1.91029,23.26186A3.86312,3.86312,0,0,0-.00009,26.55445V72.7199a3.79834,3.79834,0,0,0,1.91041,3.29249L42.08963,99.09514a3.83689,3.83689,0,0,0,3.82049,0L86.08931,76.01239a3.79852,3.79852,0,0,0,1.91056-3.29249V26.55445A3.77643,3.77643,0,0,0,87.52113,24.73352Z"
         transform="translate(0.00013 0.39551)"
-        fill="#010101"
+        fill={isDarkMode ? '#010101' : '#fff'}
       />
       <g opacity="0.7">
         <path
+          opacity={isDarkMode ? 1 : 0.6}
           d="M87.52113,24.73352a3.7956,3.7956,0,0,0-1.43182-1.47166L45.91012.17918a3.8365,3.8365,0,0,0-3.82049,0L1.91029,23.26186A3.86312,3.86312,0,0,0-.00009,26.55445V72.7199a3.79834,3.79834,0,0,0,1.91041,3.29249L42.08963,99.09514a3.83689,3.83689,0,0,0,3.82049,0L86.08931,76.01239a3.79852,3.79852,0,0,0,1.91056-3.29249V26.55445A3.77643,3.77643,0,0,0,87.52113,24.73352Z"
           transform="translate(0.00013 0.39551)"
           fill={`url(#${PaintServerIds.terminatedProcessCube})`}
         />
         <path
+          opacity={isDarkMode ? 0.3 : 0.4}
           d="M.57134,24.52282a3.79906,3.79906,0,0,1,1.34824-1.32625L42.09878.11387a3.83708,3.83708,0,0,1,3.8208,0L86.09877,23.19655a3.79771,3.79771,0,0,1,1.43182,1.47165L44.00909,49.57182Z"
           transform="translate(0.00013 0.39551)"
           fill="#fff"
-          opacity="0.3"
           style={{ isolation: 'isolate' }}
         />
         <path
+          opacity={isDarkMode ? 0.2 : 0.4}
           d="M43.99972,49.63713V99.60449a3.83406,3.83406,0,0,1-1.91025-.50932L1.91029,76.01239A3.79835,3.79835,0,0,1-.00013,72.7199V26.55445A3.77431,3.77431,0,0,1,.562,24.5882Z"
           transform="translate(0.00013 0.39551)"
           fill="#353944"
-          opacity="0.2"
           style={{ isolation: 'isolate' }}
         />
       </g>
     </symbol>
     <symbol id={SymbolIds.terminatedTriggerCube} viewBox="0 0 88 100">
       <title>{'Terminated Trigger Process'}</title>
-      <path
-        d="M87.52143,25.06372a3.795,3.795,0,0,0-1.43129-1.47166L45.92578.50939a3.83384,3.83384,0,0,0-3.81907,0L1.94219,23.59206A3.8634,3.8634,0,0,0,.03252,26.88465V73.05008a3.7986,3.7986,0,0,0,1.90971,3.2925L42.10671,99.42532a3.83423,3.83423,0,0,0,3.81907,0L86.09014,76.34258A3.79881,3.79881,0,0,0,88,73.05008V26.88465A3.77748,3.77748,0,0,0,87.52143,25.06372Z"
-        transform="translate(0)"
-        fill="#010101"
-      />
+      {isDarkMode && (
+        <path
+          opacity="1"
+          d="M87.52143,25.06372a3.795,3.795,0,0,0-1.43129-1.47166L45.92578.50939a3.83384,3.83384,0,0,0-3.81907,0L1.94219,23.59206A3.8634,3.8634,0,0,0,.03252,26.88465V73.05008a3.7986,3.7986,0,0,0,1.90971,3.2925L42.10671,99.42532a3.83423,3.83423,0,0,0,3.81907,0L86.09014,76.34258A3.79881,3.79881,0,0,0,88,73.05008V26.88465A3.77748,3.77748,0,0,0,87.52143,25.06372Z"
+          transform="translate(0)"
+          fill="#010101"
+        />
+      )}
       <g opacity="0.6">
+        {!isDarkMode && (
+          <path
+            opacity="0.6"
+            d="M87.52143,25.06372a3.795,3.795,0,0,0-1.43129-1.47166L45.92578.50939a3.83384,3.83384,0,0,0-3.81907,0L1.94219,23.59206A3.8634,3.8634,0,0,0,.03252,26.88465V73.05008a3.7986,3.7986,0,0,0,1.90971,3.2925L42.10671,99.42532a3.83423,3.83423,0,0,0,3.81907,0L86.09014,76.34258A3.79881,3.79881,0,0,0,88,73.05008V26.88465A3.77748,3.77748,0,0,0,87.52143,25.06372Z"
+            transform="translate(0)"
+            fill="#010101"
+          />
+        )}
         <path
+          opacity={isDarkMode ? 1 : 0.604}
           d="M87.48893,25.129a3.79468,3.79468,0,0,0-1.4313-1.47165L45.89329.57472a3.83381,3.83381,0,0,0-3.81908,0L1.90969,23.65739A3.86331,3.86331,0,0,0,0,26.95V73.11541a3.79859,3.79859,0,0,0,1.90969,3.2925L42.07421,99.49067a3.83425,3.83425,0,0,0,3.81908,0L86.05763,76.40791a3.79876,3.79876,0,0,0,1.90985-3.2925V26.95A3.77746,3.77746,0,0,0,87.48893,25.129Z"
           transform="translate(0)"
           fill={`url(#${PaintServerIds.terminatedTriggerCube})`}
@@ -323,7 +367,6 @@ const SymbolsAndShapes = memo(() => (
       <title>{'resolver active backing'}</title>
       <path
         d="m87.521 25.064a3.795 3.795 0 0 0-1.4313-1.4717l-40.164-23.083a3.8338 3.8338 0 0 0-3.8191 0l-40.165 23.083a3.8634 3.8634 0 0 0-1.9097 3.2926v46.165a3.7986 3.7986 0 0 0 1.9097 3.2925l40.164 23.083a3.8342 3.8342 0 0 0 3.8191 0l40.164-23.083a3.7988 3.7988 0 0 0 1.9099-3.2925v-46.165a3.7775 3.7775 0 0 0-0.47857-1.8209z"
-        fill="transparent"
         strokeWidth="2"
         stroke="#7E839C"
       />
@@ -340,14 +383,17 @@ SymbolsAndShapes.displayName = 'SymbolsAndShapes';
  *  2. Separation of concerns between creative assets and more functional areas of the app
  *  3. `<use>` elements can be handled by compositor (faster)
  */
-const SymbolDefinitionsComponent = memo(({ className }: { className?: string }) => (
-  <svg className={className}>
-    <defs>
-      <PaintServers />
-      <SymbolsAndShapes />
-    </defs>
-  </svg>
-));
+const SymbolDefinitionsComponent = memo(({ className }: { className?: string }) => {
+  const isDarkMode = useUiSetting<boolean>(DEFAULT_DARK_MODE);
+  return (
+    <svg className={className}>
+      <defs>
+        <PaintServers isDarkMode={isDarkMode} />
+        <SymbolsAndShapes isDarkMode={isDarkMode} />
+      </defs>
+    </svg>
+  );
+});
 
 SymbolDefinitionsComponent.displayName = 'SymbolDefinitions';
 
@@ -363,7 +409,7 @@ export const useResolverTheme = (): { colorMap: ColorMap; nodeAssets: NodeStyleM
   const isDarkMode = useUiSetting<boolean>(DEFAULT_DARK_MODE);
   const theme = isDarkMode ? euiThemeAmsterdamDark : euiThemeAmsterdamLight;
 
-  const getColor = (lightOption: string, darkOption: string): string => {
+  const getThemedOption = (lightOption: string, darkOption: string): string => {
     return isDarkMode ? darkOption : lightOption;
   };
 
@@ -372,13 +418,16 @@ export const useResolverTheme = (): { colorMap: ColorMap; nodeAssets: NodeStyleM
     full: theme.euiColorFullShade,
     graphControls: theme.euiColorDarkestShade,
     graphControlsBackground: theme.euiColorEmptyShade,
+    processBackingFill: theme.euiColorPrimary,
     resolverBackground: theme.euiColorEmptyShade,
-    resolverEdge: getColor(theme.euiColorLightestShade, theme.euiColorDarkestShade),
-    resolverEdgeText: getColor(theme.euiColorDarkShade, theme.euiColorLightShade),
+    resolverEdge: getThemedOption(theme.euiColorLightestShade, theme.euiColorLightShade),
+    resolverEdgeText: getThemedOption(theme.euiColorDarkShade, theme.euiColorFullShade),
+    triggerBackingFill: theme.euiColorDanger,
   };
 
-  const nodeAssets = {
+  const nodeAssets: NodeStyleMap = {
     runningProcessCube: {
+      backingFill: colorMap.processBackingFill,
       cubeSymbol: `#${SymbolIds.runningProcessCube}`,
       descriptionFill: colorMap.descriptionText,
       descriptionText: i18n.translate('xpack.siem.endpoint.resolver.runningProcess', {
@@ -388,6 +437,7 @@ export const useResolverTheme = (): { colorMap: ColorMap; nodeAssets: NodeStyleM
       labelButtonFill: 'primary',
     },
     runningTriggerCube: {
+      backingFill: colorMap.triggerBackingFill,
       cubeSymbol: `#${SymbolIds.runningTriggerCube}`,
       descriptionFill: colorMap.descriptionText,
       descriptionText: i18n.translate('xpack.siem.endpoint.resolver.runningTrigger', {
@@ -397,6 +447,7 @@ export const useResolverTheme = (): { colorMap: ColorMap; nodeAssets: NodeStyleM
       labelButtonFill: 'danger',
     },
     terminatedProcessCube: {
+      backingFill: colorMap.processBackingFill,
       cubeSymbol: `#${SymbolIds.terminatedProcessCube}`,
       descriptionFill: colorMap.descriptionText,
       descriptionText: i18n.translate('xpack.siem.endpoint.resolver.terminatedProcess', {
@@ -406,6 +457,7 @@ export const useResolverTheme = (): { colorMap: ColorMap; nodeAssets: NodeStyleM
       labelButtonFill: 'primary',
     },
     terminatedTriggerCube: {
+      backingFill: colorMap.triggerBackingFill,
       cubeSymbol: `#${SymbolIds.terminatedTriggerCube}`,
       descriptionFill: colorMap.descriptionText,
       descriptionText: i18n.translate('xpack.siem.endpoint.resolver.terminatedTrigger', {