[RAC][Alert Triage][TGrid] Update the Alerts Table (TGrid) API to implement renderCellValue

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

@@ -12,6 +12,8 @@ import { TimelineIdLiteral } from '../../../../common/types/timeline';
 import { StatefulEventsViewer } from '../events_viewer';
 import { alertsDefaultModel } from './default_headers';
 import { useManageTimeline } from '../../../timelines/components/manage_timeline';
+import { defaultRowRenderers } from '../../../timelines/components/timeline/body/renderers';
+import { DefaultCellRenderer } from '../../../timelines/components/timeline/cell_rendering/default_cell_renderer';
 import * as i18n from './translations';
 import { useKibana } from '../../lib/kibana';
 import { SourcererScopeName } from '../../store/sourcerer/model';
@@ -91,6 +93,8 @@ const AlertsTableComponent: React.FC<Props> = ({
       defaultModel={alertsDefaultModel}
       end={endDate}
       id={timelineId}
+      renderCellValue={DefaultCellRenderer}
+      rowRenderers={defaultRowRenderers}
       scopeId={SourcererScopeName.default}
       start={startDate}
     />

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

@@ -26,6 +26,8 @@ import { KqlMode } from '../../../timelines/store/timeline/model';
 import { SortDirection } from '../../../timelines/components/timeline/body/sort';
 import { AlertsTableFilterGroup } from '../../../detections/components/alerts_table/alerts_filter_group';
 import { SourcererScopeName } from '../../store/sourcerer/model';
+import { defaultRowRenderers } from '../../../timelines/components/timeline/body/renderers';
+import { DefaultCellRenderer } from '../../../timelines/components/timeline/cell_rendering/default_cell_renderer';
 import { useTimelineEvents } from '../../../timelines/containers';
 
 jest.mock('../../../timelines/components/graph_overlay', () => ({
@@ -99,6 +101,8 @@ const eventsViewerDefaultProps = {
     query: '',
     language: 'kql',
   },
+  renderCellValue: DefaultCellRenderer,
+  rowRenderers: defaultRowRenderers,
   start: from,
   sort: [
     {
@@ -118,6 +122,8 @@ describe('EventsViewer', () => {
     defaultModel: eventsDefaultModel,
     end: to,
     id: TimelineId.test,
+    renderCellValue: DefaultCellRenderer,
+    rowRenderers: defaultRowRenderers,
     start: from,
     scopeId: SourcererScopeName.timeline,
   };

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

@@ -4,7 +4,6 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
-
 import { EuiFlexGroup, EuiFlexItem, EuiPanel } from '@elastic/eui';
 import { isEmpty } from 'lodash/fp';
 import React, { useEffect, useMemo, useState } from 'react';
@@ -41,7 +40,9 @@ import { useManageTimeline } from '../../../timelines/components/manage_timeline
 import { ExitFullScreen } from '../exit_full_screen';
 import { useGlobalFullScreen } from '../../containers/use_full_screen';
 import { TimelineId, TimelineTabs } from '../../../../common/types/timeline';
+import { RowRenderer } from '../../../timelines/components/timeline/body/renderers/row_renderer';
 import { GraphOverlay } from '../../../timelines/components/graph_overlay';
+import { CellValueElementProps } from '../../../timelines/components/timeline/cell_rendering';
 import { SELECTOR_TIMELINE_GLOBAL_CONTAINER } from '../../../timelines/components/timeline/styles';
 
 export const EVENTS_VIEWER_HEADER_HEIGHT = 90; // px
@@ -122,6 +123,8 @@ interface Props {
   kqlMode: KqlMode;
   query: Query;
   onRuleChange?: () => void;
+  renderCellValue: (props: CellValueElementProps) => React.ReactNode;
+  rowRenderers: RowRenderer[];
   start: string;
   sort: Sort[];
   utilityBar?: (refetch: inputsModel.Refetch, totalCount: number) => React.ReactNode;
@@ -146,8 +149,10 @@ const EventsViewerComponent: React.FC<Props> = ({
   itemsPerPage,
   itemsPerPageOptions,
   kqlMode,
-  query,
   onRuleChange,
+  query,
+  renderCellValue,
+  rowRenderers,
   start,
   sort,
   utilityBar,
@@ -310,6 +315,8 @@ const EventsViewerComponent: React.FC<Props> = ({
                     isEventViewer={true}
                     onRuleChange={onRuleChange}
                     refetch={refetch}
+                    renderCellValue={renderCellValue}
+                    rowRenderers={rowRenderers}
                     sort={sort}
                     tabType={TimelineTabs.query}
                     totalPages={calculateTotalPages({
@@ -343,6 +350,7 @@ const EventsViewerComponent: React.FC<Props> = ({
 
 export const EventsViewer = React.memo(
   EventsViewerComponent,
+  // eslint-disable-next-line complexity
   (prevProps, nextProps) =>
     deepEqual(prevProps.browserFields, nextProps.browserFields) &&
     prevProps.columns === nextProps.columns &&
@@ -359,6 +367,8 @@ export const EventsViewer = React.memo(
     prevProps.itemsPerPageOptions === nextProps.itemsPerPageOptions &&
     prevProps.kqlMode === nextProps.kqlMode &&
     deepEqual(prevProps.query, nextProps.query) &&
+    prevProps.renderCellValue === nextProps.renderCellValue &&
+    prevProps.rowRenderers === nextProps.rowRenderers &&
     prevProps.start === nextProps.start &&
     deepEqual(prevProps.sort, nextProps.sort) &&
     prevProps.utilityBar === nextProps.utilityBar &&

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

@@ -18,7 +18,9 @@ import { StatefulEventsViewer } from '.';
 import { eventsDefaultModel } from './default_model';
 import { TimelineId } from '../../../../common/types/timeline';
 import { SourcererScopeName } from '../../store/sourcerer/model';
+import { DefaultCellRenderer } from '../../../timelines/components/timeline/cell_rendering/default_cell_renderer';
 import { useTimelineEvents } from '../../../timelines/containers';
+import { defaultRowRenderers } from '../../../timelines/components/timeline/body/renderers';
 
 jest.mock('../../../timelines/containers', () => ({
   useTimelineEvents: jest.fn(),
@@ -38,6 +40,8 @@ const testProps = {
   end: to,
   indexNames: [],
   id: TimelineId.test,
+  renderCellValue: DefaultCellRenderer,
+  rowRenderers: defaultRowRenderers,
   scopeId: SourcererScopeName.default,
   start: from,
 };

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

@@ -22,6 +22,8 @@ import { useGlobalFullScreen } from '../../containers/use_full_screen';
 import { SourcererScopeName } from '../../store/sourcerer/model';
 import { useSourcererScope } from '../../containers/sourcerer';
 import { DetailsPanel } from '../../../timelines/components/side_panel';
+import { RowRenderer } from '../../../timelines/components/timeline/body/renderers/row_renderer';
+import { CellValueElementProps } from '../../../timelines/components/timeline/cell_rendering';
 
 const DEFAULT_EVENTS_VIEWER_HEIGHT = 652;
 
@@ -41,6 +43,8 @@ export interface OwnProps {
   headerFilterGroup?: React.ReactNode;
   pageFilters?: Filter[];
   onRuleChange?: () => void;
+  renderCellValue: (props: CellValueElementProps) => React.ReactNode;
+  rowRenderers: RowRenderer[];
   utilityBar?: (refetch: inputsModel.Refetch, totalCount: number) => React.ReactNode;
 }
 
@@ -67,8 +71,10 @@ const StatefulEventsViewerComponent: React.FC<Props> = ({
   itemsPerPageOptions,
   kqlMode,
   pageFilters,
-  query,
   onRuleChange,
+  query,
+  renderCellValue,
+  rowRenderers,
   start,
   scopeId,
   showCheckboxes,
@@ -129,6 +135,8 @@ const StatefulEventsViewerComponent: React.FC<Props> = ({
             kqlMode={kqlMode}
             query={query}
             onRuleChange={onRuleChange}
+            renderCellValue={renderCellValue}
+            rowRenderers={rowRenderers}
             start={start}
             sort={sort}
             utilityBar={utilityBar}
@@ -201,6 +209,7 @@ type PropsFromRedux = ConnectedProps<typeof connector>;
 export const StatefulEventsViewer = connector(
   React.memo(
     StatefulEventsViewerComponent,
+    // eslint-disable-next-line complexity
     (prevProps, nextProps) =>
       prevProps.id === nextProps.id &&
       prevProps.scopeId === nextProps.scopeId &&
@@ -215,6 +224,8 @@ export const StatefulEventsViewer = connector(
       deepEqual(prevProps.itemsPerPageOptions, nextProps.itemsPerPageOptions) &&
       prevProps.kqlMode === nextProps.kqlMode &&
       deepEqual(prevProps.query, nextProps.query) &&
+      prevProps.renderCellValue === nextProps.renderCellValue &&
+      prevProps.rowRenderers === nextProps.rowRenderers &&
       deepEqual(prevProps.sort, nextProps.sort) &&
       prevProps.start === nextProps.start &&
       deepEqual(prevProps.pageFilters, nextProps.pageFilters) &&

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

@@ -48,6 +48,8 @@ import {
 import { SourcererScopeName } from '../../../common/store/sourcerer/model';
 import { useSourcererScope } from '../../../common/containers/sourcerer';
 import { buildTimeRangeFilter } from './helpers';
+import { DefaultCellRenderer } from '../../../timelines/components/timeline/cell_rendering/default_cell_renderer';
+import { defaultRowRenderers } from '../../../timelines/components/timeline/body/renderers';
 
 interface OwnProps {
   timelineId: TimelineIdLiteral;
@@ -336,6 +338,8 @@ export const AlertsTableComponent: React.FC<AlertsTableComponentProps> = ({
       headerFilterGroup={headerFilterGroup}
       id={timelineId}
       onRuleChange={onRuleChange}
+      renderCellValue={DefaultCellRenderer}
+      rowRenderers={defaultRowRenderers}
       scopeId={SourcererScopeName.detections}
       start={from}
       utilityBar={utilityBarCallback}

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

@@ -21,6 +21,8 @@ import { useGlobalFullScreen } from '../../../common/containers/use_full_screen'
 import * as i18n from '../translations';
 import { MatrixHistogramType } from '../../../../common/search_strategy/security_solution';
 import { useManageTimeline } from '../../../timelines/components/manage_timeline';
+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';
 
 const EVENTS_HISTOGRAM_ID = 'eventsHistogramQuery';
@@ -96,6 +98,8 @@ const EventsQueryTabBodyComponent: React.FC<HostsComponentsQueryProps> = ({
         defaultModel={eventsDefaultModel}
         end={endDate}
         id={TimelineId.hostsPageEvents}
+        renderCellValue={DefaultCellRenderer}
+        rowRenderers={defaultRowRenderers}
         scopeId={SourcererScopeName.default}
         start={startDate}
         pageFilters={pageFilters}

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

@@ -14,6 +14,8 @@ import { StatefulTimeline } from '../../timeline';
 import { TimelineId } from '../../../../../common/types/timeline';
 import * as i18n from './translations';
 import { timelineActions } from '../../../store/timeline';
+import { defaultRowRenderers } from '../../timeline/body/renderers';
+import { DefaultCellRenderer } from '../../timeline/cell_rendering/default_cell_renderer';
 import { focusActiveTimelineButton } from '../../timeline/helpers';
 
 interface FlyoutPaneComponentProps {
@@ -46,7 +48,11 @@ const FlyoutPaneComponent: React.FC<FlyoutPaneComponentProps> = ({ timelineId })
         onClose={handleClose}
         size="l"
       >
-        <StatefulTimeline timelineId={timelineId} />
+        <StatefulTimeline
+          renderCellValue={DefaultCellRenderer}
+          rowRenderers={defaultRowRenderers}
+          timelineId={timelineId}
+        />
       </EuiFlyout>
     </EuiFlyoutContainer>
   );