[7.11] [Security Solution] [Timeline] Bugfix to include unmapped fields in the timeline event details JSON (#92025)

x-pack/plugins/security_solution/common/search_strategy/timeline/events/details/index.ts

@@ -16,6 +16,7 @@ export interface TimelineEventsDetailsItem {
   values?: Maybe<string[]>;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   originalValue?: Maybe<any>;
+  isObjectArray: boolean;
 }
 
 export interface TimelineEventsDetailsStrategyResponse extends IEsSearchResponse {

x-pack/plugins/security_solution/public/common/components/event_details/columns.tsx

@@ -85,24 +85,28 @@ export const getColumns = ({
     sortable: false,
     truncateText: false,
     width: '30px',
-    render: (field: string) => (
-      <EuiToolTip content={i18n.VIEW_COLUMN(field)}>
-        <EuiCheckbox
-          aria-label={i18n.VIEW_COLUMN(field)}
-          checked={columnHeaders.findIndex((c) => c.id === field) !== -1}
-          data-test-subj={`toggle-field-${field}`}
-          data-colindex={1}
-          id={field}
-          onChange={() =>
-            toggleColumn({
-              columnHeaderType: defaultColumnHeaderType,
-              id: field,
-              width: DEFAULT_COLUMN_MIN_WIDTH,
-            })
-          }
-        />
-      </EuiToolTip>
-    ),
+    render: (field: string, data: EventFieldsData) => {
+      const label = data.isObjectArray ? i18n.NESTED_COLUMN(field) : i18n.VIEW_COLUMN(field);
+      return (
+        <EuiToolTip content={label}>
+          <EuiCheckbox
+            aria-label={label}
+            checked={columnHeaders.findIndex((c) => c.id === field) !== -1}
+            data-test-subj={`toggle-field-${field}`}
+            data-colindex={1}
+            id={field}
+            onChange={() =>
+              toggleColumn({
+                columnHeaderType: defaultColumnHeaderType,
+                id: field,
+                width: DEFAULT_COLUMN_MIN_WIDTH,
+              })
+            }
+            disabled={data.isObjectArray && data.type !== 'geo_point'}
+          />
+        </EuiToolTip>
+      );
+    },
   },
   {
     field: 'field',
@@ -118,38 +122,42 @@ export const getColumns = ({
         </EuiFlexItem>
 
         <EuiFlexItem grow={false}>
-          <DroppableWrapper
-            droppableId={getDroppableId(
-              `event-details-field-droppable-wrapper-${contextId}-${eventId}-${data.category}-${field}`
-            )}
-            key={getDroppableId(
-              `event-details-field-droppable-wrapper-${contextId}-${eventId}-${data.category}-${field}`
-            )}
-            isDropDisabled={true}
-            type={DRAG_TYPE_FIELD}
-            renderClone={(provided) => (
-              <div
-                {...provided.draggableProps}
-                {...provided.dragHandleProps}
-                ref={provided.innerRef}
-                tabIndex={-1}
-              >
-                <DragEffects>
-                  <DraggableFieldBadge fieldId={field} />
-                </DragEffects>
-              </div>
-            )}
-          >
-            <DraggableFieldsBrowserField
-              browserFields={browserFields}
-              categoryId={data.category}
-              fieldName={field}
-              fieldCategory={data.category}
-              onUpdateColumns={onUpdateColumns}
-              timelineId={timelineId}
-              toggleColumn={toggleColumn}
-            />
-          </DroppableWrapper>
+          {data.isObjectArray && data.type !== 'geo_point' ? (
+            <>{field}</>
+          ) : (
+            <DroppableWrapper
+              droppableId={getDroppableId(
+                `event-details-field-droppable-wrapper-${contextId}-${eventId}-${data.category}-${field}`
+              )}
+              key={getDroppableId(
+                `event-details-field-droppable-wrapper-${contextId}-${eventId}-${data.category}-${field}`
+              )}
+              isDropDisabled={true}
+              type={DRAG_TYPE_FIELD}
+              renderClone={(provided) => (
+                <div
+                  {...provided.draggableProps}
+                  {...provided.dragHandleProps}
+                  ref={provided.innerRef}
+                  tabIndex={-1}
+                >
+                  <DragEffects>
+                    <DraggableFieldBadge fieldId={field} />
+                  </DragEffects>
+                </div>
+              )}
+            >
+              <DraggableFieldsBrowserField
+                browserFields={browserFields}
+                categoryId={data.category}
+                fieldName={field}
+                fieldCategory={data.category}
+                onUpdateColumns={onUpdateColumns}
+                timelineId={timelineId}
+                toggleColumn={toggleColumn}
+              />
+            </DroppableWrapper>
+          )}
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
           <EuiIconTip
@@ -191,6 +199,7 @@ export const getColumns = ({
                     fieldFormat={data.format}
                     fieldName={data.field}
                     fieldType={data.type}
+                    isObjectArray={data.isObjectArray}
                     value={value}
                     linkValue={getLinkValue(data.field)}
                   />

x-pack/plugins/security_solution/public/common/components/event_details/event_fields_browser.tsx

@@ -108,7 +108,6 @@ export const EventFieldsBrowser = React.memo<Props>(
 
     const columnHeaders = useDeepEqualSelector((state) => {
       const { columns } = getTimeline(state, timelineId) ?? timelineDefaults;
-
       return getColumnHeaders(columns, browserFields);
     });
 

x-pack/plugins/security_solution/public/common/components/event_details/helpers.tsx

@@ -112,6 +112,7 @@ export const getIconFromType = (type: string | null) => {
     case 'date':
       return 'clock';
     case 'ip':
+    case 'geo_point':
       return 'globe';
     case 'object':
       return 'questionInCircle';

x-pack/plugins/security_solution/public/common/components/event_details/json_view.tsx

@@ -54,12 +54,14 @@ export const JsonView = React.memo<Props>(({ data }) => {
 JsonView.displayName = 'JsonView';
 
 export const buildJsonView = (data: TimelineEventsDetailsItem[]) =>
-  data.reduce(
-    (accumulator, item) =>
-      set(
-        item.field,
-        Array.isArray(item.originalValue) ? item.originalValue.join() : item.originalValue,
-        accumulator
-      ),
-    {}
-  );
+  data
+    .sort((a, b) => a.field.localeCompare(b.field))
+    .reduce(
+      (accumulator, item) =>
+        set(
+          item.field,
+          Array.isArray(item.originalValue) ? item.originalValue.join() : item.originalValue,
+          accumulator
+        ),
+      {}
+    );

x-pack/plugins/security_solution/public/common/components/event_details/translations.ts

@@ -61,3 +61,10 @@ export const VIEW_COLUMN = (field: string) =>
     values: { field },
     defaultMessage: 'View {field} column',
   });
+
+export const NESTED_COLUMN = (field: string) =>
+  i18n.translate('xpack.securitySolution.eventDetails.nestedColumnCheckboxAriaLabel', {
+    values: { field },
+    defaultMessage:
+      'The {field} field is an object, and is broken down into nested fields which can be added as column',
+  });

x-pack/plugins/security_solution/public/common/mock/mock_detail_item.ts

@@ -14,105 +14,126 @@ export const mockDetailItemData: TimelineEventsDetailsItem[] = [
     field: '_id',
     originalValue: 'pEMaMmkBUV60JmNWmWVi',
     values: ['pEMaMmkBUV60JmNWmWVi'],
+    isObjectArray: false,
   },
   {
     field: '_index',
     originalValue: 'filebeat-8.0.0-2019.02.19-000001',
     values: ['filebeat-8.0.0-2019.02.19-000001'],
+    isObjectArray: false,
   },
   {
     field: '_type',
     originalValue: '_doc',
     values: ['_doc'],
+    isObjectArray: false,
   },
   {
     field: '_score',
     originalValue: 1,
     values: ['1'],
+    isObjectArray: false,
   },
   {
     field: '@timestamp',
     originalValue: '2019-02-28T16:50:54.621Z',
     values: ['2019-02-28T16:50:54.621Z'],
+    isObjectArray: false,
   },
   {
     field: 'agent.ephemeral_id',
     originalValue: '9d391ef2-a734-4787-8891-67031178c641',
     values: ['9d391ef2-a734-4787-8891-67031178c641'],
+    isObjectArray: false,
   },
   {
     field: 'agent.hostname',
     originalValue: 'siem-kibana',
     values: ['siem-kibana'],
+    isObjectArray: false,
   },
   {
-    field: 'agent.id',
-    originalValue: '5de03d5f-52f3-482e-91d4-853c7de073c3',
-    values: ['5de03d5f-52f3-482e-91d4-853c7de073c3'],
+    field: 'cloud.project.id',
+    originalValue: 'elastic-beats',
+    values: ['elastic-beats'],
+    isObjectArray: false,
   },
   {
-    field: 'agent.type',
-    originalValue: 'filebeat',
-    values: ['filebeat'],
+    field: 'cloud.provider',
+    originalValue: 'gce',
+    values: ['gce'],
+    isObjectArray: false,
   },
   {
-    field: 'agent.version',
-    originalValue: '8.0.0',
-    values: ['8.0.0'],
+    field: 'destination.bytes',
+    originalValue: 584,
+    values: ['584'],
+    isObjectArray: false,
   },
   {
-    field: 'cloud.availability_zone',
-    originalValue: 'projects/189716325846/zones/us-east1-b',
-    values: ['projects/189716325846/zones/us-east1-b'],
+    field: 'destination.ip',
+    originalValue: '10.47.8.200',
+    values: ['10.47.8.200'],
+    isObjectArray: false,
   },
   {
-    field: 'cloud.instance.id',
-    originalValue: '5412578377715150143',
-    values: ['5412578377715150143'],
+    field: 'agent.id',
+    originalValue: '5de03d5f-52f3-482e-91d4-853c7de073c3',
+    values: ['5de03d5f-52f3-482e-91d4-853c7de073c3'],
+    isObjectArray: false,
   },
   {
     field: 'cloud.instance.name',
     originalValue: 'siem-kibana',
     values: ['siem-kibana'],
+    isObjectArray: false,
   },
   {
     field: 'cloud.machine.type',
     originalValue: 'projects/189716325846/machineTypes/n1-standard-1',
     values: ['projects/189716325846/machineTypes/n1-standard-1'],
+    isObjectArray: false,
   },
   {
-    field: 'cloud.project.id',
-    originalValue: 'elastic-beats',
-    values: ['elastic-beats'],
-  },
-  {
-    field: 'cloud.provider',
-    originalValue: 'gce',
-    values: ['gce'],
-  },
-  {
-    field: 'destination.bytes',
-    originalValue: 584,
-    values: ['584'],
-  },
-  {
-    field: 'destination.ip',
-    originalValue: '10.47.8.200',
-    values: ['10.47.8.200'],
+    field: 'agent.type',
+    originalValue: 'filebeat',
+    values: ['filebeat'],
+    isObjectArray: false,
   },
   {
     field: 'destination.packets',
     originalValue: 4,
     values: ['4'],
+    isObjectArray: false,
   },
   {
     field: 'destination.port',
     originalValue: 902,
     values: ['902'],
+    isObjectArray: false,
   },
   {
     field: 'event.kind',
     originalValue: 'event',
     values: ['event'],
+    isObjectArray: false,
+  },
+  {
+    field: 'agent.version',
+    originalValue: '8.0.0',
+    values: ['8.0.0'],
+    isObjectArray: false,
+  },
+  {
+    field: 'cloud.availability_zone',
+    originalValue: 'projects/189716325846/zones/us-east1-b',
+    values: ['projects/189716325846/zones/us-east1-b'],
+    isObjectArray: false,
+  },
+  {
+    field: 'cloud.instance.id',
+    originalValue: '5412578377715150143',
+    values: ['5412578377715150143'],
+    isObjectArray: false,
   },
 ];

x-pack/plugins/security_solution/public/common/mock/timeline_results.ts

@@ -2275,11 +2275,13 @@ export const mockTimelineDetails: TimelineEventsDetailsItem[] = [
     field: 'host.name',
     values: ['apache'],
     originalValue: 'apache',
+    isObjectArray: false,
   },
   {
     field: 'user.id',
     values: ['1'],
     originalValue: 1,
+    isObjectArray: false,
   },
 ];