From 25c2809e26414294e51b0a5616d5fae91c8af75d Mon Sep 17 00:00:00 2001
From: Ece Ozalp <ozale272@newschool.edu>
Date: Wed, 28 Jul 2021 15:50:32 -0400
Subject: [PATCH 1/8] updates Alert Summary UI

---
 .../cti_details/threat_details_view.tsx       |  1 -
 .../cti_details/threat_summary_view.tsx       | 22 ++++++++++++++++---
 .../event_details/event_details.tsx           |  1 +
 .../components/event_details/helpers.tsx      |  2 +-
 .../event_details/table/action_cell.tsx       |  4 ++++
 .../table/use_action_cell_data_provider.ts    |  6 +++++
 6 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/x-pack/plugins/security_solution/public/common/components/event_details/cti_details/threat_details_view.tsx b/x-pack/plugins/security_solution/public/common/components/event_details/cti_details/threat_details_view.tsx
index 4b91b432bd553..67c490a33693b 100644
--- a/x-pack/plugins/security_solution/public/common/components/event_details/cti_details/threat_details_view.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/event_details/cti_details/threat_details_view.tsx
@@ -191,7 +191,6 @@ const ThreatDetailsViewComponent: React.FC<{
               <h5>{i18n.INVESTIGATION_TOOLTIP_TITLE}</h5>
             </EuiTitle>
             <EuiSpacer size="xs" />
-            {/* TODO: Date form */}
             <EuiText size="xs">
               <FormattedMessage
                 id="xpack.securitySolution.alertDetails.threatDetails.investigationSubtitle"
diff --git a/x-pack/plugins/security_solution/public/common/components/event_details/cti_details/threat_summary_view.tsx b/x-pack/plugins/security_solution/public/common/components/event_details/cti_details/threat_summary_view.tsx
index c84d064724901..643195b36e54a 100644
--- a/x-pack/plugins/security_solution/public/common/components/event_details/cti_details/threat_summary_view.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/event_details/cti_details/threat_summary_view.tsx
@@ -15,6 +15,9 @@ import { FormattedFieldValue } from '../../../../timelines/components/timeline/b
 import { CtiEnrichment } from '../../../../../common/search_strategy/security_solution/cti';
 import { getEnrichmentIdentifiers } from './helpers';
 import { EnrichmentIcon } from './enrichment_icon';
+import { ActionCell } from '../table/action_cell';
+import { TimelineEventsDetailsItem } from '../../../../../../timelines/common';
+import { EventFieldsData } from '../types';
 
 export interface ThreatSummaryItem {
   title: {
@@ -28,6 +31,7 @@ export interface ThreatSummaryItem {
     index: number;
     value: string | undefined;
     provider: string | undefined;
+    data: TimelineEventsDetailsItem | undefined;
   };
 }
 
@@ -54,6 +58,7 @@ const EnrichmentDescription: React.FC<ThreatSummaryItem['description']> = ({
   index,
   value,
   provider,
+  data,
 }) => {
   const key = `alert-details-value-formatted-field-value-${timelineId}-${eventId}-${fieldName}-${value}-${index}-${provider}`;
   return (
@@ -81,11 +86,20 @@ const EnrichmentDescription: React.FC<ThreatSummaryItem['description']> = ({
           </RightMargin>
         </>
       )}
+      <ActionCell
+        data={(data ?? { field: fieldName }) as EventFieldsData}
+        contextId={timelineId}
+        eventId={eventId}
+        isThreatMatch={true}
+        timelineId={timelineId}
+        values={value ? [value] : []}
+      />
     </>
   );
 };
 
 const buildThreatSummaryItems = (
+  data: TimelineEventsDetailsItem[],
   enrichments: CtiEnrichment[],
   timelineId: string,
   eventId: string
@@ -105,6 +119,7 @@ const buildThreatSummaryItems = (
         provider,
         timelineId,
         value,
+        data: data.find((item) => item.field === field),
       },
     };
   });
@@ -115,7 +130,7 @@ const columns: Array<EuiBasicTableColumn<ThreatSummaryItem>> = [
     field: 'title',
     truncateText: false,
     render: EnrichmentTitle,
-    width: '160px',
+    width: '220px',
     name: '',
   },
   {
@@ -130,13 +145,14 @@ const ThreatSummaryViewComponent: React.FC<{
   enrichments: CtiEnrichment[];
   timelineId: string;
   eventId: string;
-}> = ({ enrichments, timelineId, eventId }) => (
+  data: TimelineEventsDetailsItem[];
+}> = ({ enrichments, timelineId, eventId, data }) => (
   <Indent>
     <StyledEuiInMemoryTable
       columns={columns}
       compressed
       data-test-subj="threat-summary-view"
-      items={buildThreatSummaryItems(enrichments, timelineId, eventId)}
+      items={buildThreatSummaryItems(data, enrichments, timelineId, eventId)}
     />
   </Indent>
 );
diff --git a/x-pack/plugins/security_solution/public/common/components/event_details/event_details.tsx b/x-pack/plugins/security_solution/public/common/components/event_details/event_details.tsx
index 0d31db1f7124c..b2bca7d86a67c 100644
--- a/x-pack/plugins/security_solution/public/common/components/event_details/event_details.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/event_details/event_details.tsx
@@ -145,6 +145,7 @@ const EventDetailsComponent: React.FC<Props> = ({
                 />
                 {enrichmentCount > 0 && (
                   <ThreatSummaryView
+                    data={data}
                     eventId={id}
                     timelineId={timelineId}
                     enrichments={allEnrichments}
diff --git a/x-pack/plugins/security_solution/public/common/components/event_details/helpers.tsx b/x-pack/plugins/security_solution/public/common/components/event_details/helpers.tsx
index ecfa243f89246..654195ada04b5 100644
--- a/x-pack/plugins/security_solution/public/common/components/event_details/helpers.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/event_details/helpers.tsx
@@ -213,7 +213,7 @@ export const getSummaryColumns = (
       field: 'title',
       truncateText: false,
       render: getTitle,
-      width: '33%',
+      width: '220px',
       name: '',
     },
     {
diff --git a/x-pack/plugins/security_solution/public/common/components/event_details/table/action_cell.tsx b/x-pack/plugins/security_solution/public/common/components/event_details/table/action_cell.tsx
index f5cf600e281ad..972b9adc17ee4 100644
--- a/x-pack/plugins/security_solution/public/common/components/event_details/table/action_cell.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/event_details/table/action_cell.tsx
@@ -21,6 +21,7 @@ interface Props {
   eventId: string;
   fieldFromBrowserField?: Readonly<Record<string, Partial<BrowserField>>>;
   getLinkValue?: (field: string) => string | null;
+  isThreatMatch?: boolean;
   linkValue?: string | null | undefined;
   onFilterAdded?: () => void;
   timelineId?: string;
@@ -35,6 +36,7 @@ export const ActionCell: React.FC<Props> = React.memo(
     eventId,
     fieldFromBrowserField,
     getLinkValue,
+    isThreatMatch,
     linkValue,
     onFilterAdded,
     timelineId,
@@ -49,6 +51,7 @@ export const ActionCell: React.FC<Props> = React.memo(
       fieldFromBrowserField,
       fieldType: data.type,
       isObjectArray: data.isObjectArray,
+      isThreatMatch,
       linkValue: (getLinkValue && getLinkValue(data.field)) ?? linkValue,
       values,
     });
@@ -67,6 +70,7 @@ export const ActionCell: React.FC<Props> = React.memo(
     }, []);
 
     const draggableIds = actionCellConfig?.idList.map((id) => getDraggableId(id));
+
     return (
       <HoverActions
         dataType={data.type}
diff --git a/x-pack/plugins/security_solution/public/common/components/event_details/table/use_action_cell_data_provider.ts b/x-pack/plugins/security_solution/public/common/components/event_details/table/use_action_cell_data_provider.ts
index 24f660e3315c5..5b8c4951aebfb 100644
--- a/x-pack/plugins/security_solution/public/common/components/event_details/table/use_action_cell_data_provider.ts
+++ b/x-pack/plugins/security_solution/public/common/components/event_details/table/use_action_cell_data_provider.ts
@@ -36,6 +36,7 @@ export interface UseActionCellDataProvider {
   fieldFromBrowserField?: Readonly<Record<string, Partial<BrowserField>>>;
   fieldType?: string;
   isObjectArray?: boolean;
+  isThreatMatch?: boolean;
   linkValue?: string | null;
   values: string[] | null | undefined;
 }
@@ -48,6 +49,7 @@ export const useActionCellDataProvider = ({
   fieldFromBrowserField,
   fieldType,
   isObjectArray,
+  isThreatMatch,
   linkValue,
   values,
 }: UseActionCellDataProvider): { idList: string[]; stringValues: string[] } | null => {
@@ -61,6 +63,10 @@ export const useActionCellDataProvider = ({
     let valueAsString: string = isString(value) ? value : `${values}`;
     if (fieldFromBrowserField == null) {
       stringifiedValues.push(valueAsString);
+      if (isThreatMatch) {
+        id = `threat-match-${contextId}-${field}-${value}-${eventId}`;
+        memo.push(id);
+      }
       return memo;
     }
     const appendedUniqueId = `${contextId}-${eventId}-${field}-${index}-${value}-${eventId}-${field}-${value}`;

From c71a35b0187c8621b0761ef1a5f359881e83a97e Mon Sep 17 00:00:00 2001
From: Ece Ozalp <ozale272@newschool.edu>
Date: Thu, 29 Jul 2021 09:57:44 -0400
Subject: [PATCH 2/8] incorporates Angela's changes

---
 .../event_details/alert_summary_view.tsx      | 17 ++++----
 .../components/event_details/columns.tsx      |  4 +-
 .../cti_details/threat_summary_view.tsx       | 43 +++++++++++++------
 .../event_details/event_details.tsx           |  1 +
 .../components/event_details/helpers.tsx      |  5 ++-
 .../event_details/table/action_cell.tsx       |  6 +--
 .../event_details/table/field_value_cell.tsx  |  6 +--
 .../table/use_action_cell_data_provider.ts    |  2 +-
 .../common/components/event_details/types.ts  |  7 +++
 9 files changed, 58 insertions(+), 33 deletions(-)

diff --git a/x-pack/plugins/security_solution/public/common/components/event_details/alert_summary_view.tsx b/x-pack/plugins/security_solution/public/common/components/event_details/alert_summary_view.tsx
index 501ef78d550f9..500f14aaa5317 100644
--- a/x-pack/plugins/security_solution/public/common/components/event_details/alert_summary_view.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/event_details/alert_summary_view.tsx
@@ -38,7 +38,6 @@ import { getEmptyValue } from '../empty_value';
 import { ActionCell } from './table/action_cell';
 import { FieldValueCell } from './table/field_value_cell';
 import { TimelineEventsDetailsItem } from '../../../../common';
-import { EventFieldsData } from './types';
 
 export const Indent = styled.div`
   padding: 0 8px;
@@ -95,15 +94,11 @@ const getDescription = ({
     return <StyledEmptyComponent>{getEmptyValue()}</StyledEmptyComponent>;
   }
 
-  const eventFieldsData = {
-    ...data,
-    ...(fieldFromBrowserField ? fieldFromBrowserField : {}),
-  } as EventFieldsData;
   return (
     <>
       <FieldValueCell
         contextId={timelineId}
-        data={eventFieldsData}
+        data={data}
         eventId={eventId}
         fieldFromBrowserField={fieldFromBrowserField}
         linkValue={linkValue}
@@ -111,7 +106,7 @@ const getDescription = ({
       />
       <ActionCell
         contextId={timelineId}
-        data={eventFieldsData}
+        data={data}
         eventId={eventId}
         fieldFromBrowserField={fieldFromBrowserField}
         linkValue={linkValue}
@@ -178,7 +173,13 @@ const getSummaryRows = ({
         const browserField = get([category, 'fields', fieldName], browserFields);
         const description = {
           ...initialDescription,
-          data: { ...field, ...(item.overrideField ? { field: item.overrideField } : {}) },
+          data: {
+            field: field.field,
+            format: browserField?.format ?? '',
+            type: browserField?.type ?? '',
+            isObjectArray: field.isObjectArray,
+            ...(item.overrideField ? { field: item.overrideField } : {}),
+          },
           values: field.values,
           linkValue: linkValue ?? undefined,
           fieldFromBrowserField: browserField,
diff --git a/x-pack/plugins/security_solution/public/common/components/event_details/columns.tsx b/x-pack/plugins/security_solution/public/common/components/event_details/columns.tsx
index b8c10cf506476..a0433f0cc73e1 100644
--- a/x-pack/plugins/security_solution/public/common/components/event_details/columns.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/event_details/columns.tsx
@@ -16,7 +16,7 @@ import { BrowserFields } from '../../containers/source';
 import { OnUpdateColumns } from '../../../timelines/components/timeline/events';
 import * as i18n from './translations';
 import { EventFieldsData } from './types';
-import { ColumnHeaderOptions } from '../../../../common';
+import { BrowserField, ColumnHeaderOptions } from '../../../../common';
 import { FieldValueCell } from './table/field_value_cell';
 import { FieldNameCell } from './table/field_name_cell';
 import { ActionCell } from './table/action_cell';
@@ -36,7 +36,7 @@ const HoverActionsContainer = styled(EuiPanel)`
 HoverActionsContainer.displayName = 'HoverActionsContainer';
 
 export const getFieldFromBrowserField = memoizeOne(
-  (keys: string[], browserFields: BrowserFields): BrowserFields => get(browserFields, keys),
+  (keys: string[], browserFields: BrowserFields): BrowserField => get(browserFields, keys),
   (newArgs, lastArgs) => newArgs[0].join() === lastArgs[0].join()
 );
 export const getColumns = ({
diff --git a/x-pack/plugins/security_solution/public/common/components/event_details/cti_details/threat_summary_view.tsx b/x-pack/plugins/security_solution/public/common/components/event_details/cti_details/threat_summary_view.tsx
index 643195b36e54a..3561ef032647e 100644
--- a/x-pack/plugins/security_solution/public/common/components/event_details/cti_details/threat_summary_view.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/event_details/cti_details/threat_summary_view.tsx
@@ -6,6 +6,7 @@
  */
 
 import styled from 'styled-components';
+import { get } from 'lodash/fp';
 import React from 'react';
 import { EuiBasicTableColumn, EuiText, EuiTitle } from '@elastic/eui';
 
@@ -15,9 +16,9 @@ import { FormattedFieldValue } from '../../../../timelines/components/timeline/b
 import { CtiEnrichment } from '../../../../../common/search_strategy/security_solution/cti';
 import { getEnrichmentIdentifiers } from './helpers';
 import { EnrichmentIcon } from './enrichment_icon';
+import { FieldsData } from '../types';
 import { ActionCell } from '../table/action_cell';
-import { TimelineEventsDetailsItem } from '../../../../../../timelines/common';
-import { EventFieldsData } from '../types';
+import { BrowserFields, TimelineEventsDetailsItem } from '../../../../../common';
 
 export interface ThreatSummaryItem {
   title: {
@@ -31,7 +32,7 @@ export interface ThreatSummaryItem {
     index: number;
     value: string | undefined;
     provider: string | undefined;
-    data: TimelineEventsDetailsItem | undefined;
+    data: FieldsData | undefined;
   };
 }
 
@@ -86,19 +87,22 @@ const EnrichmentDescription: React.FC<ThreatSummaryItem['description']> = ({
           </RightMargin>
         </>
       )}
-      <ActionCell
-        data={(data ?? { field: fieldName }) as EventFieldsData}
-        contextId={timelineId}
-        eventId={eventId}
-        isThreatMatch={true}
-        timelineId={timelineId}
-        values={value ? [value] : []}
-      />
+      {data && value && (
+        <ActionCell
+          data={data}
+          contextId={timelineId}
+          eventId={eventId}
+          isThreatMatch={true}
+          timelineId={timelineId}
+          values={value ? [value] : []}
+        />
+      )}
     </>
   );
 };
 
 const buildThreatSummaryItems = (
+  browserFields: BrowserFields,
   data: TimelineEventsDetailsItem[],
   enrichments: CtiEnrichment[],
   timelineId: string,
@@ -106,6 +110,16 @@ const buildThreatSummaryItems = (
 ) => {
   return enrichments.map((enrichment, index) => {
     const { field, type, value, provider } = getEnrichmentIdentifiers(enrichment);
+    const eventData = data.find((item) => item.field === field);
+    const category = eventData?.category ?? '';
+    const browserField = get([category, 'fields', field ?? ''], browserFields);
+
+    const fieldsData = {
+      field,
+      format: browserField?.format ?? '',
+      type: browserField?.type ?? '',
+      isObjectArray: eventData?.isObjectArray,
+    };
 
     return {
       title: {
@@ -119,7 +133,7 @@ const buildThreatSummaryItems = (
         provider,
         timelineId,
         value,
-        data: data.find((item) => item.field === field),
+        data: fieldsData,
       },
     };
   });
@@ -146,13 +160,14 @@ const ThreatSummaryViewComponent: React.FC<{
   timelineId: string;
   eventId: string;
   data: TimelineEventsDetailsItem[];
-}> = ({ enrichments, timelineId, eventId, data }) => (
+  browserFields: BrowserFields;
+}> = ({ enrichments, timelineId, eventId, data, browserFields }) => (
   <Indent>
     <StyledEuiInMemoryTable
       columns={columns}
       compressed
       data-test-subj="threat-summary-view"
-      items={buildThreatSummaryItems(data, enrichments, timelineId, eventId)}
+      items={buildThreatSummaryItems(browserFields, data, enrichments, timelineId, eventId)}
     />
   </Indent>
 );
diff --git a/x-pack/plugins/security_solution/public/common/components/event_details/event_details.tsx b/x-pack/plugins/security_solution/public/common/components/event_details/event_details.tsx
index b2bca7d86a67c..1d639eb9497fc 100644
--- a/x-pack/plugins/security_solution/public/common/components/event_details/event_details.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/event_details/event_details.tsx
@@ -145,6 +145,7 @@ const EventDetailsComponent: React.FC<Props> = ({
                 />
                 {enrichmentCount > 0 && (
                   <ThreatSummaryView
+                    browserFields={browserFields}
                     data={data}
                     eventId={id}
                     timelineId={timelineId}
diff --git a/x-pack/plugins/security_solution/public/common/components/event_details/helpers.tsx b/x-pack/plugins/security_solution/public/common/components/event_details/helpers.tsx
index 654195ada04b5..c937799c0a8c6 100644
--- a/x-pack/plugins/security_solution/public/common/components/event_details/helpers.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/event_details/helpers.tsx
@@ -21,6 +21,7 @@ import {
   DEFAULT_DATE_COLUMN_MIN_WIDTH,
   DEFAULT_COLUMN_MIN_WIDTH,
 } from '../../../timelines/components/timeline/body/constants';
+import { FieldsData } from './types';
 
 import * as i18n from './translations';
 import { ColumnHeaderOptions, TimelineEventsDetailsItem } from '../../../../common';
@@ -55,9 +56,9 @@ export interface Item {
 export interface AlertSummaryRow {
   title: string;
   description: {
-    data: TimelineEventsDetailsItem;
+    data: FieldsData;
     eventId: string;
-    fieldFromBrowserField?: Readonly<Record<string, Partial<BrowserField>>>;
+    fieldFromBrowserField?: BrowserField;
     linkValue: string | undefined;
     timelineId: string;
     values: string[] | null | undefined;
diff --git a/x-pack/plugins/security_solution/public/common/components/event_details/table/action_cell.tsx b/x-pack/plugins/security_solution/public/common/components/event_details/table/action_cell.tsx
index 972b9adc17ee4..300eedf3407a5 100644
--- a/x-pack/plugins/security_solution/public/common/components/event_details/table/action_cell.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/event_details/table/action_cell.tsx
@@ -9,17 +9,17 @@ import React, { useCallback, useState, useRef } from 'react';
 import { getDraggableId } from '@kbn/securitysolution-t-grid';
 import { HoverActions } from '../../hover_actions';
 import { useActionCellDataProvider } from './use_action_cell_data_provider';
-import { EventFieldsData } from '../types';
+import { EventFieldsData, FieldsData } from '../types';
 import { useGetTimelineId } from '../../drag_and_drop/draggable_wrapper_hover_content';
 import { ColumnHeaderOptions } from '../../../../../common/types/timeline';
 import { BrowserField } from '../../../containers/source';
 
 interface Props {
   contextId: string;
-  data: EventFieldsData;
+  data: FieldsData | EventFieldsData;
   disabled?: boolean;
   eventId: string;
-  fieldFromBrowserField?: Readonly<Record<string, Partial<BrowserField>>>;
+  fieldFromBrowserField?: BrowserField;
   getLinkValue?: (field: string) => string | null;
   isThreatMatch?: boolean;
   linkValue?: string | null | undefined;
diff --git a/x-pack/plugins/security_solution/public/common/components/event_details/table/field_value_cell.tsx b/x-pack/plugins/security_solution/public/common/components/event_details/table/field_value_cell.tsx
index 2ac0ca23ca8c1..66eb6e16397bb 100644
--- a/x-pack/plugins/security_solution/public/common/components/event_details/table/field_value_cell.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/event_details/table/field_value_cell.tsx
@@ -11,13 +11,13 @@ import { BrowserField } from '../../../containers/source';
 import { OverflowField } from '../../tables/helpers';
 import { FormattedFieldValue } from '../../../../timelines/components/timeline/body/renderers/formatted_field';
 import { MESSAGE_FIELD_NAME } from '../../../../timelines/components/timeline/body/renderers/constants';
-import { EventFieldsData } from '../types';
+import { EventFieldsData, FieldsData } from '../types';
 
 export interface FieldValueCellProps {
   contextId: string;
-  data: EventFieldsData;
+  data: EventFieldsData | FieldsData;
   eventId: string;
-  fieldFromBrowserField?: Readonly<Record<string, Partial<BrowserField>>>;
+  fieldFromBrowserField?: BrowserField;
   getLinkValue?: (field: string) => string | null;
   linkValue?: string | null | undefined;
   values: string[] | null | undefined;
diff --git a/x-pack/plugins/security_solution/public/common/components/event_details/table/use_action_cell_data_provider.ts b/x-pack/plugins/security_solution/public/common/components/event_details/table/use_action_cell_data_provider.ts
index 5b8c4951aebfb..f1e0f8ef6746b 100644
--- a/x-pack/plugins/security_solution/public/common/components/event_details/table/use_action_cell_data_provider.ts
+++ b/x-pack/plugins/security_solution/public/common/components/event_details/table/use_action_cell_data_provider.ts
@@ -33,7 +33,7 @@ export interface UseActionCellDataProvider {
   eventId?: string;
   field: string;
   fieldFormat?: string;
-  fieldFromBrowserField?: Readonly<Record<string, Partial<BrowserField>>>;
+  fieldFromBrowserField?: BrowserField;
   fieldType?: string;
   isObjectArray?: boolean;
   isThreatMatch?: boolean;
diff --git a/x-pack/plugins/security_solution/public/common/components/event_details/types.ts b/x-pack/plugins/security_solution/public/common/components/event_details/types.ts
index a8c5026d9868f..0f077147f0705 100644
--- a/x-pack/plugins/security_solution/public/common/components/event_details/types.ts
+++ b/x-pack/plugins/security_solution/public/common/components/event_details/types.ts
@@ -9,3 +9,10 @@ import { BrowserField } from '../../containers/source';
 import { TimelineEventsDetailsItem } from '../../../../common/search_strategy';
 
 export type EventFieldsData = BrowserField & TimelineEventsDetailsItem;
+
+export interface FieldsData {
+  field: string;
+  format: string;
+  type: string;
+  isObjectArray: boolean;
+}

From 1126fee86ea4fba739b7194755ae7fee953b4bab Mon Sep 17 00:00:00 2001
From: Ece Ozalp <ozale272@newschool.edu>
Date: Thu, 29 Jul 2021 10:59:48 -0400
Subject: [PATCH 3/8] adds timeline support

---
 .../cti_details/threat_summary_view.tsx       | 27 ++++++++++---------
 .../components/event_details/helpers.tsx      |  2 +-
 .../components/event_details/summary_view.tsx |  1 +
 .../table/use_action_cell_data_provider.ts    |  5 ----
 4 files changed, 16 insertions(+), 19 deletions(-)

diff --git a/x-pack/plugins/security_solution/public/common/components/event_details/cti_details/threat_summary_view.tsx b/x-pack/plugins/security_solution/public/common/components/event_details/cti_details/threat_summary_view.tsx
index 3561ef032647e..a88ec7c94e507 100644
--- a/x-pack/plugins/security_solution/public/common/components/event_details/cti_details/threat_summary_view.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/event_details/cti_details/threat_summary_view.tsx
@@ -12,13 +12,13 @@ import { EuiBasicTableColumn, EuiText, EuiTitle } from '@elastic/eui';
 
 import * as i18n from './translations';
 import { Indent, StyledEuiInMemoryTable } from '../summary_view';
-import { FormattedFieldValue } from '../../../../timelines/components/timeline/body/renderers/formatted_field';
 import { CtiEnrichment } from '../../../../../common/search_strategy/security_solution/cti';
 import { getEnrichmentIdentifiers } from './helpers';
 import { EnrichmentIcon } from './enrichment_icon';
 import { FieldsData } from '../types';
 import { ActionCell } from '../table/action_cell';
-import { BrowserFields, TimelineEventsDetailsItem } from '../../../../../common';
+import { BrowserField, BrowserFields, TimelineEventsDetailsItem } from '../../../../../common';
+import { FieldValueCell } from '../table/field_value_cell';
 
 export interface ThreatSummaryItem {
   title: {
@@ -33,6 +33,7 @@ export interface ThreatSummaryItem {
     value: string | undefined;
     provider: string | undefined;
     data: FieldsData | undefined;
+    browserField: BrowserField;
   };
 }
 
@@ -55,22 +56,21 @@ const EnrichmentTitle: React.FC<ThreatSummaryItem['title']> = ({ title, type })
 const EnrichmentDescription: React.FC<ThreatSummaryItem['description']> = ({
   timelineId,
   eventId,
-  fieldName,
-  index,
+  browserField,
   value,
   provider,
   data,
 }) => {
-  const key = `alert-details-value-formatted-field-value-${timelineId}-${eventId}-${fieldName}-${value}-${index}-${provider}`;
+  if (!data || !value) return null;
   return (
     <>
       <RightMargin>
-        <FormattedFieldValue
-          key={key}
-          contextId={key}
+        <FieldValueCell
+          contextId={timelineId}
+          data={data}
           eventId={eventId}
-          fieldName={fieldName || 'unknown'}
-          value={value}
+          fieldFromBrowserField={browserField}
+          values={[value]}
         />
       </RightMargin>
       {provider && (
@@ -87,14 +87,14 @@ const EnrichmentDescription: React.FC<ThreatSummaryItem['description']> = ({
           </RightMargin>
         </>
       )}
-      {data && value && (
+      {value && (
         <ActionCell
           data={data}
           contextId={timelineId}
           eventId={eventId}
-          isThreatMatch={true}
+          fieldFromBrowserField={browserField}
           timelineId={timelineId}
-          values={value ? [value] : []}
+          values={[value]}
         />
       )}
     </>
@@ -134,6 +134,7 @@ const buildThreatSummaryItems = (
         timelineId,
         value,
         data: fieldsData,
+        browserField,
       },
     };
   });
diff --git a/x-pack/plugins/security_solution/public/common/components/event_details/helpers.tsx b/x-pack/plugins/security_solution/public/common/components/event_details/helpers.tsx
index c937799c0a8c6..7eea7a76d3495 100644
--- a/x-pack/plugins/security_solution/public/common/components/event_details/helpers.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/event_details/helpers.tsx
@@ -24,7 +24,7 @@ import {
 import { FieldsData } from './types';
 
 import * as i18n from './translations';
-import { ColumnHeaderOptions, TimelineEventsDetailsItem } from '../../../../common';
+import { ColumnHeaderOptions } from '../../../../common';
 
 /**
  * Defines the behavior of the search input that appears above the table of data
diff --git a/x-pack/plugins/security_solution/public/common/components/event_details/summary_view.tsx b/x-pack/plugins/security_solution/public/common/components/event_details/summary_view.tsx
index ddfa632d0199a..8402b49e3b3a5 100644
--- a/x-pack/plugins/security_solution/public/common/components/event_details/summary_view.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/event_details/summary_view.tsx
@@ -13,6 +13,7 @@ import { SummaryRow } from './helpers';
 
 export const Indent = styled.div`
   padding: 0 4px;
+  background: #0a9dec;
 `;
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
diff --git a/x-pack/plugins/security_solution/public/common/components/event_details/table/use_action_cell_data_provider.ts b/x-pack/plugins/security_solution/public/common/components/event_details/table/use_action_cell_data_provider.ts
index f1e0f8ef6746b..0fda1f8b61ec4 100644
--- a/x-pack/plugins/security_solution/public/common/components/event_details/table/use_action_cell_data_provider.ts
+++ b/x-pack/plugins/security_solution/public/common/components/event_details/table/use_action_cell_data_provider.ts
@@ -49,7 +49,6 @@ export const useActionCellDataProvider = ({
   fieldFromBrowserField,
   fieldType,
   isObjectArray,
-  isThreatMatch,
   linkValue,
   values,
 }: UseActionCellDataProvider): { idList: string[]; stringValues: string[] } | null => {
@@ -63,10 +62,6 @@ export const useActionCellDataProvider = ({
     let valueAsString: string = isString(value) ? value : `${values}`;
     if (fieldFromBrowserField == null) {
       stringifiedValues.push(valueAsString);
-      if (isThreatMatch) {
-        id = `threat-match-${contextId}-${field}-${value}-${eventId}`;
-        memo.push(id);
-      }
       return memo;
     }
     const appendedUniqueId = `${contextId}-${eventId}-${field}-${index}-${value}-${eventId}-${field}-${value}`;

From b8d857348726daea431f60d17de4fe34e1e60126 Mon Sep 17 00:00:00 2001
From: Ece Ozalp <ozale272@newschool.edu>
Date: Thu, 29 Jul 2021 15:17:35 -0400
Subject: [PATCH 4/8] fixes test

---
 .../cti_details/threat_summary_view.test.tsx  | 22 +++++++++++++------
 .../cti_details/threat_summary_view.tsx       | 12 +++++-----
 .../components/event_details/helpers.tsx      |  7 +++++-
 .../components/event_details/summary_view.tsx |  1 -
 .../common/components/hover_actions/index.tsx |  1 +
 5 files changed, 29 insertions(+), 14 deletions(-)

diff --git a/x-pack/plugins/security_solution/public/common/components/event_details/cti_details/threat_summary_view.test.tsx b/x-pack/plugins/security_solution/public/common/components/event_details/cti_details/threat_summary_view.test.tsx
index bf6c4b9594344..fe85fd573cfa0 100644
--- a/x-pack/plugins/security_solution/public/common/components/event_details/cti_details/threat_summary_view.test.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/event_details/cti_details/threat_summary_view.test.tsx
@@ -11,26 +11,34 @@ import { ThreatSummaryView } from './threat_summary_view';
 import { TestProviders } from '../../../mock';
 import { useMountAppended } from '../../../utils/use_mount_appended';
 import { buildEventEnrichmentMock } from '../../../../../common/search_strategy/security_solution/cti/index.mock';
+import { mockAlertDetailsData } from '../__mocks__';
+import { TimelineEventsDetailsItem } from '../../../../../../timelines/common';
+import { mockBrowserFields } from '../../../containers/source/mock';
 
-jest.mock('../../../../timelines/components/timeline/body/renderers/formatted_field');
+jest.mock('../table/action_cell');
+jest.mock('../table/field_name_cell');
 
 describe('ThreatSummaryView', () => {
   const mount = useMountAppended();
   const eventId = '5d1d53da502f56aacc14c3cb5c669363d102b31f99822e5d369d4804ed370a31';
   const timelineId = 'detections-page';
-
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
+  const data = mockAlertDetailsData as TimelineEventsDetailsItem[];
+  const browserFields = mockBrowserFields;
 
   it('renders a row for each enrichment', () => {
     const enrichments = [
-      buildEventEnrichmentMock(),
+      buildEventEnrichmentMock({ 'matched.id': ['test.id'], 'matched.field': ['test.field'] }),
       buildEventEnrichmentMock({ 'matched.id': ['other.id'], 'matched.field': ['other.field'] }),
     ];
     const wrapper = mount(
       <TestProviders>
-        <ThreatSummaryView enrichments={enrichments} eventId={eventId} timelineId={timelineId} />
+        <ThreatSummaryView
+          data={data}
+          browserFields={browserFields}
+          enrichments={enrichments}
+          eventId={eventId}
+          timelineId={timelineId}
+        />
       </TestProviders>
     );
 
diff --git a/x-pack/plugins/security_solution/public/common/components/event_details/cti_details/threat_summary_view.tsx b/x-pack/plugins/security_solution/public/common/components/event_details/cti_details/threat_summary_view.tsx
index a88ec7c94e507..1fe4de9718280 100644
--- a/x-pack/plugins/security_solution/public/common/components/event_details/cti_details/threat_summary_view.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/event_details/cti_details/threat_summary_view.tsx
@@ -7,7 +7,7 @@
 
 import styled from 'styled-components';
 import { get } from 'lodash/fp';
-import React from 'react';
+import React, { Fragment } from 'react';
 import { EuiBasicTableColumn, EuiText, EuiTitle } from '@elastic/eui';
 
 import * as i18n from './translations';
@@ -60,15 +60,17 @@ const EnrichmentDescription: React.FC<ThreatSummaryItem['description']> = ({
   value,
   provider,
   data,
+  index,
 }) => {
   if (!data || !value) return null;
+  const key = `alert-details-value-formatted-field-value-${timelineId}-${eventId}-${data.field}-${value}-${index}-${provider}`;
   return (
-    <>
+    <Fragment key={key}>
       <RightMargin>
         <FieldValueCell
           contextId={timelineId}
           data={data}
-          eventId={eventId}
+          eventId={key}
           fieldFromBrowserField={browserField}
           values={[value]}
         />
@@ -91,13 +93,13 @@ const EnrichmentDescription: React.FC<ThreatSummaryItem['description']> = ({
         <ActionCell
           data={data}
           contextId={timelineId}
-          eventId={eventId}
+          eventId={key}
           fieldFromBrowserField={browserField}
           timelineId={timelineId}
           values={[value]}
         />
       )}
-    </>
+    </Fragment>
   );
 };
 
diff --git a/x-pack/plugins/security_solution/public/common/components/event_details/helpers.tsx b/x-pack/plugins/security_solution/public/common/components/event_details/helpers.tsx
index 7eea7a76d3495..b1abda3ed3b3f 100644
--- a/x-pack/plugins/security_solution/public/common/components/event_details/helpers.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/event_details/helpers.tsx
@@ -7,6 +7,7 @@
 
 import { get, getOr, isEmpty, uniqBy } from 'lodash/fp';
 
+import styled from 'styled-components';
 import React from 'react';
 import { EuiBasicTableColumn, EuiTitle } from '@elastic/eui';
 import {
@@ -197,9 +198,13 @@ export const onEventDetailsTabKeyPressed = ({
   }
 };
 
+const StyledH5 = styled.h5`
+  line-height: 1.7rem;
+`;
+
 const getTitle = (title: string) => (
   <EuiTitle size="xxxs">
-    <h5>{title}</h5>
+    <StyledH5>{title}</StyledH5>
   </EuiTitle>
 );
 getTitle.displayName = 'getTitle';
diff --git a/x-pack/plugins/security_solution/public/common/components/event_details/summary_view.tsx b/x-pack/plugins/security_solution/public/common/components/event_details/summary_view.tsx
index 8402b49e3b3a5..ddfa632d0199a 100644
--- a/x-pack/plugins/security_solution/public/common/components/event_details/summary_view.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/event_details/summary_view.tsx
@@ -13,7 +13,6 @@ import { SummaryRow } from './helpers';
 
 export const Indent = styled.div`
   padding: 0 4px;
-  background: #0a9dec;
 `;
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
diff --git a/x-pack/plugins/security_solution/public/common/components/hover_actions/index.tsx b/x-pack/plugins/security_solution/public/common/components/hover_actions/index.tsx
index 31bdf78626e7c..8817a5b85b3ae 100644
--- a/x-pack/plugins/security_solution/public/common/components/hover_actions/index.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/hover_actions/index.tsx
@@ -39,6 +39,7 @@ export const AdditionalContent = styled.div`
 AdditionalContent.displayName = 'AdditionalContent';
 
 const StyledHoverActionsContainer = styled.div<{ $showTopN: boolean }>`
+  min-width: 138px;
   padding: ${(props) => `0 ${props.theme.eui.paddingSizes.s}`};
   display: flex;
 

From 1675427330eb758b826ed33fc556f4a7e54df567 Mon Sep 17 00:00:00 2001
From: Ece Ozalp <ozale272@newschool.edu>
Date: Thu, 29 Jul 2021 15:40:11 -0400
Subject: [PATCH 5/8] remove unused prop

---
 .../common/components/event_details/table/action_cell.tsx      | 3 ---
 .../event_details/table/use_action_cell_data_provider.ts       | 1 -
 2 files changed, 4 deletions(-)

diff --git a/x-pack/plugins/security_solution/public/common/components/event_details/table/action_cell.tsx b/x-pack/plugins/security_solution/public/common/components/event_details/table/action_cell.tsx
index b52d616dddf69..f35765c1cac04 100644
--- a/x-pack/plugins/security_solution/public/common/components/event_details/table/action_cell.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/event_details/table/action_cell.tsx
@@ -20,7 +20,6 @@ interface Props {
   eventId: string;
   fieldFromBrowserField?: BrowserField;
   getLinkValue?: (field: string) => string | null;
-  isThreatMatch?: boolean;
   linkValue?: string | null | undefined;
   onFilterAdded?: () => void;
   timelineId?: string;
@@ -35,7 +34,6 @@ export const ActionCell: React.FC<Props> = React.memo(
     eventId,
     fieldFromBrowserField,
     getLinkValue,
-    isThreatMatch,
     linkValue,
     onFilterAdded,
     timelineId,
@@ -50,7 +48,6 @@ export const ActionCell: React.FC<Props> = React.memo(
       fieldFromBrowserField,
       fieldType: data.type,
       isObjectArray: data.isObjectArray,
-      isThreatMatch,
       linkValue: (getLinkValue && getLinkValue(data.field)) ?? linkValue,
       values,
     });
diff --git a/x-pack/plugins/security_solution/public/common/components/event_details/table/use_action_cell_data_provider.ts b/x-pack/plugins/security_solution/public/common/components/event_details/table/use_action_cell_data_provider.ts
index 444f5e5ec2ae5..76ca5dfe53f4e 100644
--- a/x-pack/plugins/security_solution/public/common/components/event_details/table/use_action_cell_data_provider.ts
+++ b/x-pack/plugins/security_solution/public/common/components/event_details/table/use_action_cell_data_provider.ts
@@ -38,7 +38,6 @@ export interface UseActionCellDataProvider {
   fieldFromBrowserField?: BrowserField;
   fieldType?: string;
   isObjectArray?: boolean;
-  isThreatMatch?: boolean;
   linkValue?: string | null;
   values: string[] | null | undefined;
 }

From 43ef43dd32693d4dbc27c5998f9bd11d18b3ecf7 Mon Sep 17 00:00:00 2001
From: Ece Ozalp <ozale272@newschool.edu>
Date: Thu, 29 Jul 2021 16:48:28 -0400
Subject: [PATCH 6/8] fix type

---
 .../common/components/event_details/table/field_name_cell.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/x-pack/plugins/security_solution/public/common/components/event_details/table/field_name_cell.tsx b/x-pack/plugins/security_solution/public/common/components/event_details/table/field_name_cell.tsx
index e62d7f90b9f1d..edf4bdf0e8e3c 100644
--- a/x-pack/plugins/security_solution/public/common/components/event_details/table/field_name_cell.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/event_details/table/field_name_cell.tsx
@@ -19,7 +19,7 @@ import { getFieldTypeName } from './get_field_type_name';
 export interface FieldNameCellProps {
   data: EventFieldsData;
   field: string;
-  fieldFromBrowserField: Readonly<Record<string, Partial<BrowserField>>>;
+  fieldFromBrowserField: BrowserField;
   fieldMapping?: IndexPatternField;
   scripted?: boolean;
 }

From 99766708917f2f2582306853c713dc12a06adc40 Mon Sep 17 00:00:00 2001
From: Ece Ozalp <ozale272@newschool.edu>
Date: Tue, 3 Aug 2021 15:07:20 -0400
Subject: [PATCH 7/8] addresses comments

---
 .../cti_details/threat_summary_view.tsx       | 20 +++++++++----------
 1 file changed, 9 insertions(+), 11 deletions(-)

diff --git a/x-pack/plugins/security_solution/public/common/components/event_details/cti_details/threat_summary_view.tsx b/x-pack/plugins/security_solution/public/common/components/event_details/cti_details/threat_summary_view.tsx
index 1fe4de9718280..2b174aaa040c9 100644
--- a/x-pack/plugins/security_solution/public/common/components/event_details/cti_details/threat_summary_view.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/event_details/cti_details/threat_summary_view.tsx
@@ -6,7 +6,7 @@
  */
 
 import styled from 'styled-components';
-import { get } from 'lodash/fp';
+import { get } from 'lodash';
 import React, { Fragment } from 'react';
 import { EuiBasicTableColumn, EuiText, EuiTitle } from '@elastic/eui';
 
@@ -26,14 +26,13 @@ export interface ThreatSummaryItem {
     type: string | undefined;
   };
   description: {
-    timelineId: string;
+    browserField: BrowserField;
+    data: FieldsData | undefined;
     eventId: string;
-    fieldName: string | undefined;
     index: number;
-    value: string | undefined;
     provider: string | undefined;
-    data: FieldsData | undefined;
-    browserField: BrowserField;
+    timelineId: string;
+    value: string | undefined;
   };
 }
 
@@ -54,13 +53,13 @@ const EnrichmentTitle: React.FC<ThreatSummaryItem['title']> = ({ title, type })
 );
 
 const EnrichmentDescription: React.FC<ThreatSummaryItem['description']> = ({
-  timelineId,
-  eventId,
   browserField,
-  value,
-  provider,
   data,
+  eventId,
   index,
+  provider,
+  timelineId,
+  value,
 }) => {
   if (!data || !value) return null;
   const key = `alert-details-value-formatted-field-value-${timelineId}-${eventId}-${data.field}-${value}-${index}-${provider}`;
@@ -130,7 +129,6 @@ const buildThreatSummaryItems = (
       },
       description: {
         eventId,
-        fieldName: field,
         index,
         provider,
         timelineId,

From aea22187b44177b2e4264bffe7143401fc65e361 Mon Sep 17 00:00:00 2001
From: Ece Ozalp <ozale272@newschool.edu>
Date: Tue, 3 Aug 2021 15:29:09 -0400
Subject: [PATCH 8/8] bring back lodash/fp to fix typeerror

---
 .../event_details/cti_details/threat_summary_view.tsx           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/x-pack/plugins/security_solution/public/common/components/event_details/cti_details/threat_summary_view.tsx b/x-pack/plugins/security_solution/public/common/components/event_details/cti_details/threat_summary_view.tsx
index 2b174aaa040c9..3ab59be650732 100644
--- a/x-pack/plugins/security_solution/public/common/components/event_details/cti_details/threat_summary_view.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/event_details/cti_details/threat_summary_view.tsx
@@ -6,7 +6,7 @@
  */
 
 import styled from 'styled-components';
-import { get } from 'lodash';
+import { get } from 'lodash/fp';
 import React, { Fragment } from 'react';
 import { EuiBasicTableColumn, EuiText, EuiTitle } from '@elastic/eui';