Fix extra white space on the alert table whe page size is 50 or 100 (#…

…111568)

x-pack/plugins/timelines/public/components/t_grid/body/height_hack.ts

@@ -7,9 +7,6 @@
 
 import { useState, useLayoutEffect } from 'react';
 
-// That could be different from security and observability. Get it as parameter?
-const INITIAL_DATA_GRID_HEIGHT = 967;
-
 // It will recalculate DataGrid height after this time interval.
 const TIME_INTERVAL = 50;
 
@@ -18,8 +15,17 @@ const TIME_INTERVAL = 50;
  * 3 (three) is a number, numeral and digit. It is the natural number following 2 and preceding 4, and is the smallest
  * odd prime number and the only prime preceding a square number. It has religious or cultural significance in many societies.
  */
+
 const MAGIC_GAP = 3;
 
+// Hard coded height for every page size
+const DATA_GRID_HEIGHT_BY_PAGE_SIZE: { [key: number]: number } = {
+  10: 457,
+  25: 967,
+  50: 1817,
+  100: 3517,
+};
+
 /**
  * HUGE HACK!!!
  * DataGrtid height isn't properly calculated when the grid has horizontal scroll.
@@ -30,13 +36,15 @@ const MAGIC_GAP = 3;
  * Please delete me and allow DataGrid to calculate its height when the bug is fixed.
  */
 export const useDataGridHeightHack = (pageSize: number, rowCount: number) => {
-  const [height, setHeight] = useState(INITIAL_DATA_GRID_HEIGHT);
+  const [height, setHeight] = useState(DATA_GRID_HEIGHT_BY_PAGE_SIZE[pageSize]);
 
   useLayoutEffect(() => {
     setTimeout(() => {
       const gridVirtualized = document.querySelector('#body-data-grid .euiDataGrid__virtualized');
 
-      if (
+      if (rowCount === pageSize) {
+        setHeight(DATA_GRID_HEIGHT_BY_PAGE_SIZE[pageSize]);
+      } else if (
         gridVirtualized &&
         gridVirtualized.children[0].clientHeight !== gridVirtualized.clientHeight // check if it has vertical scroll
       ) {