[Security Solution] Event Renderer Virtualization

package.json

@@ -115,7 +115,7 @@
     "@elastic/ecs": "^8.11.1",
     "@elastic/elasticsearch": "^8.15.0",
     "@elastic/ems-client": "8.5.3",
-    "@elastic/eui": "95.10.1",
+    "@elastic/eui": "/Users/jatinkathuria/projects/eui/packages/eui/elastic-eui-95.10.1_rc1.tgz",
     "@elastic/filesaver": "1.1.2",
     "@elastic/node-crypto": "1.2.1",
     "@elastic/numeral": "^2.5.1",
@@ -1598,7 +1598,7 @@
     "@types/react-router-dom": "^5.3.3",
     "@types/react-syntax-highlighter": "^15.4.0",
     "@types/react-test-renderer": "^17.0.2",
-    "@types/react-virtualized": "^9.21.22",
+    "@types/react-virtualized": "^9.21.30",
     "@types/react-window": "^1.8.8",
     "@types/react-window-infinite-loader": "^1.0.9",
     "@types/redux-actions": "^2.6.1",

packages/kbn-unified-data-table/src/components/data_table_additional_display_settings.tsx

@@ -127,6 +127,11 @@ export const UnifiedDataTableAdditionalDisplaySettings: React.FC<
   if (onChangeSampleSize) {
     let step = minRangeSampleSize === RANGE_MIN_SAMPLE_SIZE ? RANGE_STEP_SAMPLE_SIZE : 1;
 
+    console.log({
+      activeSampleSize,
+      maxAllowedSampleSize,
+      minRangeSampleSize,
+    });
     if (
       step > 1 &&
       ((activeSampleSize && !checkIfValueIsMultipleOfStep(activeSampleSize, step)) ||

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

@@ -83,7 +83,7 @@ export const StatefulRowRenderer = ({
                 <EuiFlexItem grow={true}>
                   {rowRenderer.renderRow({
                     data: event.ecs,
-                    isDraggable: true,
+                    isDraggable: false,
                     scopeId: timelineId,
                   })}
                 </EuiFlexItem>

x-pack/plugins/security_solution/public/timelines/components/timeline/body/events/stateful_row_renderer/use_stateful_row_renderer.ts

@@ -17,7 +17,10 @@ interface UseStatefulRowRendererArgs {
 
 export function useStatefulRowRenderer(args: UseStatefulRowRendererArgs) {
   const { data, rowRenderers } = args;
+
+  console.time('getRowRenderer');
   const rowRenderer = useMemo(() => getRowRenderer({ data, rowRenderers }), [data, rowRenderers]);
+  console.timeEnd('getRowRenderer');
 
   const result = useMemo(
     () => ({

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

@@ -72,6 +72,8 @@ const compareQueryProps = (prevProps: Props, nextProps: Props) =>
 
 export type Props = TimelineTabCommonProps & PropsFromRedux;
 
+const PAGE_OPTIONS = [10, 100, 1000];
+
 export const QueryTabContentComponent: React.FC<Props> = ({
   activeTab,
   columns,
@@ -521,7 +523,7 @@ const makeMapStateToProps = () => {
       eventIdToNoteIds,
       isLive: input.policy.kind === 'interval',
       itemsPerPage,
-      itemsPerPageOptions,
+      itemsPerPageOptions: PAGE_OPTIONS,
       kqlMode,
       kqlQueryExpression,
       kqlQueryLanguage,

x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/custom_timeline_data_grid_body.tsx

@@ -7,16 +7,22 @@
 
 import type { EuiDataGridCustomBodyProps } from '@elastic/eui';
 import type { DataTableRecord } from '@kbn/discover-utils/types';
-import type { EuiTheme } from '@kbn/react-kibana-context-styled';
+import { type EuiTheme } from '@kbn/react-kibana-context-styled';
 import type { TimelineItem } from '@kbn/timelines-plugin/common';
-import type { FC } from 'react';
-import React, { memo, useMemo } from 'react';
+import type { CSSProperties, FC } from 'react';
+import React, { memo, useMemo, useState, useEffect, useRef, useCallback } from 'react';
 import styled from 'styled-components';
+import { VariableSizeList } from 'react-window';
+import { EuiAutoSizer, useEuiTheme } from '@elastic/eui';
 import type { RowRenderer } from '../../../../../../common/types';
 import { TIMELINE_EVENT_DETAIL_ROW_ID } from '../../body/constants';
 import { useStatefulRowRenderer } from '../../body/events/stateful_row_renderer/use_stateful_row_renderer';
 import { getEventTypeRowClassName } from './get_event_type_row_classname';
 
+const defaultAutoHeight = {
+  defaultHeight: 'auto',
+};
+
 export type CustomTimelineDataGridBodyProps = EuiDataGridCustomBodyProps & {
   rows: Array<DataTableRecord & TimelineItem> | undefined;
   enabledRowRenderers: RowRenderer[];
@@ -27,6 +33,12 @@ export type CustomTimelineDataGridBodyProps = EuiDataGridCustomBodyProps & {
 // THE DataGrid Row default is 34px, but we make ours 40 to account for our row actions
 const DEFAULT_UDT_ROW_HEIGHT = 34;
 
+const SCROLLBAR_STYLE: CSSProperties = {
+  scrollbarWidth: 'thin',
+  scrollPadding: '0 0 0 0',
+  overflow: 'auto',
+};
+
 /**
  *
  * In order to render the additional row with every event ( which displays the row-renderer, notes and notes editor)
@@ -42,31 +54,137 @@ const DEFAULT_UDT_ROW_HEIGHT = 34;
  * */
 export const CustomTimelineDataGridBody: FC<CustomTimelineDataGridBodyProps> = memo(
   function CustomTimelineDataGridBody(props) {
-    const { Cell, visibleColumns, visibleRowData, rows, rowHeight, enabledRowRenderers, refetch } =
-      props;
+    const {
+      Cell,
+      visibleColumns,
+      visibleRowData,
+      rows,
+      rowHeight,
+      enabledRowRenderers,
+      refetch,
+      setCustomGridBodyProps,
+      headerRow,
+      footerRow,
+      gridWidth,
+    } = props;
+
+    const { euiTheme } = useEuiTheme();
+
+    // // Set custom props onto the grid body wrapper
+    const bodyRef = useRef<HTMLDivElement | null>(null);
+    useEffect(() => {
+      setCustomGridBodyProps({
+        ref: bodyRef,
+        style: {
+          width: '100%',
+          height: '100%',
+          overflowY: 'hidden',
+          scrollbarColor: `${euiTheme.colors.mediumShade} ${euiTheme.colors.lightestShade}`,
+        },
+      });
+    }, [setCustomGridBodyProps, euiTheme.colors.mediumShade, euiTheme.colors.lightestShade]);
 
     const visibleRows = useMemo(
       () => (rows ?? []).slice(visibleRowData.startRow, visibleRowData.endRow),
       [rows, visibleRowData]
     );
 
+    const listRef = useRef<VariableSizeList<unknown>>(null);
+
+    const rowHeights = useRef<number[]>([]);
+
+    const setRowHeight = useCallback((index: number, height: number) => {
+      if (rowHeights.current[index] === height) return;
+      listRef.current?.resetAfterIndex(index);
+
+      rowHeights.current[index] = height;
+    }, []);
+
+    const getRowHeight = useCallback((index: number) => {
+      return rowHeights.current[index] ?? 100;
+    }, []);
+
+    const innerRowContainer = useMemo(() => {
+      const InnerComp = React.forwardRef<HTMLDivElement, PropsWithChildren<{}>>(
+        ({ children, style, ...rest }, ref) => {
+          return (
+            <>
+              {headerRow}
+              <div
+                className="row-container"
+                ref={ref}
+                style={{ ...style, position: 'relative' }}
+                {...rest}
+              >
+                {children}
+              </div>
+
+              {footerRow}
+            </>
+          );
+        }
+      );
+
+      InnerComp.displayName = 'InnerRowContainer';
+
+      return InnerComp;
+    }, [headerRow, footerRow]);
+
     return (
-      <>
-        {visibleRows.map((row, rowIndex) => {
+      <EuiAutoSizer className="autosizer" disableWidth>
+        {({ height }) => {
           return (
-            <CustomDataGridSingleRow
-              rowData={row}
-              rowIndex={rowIndex}
-              key={rowIndex}
-              visibleColumns={visibleColumns}
-              rowHeight={rowHeight}
-              Cell={Cell}
-              enabledRowRenderers={enabledRowRenderers}
-              refetch={refetch}
-            />
+            <>
+              {
+                /**
+                 * whenever timeline is minimized, Variable is re-rendered which causes delay,
+                 * so below code makes sure that grid is only rendered when gridWidth is not 0
+                 */
+                gridWidth !== 0 && (
+                  <>
+                    <VariableSizeList
+                      className="variable__list"
+                      width={gridWidth}
+                      height={height}
+                      itemCount={visibleRows.length}
+                      itemSize={getRowHeight}
+                      overscanCount={5}
+                      ref={listRef}
+                      style={SCROLLBAR_STYLE}
+                      innerElementType={innerRowContainer}
+                    >
+                      {({ index, style }) => {
+                        return (
+                          <div
+                            role="row"
+                            style={{
+                              ...style,
+                              width: 'fit-content',
+                            }}
+                            key={`${gridWidth}-${index}`}
+                          >
+                            <CustomDataGridSingleRow
+                              rowData={visibleRows[index]}
+                              rowIndex={index}
+                              visibleColumns={visibleColumns}
+                              Cell={Cell}
+                              enabledRowRenderers={enabledRowRenderers}
+                              refetch={refetch}
+                              setRowHeight={setRowHeight}
+                              rowHeight={rowHeight}
+                              maxWidth={gridWidth}
+                            />
+                          </div>
+                        );
+                      }}
+                    </VariableSizeList>
+                  </>
+                )
+              }
+            </>
           );
-        })}
-      </>
+        }}
+      </EuiAutoSizer>
     );
   }
 );
@@ -81,13 +199,10 @@ const CustomGridRow = styled.div.attrs<{
 }>((props) => ({
   className: `euiDataGridRow ${props.className ?? ''}`,
   role: 'row',
-}))`
-  width: fit-content;
+}))<{
+  maxWidth?: number;
+}>`
   border-bottom: 1px solid ${(props) => (props.theme as EuiTheme).eui.euiBorderThin};
-  . euiDataGridRowCell--controlColumn {
-    height: ${(props: { $cssRowHeight: string }) => props.$cssRowHeight};
-    min-height: ${DEFAULT_UDT_ROW_HEIGHT}px;
-  }
   .udt--customRow {
     border-radius: 0;
     padding: ${(props) => (props.theme as EuiTheme).eui.euiDataGridCellPaddingM};
@@ -99,6 +214,13 @@ const CustomGridRow = styled.div.attrs<{
     background-color: ${(props) => (props.theme as EuiTheme).eui.euiColorEmptyShade};
   }
 
+ [data-gridcell-column-id="timeline-event-detail-row"] > .euiDataGridRowCell__content {
+    max-width: ${(props) => props.maxWidth}px;
+    overflow-x: auto;
+    scrollbar-width: thin;
+    scroll-padding: 0 0 0 0,
+  }
+
    &:has(.unifiedDataTable__cell--expanded) {
       .euiDataGridRowCell--firstColumn,
       .euiDataGridRowCell--lastColumn,
@@ -130,6 +252,8 @@ const CustomGridRowCellWrapper = styled.div.attrs<{
 type CustomTimelineDataGridSingleRowProps = {
   rowData: DataTableRecord & TimelineItem;
   rowIndex: number;
+  setRowHeight: (index: number, height: number) => void;
+  maxWidth: number | undefined;
 } & Pick<
   CustomTimelineDataGridBodyProps,
   'visibleColumns' | 'Cell' | 'enabledRowRenderers' | 'refetch' | 'rowHeight'
@@ -160,12 +284,23 @@ const CustomDataGridSingleRow = memo(function CustomDataGridSingleRow(
     visibleColumns,
     Cell,
     rowHeight: rowHeightMultiple = 0,
+    setRowHeight,
+    maxWidth,
   } = props;
+
   const { canShowRowRenderer } = useStatefulRowRenderer({
     data: rowData.ecs,
     rowRenderers: enabledRowRenderers,
   });
 
+  const rowRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (rowRef.current) {
+      setRowHeight(rowIndex, rowRef.current.offsetHeight);
+    }
+  }, [rowIndex, setRowHeight]);
+
   const cssRowHeight: string = calculateRowHeightInPixels(rowHeightMultiple - 1);
   /**
    * removes the border between the actual row ( timelineEvent) and `TimelineEventDetail` row
@@ -183,15 +318,17 @@ const CustomDataGridSingleRow = memo(function CustomDataGridSingleRow(
   );
   const eventTypeRowClassName = useMemo(() => getEventTypeRowClassName(rowData.ecs), [rowData.ecs]);
 
+  const [rowHeight, _] = useState<number>(0);
+
   return (
     <CustomGridRow
       className={`${rowIndex % 2 !== 0 ? 'euiDataGridRow--striped' : ''}`}
-      $cssRowHeight={cssRowHeight}
       key={rowIndex}
+      ref={rowRef}
+      maxWidth={maxWidth}
     >
-      <CustomGridRowCellWrapper className={eventTypeRowClassName} $cssRowHeight={cssRowHeight}>
+      <CustomGridRowCellWrapper className={eventTypeRowClassName} $cssRowHeight={'auto'}>
         {visibleColumns.map((column, colIndex) => {
-          // Skip the expanded row cell - we'll render it manually outside of the flex wrapper
           if (column.id !== TIMELINE_EVENT_DETAIL_ROW_ID) {
             return (
               <Cell
@@ -209,6 +346,11 @@ const CustomDataGridSingleRow = memo(function CustomDataGridSingleRow(
       {/* Timeline Expanded Row */}
       {canShowRowRenderer ? (
         <Cell
+          rowHeightsOptions={{
+            defaultHeight: 'auto',
+          }}
+          /* @ts-expect-error because currently CellProps do not allow string width but it is important to be passed for height calculations   */
+          width={'100%'}
           colIndex={visibleColumns.length - 1} // If the row is being shown, it should always be the last index
           visibleRowIndex={rowIndex}
         />

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

@@ -295,8 +295,8 @@ export const TimelineDataTableComponent: React.FC<DataTableProps> = memo(
       () => [
         {
           id: TIMELINE_EVENT_DETAIL_ROW_ID,
-          // The header cell should be visually hidden, but available to screen readers
           width: 0,
+          // The header cell should be visually hidden, but available to screen readers
           headerCellRender: () => <></>,
           headerCellProps: { className: 'euiScreenReaderOnly' },
 
@@ -331,6 +331,10 @@ export const TimelineDataTableComponent: React.FC<DataTableProps> = memo(
         visibleRowData,
         visibleColumns,
         setCustomGridBodyProps,
+        headerRow,
+        footerRow,
+        gridWidth,
+        calculatedTableWidth,
       }: EuiDataGridCustomBodyProps) => (
         <CustomTimelineDataGridBody
           rows={tableRows}
@@ -341,6 +345,9 @@ export const TimelineDataTableComponent: React.FC<DataTableProps> = memo(
           enabledRowRenderers={enabledRowRenderers}
           rowHeight={rowHeight}
           refetch={refetch}
+          headerRow={headerRow}
+          footerRow={footerRow}
+          gridWidth={gridWidth}
         />
       ),
       [tableRows, enabledRowRenderers, rowHeight, refetch]
@@ -397,7 +404,7 @@ export const TimelineDataTableComponent: React.FC<DataTableProps> = memo(
             cellActionsTriggerId={SecurityCellActionsTrigger.DEFAULT}
             services={dataGridServices}
             visibleCellActions={3}
-            externalCustomRenderers={customColumnRenderers}
+            externalCustomRenderers={true ? undefined : customColumnRenderers}
             renderDocumentView={EmptyComponent}
             rowsPerPageOptions={itemsPerPageOptions}
             showFullScreenButton={false}