[Security Solution][Bug fix] alerts table over 10k results (#145441)

This PR aims to address:
- https://github.com/elastic/kibana/issues/142965

### Background
On Alerts page -> Events table -> Event Rendered view, when there are
over 10,000 alerts, upon clicking the last page, a warning message
appears.

<img width="800" alt="image"
src="https://user-images.githubusercontent.com/18648970/202265598-5d9d657c-4918-408e-9f92-bcaafc904757.png">

The pop up is expected behavior according to documentation from:
https://www.elastic.co/guide/en/elasticsearch/reference/current/paginate-search-results.html
.

> By default, you cannot use from and size to page through more than
10,000 hits. This limit is a safeguard set by the
[index.max_result_window](https://www.elastic.co/guide/en/elasticsearch/reference/current/index-modules.html#index-max-result-window)
index setting.


### After
Currently the Grid view has a safeguard in place, where if there are
more than 10k results, it will not show the last page, hence preventing
user from clicking it and seeing the error pop up.
- This PR applies the same approach by wrapping the `EventRenderView`
component with the `EuiDataGridContainer`.
- This PR also renamed `EuiDataGridContainer` to
`EuiEventTableContainer` to indicate broader use.

When there are over 10k records, last page is not available in
pagination, and it is the same in Event Rendered View as in Grid view:




https://user-images.githubusercontent.com/18648970/202271379-309cbb3c-5da6-4c46-9814-beeca39d1f36.mov
This commit is contained in:
christineweng 2022-11-16 17:38:43 -06:00 committed by GitHub
parent d82075f8d6
commit 3c77ec0633
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -140,7 +140,7 @@ const EmptyHeaderCellRender: ComponentType = () => null;
const gridStyle: EuiDataGridStyle = { border: 'none', fontSize: 's', header: 'underline' };
const EuiDataGridContainer = styled.div<{ hideLastPage: boolean }>`
const EuiEventTableContainer = styled.div<{ hideLastPage: boolean }>`
ul.euiPagination__list {
li.euiPagination__item:last-child {
${({ hideLastPage }) => `${hideLastPage ? 'display:none' : ''}`};
@ -877,7 +877,7 @@ export const BodyComponent = React.memo<StatefulBodyProps>(
<>
<StatefulEventContext.Provider value={activeStatefulEventContext}>
{tableView === 'gridView' && (
<EuiDataGridContainer hideLastPage={totalItems > ES_LIMIT_COUNT}>
<EuiEventTableContainer hideLastPage={totalItems > ES_LIMIT_COUNT}>
<EuiDataGrid
id={'body-data-grid'}
data-test-subj="body-data-grid"
@ -901,24 +901,26 @@ export const BodyComponent = React.memo<StatefulBodyProps>(
}}
ref={dataGridRef}
/>
</EuiDataGridContainer>
</EuiEventTableContainer>
)}
{tableView === 'eventRenderedView' && (
<EventRenderedView
appId={appId}
alertToolbar={alertToolbar}
events={data}
getRowRenderer={getRowRenderer}
leadingControlColumns={leadingTGridControlColumns ?? []}
onChangePage={onChangePage}
onChangeItemsPerPage={onChangeItemsPerPage}
pageIndex={activePage}
pageSize={pageSize}
pageSizeOptions={itemsPerPageOptions}
rowRenderers={rowRenderers}
timelineId={id}
totalItemCount={totalItems}
/>
<EuiEventTableContainer hideLastPage={totalItems > ES_LIMIT_COUNT}>
<EventRenderedView
appId={appId}
alertToolbar={alertToolbar}
events={data}
getRowRenderer={getRowRenderer}
leadingControlColumns={leadingTGridControlColumns ?? []}
onChangePage={onChangePage}
onChangeItemsPerPage={onChangeItemsPerPage}
pageIndex={activePage}
pageSize={pageSize}
pageSizeOptions={itemsPerPageOptions}
rowRenderers={rowRenderers}
timelineId={id}
totalItemCount={totalItems}
/>
</EuiEventTableContainer>
)}
</StatefulEventContext.Provider>
</>