[RAC] [TGrid] Migrate the TGrid's rendering to EuiDataGrid (elastic…

…#106199)

## [RAC] [TGrid] Migrate the TGrid's rendering to `EuiDataGrid`

This PR migrates TGrid's rendering to use `EuiDataGrid`, per the screenshots below:

![o11y_alerts](https://user-images.githubusercontent.com/4459398/126413504-e825a5a2-1cb5-475e-b514-01fb819793e1.png)

![security_solution_alerts](https://user-images.githubusercontent.com/4459398/126413546-28df8f28-fa81-4b97-91c6-667589ea683c.png)

Related RAC Issue: elastic/security-team#1299

### Prerequisites to deleting legacy code (reducing bundle sizes)

To reduce the size of the `timelines` and `security_solution` plugins, legacy TGrid code and the dependency on `react-beautiful-dnd` will be removed in a follow-up PR.

- Related issue: elastic#105941

The legacy code and dependencies will be deleted when the following tasks are completed (in follow-up PRs):

- Sorting: Map `redux` sort state to `EuiDataGrid`'s `sorting` prop
- Actions: Migrate draggable hover actions to `EuiDataGrid` `cellActions`
  - related PR: <elastic#105500>
- Use `BrowserFields` to display field metadata when hovering over a column
  - related PR: <elastic#105207>
- Migrate Security Solution's actions column config from a single column to multiple columns

### Desk testing

To desk test this PR, you must enable feature flags in the Observability and Security Solution:

- To desk test the `Observability > Alerts` page, add the following settings to `config/kibana.dev.yml`:

```
xpack.observability.unsafe.cases.enabled: true
xpack.observability.unsafe.alertingExperience.enabled: true
xpack.ruleRegistry.write.enabled: true
```

- To desk test the TGrid in the following Security Solution, edit `x-pack/plugins/security_solution/common/experimental_features.ts` and in the `allowedExperimentalValues` section set:

```typescript
tGridEnabled: true,
```

x-pack/plugins/security_solution/public/common/components/alerts_viewer/alerts_table.tsx

@@ -17,6 +17,8 @@ import { DefaultCellRenderer } from '../../../timelines/components/timeline/cell
 import * as i18n from './translations';
 import { useKibana } from '../../lib/kibana';
 import { SourcererScopeName } from '../../store/sourcerer/model';
+import { useIsExperimentalFeatureEnabled } from '../../hooks/use_experimental_features';
+import { DEFAULT_COLUMN_MIN_WIDTH } from '../../../timelines/components/timeline/body/constants';
 
 export interface OwnProps {
   end: string;
@@ -74,20 +76,29 @@ const AlertsTableComponent: React.FC<Props> = ({
   const alertsFilter = useMemo(() => [...defaultAlertsFilters, ...pageFilters], [pageFilters]);
   const { filterManager } = useKibana().services.data.query;
 
+  const tGridEnabled = useIsExperimentalFeatureEnabled('tGridEnabled');
+
   useEffect(() => {
     dispatch(
       timelineActions.initializeTGridSettings({
         id: timelineId,
         documentType: i18n.ALERTS_DOCUMENT_TYPE,
         filterManager,
-        defaultColumns: alertsDefaultModel.columns,
+        defaultColumns: alertsDefaultModel.columns.map((c) =>
+          !tGridEnabled && c.initialWidth == null
+            ? {
+                ...c,
+                initialWidth: DEFAULT_COLUMN_MIN_WIDTH,
+              }
+            : c
+        ),
         excludedRowRendererIds: alertsDefaultModel.excludedRowRendererIds,
         footerText: i18n.TOTAL_COUNT_OF_ALERTS,
         title: i18n.ALERTS_TABLE_TITLE,
         // TODO: avoid passing this through the store
       })
     );
-  }, [dispatch, filterManager, timelineId]);
+  }, [dispatch, filterManager, tGridEnabled, timelineId]);
 
   return (
     <StatefulEventsViewer

x-pack/plugins/security_solution/public/common/components/alerts_viewer/default_headers.ts

@@ -7,10 +7,7 @@
 
 import { ColumnHeaderOptions, RowRendererId } from '../../../../common/types/timeline';
 import { defaultColumnHeaderType } from '../../../timelines/components/timeline/body/column_headers/default_headers';
-import {
-  DEFAULT_COLUMN_MIN_WIDTH,
-  DEFAULT_DATE_COLUMN_MIN_WIDTH,
-} from '../../../timelines/components/timeline/body/constants';
+import { DEFAULT_DATE_COLUMN_MIN_WIDTH } from '../../../timelines/components/timeline/body/constants';
 import { SubsetTimelineModel } from '../../../timelines/store/timeline/model';
 import { timelineDefaults } from '../../../timelines/store/timeline/defaults';
 
@@ -23,48 +20,39 @@ export const alertsHeaders: ColumnHeaderOptions[] = [
   {
     columnHeaderType: defaultColumnHeaderType,
     id: 'event.module',
-    initialWidth: DEFAULT_COLUMN_MIN_WIDTH,
     linkField: 'rule.reference',
   },
   {
     columnHeaderType: defaultColumnHeaderType,
     id: 'event.dataset',
-    initialWidth: DEFAULT_COLUMN_MIN_WIDTH,
   },
   {
     columnHeaderType: defaultColumnHeaderType,
     id: 'event.category',
-    initialWidth: DEFAULT_COLUMN_MIN_WIDTH,
   },
   {
     columnHeaderType: defaultColumnHeaderType,
     id: 'event.severity',
-    initialWidth: DEFAULT_COLUMN_MIN_WIDTH,
   },
   {
     columnHeaderType: defaultColumnHeaderType,
     id: 'observer.name',
-    initialWidth: DEFAULT_COLUMN_MIN_WIDTH,
   },
   {
     columnHeaderType: defaultColumnHeaderType,
     id: 'host.name',
-    initialWidth: DEFAULT_COLUMN_MIN_WIDTH,
   },
   {
     columnHeaderType: defaultColumnHeaderType,
     id: 'message',
-    initialWidth: DEFAULT_COLUMN_MIN_WIDTH,
   },
   {
     columnHeaderType: defaultColumnHeaderType,
     id: 'agent.id',
-    initialWidth: DEFAULT_COLUMN_MIN_WIDTH,
   },
   {
     columnHeaderType: defaultColumnHeaderType,
     id: 'agent.type',
-    initialWidth: DEFAULT_COLUMN_MIN_WIDTH,
   },
 ];
 

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

@@ -7,10 +7,7 @@
 
 import { ColumnHeaderOptions } from '../../../../common';
 import { defaultColumnHeaderType } from '../../../timelines/components/timeline/body/column_headers/default_headers';
-import {
-  DEFAULT_COLUMN_MIN_WIDTH,
-  DEFAULT_DATE_COLUMN_MIN_WIDTH,
-} from '../../../timelines/components/timeline/body/constants';
+import { DEFAULT_DATE_COLUMN_MIN_WIDTH } from '../../../timelines/components/timeline/body/constants';
 
 export const defaultHeaders: ColumnHeaderOptions[] = [
   {
@@ -21,41 +18,33 @@ export const defaultHeaders: ColumnHeaderOptions[] = [
   {
     columnHeaderType: defaultColumnHeaderType,
     id: 'message',
-    initialWidth: DEFAULT_COLUMN_MIN_WIDTH,
   },
   {
     columnHeaderType: defaultColumnHeaderType,
     id: 'host.name',
-    initialWidth: DEFAULT_COLUMN_MIN_WIDTH,
   },
   {
     columnHeaderType: defaultColumnHeaderType,
     id: 'event.module',
-    initialWidth: DEFAULT_COLUMN_MIN_WIDTH,
   },
   {
     columnHeaderType: defaultColumnHeaderType,
     id: 'event.dataset',
-    initialWidth: DEFAULT_COLUMN_MIN_WIDTH,
   },
   {
     columnHeaderType: defaultColumnHeaderType,
     id: 'event.action',
-    initialWidth: DEFAULT_COLUMN_MIN_WIDTH,
   },
   {
     columnHeaderType: defaultColumnHeaderType,
     id: 'user.name',
-    initialWidth: DEFAULT_COLUMN_MIN_WIDTH,
   },
   {
     columnHeaderType: defaultColumnHeaderType,
     id: 'source.ip',
-    initialWidth: DEFAULT_COLUMN_MIN_WIDTH,
   },
   {
     columnHeaderType: defaultColumnHeaderType,
     id: 'destination.ip',
-    initialWidth: DEFAULT_COLUMN_MIN_WIDTH,
   },
 ];

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

@@ -27,6 +27,16 @@ import { CellValueElementProps } from '../../../timelines/components/timeline/ce
 import { useKibana } from '../../lib/kibana';
 import { defaultControlColumn } from '../../../timelines/components/timeline/body/control_columns';
 import { EventsViewer } from './events_viewer';
+import * as i18n from './translations';
+
+const EMPTY_CONTROL_COLUMNS: ControlColumnProps[] = [];
+const leadingControlColumns: ControlColumnProps[] = [
+  {
+    ...defaultControlColumn,
+    // eslint-disable-next-line react/display-name
+    headerCellRender: () => <>{i18n.ACTIONS}</>,
+  },
+];
 
 const FullScreenContainer = styled.div<{ $isFullScreen: boolean }>`
   height: ${({ $isFullScreen }) => ($isFullScreen ? '100%' : undefined)};
@@ -115,8 +125,7 @@ const StatefulEventsViewerComponent: React.FC<Props> = ({
   }, []);
 
   const globalFilters = useMemo(() => [...filters, ...(pageFilters ?? [])], [filters, pageFilters]);
-  const leadingControlColumns: ControlColumnProps[] = [defaultControlColumn];
-  const trailingControlColumns: ControlColumnProps[] = [];
+  const trailingControlColumns: ControlColumnProps[] = EMPTY_CONTROL_COLUMNS;
 
   return (
     <>

x-pack/plugins/security_solution/public/common/components/events_viewer/translations.ts

@@ -27,3 +27,7 @@ export const UNIT = (totalCount: number) =>
     values: { totalCount },
     defaultMessage: `{totalCount, plural, =1 {event} other {events}}`,
   });
+
+export const ACTIONS = i18n.translate('xpack.securitySolution.eventsViewer.actionsColumnLabel', {
+  defaultMessage: 'Actions',
+});

x-pack/plugins/security_solution/public/detections/components/alerts_table/index.tsx

@@ -52,6 +52,7 @@ import { buildTimeRangeFilter } from './helpers';
 import { defaultRowRenderers } from '../../../timelines/components/timeline/body/renderers';
 import { columns, RenderCellValue } from '../../configurations/security_solution_detections';
 import { useInvalidFilterQuery } from '../../../common/hooks/use_invalid_filter_query';
+import { DEFAULT_COLUMN_MIN_WIDTH } from '../../../timelines/components/timeline/body/constants';
 
 interface OwnProps {
   defaultFilters?: Filter[];
@@ -343,10 +344,19 @@ export const AlertsTableComponent: React.FC<AlertsTableComponentProps> = ({
     ? alertsDefaultModelRuleRegistry
     : alertsDefaultModel;
 
+  const tGridEnabled = useIsExperimentalFeatureEnabled('tGridEnabled');
+
   useEffect(() => {
     dispatch(
       timelineActions.initializeTGridSettings({
-        defaultColumns: columns,
+        defaultColumns: columns.map((c) =>
+          !tGridEnabled && c.initialWidth == null
+            ? {
+                ...c,
+                initialWidth: DEFAULT_COLUMN_MIN_WIDTH,
+              }
+            : c
+        ),
         documentType: i18n.ALERTS_DOCUMENT_TYPE,
         excludedRowRendererIds: defaultTimelineModel.excludedRowRendererIds as RowRendererId[],
         filterManager,
@@ -359,7 +369,7 @@ export const AlertsTableComponent: React.FC<AlertsTableComponentProps> = ({
         showCheckboxes: true,
       })
     );
-  }, [dispatch, defaultTimelineModel, filterManager, timelineId]);
+  }, [dispatch, defaultTimelineModel, filterManager, tGridEnabled, timelineId]);
 
   const headerFilterGroup = useMemo(
     () => <AlertsTableFilterGroup onFilterGroupChanged={onFilterGroupChangedCallback} />,

x-pack/plugins/security_solution/public/detections/components/alerts_table/translations.ts

@@ -18,6 +18,12 @@ export const ALERTS_DOCUMENT_TYPE = i18n.translate(
   }
 );
 
+export const ALERTS_UNIT = (totalCount: number) =>
+  i18n.translate('xpack.securitySolution.detectionEngine.alerts.alertsUnit', {
+    values: { totalCount },
+    defaultMessage: `{totalCount, plural, =1 {alert} other {alerts}}`,
+  });
+
 export const OPEN_ALERTS = i18n.translate(
   'xpack.securitySolution.detectionEngine.alerts.openAlertsTitle',
   {

x-pack/plugins/security_solution/public/detections/configurations/examples/observablity_alerts/columns.ts

@@ -47,6 +47,5 @@ export const columns: Array<
     columnHeaderType: defaultColumnHeaderType,
     displayAsText: i18n.ALERTS_HEADERS_REASON,
     id: 'signal.reason',
-    initialWidth: 644,
   },
 ];

x-pack/plugins/security_solution/public/detections/configurations/examples/observablity_alerts/render_cell_value.test.tsx

@@ -41,6 +41,7 @@ describe('RenderCellValue', () => {
       eventId,
       header,
       isDetails: false,
+      isDraggable: true,
       isExpandable: false,
       isExpanded: false,
       linkValues,

x-pack/plugins/security_solution/public/detections/configurations/examples/observablity_alerts/render_cell_value.tsx

@@ -33,6 +33,7 @@ export const RenderCellValue: React.FC<
   eventId,
   header,
   isDetails,
+  isDraggable,
   isExpandable,
   isExpanded,
   linkValues,
@@ -71,6 +72,7 @@ export const RenderCellValue: React.FC<
           eventId={eventId}
           header={header}
           isDetails={isDetails}
+          isDraggable={isDraggable}
           isExpandable={isExpandable}
           isExpanded={isExpanded}
           linkValues={linkValues}

x-pack/plugins/security_solution/public/detections/configurations/examples/security_solution_rac/columns.ts

@@ -41,6 +41,5 @@ export const columns: Array<
     columnHeaderType: defaultColumnHeaderType,
     id: 'signal.reason',
     displayAsText: i18n.ALERTS_HEADERS_REASON,
-    initialWidth: 644,
   },
 ];

x-pack/plugins/security_solution/public/detections/configurations/examples/security_solution_rac/render_cell_value.test.tsx

@@ -41,6 +41,7 @@ describe('RenderCellValue', () => {
       eventId,
       header,
       isDetails: false,
+      isDraggable: false,
       isExpandable: false,
       isExpanded: false,
       linkValues,

x-pack/plugins/security_solution/public/detections/configurations/examples/security_solution_rac/render_cell_value.tsx

@@ -67,6 +67,7 @@ export const RenderCellValue: React.FC<
           eventId={eventId}
           header={header}
           isDetails={isDetails}
+          isDraggable={false}
           isExpandable={isExpandable}
           isExpanded={isExpanded}
           linkValues={linkValues}

x-pack/plugins/security_solution/public/detections/configurations/security_solution_detections/columns.ts

@@ -62,40 +62,33 @@ export const columns: Array<
   {
     columnHeaderType: defaultColumnHeaderType,
     id: 'event.module',
-    initialWidth: DEFAULT_COLUMN_MIN_WIDTH,
     linkField: 'rule.reference',
   },
   {
     aggregatable: true,
     category: 'event',
     columnHeaderType: defaultColumnHeaderType,
     id: 'event.action',
-    initialWidth: 140,
     type: 'string',
   },
   {
     columnHeaderType: defaultColumnHeaderType,
     id: 'event.category',
-    initialWidth: 150,
   },
   {
     columnHeaderType: defaultColumnHeaderType,
     id: 'host.name',
-    initialWidth: 120,
   },
   {
     columnHeaderType: defaultColumnHeaderType,
     id: 'user.name',
-    initialWidth: 120,
   },
   {
     columnHeaderType: defaultColumnHeaderType,
     id: 'source.ip',
-    initialWidth: 120,
   },
   {
     columnHeaderType: defaultColumnHeaderType,
     id: 'destination.ip',
-    initialWidth: 140,
   },
 ];

x-pack/plugins/security_solution/public/detections/configurations/security_solution_detections/render_cell_value.test.tsx

@@ -41,6 +41,7 @@ describe('RenderCellValue', () => {
       eventId,
       header,
       isDetails: false,
+      isDraggable: false,
       isExpandable: false,
       isExpanded: false,
       linkValues,

x-pack/plugins/security_solution/public/detections/configurations/security_solution_detections/render_cell_value.tsx

@@ -22,6 +22,7 @@ export const RenderCellValue: React.FC<
   columnId,
   data,
   eventId,
+  isDraggable,
   header,
   isDetails,
   isExpandable,
@@ -35,6 +36,7 @@ export const RenderCellValue: React.FC<
     columnId={columnId}
     data={data}
     eventId={eventId}
+    isDraggable={isDraggable}
     header={header}
     isDetails={isDetails}
     isExpandable={isExpandable}

x-pack/plugins/security_solution/public/hosts/pages/navigation/events_query_tab_body.tsx

@@ -24,6 +24,8 @@ import { MatrixHistogramType } from '../../../../common/search_strategy/security
 import { defaultRowRenderers } from '../../../timelines/components/timeline/body/renderers';
 import { DefaultCellRenderer } from '../../../timelines/components/timeline/cell_rendering/default_cell_renderer';
 import { SourcererScopeName } from '../../../common/store/sourcerer/model';
+import { useIsExperimentalFeatureEnabled } from '../../../common/hooks/use_experimental_features';
+import { DEFAULT_COLUMN_MIN_WIDTH } from '../../../timelines/components/timeline/body/constants';
 
 const EVENTS_HISTOGRAM_ID = 'eventsHistogramQuery';
 
@@ -66,14 +68,23 @@ const EventsQueryTabBodyComponent: React.FC<HostsComponentsQueryProps> = ({
   const dispatch = useDispatch();
   const { globalFullScreen } = useGlobalFullScreen();
 
+  const tGridEnabled = useIsExperimentalFeatureEnabled('tGridEnabled');
+
   useEffect(() => {
     dispatch(
       timelineActions.initializeTGridSettings({
         id: TimelineId.hostsPageEvents,
-        defaultColumns: eventsDefaultModel.columns,
+        defaultColumns: eventsDefaultModel.columns.map((c) =>
+          !tGridEnabled && c.initialWidth == null
+            ? {
+                ...c,
+                initialWidth: DEFAULT_COLUMN_MIN_WIDTH,
+              }
+            : c
+        ),
       })
     );
-  }, [dispatch]);
+  }, [dispatch, tGridEnabled]);
 
   useEffect(() => {
     return () => {