From 05d884c65b3b8c67f6e2e65182d749e5b0cb6350 Mon Sep 17 00:00:00 2001 From: Pablo Machado Date: Fri, 10 Sep 2021 16:16:24 +0200 Subject: [PATCH] Fix extra white space on the alert table whe page size is 50 or 100 (#111568) --- .../components/t_grid/body/height_hack.ts | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) diff --git a/x-pack/plugins/timelines/public/components/t_grid/body/height_hack.ts b/x-pack/plugins/timelines/public/components/t_grid/body/height_hack.ts index 47cd1ed92d661..5371d7004a864 100644 --- a/x-pack/plugins/timelines/public/components/t_grid/body/height_hack.ts +++ b/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 ) {