-
Notifications
You must be signed in to change notification settings - Fork 8.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Security][RAM] Fix Cases > Alerts data grid height rendering in as 0 #134268
Conversation
`alertsCount` is -1 on init which leads to buggy data grid height calculations. Waiting for `alertsCount` to be an actual value before instantiating the grid solves the issue
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thank you for the fix!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Confirmed this looks good on Firefox on Windows. The table is now displayed correctly, and there is no gap below the data grid in the table in Security:
Is there any chance that the issue with the gap below the table in Security, on Chrome could be addressed in this PR. With these changes - Chrome (Windows):
Compared to before (Chrome, Windows):
The row height looks better with these changes, but it would be good to fix the extra padding below the table which is introduced now.
Thanks very much for testing on FF on Windows @petehaverson!
It looks like this is a separate issue already occurring with other Security data grids: #129057 Per my comments in the collapsed section of this PR, I strongly suspect your issues with data grid height in general across Security are due to your main page Changing that would affect a lot more than just this data grid and I would consider that strongly out of scope for this PR. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM!
Thanks all! Pulling latest for safety and then merging. |
@elasticmachine merge upstream |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for the extra context around the data grids in Security @constancecchen. Makes sense to address #129057 separately. LGTM
💚 Build SucceededMetrics [docs]Async chunks
History
To update your PR or re-run it, just comment with: |
…#134268) * Fix negative rowCount causing incorrect EuiDataGrid height calculations `alertsCount` is -1 on init which leads to buggy data grid height calculations. Waiting for `alertsCount` to be an actual value before instantiating the grid solves the issue * Re-add fontSize styling which was causing grid height bugs in #133691 (comment) Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> (cherry picked from commit a943b81)
💚 All backports created successfully
Note: Successful backport PRs will be merged automatically after passing CI. Questions ?Please refer to the Backport tool documentation |
…#134268) (#134498) * Fix negative rowCount causing incorrect EuiDataGrid height calculations `alertsCount` is -1 on init which leads to buggy data grid height calculations. Waiting for `alertsCount` to be an actual value before instantiating the grid solves the issue * Re-add fontSize styling which was causing grid height bugs in #133691 (comment) Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> (cherry picked from commit a943b81) Co-authored-by: Constance <constancecchen@users.noreply.github.com>
Summary
This PR should address #132901 - I don't have a Windows machine or Browserstack account to test, but I'm reasonably confident.
This PR also resolves #133691 (comment) where @XavierM was unable to add
fontSize: 's'
to the datagrid'sgridStyle
, and removes the temporary CSS workaround that was added in the interim.Before
After
Why was this happening?
alertsCount
was coming in at-1
on initial page load which was causing all kinds of rowCount / height calculation shenanigans in the data grid. Adding a conditional check to only initialize/render the data grid whenalertsCount
has actual data / is above -1 solves the problem.Why is there still a slight height gap at the bottom of the datagrid in the 'after' screenshot?
I believe this is coming from two points of unnecessary
display: flex
usage in Security's DOM markup:Neither of these flex wrappers are necessary and the column flex wrapper in particular creates height expectations on the page that affect the wrapped EuiDataGrid.
As this is not an issue with EuiDataGrid itself but rather an issue with Security's markup, I have not addressed that in this PR.
Checklist