[7.12] [SECURITY SOLUTION] Fix unmapped field timeline (elastic#99130) (

elastic#99213) * [SECURITY SOLUTION] Fix unmapped field timeline (elastic#99130) * add unmapped include_unmapped * bringing back unmapped field timeline * add unit test * fix unit test
kibanamachine · May 4, 2021 · c487f7f · c487f7f
1 parent 7166137
commit c487f7f
Show file tree

Hide file tree

Showing 8 changed files with 1,293 additions and 350 deletions.
diff --git a/x-pack/plugins/security_solution/common/search_strategy/timeline/events/all/index.ts b/x-pack/plugins/security_solution/common/search_strategy/timeline/events/all/index.ts
@@ -35,7 +35,7 @@ export interface TimelineEventsAllStrategyResponse extends IEsSearchResponse {
 }
 
 export interface TimelineEventsAllRequestOptions extends TimelineRequestOptionsPaginated {
-  fields: string[];
+  fields: string[] | Array<{ field: string; include_unmapped: boolean }>;
   fieldRequested: string[];
   language: 'eql' | 'kuery' | 'lucene';
 }
diff --git a/x-pack/plugins/security_solution/public/common/components/event_details/columns.test.tsx b/x-pack/plugins/security_solution/public/common/components/event_details/columns.test.tsx
@@ -55,14 +55,14 @@ describe('getColumns', () => {
       checkboxColumn = getColumns(defaultProps)[0] as Column;
     });
 
-    test('should be disabled when the field does not exist', () => {
+    test('should be enabled when the field does not exist', () => {
       const testField = 'nonExistingField';
       const wrapper = mount(
         <TestProviders>{checkboxColumn.render(testField, testData)}</TestProviders>
       ) as ReactWrapper;
       expect(
         wrapper.find(`[data-test-subj="toggle-field-${testField}"]`).first().prop('disabled')
-      ).toBe(true);
+      ).toBe(false);
     });
 
     test('should be enabled when the field does exist', () => {

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
@@ -23,7 +23,6 @@ import React from 'react';
 import styled from 'styled-components';
 import { onFocusReFocusDraggable } from '../accessibility/helpers';
 import { BrowserFields } from '../../containers/source';
-import { ToStringArray } from '../../../graphql/types';
 import { ColumnHeaderOptions } from '../../../timelines/store/timeline/model';
 import { DragEffects } from '../drag_and_drop/draggable_wrapper';
 import { DroppableWrapper } from '../drag_and_drop/droppable_wrapper';
@@ -92,10 +91,6 @@ export const getColumns = ({
     width: '30px',
     render: (field: string, data: EventFieldsData) => {
       const label = data.isObjectArray ? i18n.NESTED_COLUMN(field) : i18n.VIEW_COLUMN(field);
-      const fieldFromBrowserField = getFieldFromBrowserField(
-        [data.category, 'fields', field],
-        browserFields
-      );
       return (
         <EuiToolTip content={label}>
           <EuiCheckbox
@@ -111,9 +106,7 @@ export const getColumns = ({
                 width: DEFAULT_COLUMN_MIN_WIDTH,
               })
             }
-            disabled={
-              (data.isObjectArray && data.type !== 'geo_point') || fieldFromBrowserField == null
-            }
+            disabled={data.isObjectArray && data.type !== 'geo_point'}
           />
         </EuiToolTip>
       );
@@ -193,40 +186,56 @@ export const getColumns = ({
     name: i18n.VALUE,
     sortable: true,
     truncateText: false,
-    render: (values: ToStringArray | null | undefined, data: EventFieldsData) => (
-      <FullWidthFlexGroup
-        direction="column"
-        alignItems="flexStart"
-        component="span"
-        gutterSize="none"
-      >
-        {values != null &&
-          values.map((value, i) => (
-            <FullWidthFlexItem
-              grow={false}
-              component="span"
-              key={`event-details-value-flex-item-${contextId}-${eventId}-${data.field}-${i}-${value}`}
-            >
-              <div data-colindex={3} onFocus={onFocusReFocusDraggable} role="button" tabIndex={0}>
-                {data.field === MESSAGE_FIELD_NAME ? (
-                  <OverflowField value={value} />
-                ) : (
-                  <FormattedFieldValue
-                    contextId={`event-details-value-formatted-field-value-${contextId}-${eventId}-${data.field}-${i}-${value}`}
-                    eventId={eventId}
-                    fieldFormat={data.format}
-                    fieldName={data.field}
-                    fieldType={data.type}
-                    isObjectArray={data.isObjectArray}
-                    value={value}
-                    linkValue={getLinkValue(data.field)}
-                  />
-                )}
-              </div>
-            </FullWidthFlexItem>
-          ))}
-      </FullWidthFlexGroup>
-    ),
+    render: (values: string[] | null | undefined, data: EventFieldsData) => {
+      const fieldFromBrowserField = getFieldFromBrowserField(
+        [data.category, 'fields', data.field],
+        browserFields
+      );
+      return (
+        <FullWidthFlexGroup
+          direction="column"
+          alignItems="flexStart"
+          component="span"
+          gutterSize="none"
+        >
+          {values != null &&
+            values.map((value, i) => {
+              if (fieldFromBrowserField == null) {
+                return <EuiText size="s">{value}</EuiText>;
+              }
+              return (
+                <FullWidthFlexItem
+                  grow={false}
+                  component="span"
+                  key={`event-details-value-flex-item-${contextId}-${eventId}-${data.field}-${i}-${value}`}
+                >
+                  <div
+                    data-colindex={3}
+                    onFocus={onFocusReFocusDraggable}
+                    role="button"
+                    tabIndex={0}
+                  >
+                    {data.field === MESSAGE_FIELD_NAME ? (
+                      <OverflowField value={value} />
+                    ) : (
+                      <FormattedFieldValue
+                        contextId={`event-details-value-formatted-field-value-${contextId}-${eventId}-${data.field}-${i}-${value}`}
+                        eventId={eventId}
+                        fieldFormat={data.format}
+                        fieldName={data.field}
+                        fieldType={data.type}
+                        isObjectArray={data.isObjectArray}
+                        value={value}
+                        linkValue={getLinkValue(data.field)}
+                      />
+                    )}
+                  </div>
+                </FullWidthFlexItem>
+              );
+            })}
+        </FullWidthFlexGroup>
+      );
+    },
   },
   {
     field: 'valuesConcatenated',