Display multiple copyable fields for process.args in resolver node de…

…tail panel (#93280) (#94092)

x-pack/plugins/security_solution/common/endpoint/models/event.ts

@@ -160,12 +160,12 @@ export function md5HashForProcess(event: SafeResolverEvent): string | undefined
 /**
  * First non-null value for the `event.process.args` field.
  */
-export function argsForProcess(event: SafeResolverEvent): string | undefined {
+export function argsForProcess(event: SafeResolverEvent): string[] | undefined {
   if (isLegacyEventSafeVersion(event)) {
     // There is not currently a key for this on Legacy event types
     return undefined;
   }
-  return firstNonNullValue(event.process?.args);
+  return values(event.process?.args);
 }
 
 /**

x-pack/plugins/security_solution/public/resolver/mocks/endpoint_event.ts

@@ -51,7 +51,7 @@ export function mockEndpointEvent({
     process: {
       entity_id: entityID,
       executable: 'executable',
-      args: 'args',
+      args: ['args0', 'args1', 'args2'],
       name: processName,
       pid,
       hash: {

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

@@ -34,16 +34,18 @@ describe(`Resolver: when analyzing a tree with no ancestors and two children and
   /**
    * These are the details we expect to see in the node detail view when the origin is selected.
    */
-  const originEventDetailEntries: ReadonlyMap<string, string> = new Map([
+  const originEventDetailEntries: Array<[string, string]> = [
     ['@timestamp', 'Sep 23, 2020 @ 08:25:32.316'],
     ['process.executable', 'executable'],
     ['process.pid', '0'],
     ['user.name', 'user.name'],
     ['user.domain', 'user.domain'],
     ['process.parent.pid', '0'],
     ['process.hash.md5', 'hash.md5'],
-    ['process.args', 'args'],
-  ]);
+    ['process.args', 'args0'],
+    ['process.args', 'args1'],
+    ['process.args', 'args2'],
+  ];
 
   beforeEach(() => {
     // create a mock data access layer
@@ -129,11 +131,16 @@ describe(`Resolver: when analyzing a tree with no ancestors and two children and
     describe.each([...originEventDetailEntries])(
       'when the user hovers over the description for the field (%p) with their mouse',
       (fieldTitleText, value) => {
+        // If there are multiple values for a field, i.e. an array, this is the index for the value we are testing.
+        const entryIndex = originEventDetailEntries
+          .filter(([fieldName]) => fieldName === fieldTitleText)
+          .findIndex(([_, fieldValue]) => fieldValue === value);
         beforeEach(async () => {
           const dt = await simulator().resolveWrapper(() => {
             return simulator()
               .testSubject('resolver:node-detail:entry-title')
-              .filterWhere((title) => title.text() === fieldTitleText);
+              .filterWhere((title) => title.text() === fieldTitleText)
+              .at(entryIndex);
           });
 
           expect(dt).toHaveLength(1);
@@ -184,7 +191,9 @@ describe(`Resolver: when analyzing a tree with no ancestors and two children and
         ['user.domain', 'user.domain'],
         ['process.parent.pid', '0'],
         ['process.hash.md5', 'hash.md5'],
-        ['process.args', 'args'],
+        ['process.args', 'args0'],
+        ['process.args', 'args1'],
+        ['process.args', 'args2'],
       ]);
     });
   });

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

@@ -122,8 +122,12 @@ const NodeDetailView = memo(function ({
       description: eventModel.argsForProcess(processEvent),
     };
 
-    // This is the data in {title, description} form for the EuiDescriptionList to display
-    const processDescriptionListData = [
+    const flattenedEntries: Array<{
+      title: string;
+      description: string | string[] | number | undefined;
+    }> = [];
+
+    const flattenedDescriptionListData = [
       createdEntry,
       pathEntry,
       pidEntry,
@@ -132,7 +136,21 @@ const NodeDetailView = memo(function ({
       parentPidEntry,
       md5Entry,
       commandLineEntry,
-    ]
+    ].reduce((flattenedList, entry) => {
+      if (Array.isArray(entry.description)) {
+        return [
+          ...flattenedList,
+          ...entry.description.map((value) => {
+            return { title: entry.title, description: value };
+          }),
+        ];
+      } else {
+        return [...flattenedList, entry];
+      }
+    }, flattenedEntries);
+
+    // This is the data in {title, description} form for the EuiDescriptionList to display
+    const processDescriptionListData = flattenedDescriptionListData
       .filter((entry) => {
         return entry.description !== undefined;
       })