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

This commit is contained in:
Pablo Machado 2021-09-10 16:16:24 +02:00 committed by GitHub
parent 2021e6ecd6
commit 6a3e68956e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -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
) {