[8.x] [Security Solution] Security Alert Table Performance Optimizati…

…ons (#192827) (#195935) # Backport This will backport the following commits from `main` to `8.x`: - [[Security Solution] Security Alert Table Performance Optimizations (#192827)](#192827)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Jatin Kathuria <[email protected]>
elastic · Oct 11, 2024 · 5ebef44 · 5ebef44
1 parent 77e8ad4
commit 5ebef44
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 12 deletions.
diff --git a/x-pack/plugins/security_solution/public/detections/components/alerts_table/index.tsx b/x-pack/plugins/security_solution/public/detections/components/alerts_table/index.tsx
@@ -53,6 +53,10 @@ import { useFetchNotes } from '../../../notes/hooks/use_fetch_notes';
 
 const { updateIsLoading, updateTotalCount } = dataTableActions;
 
+const DEFAULT_DATA_GRID_HEIGHT = 600;
+
+const ALERT_TABLE_FEATURE_ID: AlertsTableStateProps['featureIds'] = ['siem'];
+
 // Highlight rows with building block alerts
 const shouldHighlightRow = (alert: Alert) => !!alert[ALERT_BUILDING_BLOCK_TYPE];
 
@@ -158,6 +162,7 @@ export const AlertsTableComponent: FC<DetectionEngineAlertTableProps> = ({
       sessionViewConfig,
       viewMode: tableView = eventsDefaultModel.viewMode,
       columns,
+      totalCount: count,
     } = getAlertsDefaultModel(license),
   } = useShallowEqualSelector((state: State) => eventsViewerSelector(state, tableId));
 
@@ -269,13 +274,20 @@ export const AlertsTableComponent: FC<DetectionEngineAlertTableProps> = ({
 
   const { onLoad } = useFetchNotes();
 
+  const toolbarVisibility = useMemo(() => {
+    return {
+      showColumnSelector: !isEventRenderedView,
+      showSortSelector: !isEventRenderedView,
+    };
+  }, [isEventRenderedView]);
+
   const alertStateProps: AlertsTableStateProps = useMemo(
     () => ({
       alertsTableConfigurationRegistry: triggersActionsUi.alertsTableConfigurationRegistry,
       configurationId: configId,
       // stores separate configuration based on the view of the table
       id: `detection-engine-alert-table-${configId}-${tableView}`,
-      featureIds: ['siem'],
+      featureIds: ALERT_TABLE_FEATURE_ID,
       query: finalBoolQuery,
       gridStyle,
       shouldHighlightRow,
@@ -286,11 +298,12 @@ export const AlertsTableComponent: FC<DetectionEngineAlertTableProps> = ({
       cellContext,
       onLoaded: onLoad,
       runtimeMappings: sourcererDataView?.runtimeFieldMap as RunTimeMappings,
-      toolbarVisibility: {
-        showColumnSelector: !isEventRenderedView,
-        showSortSelector: !isEventRenderedView,
-      },
-      dynamicRowHeight: isEventRenderedView,
+      toolbarVisibility,
+      // if records are too less, we don't want table to be of fixed height.
+      // it should shrink to the content height.
+      // Height setting enables/disables virtualization depending on fixed/undefined height values respectively.
+      height: count >= 20 ? `${DEFAULT_DATA_GRID_HEIGHT}px` : undefined,
+      initialPageSize: 50,
     }),
     [
       triggersActionsUi.alertsTableConfigurationRegistry,
@@ -305,7 +318,8 @@ export const AlertsTableComponent: FC<DetectionEngineAlertTableProps> = ({
       cellContext,
       onLoad,
       sourcererDataView?.runtimeFieldMap,
-      isEventRenderedView,
+      toolbarVisibility,
+      count,
     ]
   );
 

diff --git a/..._solution/public/timelines/components/timeline/body/renderers/combine_renderers/index.tsx b/..._solution/public/timelines/components/timeline/body/renderers/combine_renderers/index.tsx
@@ -8,6 +8,7 @@
 import React from 'react';
 
 import type { EcsSecurityExtension as Ecs } from '@kbn/securitysolution-ecs';
+import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import type { RowRenderer } from '../../../../../../../common/types';
 import type { RowRendererId } from '../../../../../../../common/api/timeline';
 
@@ -33,9 +34,13 @@ export const combineRenderers = ({
     isDraggable: boolean;
     scopeId: string;
   }) => (
-    <>
-      {a.isInstance(data) && a.renderRow({ contextId, data, isDraggable, scopeId })}
-      {b.isInstance(data) && b.renderRow({ contextId, data, isDraggable, scopeId })}
-    </>
+    <EuiFlexGroup direction="column" gutterSize="m">
+      {a.isInstance(data) && (
+        <EuiFlexItem> {a.renderRow({ contextId, data, isDraggable, scopeId })}</EuiFlexItem>
+      )}
+      {b.isInstance(data) && (
+        <EuiFlexItem>{b.renderRow({ contextId, data, isDraggable, scopeId })}</EuiFlexItem>
+      )}
+    </EuiFlexGroup>
   ),
 });
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_table/alerts_table.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_table/alerts_table.tsx
@@ -316,6 +316,7 @@ const AlertsTable: React.FunctionComponent<AlertsTableProps> = memo((props: Aler
     toolbarVisibility: toolbarVisibilityProp,
     shouldHighlightRow,
     fieldFormats,
+    height,
   } = props;
 
   const dataGridRef = useRef<EuiDataGridRefProps>(null);
@@ -723,6 +724,10 @@ const AlertsTable: React.FunctionComponent<AlertsTableProps> = memo((props: Aler
         </Suspense>
         {alertsCount > 0 && (
           <EuiDataGrid
+            // As per EUI docs, it is not recommended to switch between undefined and defined height.
+            // If user changes height, it is better to unmount and mount the component.
+            // Ref: https://eui.elastic.co/#/tabular-content/data-grid#virtualization
+            key={height ? 'fixedHeight' : 'autoHeight'}
             aria-label="Alerts table"
             data-test-subj="alertsTable"
             columns={columnsWithCellActions}
@@ -741,6 +746,7 @@ const AlertsTable: React.FunctionComponent<AlertsTableProps> = memo((props: Aler
             ref={dataGridRef}
             renderCustomGridBody={dynamicRowHeight ? renderCustomGridBody : undefined}
             renderCellPopover={handleRenderCellPopover}
+            height={height}
           />
         )}
       </section>

diff --git a/...ugins/triggers_actions_ui/public/application/sections/alerts_table/alerts_table_state.tsx b/...ugins/triggers_actions_ui/public/application/sections/alerts_table/alerts_table_state.tsx
@@ -211,6 +211,7 @@ const AlertsTableStateWithQueryProvider = memo(
     dynamicRowHeight,
     lastReloadRequestTime,
     emptyStateHeight,
+    height,
   }: AlertsTableStateProps) => {
     const {
       data,
@@ -339,6 +340,7 @@ const AlertsTableStateWithQueryProvider = memo(
       data,
       ...queryParams,
     });
+
     const {
       alerts = [],
       oldAlertsData = [],
@@ -513,6 +515,7 @@ const AlertsTableStateWithQueryProvider = memo(
         onSortChange,
         onPageChange,
         fieldFormats,
+        height,
       }),
       [
         alertsTableConfiguration,
@@ -552,6 +555,7 @@ const AlertsTableStateWithQueryProvider = memo(
         onSortChange,
         onPageChange,
         fieldFormats,
+        height,
       ]
     );
 

diff --git a/x-pack/plugins/triggers_actions_ui/public/types.ts b/x-pack/plugins/triggers_actions_ui/public/types.ts
@@ -504,7 +504,7 @@ export type AlertsTableProps = {
   onPageChange: (pagination: RuleRegistrySearchRequestPagination) => void;
   renderCellPopover?: ReturnType<GetRenderCellPopover>;
   fieldFormats: FieldFormatsStart;
-} & Partial<Pick<EuiDataGridProps, 'gridStyle' | 'rowHeightsOptions'>>;
+} & Partial<Pick<EuiDataGridProps, 'gridStyle' | 'rowHeightsOptions' | 'height'>>;
 
 export type SetFlyoutAlert = (alertId: string) => void;