github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 17:59:23 -04:00
Code Issues Projects Releases Packages Wiki Activity

fix: remove height hack (#122755)

Browse source 
With the upgrade to EUI 44.0.0 we no longer need the height hack for the data grid since the issues that were causing wrong heights have been fixed.
This commit is contained in:
Jan Monschke 2022-01-12 18:56:18 +01:00 • committed by GitHub
parent 20d051fda4
commit d6526b0165
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 0 additions and 77 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,73 +0,0 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
*/
import { useState, useLayoutEffect } from 'react';
// It will recalculate DataGrid height after this time interval.
const TIME_INTERVAL = 50;
/**
* You are probably asking yourself "Why 3?". But that is the wrong mindset. You should be asking yourself "why not 3?".
* 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.
* https://github.com/elastic/eui/issues/5030
*
* In order to get around this bug we are calculating `DataGrid` height here and setting it as a prop.
*
* Please delete me and allow DataGrid to calculate its height when the bug is fixed.
*/
const dataGridRowHeight = 36;
const headerSectionHeight = 32;
const additionalFiltersHeight = 44;
export const useDataGridHeightHack = (pageSize: number, rowCount: number) => {
const [height, setHeight] = useState(DATA_GRID_HEIGHT_BY_PAGE_SIZE[pageSize]);
useLayoutEffect(() => {
setTimeout(() => {
const gridVirtualized = document.querySelector('#body-data-grid .euiDataGrid__virtualized');
if (rowCount === pageSize) {
setHeight(DATA_GRID_HEIGHT_BY_PAGE_SIZE[pageSize]);
} else if (rowCount <= pageSize) {
// This is unnecessary if we add rowCount > pageSize below
setHeight(dataGridRowHeight * rowCount + (headerSectionHeight + additionalFiltersHeight));
} else if (
// rowCount > pageSize && // This will fix the issue but is always full height so has a lot of empty state
gridVirtualized &&
gridVirtualized.children[0].clientHeight !== gridVirtualized.clientHeight // check if it has vertical scroll
) {
setHeight((currHeight) => {
return (
currHeight +
gridVirtualized.children[0].clientHeight -
gridVirtualized.clientHeight +
MAGIC_GAP
);
});
}
}, TIME_INTERVAL);
}, [pageSize, rowCount]);
return height;
};

4
x-pack/plugins/timelines/public/components/t_grid/body/index.tsx
View file

@ -76,7 +76,6 @@ import { checkBoxControlColumn } from './control_columns';
import type { EuiTheme } from '../../../../../../../src/plugins/kibana_react/common';
import { ViewSelection } from '../event_rendered_view/selector';
import { EventRenderedView } from '../event_rendered_view';
import { useDataGridHeightHack } from './height_hack';
import { REMOVE_COLUMN } from './column_headers/translations';
const StatefulAlertStatusBulkActions = lazy(
@ -788,8 +787,6 @@ export const BodyComponent = React.memo<StatefulBodyProps>(
[loadPage]
);
const height = useDataGridHeightHack(pageSize, data.length);
// Store context in state rather than creating object in provider value={} to prevent re-renders caused by a new object being created
const [activeStatefulEventContext] = useState({
timelineID: id,
@ -803,7 +800,6 @@ export const BodyComponent = React.memo<StatefulBodyProps>(
{tableView === 'gridView' && (
<EuiDataGridContainer hideLastPage={totalItems > ES_LIMIT_COUNT}>
<EuiDataGrid
height={height}
id={'body-data-grid'}
data-test-subj="body-data-grid"
aria-label={i18n.TGRID_BODY_ARIA_LABEL}