Update alert table columns after adding a new runtime field

Author: machadoum

x-pack/plugins/security_solution/public/common/components/events_viewer/index.test.tsx

@@ -32,6 +32,8 @@ jest.mock('../../../timelines/containers', () => ({
 
 jest.mock('../../components/url_state/normalize_time_range.ts');
 
+jest.mock('../../../common/containers/source', () => ({ useIndexFields: () => ({}) }));
+
 const mockUseResizeObserver: jest.Mock = useResizeObserver as jest.Mock;
 jest.mock('use-resize-observer/polyfilled');
 mockUseResizeObserver.mockImplementation(() => ({}));

x-pack/plugins/security_solution/public/common/components/events_viewer/index.tsx

@@ -16,7 +16,7 @@ import { ControlColumnProps, RowRenderer, TimelineId } from '../../../../common/
 import { timelineSelectors, timelineActions } from '../../../timelines/store/timeline';
 import type { SubsetTimelineModel, TimelineModel } from '../../../timelines/store/timeline/model';
 import { Status } from '../../../../common/detection_engine/schemas/common/schemas';
-import { Filter } from '../../../../../../../src/plugins/data/public';
+import { Filter, IndexPatternField } from '../../../../../../../src/plugins/data/public';
 import { InspectButtonContainer } from '../inspect';
 import { useGlobalFullScreen } from '../../containers/use_full_screen';
 import { useIsExperimentalFeatureEnabled } from '../../hooks/use_experimental_features';
@@ -31,8 +31,11 @@ import { defaultControlColumn } from '../../../timelines/components/timeline/bod
 import { EventsViewer } from './events_viewer';
 import * as i18n from './translations';
 import { GraphOverlay } from '../../../timelines/components/graph_overlay';
-import { CreateFieldButton } from '../../../timelines/components/create_field';
-import { CreateFieldComponentType } from '../../../../../timelines/public';
+import { CreateFieldButton } from '../../../timelines/components/create_field_button';
+import { CreateFieldComponentType, tGridActions } from '../../../../../timelines/public';
+import { useIndexFields } from '../../containers/source';
+import { DEFAULT_COLUMN_MIN_WIDTH } from '../../../timelines/components/timeline/body/constants';
+import { defaultColumnHeaderType } from '../../../timelines/components/timeline/body/column_headers/default_headers';
 
 const EMPTY_CONTROL_COLUMNS: ControlColumnProps[] = [];
 const leadingControlColumns: ControlColumnProps[] = [
@@ -175,18 +178,37 @@ const StatefulEventsViewerComponent: React.FC<Props> = ({
   }, [id, timelineQuery, globalQuery]);
   const bulkActions = useMemo(() => ({ onAlertStatusActionSuccess }), [onAlertStatusActionSuccess]);
 
+  const { indexFieldsSearch } = useIndexFields(scopeId, false);
+
   const createFieldComponent = useMemo(() => {
+    const onCreateField = (field: IndexPatternField) => {
+      // Fetch updated list of fields
+      indexFieldsSearch(selectedDataViewId);
+      // Add the new field to the event table
+      dispatch(
+        tGridActions.upsertColumn({
+          column: {
+            columnHeaderType: defaultColumnHeaderType,
+            id: field.name,
+            initialWidth: DEFAULT_COLUMN_MIN_WIDTH,
+          },
+          id,
+          index: 1,
+        })
+      );
+    };
+
     // It receives onClick props from field browser in order to close the modal.
     const CreateFieldButtonComponent: CreateFieldComponentType = ({ onClick }) => (
       <CreateFieldButton
         selectedDataViewId={selectedDataViewId}
         onClick={onClick}
-        scopeId={scopeId}
+        onCreateField={onCreateField}
       />
     );
 
     return CreateFieldButtonComponent;
-  }, [selectedDataViewId, scopeId]);
+  }, [selectedDataViewId, dispatch, id, indexFieldsSearch]);
 
   return (
     <>

x-pack/plugins/security_solution/public/timelines/components/create_field_button/index.test.tsx

@@ -7,7 +7,6 @@
 
 import { render, fireEvent, act, screen } from '@testing-library/react';
 import React from 'react';
-import { SourcererScopeName } from '../../../common/store/sourcerer/model';
 import { CreateFieldButton } from './index';
 import {
   indexPatternFieldEditorPluginMock,
@@ -23,8 +22,6 @@ const useKibanaMock = useKibana as jest.Mocked<typeof useKibana>;
 let mockIndexPatternFieldEditor: Start;
 jest.mock('../../../common/lib/kibana');
 
-jest.mock('../../../common/containers/source', () => ({ useIndexFields: () => ({}) }));
-
 const runAllPromises = () => new Promise(setImmediate);
 
 describe('CreateFieldButton', () => {
@@ -41,9 +38,11 @@ describe('CreateFieldButton', () => {
       <CreateFieldButton
         selectedDataViewId={'dataViewId'}
         onClick={() => undefined}
-        scopeId={SourcererScopeName.timeline}
+        onCreateField={() => undefined}
       />,
-      { wrapper: TestProviders }
+      {
+        wrapper: TestProviders,
+      }
     );
 
     expect(screen.getByRole('button')).toBeInTheDocument();
@@ -55,9 +54,11 @@ describe('CreateFieldButton', () => {
       <CreateFieldButton
         selectedDataViewId={'dataViewId'}
         onClick={() => undefined}
-        scopeId={SourcererScopeName.timeline}
+        onCreateField={() => undefined}
       />,
-      { wrapper: TestProviders }
+      {
+        wrapper: TestProviders,
+      }
     );
 
     expect(screen.queryByRole('button')).not.toBeInTheDocument();
@@ -73,9 +74,11 @@ describe('CreateFieldButton', () => {
         <CreateFieldButton
           selectedDataViewId={'dataViewId'}
           onClick={onClickParam}
-          scopeId={SourcererScopeName.timeline}
+          onCreateField={() => undefined}
         />,
-        { wrapper: TestProviders }
+        {
+          wrapper: TestProviders,
+        }
       );
       await runAllPromises();
     });

x-pack/plugins/security_solution/public/timelines/components/create_field_button/index.tsx

@@ -9,26 +9,22 @@ import React, { useCallback, useEffect, useState } from 'react';
 import { EuiButton } from '@elastic/eui';
 import styled from 'styled-components';
 
-import { IndexPattern } from '../../../../../../../src/plugins/data/public';
+import { IndexPattern, IndexPatternField } from '../../../../../../../src/plugins/data/public';
 import { useKibana } from '../../../common/lib/kibana';
 
 import * as i18n from './translations';
-import { useIndexFields } from '../../../common/containers/source';
-import { SourcererScopeName } from '../../../common/store/sourcerer/model';
 
 interface CreateFieldButtonProps {
   selectedDataViewId: string;
   onClick: () => void;
-  scopeId: SourcererScopeName;
+  onCreateField: (field: IndexPatternField) => void;
 }
 const StyledButton = styled(EuiButton)`
   margin-left: ${({ theme }) => theme.eui.paddingSizes.m};
 `;
 
 export const CreateFieldButton = React.memo<CreateFieldButtonProps>(
-  ({ selectedDataViewId, onClick: onClickParam, scopeId }) => {
-    const { indexFieldsSearch } = useIndexFields(scopeId, false);
-
+  ({ selectedDataViewId, onClick: onClickParam, onCreateField }) => {
     const {
       indexPatternFieldEditor,
       data: { dataViews },
@@ -46,13 +42,11 @@ export const CreateFieldButton = React.memo<CreateFieldButtonProps>(
       if (dataView) {
         indexPatternFieldEditor?.openEditor({
           ctx: { indexPattern: dataView },
-          onSave: () => {
-            indexFieldsSearch(selectedDataViewId);
-          },
+          onSave: onCreateField,
         });
       }
       onClickParam();
-    }, [indexPatternFieldEditor, dataView, selectedDataViewId, onClickParam, indexFieldsSearch]);
+    }, [indexPatternFieldEditor, dataView, onClickParam, onCreateField]);
 
     if (!indexPatternFieldEditor?.userPermissions.editIndexPattern()) {
       return null;

x-pack/plugins/security_solution/public/timelines/components/timeline/body/index.test.tsx

@@ -27,7 +27,7 @@ import { defaultRowRenderers } from './renderers';
 
 jest.mock('../../../../common/lib/kibana/hooks');
 jest.mock('../../../../common/hooks/use_app_toasts');
-
+jest.mock('../../../../common/containers/source', () => ({ useIndexFields: () => ({}) }));
 jest.mock('../../../../common/lib/kibana', () => {
   const originalModule = jest.requireActual('../../../../common/lib/kibana');
   return {

x-pack/plugins/security_solution/public/timelines/components/timeline/body/index.tsx

@@ -8,7 +8,7 @@
 import { noop } from 'lodash/fp';
 import memoizeOne from 'memoize-one';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { connect, ConnectedProps } from 'react-redux';
+import { connect, ConnectedProps, useDispatch } from 'react-redux';
 import deepEqual from 'fast-deep-equal';
 
 import {
@@ -17,6 +17,7 @@ import {
   ARIA_ROWINDEX_ATTRIBUTE,
   onKeyDownFocusHandler,
   CreateFieldComponentType,
+  tGridActions,
 } from '../../../../../../timelines/public';
 import { CellValueElementProps } from '../cell_rendering';
 import { DEFAULT_COLUMN_MIN_WIDTH } from './constants';
@@ -28,7 +29,7 @@ import {
   TimelineId,
   TimelineTabs,
 } from '../../../../../common/types/timeline';
-import { BrowserFields } from '../../../../common/containers/source';
+import { BrowserFields, useIndexFields } from '../../../../common/containers/source';
 import { TimelineItem } from '../../../../../common/search_strategy/timeline';
 import { inputsModel, sourcererSelectors, State } from '../../../../common/store';
 import { TimelineModel } from '../../../store/timeline/model';
@@ -47,6 +48,8 @@ import { useDeepEqualSelector } from '../../../../common/hooks/use_selector';
 import { SourcererScopeName } from '../../../../common/store/sourcerer/model';
 import { CreateFieldButton } from '../../create_field_button';
 import { SelectedDataView } from '../../../../common/store/sourcerer/selectors';
+import { IndexPatternField } from '../../../../../../../../src/plugins/data/public';
+import { defaultColumnHeaderType } from './column_headers/default_headers';
 
 interface OwnProps {
   activePage: number;
@@ -233,18 +236,37 @@ export const BodyComponent = React.memo<StatefulBodyProps>(
       getSelectedDataView(state, SourcererScopeName.timeline)
     );
 
+    const dispatch = useDispatch();
+    const { indexFieldsSearch } = useIndexFields(SourcererScopeName.timeline, false);
+
     const createFieldComponent = useMemo(() => {
+      const onCreateField = (field: IndexPatternField) => {
+        // Fetch updated list of fields
+        indexFieldsSearch(dataViewId);
+        // Add the new field to the event table
+        dispatch(
+          tGridActions.upsertColumn({
+            column: {
+              columnHeaderType: defaultColumnHeaderType,
+              id: field.name,
+              initialWidth: DEFAULT_COLUMN_MIN_WIDTH,
+            },
+            id,
+            index: 0,
+          })
+        );
+      };
       // It receives onClick props from field browser in order to close the modal.
       const CreateFieldButtonComponent: CreateFieldComponentType = ({ onClick }) => (
         <CreateFieldButton
           selectedDataViewId={dataViewId}
           onClick={onClick}
-          scopeId={SourcererScopeName.timeline}
+          onCreateField={onCreateField}
         />
       );
 
       return CreateFieldButtonComponent;
-    }, [dataViewId]);
+    }, [dataViewId, dispatch, id, indexFieldsSearch]);
 
     return (
       <>