[Security Solution][Resolver] Word-break long titles in related event…

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

@@ -11,6 +11,7 @@ import * as selectors from './selectors';
 import { DataState } from '../../types';
 import { DataAction } from './action';
 import { ResolverChildNode, ResolverTree } from '../../../../common/endpoint/types';
+import * as eventModel from '../../../../common/endpoint/models/event';
 
 /**
  * Test the data reducer and selector.
@@ -175,6 +176,25 @@ describe('Resolver Data Middleware', () => {
           eventStatsForFirstChildNode.byCategory[categoryToOverCount] - 1
         );
       });
+      it('should return the correct related event detail metadata for a given related event', () => {
+        const relatedEventsByCategory = selectors.relatedEventsByCategory(store.getState());
+        const someRelatedEventForTheFirstChild = relatedEventsByCategory(firstChildNodeInTree.id)(
+          categoryToOverCount
+        )[0];
+        const relatedEventID = eventModel.eventId(someRelatedEventForTheFirstChild)!;
+        const relatedDisplayInfo = selectors.relatedEventDisplayInfoByEntityAndSelfID(
+          store.getState()
+        )(firstChildNodeInTree.id, relatedEventID);
+        const [, countOfSameType, , sectionData] = relatedDisplayInfo;
+        const hostEntries = sectionData.filter((section) => {
+          return section.sectionTitle === 'host';
+        })[0].entries;
+        // u+200b is the "Zero-width-space" character we put around "."s so they break/wrap nicely on display;
+        expect(hostEntries).toContainEqual({ title: 'os\u200b.platform', description: 'Windows' });
+        expect(countOfSameType).toBe(
+          eventStatsForFirstChildNode.byCategory[categoryToOverCount] - 1
+        );
+      });
       it('should indicate the limit has been exceeded because the number of related events received for the category is less than what the stats count said it would be', () => {
         const selectedRelatedInfo = selectors.relatedEventInfoByEntityId(store.getState());
         const shouldShowLimit = selectedRelatedInfo(firstChildNodeInTree.id)

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

@@ -29,11 +29,14 @@ import {
   ResolverNodeStats,
   ResolverRelatedEvents,
   SafeResolverEvent,
+  EndpointEvent,
+  LegacyEndpointEvent,
 } from '../../../../common/endpoint/types';
 import * as resolverTreeModel from '../../models/resolver_tree';
 import * as isometricTaxiLayoutModel from '../../models/indexed_process_tree/isometric_taxi_layout';
 import * as eventModel from '../../../../common/endpoint/models/event';
 import * as vector2 from '../../models/vector2';
+import { formatDate } from '../../view/panels/panel_content_utilities';
 
 /**
  * If there is currently a request.
@@ -173,6 +176,118 @@ export function relatedEventsByEntityId(data: DataState): Map<string, ResolverRe
   return data.relatedEvents;
 }
 
+/**
+ * Seed word/non-word boundaries with zero-width spaces so they break/wrap nicely
+ *
+ * @param potentiallyLongString A string to seed with zero-width spaces so it wraps nicely
+ */
+function addWordBreakSpaces(potentiallyLongString: string): string {
+  // Seed boundaries beetween word and non-word characters with Zero-width spaces to allow
+  //  for text to be wrapped when it overflows its container.
+  return potentiallyLongString.replace(/(\w\W)|(\W\w)/g, (boundary: string) => {
+    return `${boundary[0]}\u200b${boundary[1]}`;
+  });
+}
+
+/**
+ * A helper function to turn objects into EuiDescriptionList entries.
+ * This reflects the strategy of more or less "dumping" metadata for related processes
+ * in description lists with little/no 'prettification'. This has the obvious drawback of
+ * data perhaps appearing inscrutable/daunting, but the benefit of presenting these fields
+ * to the user "as they occur" in ECS, which may help them with e.g. EQL queries.
+ *
+ * Given an object like: {a:{b: 1}, c: 'd'} it will yield title/description entries like so:
+ * {title: "a.b", description: "1"}, {title: "c", description: "d"}
+ *
+ * @param {object} obj The object to turn into `<dt><dd>` entries
+ */
+const objectToDescriptionListEntries = function* (
+  obj: object,
+  prefix = ''
+): Generator<{ title: string; description: string }> {
+  const nextPrefix = prefix.length ? `${prefix}.` : '';
+  for (const [metaKey, metaValue] of Object.entries(obj)) {
+    if (typeof metaValue === 'number' || typeof metaValue === 'string') {
+      yield { title: addWordBreakSpaces(nextPrefix + metaKey), description: `${metaValue}` };
+    } else if (metaValue instanceof Array) {
+      yield {
+        title: addWordBreakSpaces(nextPrefix + metaKey),
+        description: metaValue
+          .filter((arrayEntry) => {
+            return typeof arrayEntry === 'number' || typeof arrayEntry === 'string';
+          })
+          .join(','),
+      };
+    } else if (typeof metaValue === 'object') {
+      yield* objectToDescriptionListEntries(metaValue, nextPrefix + metaKey);
+    }
+  }
+};
+
+type SectionData = Array<{
+  sectionTitle: string;
+  entries: Array<{ title: string; description: string }>;
+}>;
+
+/**
+ * Returns a function that returns the information needed to display related event details based on
+ * the related event's entityID and its own ID.
+ */
+export const relatedEventDisplayInfoByEntityAndSelfID: (
+  state: DataState
+) => (
+  entityId: string,
+  relatedEventId: string | number
+) => [
+  EndpointEvent | LegacyEndpointEvent | undefined,
+  number,
+  string | undefined,
+  SectionData,
+  string
+] = createSelector(relatedEventsByEntityId, function relatedEventDetails(
+  /* eslint-disable no-shadow */
+  relatedEventsByEntityId
+  /* eslint-enable no-shadow */
+) {
+  return defaultMemoize((entityId: string, relatedEventId: string | number) => {
+    const relatedEventsForThisProcess = relatedEventsByEntityId.get(entityId);
+    if (!relatedEventsForThisProcess) {
+      return [undefined, 0, undefined, [], ''];
+    }
+    const specificEvent = relatedEventsForThisProcess.events.find(
+      (evt) => eventModel.eventId(evt) === relatedEventId
+    );
+    // For breadcrumbs:
+    const specificCategory = specificEvent && eventModel.primaryEventCategory(specificEvent);
+    const countOfCategory = relatedEventsForThisProcess.events.reduce((sumtotal, evt) => {
+      return eventModel.primaryEventCategory(evt) === specificCategory ? sumtotal + 1 : sumtotal;
+    }, 0);
+
+    // Assuming these details (agent, ecs, process) aren't as helpful, can revisit
+    const { agent, ecs, process, ...relevantData } = specificEvent as ResolverEvent & {
+      // Type this with various unknown keys so that ts will let us delete those keys
+      ecs: unknown;
+      process: unknown;
+    };
+
+    let displayDate = '';
+    const sectionData: SectionData = Object.entries(relevantData)
+      .map(([sectionTitle, val]) => {
+        if (sectionTitle === '@timestamp') {
+          displayDate = formatDate(val);
+          return { sectionTitle: '', entries: [] };
+        }
+        if (typeof val !== 'object') {
+          return { sectionTitle, entries: [{ title: sectionTitle, description: `${val}` }] };
+        }
+        return { sectionTitle, entries: [...objectToDescriptionListEntries(val)] };
+      })
+      .filter((v) => v.sectionTitle !== '' && v.entries.length);
+
+    return [specificEvent, countOfCategory, specificCategory, sectionData, displayDate];
+  });
+});
+
 /**
  * Returns a function that returns a function (when supplied with an entity id for a node)
  * that returns related events for a node that match an event.category (when supplied with the category)

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

@@ -122,6 +122,15 @@ export const relatedEventsByEntityId = composeSelectors(
   dataSelectors.relatedEventsByEntityId
 );
 
+/**
+ * Returns a function that returns the information needed to display related event details based on
+ * the related event's entityID and its own ID.
+ */
+export const relatedEventDisplayInfoByEntityAndSelfId = composeSelectors(
+  dataStateSelector,
+  dataSelectors.relatedEventDisplayInfoByEntityAndSelfID
+);
+
 /**
  * Returns a function that returns a function (when supplied with an entity id for a node)
  * that returns related events for a node that match an event.category (when supplied with the category)

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

@@ -10,58 +10,18 @@ import { EuiSpacer, EuiText, EuiDescriptionList, EuiTextColor, EuiTitle } from '
 import styled from 'styled-components';
 import { useSelector } from 'react-redux';
 import { FormattedMessage } from 'react-intl';
-import {
-  CrumbInfo,
-  formatDate,
-  StyledBreadcrumbs,
-  BoldCode,
-  StyledTime,
-} from './panel_content_utilities';
+import { CrumbInfo, StyledBreadcrumbs, BoldCode, StyledTime } from './panel_content_utilities';
 import * as event from '../../../../common/endpoint/models/event';
 import { ResolverEvent } from '../../../../common/endpoint/types';
 import * as selectors from '../../store/selectors';
 import { useResolverDispatch } from '../use_resolver_dispatch';
 import { PanelContentError } from './panel_content_error';
 
-/**
- * A helper function to turn objects into EuiDescriptionList entries.
- * This reflects the strategy of more or less "dumping" metadata for related processes
- * in description lists with little/no 'prettification'. This has the obvious drawback of
- * data perhaps appearing inscrutable/daunting, but the benefit of presenting these fields
- * to the user "as they occur" in ECS, which may help them with e.g. EQL queries.
- *
- * Given an object like: {a:{b: 1}, c: 'd'} it will yield title/description entries like so:
- * {title: "a.b", description: "1"}, {title: "c", description: "d"}
- *
- * @param {object} obj The object to turn into `<dt><dd>` entries
- */
-const objectToDescriptionListEntries = function* (
-  obj: object,
-  prefix = ''
-): Generator<{ title: string; description: string }> {
-  const nextPrefix = prefix.length ? `${prefix}.` : '';
-  for (const [metaKey, metaValue] of Object.entries(obj)) {
-    if (typeof metaValue === 'number' || typeof metaValue === 'string') {
-      yield { title: nextPrefix + metaKey, description: `${metaValue}` };
-    } else if (metaValue instanceof Array) {
-      yield {
-        title: nextPrefix + metaKey,
-        description: metaValue
-          .filter((arrayEntry) => {
-            return typeof arrayEntry === 'number' || typeof arrayEntry === 'string';
-          })
-          .join(','),
-      };
-    } else if (typeof metaValue === 'object') {
-      yield* objectToDescriptionListEntries(metaValue, nextPrefix + metaKey);
-    }
-  }
-};
-
 // Adding some styles to prevent horizontal scrollbars, per request from UX review
 const StyledDescriptionList = memo(styled(EuiDescriptionList)`
   &.euiDescriptionList.euiDescriptionList--column dt.euiDescriptionList__title.desc-title {
     max-width: 8em;
+    overflow-wrap: break-word;
   }
   &.euiDescriptionList.euiDescriptionList--column dd.euiDescriptionList__description {
     max-width: calc(100% - 8.5em);
@@ -90,6 +50,39 @@ const TitleHr = memo(() => {
 });
 TitleHr.displayName = 'TitleHR';
 
+// Indicates if the User Agent supports <wbr/>
+const noWBRTagSupport = document.createElement('wbr') instanceof HTMLUnknownElement;
+
+/**
+ * Take description list entries and prepare them for display by
+ * replacing Zero-Width spaces with <wbr /> tags.
+ *
+ * @param entries {title: string, description: string}[]
+ */
+function entriesForDisplay(entries: Array<{ title: string; description: string }>) {
+  return noWBRTagSupport
+    ? entries
+    : entries.map((entry) => {
+        return {
+          ...entry,
+          title: (
+            <>
+              {entry.title.split('\u200b').map((titlePart, i) => {
+                return i ? (
+                  <>
+                    <wbr />
+                    {titlePart}
+                  </>
+                ) : (
+                  <>{titlePart}</>
+                );
+              })}
+            </>
+          ),
+        };
+      });
+}
+
 /**
  * This view presents a detailed view of all the available data for a related event, split and titled by the "section"
  * it appears in the underlying ResolverEvent
@@ -138,60 +131,17 @@ export const RelatedEventDetail = memo(function RelatedEventDetail({
     }
   }, [relatedsReady, dispatch, processEntityId]);
 
-  const relatedEventsForThisProcess = useSelector(selectors.relatedEventsByEntityId).get(
-    processEntityId!
+  const [
+    relatedEventToShowDetailsFor,
+    countBySameCategory,
+    relatedEventCategory = naString,
+    sections,
+    formattedDate,
+  ] = useSelector(selectors.relatedEventDisplayInfoByEntityAndSelfId)(
+    processEntityId,
+    relatedEventId
   );
 
-  const [relatedEventToShowDetailsFor, countBySameCategory, relatedEventCategory] = useMemo(() => {
-    if (!relatedEventsForThisProcess) {
-      return [undefined, 0];
-    }
-    const specificEvent = relatedEventsForThisProcess.events.find(
-      (evt) => event.eventId(evt) === relatedEventId
-    );
-    // For breadcrumbs:
-    const specificCategory = specificEvent && event.primaryEventCategory(specificEvent);
-    const countOfCategory = relatedEventsForThisProcess.events.reduce((sumtotal, evt) => {
-      return event.primaryEventCategory(evt) === specificCategory ? sumtotal + 1 : sumtotal;
-    }, 0);
-    return [specificEvent, countOfCategory, specificCategory || naString];
-  }, [relatedEventsForThisProcess, naString, relatedEventId]);
-
-  const [sections, formattedDate] = useMemo(() => {
-    if (!relatedEventToShowDetailsFor) {
-      // This could happen if user relaods from URL param and requests an eventId that no longer exists
-      return [[], naString];
-    }
-    // Assuming these details (agent, ecs, process) aren't as helpful, can revisit
-    const {
-      agent,
-      ecs,
-      process,
-      ...relevantData
-    } = relatedEventToShowDetailsFor as ResolverEvent & {
-      // Type this with various unknown keys so that ts will let us delete those keys
-      ecs: unknown;
-      process: unknown;
-    };
-    let displayDate = '';
-    const sectionData: Array<{
-      sectionTitle: string;
-      entries: Array<{ title: string; description: string }>;
-    }> = Object.entries(relevantData)
-      .map(([sectionTitle, val]) => {
-        if (sectionTitle === '@timestamp') {
-          displayDate = formatDate(val);
-          return { sectionTitle: '', entries: [] };
-        }
-        if (typeof val !== 'object') {
-          return { sectionTitle, entries: [{ title: sectionTitle, description: `${val}` }] };
-        }
-        return { sectionTitle, entries: [...objectToDescriptionListEntries(val)] };
-      })
-      .filter((v) => v.sectionTitle !== '' && v.entries.length);
-    return [sectionData, displayDate];
-  }, [relatedEventToShowDetailsFor, naString]);
-
   const waitCrumbs = useMemo(() => {
     return [
       {
@@ -347,6 +297,12 @@ export const RelatedEventDetail = memo(function RelatedEventDetail({
       </EuiText>
       <EuiSpacer size="l" />
       {sections.map(({ sectionTitle, entries }, index) => {
+        /**
+         * Replace Zero-Width Spaces with <wbr/> if the User Agent supports it.
+         * Both will hint breaking opportunities, but <wbr/> do not copy/paste
+         * so it's preferable to use them if the UA allows it.
+         */
+        const displayEntries = entriesForDisplay(entries);
         return (
           <Fragment key={index}>
             {index === 0 ? null : <EuiSpacer size="m" />}
@@ -364,7 +320,7 @@ export const RelatedEventDetail = memo(function RelatedEventDetail({
               align="left"
               titleProps={{ className: 'desc-title' }}
               compressed
-              listItems={entries}
+              listItems={displayEntries}
             />
             {index === sections.length - 1 ? null : <EuiSpacer size="m" />}
           </Fragment>