[Security Solutions] Update Events/alerts table to use FieldSpec for …

…CellActions (#161361) EPIC: #144943 ## Summary Update Events/alerts table to provide `CellActions` with a complete `FieldSpec`object from DataView ### Affected pages: * Alerts page * Security Dashboards * Rule preview * Host events * Users events ### How to test it Use CellActions on one of the affected pages. ### Checklist - [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios --------- Co-authored-by: kibanamachine <[email protected]>
elastic · Jul 10, 2023 · 6db79db · 6db79db
1 parent ff6099e
commit 6db79db
Show file tree

Hide file tree

Showing 10 changed files with 67 additions and 71 deletions.
diff --git a/src/plugins/discover/public/__mocks__/data_view.ts b/src/plugins/discover/public/__mocks__/data_view.ts
@@ -6,9 +6,9 @@
  * Side Public License, v 1.
  */
 
-import { DataView } from '@kbn/data-views-plugin/public';
+import { DataView, DataViewField } from '@kbn/data-views-plugin/public';
 
-export const fields = [
+export const shallowMockedFields = [
   {
     name: '_source',
     type: '_source',
@@ -73,6 +73,10 @@ export const fields = [
   },
 ] as DataView['fields'];
 
+export const deepMockedFields = shallowMockedFields.map(
+  (field) => new DataViewField(field)
+) as DataView['fields'];
+
 export const buildDataViewMock = ({
   name,
   fields: definedFields,
@@ -120,4 +124,7 @@ export const buildDataViewMock = ({
   return dataView;
 };
 
-export const dataViewMock = buildDataViewMock({ name: 'the-data-view', fields });
+export const dataViewMock = buildDataViewMock({
+  name: 'the-data-view',
+  fields: shallowMockedFields,
+});
diff --git a/src/plugins/discover/public/components/discover_grid/discover_grid.test.tsx b/src/plugins/discover/public/components/discover_grid/discover_grid.test.tsx
@@ -11,7 +11,7 @@ import { EuiCopy } from '@elastic/eui';
 import { act } from 'react-dom/test-utils';
 import { findTestSubject } from '@elastic/eui/lib/test';
 import { esHits } from '../../__mocks__/es_hits';
-import { buildDataViewMock, fields } from '../../__mocks__/data_view';
+import { buildDataViewMock, deepMockedFields } from '../../__mocks__/data_view';
 import { mountWithIntl } from '@kbn/test-jest-helpers';
 import { DiscoverGrid, DiscoverGridProps } from './discover_grid';
 import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
@@ -28,7 +28,7 @@ jest.mock('@kbn/cell-actions', () => ({
 
 export const dataViewMock = buildDataViewMock({
   name: 'the-data-view',
-  fields,
+  fields: deepMockedFields,
   timeFieldName: '@timestamp',
 });
 
@@ -259,18 +259,8 @@ describe('DiscoverGrid', () => {
           triggerId: 'test',
           getCellValue: expect.any(Function),
           fields: [
-            {
-              name: '@timestamp',
-              type: 'date',
-              aggregatable: true,
-              searchable: undefined,
-            },
-            {
-              name: 'message',
-              type: 'string',
-              aggregatable: false,
-              searchable: undefined,
-            },
+            dataViewMock.getFieldByName('@timestamp')?.toSpec(),
+            dataViewMock.getFieldByName('message')?.toSpec(),
           ],
         })
       );

diff --git a/src/plugins/discover/public/components/discover_grid/discover_grid.tsx b/src/plugins/discover/public/components/discover_grid/discover_grid.tsx
@@ -456,23 +456,15 @@ export const DiscoverGrid = ({
   const cellActionsFields = useMemo<UseDataGridColumnsCellActionsProps['fields']>(
     () =>
       cellActionsTriggerId && !isPlainRecord
-        ? visibleColumns.map((columnName) => {
-            const field = dataView.getFieldByName(columnName);
-            if (!field) {
-              return {
+        ? visibleColumns.map(
+            (columnName) =>
+              dataView.getFieldByName(columnName)?.toSpec() ?? {
                 name: '',
                 type: '',
                 aggregatable: false,
                 searchable: false,
-              };
-            }
-            return {
-              name: columnName,
-              type: field.type,
-              aggregatable: field.aggregatable,
-              searchable: field.searchable,
-            };
-          })
+              }
+          )
         : undefined,
     [cellActionsTriggerId, isPlainRecord, visibleColumns, dataView]
   );

diff --git a/src/plugins/discover/public/embeddable/saved_search_embeddable.test.ts b/src/plugins/discover/public/embeddable/saved_search_embeddable.test.ts
@@ -12,7 +12,6 @@ import { createFilterManagerMock } from '@kbn/data-plugin/public/query/filter_ma
 import { SearchInput } from '..';
 import { getSavedSearchUrl } from '@kbn/saved-search-plugin/public';
 import { DiscoverServices } from '../build_services';
-import { dataViewMock } from '../__mocks__/data_view';
 import { discoverServiceMock } from '../__mocks__/services';
 import { SavedSearchEmbeddable, SearchEmbeddableConfig } from './saved_search_embeddable';
 import { render } from 'react-dom';
@@ -23,6 +22,7 @@ import { SHOW_FIELD_STATISTICS } from '../../common';
 import { IUiSettingsClient } from '@kbn/core-ui-settings-browser';
 import { SavedSearchEmbeddableComponent } from './saved_search_embeddable_component';
 import { VIEW_MODE } from '../../common/constants';
+import { buildDataViewMock, deepMockedFields } from '../__mocks__/data_view';
 
 let discoverComponent: ReactWrapper;
 
@@ -48,6 +48,8 @@ function getSearchResponse(nrOfHits: number) {
   });
 }
 
+const dataViewMock = buildDataViewMock({ name: 'the-data-view', fields: deepMockedFields });
+
 describe('saved search embeddable', () => {
   let mountpoint: HTMLDivElement;
   let filterManagerMock: jest.Mocked<FilterManager>;

diff --git a/x-pack/packages/security-solution/data_table/components/data_table/data_table.stories.tsx b/x-pack/packages/security-solution/data_table/components/data_table/data_table.stories.tsx
@@ -84,6 +84,7 @@ export const DataTable = () => {
     <StoryProviders>
       <DataTableComponent
         browserFields={{}}
+        getFieldSpec={() => undefined}
         data={mockTimelineData}
         id={TableId.test}
         renderCellValue={StoryCellRenderer}

diff --git a/x-pack/packages/security-solution/data_table/components/data_table/index.test.tsx b/x-pack/packages/security-solution/data_table/components/data_table/index.test.tsx
@@ -71,6 +71,7 @@ describe('DataTable', () => {
   const mount = useMountAppended();
   const props: DataTableProps = {
     browserFields: mockBrowserFields,
+    getFieldSpec: () => undefined,
     data: mockTimelineData,
     id: TableId.test,
     loadPage: jest.fn(),
@@ -158,11 +159,21 @@ describe('DataTable', () => {
   describe('cellActions', () => {
     test('calls useDataGridColumnsCellActions properly', () => {
       const data = mockTimelineData.slice(0, 1);
+      const timestampFieldSpec = {
+        name: '@timestamp',
+        type: 'date',
+        aggregatable: true,
+        esTypes: ['date'],
+        searchable: true,
+      };
       const wrapper = mount(
         <TestProviders>
           <DataTableComponent
             cellActionsTriggerId="mockCellActionsTrigger"
             {...props}
+            getFieldSpec={(name) =>
+              timestampFieldSpec.name === name ? timestampFieldSpec : undefined
+            }
             data={data}
           />
         </TestProviders>
@@ -171,16 +182,7 @@ describe('DataTable', () => {
 
       expect(mockUseDataGridColumnsCellActions).toHaveBeenCalledWith({
         triggerId: 'mockCellActionsTrigger',
-        fields: [
-          {
-            name: '@timestamp',
-            type: 'date',
-            aggregatable: true,
-            esTypes: ['date'],
-            searchable: true,
-            subType: undefined,
-          },
-        ],
+        fields: [timestampFieldSpec],
         getCellValue: expect.any(Function),
         metadata: {
           scopeId: 'table-test',

diff --git a/x-pack/packages/security-solution/data_table/components/data_table/index.tsx b/x-pack/packages/security-solution/data_table/components/data_table/index.tsx
@@ -42,6 +42,7 @@ import {
   useDataGridColumnsCellActions,
   UseDataGridColumnsCellActionsProps,
 } from '@kbn/cell-actions';
+import { FieldSpec } from '@kbn/data-views-plugin/common';
 import { DataTableModel, DataTableState } from '../../store/data_table/types';
 
 import { getColumnHeader, getColumnHeaders } from './column_headers/helpers';
@@ -96,6 +97,7 @@ interface BaseDataTableProps {
   rowHeightsOptions?: EuiDataGridRowHeightsOptions;
   isEventRenderedView?: boolean;
   getFieldBrowser: GetFieldBrowser;
+  getFieldSpec: (fieldName: string) => FieldSpec | undefined;
   cellActionsTriggerId?: string;
 }
 
@@ -154,6 +156,7 @@ export const DataTableComponent = React.memo<DataTableProps>(
     rowHeightsOptions,
     isEventRenderedView = false,
     getFieldBrowser,
+    getFieldSpec,
     cellActionsTriggerId,
     ...otherProps
   }) => {
@@ -331,21 +334,20 @@ export const DataTableComponent = React.memo<DataTableProps>(
     );
 
     const cellActionsMetadata = useMemo(() => ({ scopeId: id }), [id]);
-
     const cellActionsFields = useMemo<UseDataGridColumnsCellActionsProps['fields']>(
       () =>
         cellActionsTriggerId
-          ? // TODO use FieldSpec object instead of column
-            columnHeaders.map((column) => ({
-              name: column.id,
-              type: column.type ?? '', // When type is an empty string all cell actions are incompatible
-              aggregatable: column.aggregatable ?? false,
-              searchable: column.searchable ?? false,
-              esTypes: column.esTypes ?? [],
-              subType: column.subType,
-            }))
+          ? columnHeaders.map(
+              (column) =>
+                getFieldSpec(column.id) ?? {
+                  name: column.id,
+                  type: '', // When type is an empty string all cell actions are incompatible
+                  aggregatable: false,
+                  searchable: false,
+                }
+            )
           : undefined,
-      [cellActionsTriggerId, columnHeaders]
+      [cellActionsTriggerId, columnHeaders, getFieldSpec]
     );
 
     const getCellValue = useCallback<UseDataGridColumnsCellActionsProps['getCellValue']>(

diff --git a/x-pack/packages/security-solution/data_table/tsconfig.json b/x-pack/packages/security-solution/data_table/tsconfig.json
@@ -19,6 +19,7 @@
     "@kbn/kibana-react-plugin",
     "@kbn/kibana-utils-plugin",
     "@kbn/i18n-react",
-    "@kbn/ui-actions-plugin"
+    "@kbn/ui-actions-plugin",
+    "@kbn/data-views-plugin"
   ]
 }
diff --git a/x-pack/plugins/security_solution/public/common/components/events_viewer/index.tsx b/x-pack/plugins/security_solution/public/common/components/events_viewer/index.tsx
@@ -79,6 +79,7 @@ import { useAlertBulkActions } from './use_alert_bulk_actions';
 import type { BulkActionsProp } from '../toolbar/bulk_actions/types';
 import { StatefulEventContext } from './stateful_event_context';
 import { defaultUnit } from '../toolbar/unit';
+import { useGetFieldSpec } from '../../hooks/use_get_field_spec';
 
 const storage = new Storage(localStorage);
 
@@ -184,6 +185,8 @@ const StatefulEventsViewerComponent: React.FC<EventsViewerProps & PropsFromRedux
     loading: isLoadingIndexPattern,
   } = useSourcererDataView(sourcererScope);
 
+  const getFieldSpec = useGetFieldSpec(sourcererScope);
+
   const { globalFullScreen } = useGlobalFullScreen();
 
   const editorActionsRef = useRef<FieldEditorActions>(null);
@@ -602,6 +605,7 @@ const StatefulEventsViewerComponent: React.FC<EventsViewerProps & PropsFromRedux
                             isEventRenderedView={tableView === 'eventRenderedView'}
                             rowHeightsOptions={rowHeightsOptions}
                             getFieldBrowser={getFieldBrowser}
+                            getFieldSpec={getFieldSpec}
                           />
                         </StatefulEventContext.Provider>
                       </ScrollableFlexItem>

diff --git a/...ecurity_solution/public/detections/hooks/trigger_actions_alert_table/use_cell_actions.tsx b/...ecurity_solution/public/detections/hooks/trigger_actions_alert_table/use_cell_actions.tsx
@@ -5,26 +5,25 @@
  * 2.0.
  */
 
-import type { BrowserField, TimelineNonEcsData } from '@kbn/timelines-plugin/common';
+import type { TimelineNonEcsData } from '@kbn/timelines-plugin/common';
 import type { AlertsTableConfigurationRegistry } from '@kbn/triggers-actions-ui-plugin/public/types';
 import { useCallback, useMemo } from 'react';
 import { TableId, tableDefaults, dataTableSelectors } from '@kbn/securitysolution-data-table';
-import { getAllFieldsByName } from '../../../common/containers/source';
 import type { UseDataGridColumnsSecurityCellActionsProps } from '../../../common/components/cell_actions';
 import { useDataGridColumnsSecurityCellActions } from '../../../common/components/cell_actions';
 import { SecurityCellActionsTrigger, SecurityCellActionType } from '../../../actions/constants';
 import { VIEW_SELECTION } from '../../../../common/constants';
-import { useSourcererDataView } from '../../../common/containers/sourcerer';
 import { SourcererScopeName } from '../../../common/store/sourcerer/model';
 import { useShallowEqualSelector } from '../../../common/hooks/use_selector';
+import { useGetFieldSpec } from '../../../common/hooks/use_get_field_spec';
 
 export const getUseCellActionsHook = (tableId: TableId) => {
   const useCellActions: AlertsTableConfigurationRegistry['useCellActions'] = ({
     columns,
     data,
     dataGridRef,
   }) => {
-    const { browserFields } = useSourcererDataView(SourcererScopeName.detections);
+    const getFieldSpec = useGetFieldSpec(SourcererScopeName.detections);
     /**
      * There is difference between how `triggers actions` fetched data v/s
      * how security solution fetches data via timelineSearchStrategy
@@ -35,7 +34,6 @@ export const getUseCellActionsHook = (tableId: TableId) => {
      *
      */
 
-    const browserFieldsByName = useMemo(() => getAllFieldsByName(browserFields), [browserFields]);
     const finalData = useMemo(
       () =>
         (data as TimelineNonEcsData[][]).map((row) =>
@@ -66,19 +64,16 @@ export const getUseCellActionsHook = (tableId: TableId) => {
       if (viewMode === VIEW_SELECTION.eventRenderedView) {
         return undefined;
       }
-      return columns.map((column) => {
-        // TODO use FieldSpec object instead of browserField
-        const browserField: Partial<BrowserField> | undefined = browserFieldsByName[column.id];
-        return {
-          name: column.id,
-          type: browserField?.type ?? '', // When type is an empty string all cell actions are incompatible
-          esTypes: browserField?.esTypes ?? [],
-          aggregatable: browserField?.aggregatable ?? false,
-          searchable: browserField?.searchable ?? false,
-          subType: browserField?.subType,
-        };
-      });
-    }, [browserFieldsByName, columns, viewMode]);
+      return columns.map(
+        (column) =>
+          getFieldSpec(column.id) ?? {
+            name: '',
+            type: '', // When type is an empty string all cell actions are incompatible
+            aggregatable: false,
+            searchable: false,
+          }
+      );
+    }, [getFieldSpec, columns, viewMode]);
 
     const getCellValue = useCallback<UseDataGridColumnsSecurityCellActionsProps['getCellValue']>(
       (fieldName, rowIndex) => {