From 13da73d71957933328b16030c1a38ef4d617a5ee Mon Sep 17 00:00:00 2001 From: Michael Olorunnisola Date: Tue, 3 May 2022 13:51:49 -0400 Subject: [PATCH 1/3] add pagination to details table --- .../event_details/event_fields_browser.tsx | 34 +++++++++++++++++-- 1 file changed, 32 insertions(+), 2 deletions(-) diff --git a/x-pack/plugins/security_solution/public/common/components/event_details/event_fields_browser.tsx b/x-pack/plugins/security_solution/public/common/components/event_details/event_fields_browser.tsx index 4aeb63862a8e..04bf986fcfba 100644 --- a/x-pack/plugins/security_solution/public/common/components/event_details/event_fields_browser.tsx +++ b/x-pack/plugins/security_solution/public/common/components/event_details/event_fields_browser.tsx @@ -7,7 +7,7 @@ import { getOr, noop, sortBy } from 'lodash/fp'; import { EuiInMemoryTable } from '@elastic/eui'; -import React, { useCallback, useEffect, useMemo, useRef } from 'react'; +import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'; import { useDispatch } from 'react-redux'; import { rgba } from 'polished'; import styled from 'styled-components'; @@ -131,6 +131,32 @@ const StyledEuiInMemoryTable = styled(EuiInMemoryTable as any)` } `; +// Match structure in discover +const COUNT_PER_PAGE_OPTIONS = [25, 50, 100]; + +// Encapsulating the pagination logic for the table. +const useFieldBrowserPagination = () => { + const [pagination, setPagination] = useState<{ pageIndex: number }>({ + pageIndex: 0, + }); + + const onTableChange = useCallback(({ page: { index } }: { page: { index: number } }) => { + setPagination({ pageIndex: index }); + }, []); + const paginationTableProp = useMemo( + () => ({ + ...pagination, + pageSizeOptions: COUNT_PER_PAGE_OPTIONS, + }), + [pagination] + ); + + return { + onTableChange, + paginationTableProp, + }; +}; + /** * This callback, invoked via `EuiInMemoryTable`'s `rowProps, assigns * attributes to every ``. @@ -274,6 +300,9 @@ export const EventFieldsBrowser = React.memo( focusSearchInput(); }, [focusSearchInput]); + // Pagination + const { onTableChange, paginationTableProp } = useFieldBrowserPagination(); + return ( ( items={items} itemId="field" columns={columns} - pagination={false} + onTableChange={onTableChange} + pagination={paginationTableProp} rowProps={onSetRowProps} search={search} sorting={false} From ac8680ebfcb57f7409cc25737d4d0443572a2bc7 Mon Sep 17 00:00:00 2001 From: Michael Olorunnisola Date: Wed, 4 May 2022 11:51:44 -0400 Subject: [PATCH 2/3] update test --- .../integration/detection_alerts/alerts_details.spec.ts | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/x-pack/plugins/security_solution/cypress/integration/detection_alerts/alerts_details.spec.ts b/x-pack/plugins/security_solution/cypress/integration/detection_alerts/alerts_details.spec.ts index e3612a9a125c..b43f6036e595 100644 --- a/x-pack/plugins/security_solution/cypress/integration/detection_alerts/alerts_details.spec.ts +++ b/x-pack/plugins/security_solution/cypress/integration/detection_alerts/alerts_details.spec.ts @@ -24,6 +24,7 @@ import { login, visitWithoutDateRange } from '../../tasks/login'; import { getUnmappedRule } from '../../objects/rule'; import { ALERTS_URL } from '../../urls/navigation'; +import { pageSelector } from '../../screens/alerts_detection_rules'; describe('Alert details with unmapped fields', () => { before(() => { @@ -57,6 +58,7 @@ describe('Alert details with unmapped fields', () => { }; openTable(); + cy.get(ALERT_FLYOUT).find(pageSelector(5)).click({ force: true }); cy.get(ALERT_FLYOUT) .find(TABLE_ROWS) .within(() => { @@ -74,10 +76,12 @@ describe('Alert details with unmapped fields', () => { .within(($tableContainer) => { expect($tableContainer[0].scrollLeft).to.equal(0); - // Try to scroll left and make sure that the table hasn't actually scrolled + // Due to the introduction of pagination on the table, a slight horizontal overflow has been introduced. + // scroll ignores the `overflow-x:hidden` attribute and will still scroll the element if there is a hidden overflow + // Updated the below to equal 4 to account for this and keep a test to make sure it doesn't grow $tableContainer[0].scroll({ left: 1000 }); - expect($tableContainer[0].scrollLeft).to.equal(0); + expect($tableContainer[0].scrollLeft).to.equal(4); }); }); }); From 2c6a5081923e514768e4e43372b1abb96f095491 Mon Sep 17 00:00:00 2001 From: Michael Olorunnisola Date: Wed, 4 May 2022 12:07:37 -0400 Subject: [PATCH 3/3] style change --- .../common/components/event_details/event_fields_browser.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/x-pack/plugins/security_solution/public/common/components/event_details/event_fields_browser.tsx b/x-pack/plugins/security_solution/public/common/components/event_details/event_fields_browser.tsx index 04bf986fcfba..245c435e7e4b 100644 --- a/x-pack/plugins/security_solution/public/common/components/event_details/event_fields_browser.tsx +++ b/x-pack/plugins/security_solution/public/common/components/event_details/event_fields_browser.tsx @@ -59,6 +59,8 @@ const TableWrapper = styled.div` const StyledEuiInMemoryTable = styled(EuiInMemoryTable as any)` flex: 1; overflow: auto; + overflow-x: hidden; + &::-webkit-scrollbar { height: ${({ theme }) => theme.eui.euiScrollBar}; width: ${({ theme }) => theme.eui.euiScrollBar};