[Security Solution][CTI] Better handling of enriched alerts during upgrade to 7.15

x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/cti/helpers.ts

@@ -13,7 +13,7 @@ import { INDICATOR_MATCH_SUBFIELDS } from '../../../../../../../common/cti/const
 import { Ecs } from '../../../../../../../common/ecs';
 import { ThreatIndicatorEcs } from '../../../../../../../common/ecs/threat';
 
-const getIndicatorEcs = (data: Ecs): ThreatIndicatorEcs[] => {
+export const getIndicatorEcs = (data: Ecs): ThreatIndicatorEcs[] => {
   const threatData = get(data, ENRICHMENT_DESTINATION_PATH);
   if (threatData == null) {
     return [];

x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/cti/threat_match_row.test.tsx

@@ -8,12 +8,28 @@
 import { shallow } from 'enzyme';
 import React from 'react';
 
+import { Fields } from '../../../../../../../common/search_strategy';
 import { TestProviders } from '../../../../../../common/mock';
 import { useMountAppended } from '../../../../../../common/utils/use_mount_appended';
-import { ThreatMatchRowProps, ThreatMatchRowView } from './threat_match_row';
+import { ThreatMatchRow, ThreatMatchRowProps, ThreatMatchRowView } from './threat_match_row';
 
 jest.mock('../../../../../../common/lib/kibana');
 
+describe('ThreatMatchRow', () => {
+  const mount = useMountAppended();
+
+  it('correctly renders partial indicator objects', () => {
+    const partialData = { 'matched.atomic': ['atomic'], 'matched.field': ['field'] } as Fields;
+    const wrapper = mount(
+      <TestProviders>
+        <ThreatMatchRow contextId="test" eventId="test" isDraggable={false} data={partialData} />
+      </TestProviders>
+    );
+
+    expect(wrapper.find('[data-test-subj="threat-match-row"]').exists()).toEqual(true);
+  });
+});
+
 describe('ThreatMatchRowView', () => {
   const mount = useMountAppended();
 
@@ -103,6 +119,18 @@ describe('ThreatMatchRowView', () => {
       );
     });
 
+    it('does not render the match field, if absent', () => {
+      const wrapper = render({ ...baseProps, sourceField: undefined });
+      const matchField = wrapper.find('[data-test-subj="threat-match-details-source-field"]');
+      expect(matchField.exists()).toBeFalsy();
+    });
+
+    it('does not render the match value, if absent', () => {
+      const wrapper = render({ ...baseProps, sourceValue: undefined });
+      const matchValue = wrapper.find('[data-test-subj="threat-match-details-source-value"]');
+      expect(matchValue.exists()).toBeFalsy();
+    });
+
     it('does not render the indicator type, if absent', () => {
       const wrapper = render({
         ...baseProps,

x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/cti/threat_match_row.tsx

@@ -5,8 +5,8 @@
  * 2.0.
  */
 
-import { get } from 'lodash';
 import React from 'react';
+import { getOr } from 'lodash/fp';
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 
 import { Fields } from '../../../../../../../common/search_strategy';
@@ -27,8 +27,8 @@ export interface ThreatMatchRowProps {
   indicatorReference: string | undefined;
   indicatorType: string | undefined;
   isDraggable?: boolean;
-  sourceField: string;
-  sourceValue: string;
+  sourceField: string | undefined;
+  sourceValue: string | undefined;
 }
 
 export const ThreatMatchRow = ({
@@ -45,12 +45,12 @@ export const ThreatMatchRow = ({
   const props = {
     contextId,
     eventId,
-    indicatorReference: get(data, REFERENCE)[0] as string | undefined,
-    indicatorProvider: get(data, PROVIDER)[0] as string | undefined,
-    indicatorType: get(data, MATCHED_TYPE)[0] as string | undefined,
+    indicatorReference: getOr([], REFERENCE, data)[0] as string | undefined,
+    indicatorProvider: getOr([], PROVIDER, data)[0] as string | undefined,
+    indicatorType: getOr([], MATCHED_TYPE, data)[0] as string | undefined,
     isDraggable,
-    sourceField: get(data, MATCHED_FIELD)[0] as string,
-    sourceValue: get(data, MATCHED_ATOMIC)[0] as string,
+    sourceField: getOr([], MATCHED_FIELD, data)[0] as string | undefined,
+    sourceValue: getOr([], MATCHED_ATOMIC, data)[0] as string | undefined,
   };
 
   return <ThreatMatchRowView {...props} />;
@@ -73,15 +73,17 @@ export const ThreatMatchRowView = ({
       gutterSize="s"
       justifyContent="center"
     >
-      <EuiFlexItem grow={false}>
-        <MatchDetails
-          contextId={contextId}
-          eventId={eventId}
-          isDraggable={isDraggable}
-          sourceField={sourceField}
-          sourceValue={sourceValue}
-        />
-      </EuiFlexItem>
+      {sourceField && sourceValue && (
+        <EuiFlexItem grow={false}>
+          <MatchDetails
+            contextId={contextId}
+            eventId={eventId}
+            isDraggable={isDraggable}
+            sourceField={sourceField}
+            sourceValue={sourceValue}
+          />
+        </EuiFlexItem>
+      )}
       <EuiFlexItem grow={false}>
         <IndicatorDetails
           contextId={contextId}

x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/cti/threat_match_rows.test.tsx

@@ -0,0 +1,59 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { Ecs } from '../../../../../../../common/ecs';
+
+import { TestProviders } from '../../../../../../common/mock';
+import { useMountAppended } from '../../../../../../common/utils/use_mount_appended';
+import { ThreatMatchRows } from './threat_match_rows';
+
+describe('ThreatMatchRows', () => {
+  const mount = useMountAppended();
+  it('renders a row for each datum', () => {
+    const data = {
+      _id: 'id',
+      _index: 'index',
+      threat: {
+        enrichments: [{ matched: { atomic: ['atomic'], field: ['field'] } }],
+      },
+    };
+
+    const wrapper = mount(
+      <TestProviders>
+        <ThreatMatchRows browserFields={{}} timelineId="test" isDraggable={false} data={data} />
+      </TestProviders>
+    );
+
+    expect(wrapper.find('[data-test-subj="threat-match-row"]').exists()).toEqual(true);
+  });
+
+  it('handles unmapped indicator data', () => {
+    // @ts-expect-error this type is intentionally not compatible with Ecs;
+    // it's what we receive if our threat.indicator mappings are absent
+    const unmappedIndicatorData = {
+      _id: 'id',
+      _index: 'index',
+      threat: {
+        enrichments: { matched: { atomic: ['value'] } },
+      },
+    } as Ecs;
+
+    const wrapper = mount(
+      <TestProviders>
+        <ThreatMatchRows
+          browserFields={{}}
+          timelineId="test"
+          isDraggable={false}
+          data={unmappedIndicatorData}
+        />
+      </TestProviders>
+    );
+
+    expect(wrapper.find('[data-test-subj="threat-match-row"]').exists()).toEqual(true);
+  });
+});

x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/cti/threat_match_rows.tsx

@@ -10,19 +10,19 @@ import { get } from 'lodash';
 import React, { Fragment } from 'react';
 import styled from 'styled-components';
 
-import { ENRICHMENT_DESTINATION_PATH } from '../../../../../../../common/constants';
 import { RowRenderer } from '../../../../../../../common';
 import { Fields } from '../../../../../../../common/search_strategy';
 import { ID_FIELD_NAME } from '../../../../../../common/components/event_details/event_id';
 import { RowRendererContainer } from '../row_renderer';
+import { getIndicatorEcs } from './helpers';
 import { ThreatMatchRow } from './threat_match_row';
 
 const SpacedContainer = styled.div`
   margin: ${({ theme }) => theme.eui.paddingSizes.s} 0;
 `;
 
 export const ThreatMatchRows: RowRenderer['renderRow'] = ({ data, isDraggable, timelineId }) => {
-  const indicators = get(data, ENRICHMENT_DESTINATION_PATH) as Fields[];
+  const indicators = getIndicatorEcs(data) as Fields[];
   const eventId = get(data, ID_FIELD_NAME);
 
   return (

x-pack/plugins/timelines/common/types/timeline/rows/index.ts

@@ -22,5 +22,5 @@ export interface RowRenderer {
     data: Ecs;
     isDraggable: boolean;
     timelineId: string;
-  }) => React.ReactNode;
+  }) => JSX.Element;
 }