Skip to content

Commit

Permalink
[Security Solution][Bug fix] alerts table over 10k results (#145441)
Browse files Browse the repository at this point in the history
This PR aims to address:
- #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
  • Loading branch information
christineweng authored Nov 16, 2022
1 parent d82075f commit 3c77ec0
Showing 1 changed file with 20 additions and 18 deletions.
38 changes: 20 additions & 18 deletions x-pack/plugins/timelines/public/components/t_grid/body/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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' : ''}`};
Expand Down Expand Up @@ -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"
Expand All @@ -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>
</>
Expand Down

0 comments on commit 3c77ec0

Please sign in to comment.