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

# Backport

This will backport the following commits from `main` to `8.5`:
- [[Security Solution][Bug fix] alerts table over 10k results
(#145441)](https://github.com/elastic/kibana/pull/145441)

<!--- Backport version: 8.9.7 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT
[{"author":{"name":"christineweng","email":"18648970+christineweng@users.noreply.github.com"},"sourceCommit":{"committedDate":"2022-11-16T23:38:43Z","message":"[Security
Solution][Bug fix] alerts table over 10k results (#145441)\n\nThis PR
aims to address:\r\n-
https://github.com/elastic/kibana/issues/142965\r\n\r\n###
Background\r\nOn Alerts page -> Events table -> Event Rendered view,
when there are\r\nover 10,000 alerts, upon clicking the last page, a
warning message\r\nappears.\r\n\r\n<img width=\"800\"
alt=\"image\"\r\nsrc=\"https://user-images.githubusercontent.com/18648970/202265598-5d9d657c-4918-408e-9f92-bcaafc904757.png\">\r\n\r\nThe
pop up is expected behavior according to documentation
from:\r\nhttps://www.elastic.co/guide/en/elasticsearch/reference/current/paginate-search-results.html\r\n.\r\n\r\n>
By default, you cannot use from and size to page through more
than\r\n10,000 hits. This limit is a safeguard set by
the\r\n[index.max_result_window](https://www.elastic.co/guide/en/elasticsearch/reference/current/index-modules.html#index-max-result-window)\r\nindex
setting.\r\n\r\n\r\n### After\r\nCurrently the Grid view has a safeguard
in place, where if there are\r\nmore than 10k results, it will not show
the last page, hence preventing\r\nuser from clicking it and seeing the
error pop up.\r\n- This PR applies the same approach by wrapping the
`EventRenderView`\r\ncomponent with the `EuiDataGridContainer`.\r\n-
This PR also renamed `EuiDataGridContainer`
to\r\n`EuiEventTableContainer` to indicate broader use.\r\n\r\nWhen
there are over 10k records, last page is not available in\r\npagination,
and it is the same in Event Rendered View as in Grid
view:\r\n\r\n\r\n\r\n\r\nhttps://user-images.githubusercontent.com/18648970/202271379-309cbb3c-5da6-4c46-9814-beeca39d1f36.mov","sha":"3c77ec063387ee1c7545774d069f134d55eabe2b","branchLabelMapping":{"^v8.7.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["bug","release_note:skip","v6.8.6","Team:Threat
Hunting","Team: SecuritySolution","Team:Threat
Hunting:Investigations","v8.7.0"],"number":145441,"url":"https://github.com/elastic/kibana/pull/145441","mergeCommit":{"message":"[Security
Solution][Bug fix] alerts table over 10k results (#145441)\n\nThis PR
aims to address:\r\n-
https://github.com/elastic/kibana/issues/142965\r\n\r\n###
Background\r\nOn Alerts page -> Events table -> Event Rendered view,
when there are\r\nover 10,000 alerts, upon clicking the last page, a
warning message\r\nappears.\r\n\r\n<img width=\"800\"
alt=\"image\"\r\nsrc=\"https://user-images.githubusercontent.com/18648970/202265598-5d9d657c-4918-408e-9f92-bcaafc904757.png\">\r\n\r\nThe
pop up is expected behavior according to documentation
from:\r\nhttps://www.elastic.co/guide/en/elasticsearch/reference/current/paginate-search-results.html\r\n.\r\n\r\n>
By default, you cannot use from and size to page through more
than\r\n10,000 hits. This limit is a safeguard set by
the\r\n[index.max_result_window](https://www.elastic.co/guide/en/elasticsearch/reference/current/index-modules.html#index-max-result-window)\r\nindex
setting.\r\n\r\n\r\n### After\r\nCurrently the Grid view has a safeguard
in place, where if there are\r\nmore than 10k results, it will not show
the last page, hence preventing\r\nuser from clicking it and seeing the
error pop up.\r\n- This PR applies the same approach by wrapping the
`EventRenderView`\r\ncomponent with the `EuiDataGridContainer`.\r\n-
This PR also renamed `EuiDataGridContainer`
to\r\n`EuiEventTableContainer` to indicate broader use.\r\n\r\nWhen
there are over 10k records, last page is not available in\r\npagination,
and it is the same in Event Rendered View as in Grid
view:\r\n\r\n\r\n\r\n\r\nhttps://user-images.githubusercontent.com/18648970/202271379-309cbb3c-5da6-4c46-9814-beeca39d1f36.mov","sha":"3c77ec063387ee1c7545774d069f134d55eabe2b"}},"sourceBranch":"main","suggestedTargetBranches":["6.8"],"targetPullRequestStates":[{"branch":"6.8","label":"v6.8.6","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v8.7.0","labelRegex":"^v8.7.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/145441","number":145441,"mergeCommit":{"message":"[Security
Solution][Bug fix] alerts table over 10k results (#145441)\n\nThis PR
aims to address:\r\n-
https://github.com/elastic/kibana/issues/142965\r\n\r\n###
Background\r\nOn Alerts page -> Events table -> Event Rendered view,
when there are\r\nover 10,000 alerts, upon clicking the last page, a
warning message\r\nappears.\r\n\r\n<img width=\"800\"
alt=\"image\"\r\nsrc=\"https://user-images.githubusercontent.com/18648970/202265598-5d9d657c-4918-408e-9f92-bcaafc904757.png\">\r\n\r\nThe
pop up is expected behavior according to documentation
from:\r\nhttps://www.elastic.co/guide/en/elasticsearch/reference/current/paginate-search-results.html\r\n.\r\n\r\n>
By default, you cannot use from and size to page through more
than\r\n10,000 hits. This limit is a safeguard set by
the\r\n[index.max_result_window](https://www.elastic.co/guide/en/elasticsearch/reference/current/index-modules.html#index-max-result-window)\r\nindex
setting.\r\n\r\n\r\n### After\r\nCurrently the Grid view has a safeguard
in place, where if there are\r\nmore than 10k results, it will not show
the last page, hence preventing\r\nuser from clicking it and seeing the
error pop up.\r\n- This PR applies the same approach by wrapping the
`EventRenderView`\r\ncomponent with the `EuiDataGridContainer`.\r\n-
This PR also renamed `EuiDataGridContainer`
to\r\n`EuiEventTableContainer` to indicate broader use.\r\n\r\nWhen
there are over 10k records, last page is not available in\r\npagination,
and it is the same in Event Rendered View as in Grid
view:\r\n\r\n\r\n\r\n\r\nhttps://user-images.githubusercontent.com/18648970/202271379-309cbb3c-5da6-4c46-9814-beeca39d1f36.mov","sha":"3c77ec063387ee1c7545774d069f134d55eabe2b"}}]}]
BACKPORT-->

Co-authored-by: christineweng <18648970+christineweng@users.noreply.github.com>

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

@@ -147,7 +147,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' : ''}`};
@@ -880,7 +880,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"
@@ -904,24 +904,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>
       </>