[SIEM] Changes authentications table from load more to paginated by stephmilovic · Pull Request #39474 · elastic/kibana

stephmilovic · 2019-06-21T21:56:37Z

Summary

Convert Authentications Table pagination from "Load More" to numbered pagination.

How this works: Say we want to fetch results 90-100. We use the terms aggregation and query for 100 results. Then on the FE server, we splice the results and grab 90-100. Because of this implementation, the risk with numbered pagination is a that huge computation to get the last page. Therefore, I prevent the user from being able to go forward more than 5 pages initially, and after that only one page at a time. That math is done in /public/components/paginated_table/helpers.ts, under fakePossibleCount

Once this has passed code review, I plan on implementing this paging on all other tables. Speak now on implementation details or forever hold your peace!!

Checklist

Use ~~strikethroughs~~ to remove checklist items you don't feel are applicable to this PR.

~~This was checked for cross-browser compatibility, including a check against IE11~~
~~Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support~~
~~Documentation was added for features that require explanation or tutorials~~
Unit or functional tests were updated or added to match the most common scenarios
~~This was checked for keyboard-only and screenreader accessibility~~

For maintainers

~~This was checked for breaking API changes and was labeled appropriately~~
~~This includes a feature addition or change that requires a release note and was labeled appropriately~~

elasticmachine · 2019-06-21T21:56:51Z

Pinging @elastic/secops

x-pack/legacy/plugins/siem/public/components/paginated_table/index.tsx

elasticmachine · 2019-06-21T22:55:27Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

stephmilovic · 2019-06-21T23:12:22Z

retest

elasticmachine · 2019-06-22T00:10:50Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

elasticmachine · 2019-06-27T17:04:59Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2019-06-27T17:08:57Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2019-06-28T22:07:10Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

MichaelMarcialis · 2019-07-01T17:24:37Z

Hey, @stephmilovic. From a design perspective, I have two suggested changes I wish to make:

Currently the alignment of the pagination numbers and arrows appears to be somewhat center aligned. Ideally, I'd like to see these right aligned with the page contents. Assuming you're using EuiFlexGroup to layout the pagination, it should be as simple as setting the EuiFlexItem container for the pagination number to have a prop of grow={false}.
The solution of only showing the first five pages of table data makes sense given the current technical limitations, but it may cause the user to inadvertently think that there are only five pages of data in total (when in fact there may be many more). I think a possible remedy to this would be to include the standard pagination ellipsis after the number 5 page, in situations where the number of pages actually exceeds five. Doing so will at the very least indicate to the user that there are more than five pages, even if they can't quickly navigate to them. For example:

elasticmachine · 2019-07-10T16:58:44Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2019-07-10T18:04:22Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2019-07-10T19:46:11Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

…paginated-table

elasticmachine · 2019-07-10T22:11:43Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

elasticmachine · 2019-07-11T18:07:31Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

XavierM

LGTM for the new pagination!

elasticmachine · 2019-07-11T20:54:16Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

…40915) * cherry * fix lint err

elasticmachine · 2019-07-30T18:58:02Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

stephmilovic added 12 commits June 18, 2019 15:21

paginated table

38b830f

more

024a3ff

get unit tests passing

4ef79ce

hooked up auth table

c84d712

Merge branch 'master' into paginated-table

81faa83

auth table paginated

54d351b

fixing types

17d41c8

tests

0cad2ed

merged master

91d34ef

fix api tests

4e41e46

readd tests

e7c955d

readd tests

9275a47

stephmilovic added loe:medium Medium Level of Effort Team:SIEM labels Jun 21, 2019

stephmilovic commented Jun 21, 2019

View reviewed changes

x-pack/legacy/plugins/siem/public/components/paginated_table/index.tsx Outdated Show resolved Hide resolved

stephmilovic added the release_note:enhancement label Jun 21, 2019

stephmilovic added release_note:skip Skip the PR/issue when compiling release notes and removed release_note:enhancement labels Jun 26, 2019

stephmilovic added 2 commits June 27, 2019 08:24

limit paginated table to 10 items

c8e7ede

Merge branch 'master' into paginated-table

dfae18d

Merge branch 'master' into paginated-table

fbada09

merge in master

af0bea0

stephmilovic added 2 commits July 10, 2019 09:43

show warning toast when too many table results

f045b69

update snapshots

01ca59d

stephmilovic added 2 commits July 10, 2019 12:33

fix type issue

1bb9889

Merge branch 'master' into paginated-table

7cce848

stephmilovic and others added 6 commits July 10, 2019 13:50

better limiting

8447aaf

add test for limit

f00352a

rm styles affecting block lvl elms

4141bca

correct weird rendering of css

a6cc894

Merge remote-tracking branch 'MichaelMarcialis/paginated-table' into …

1f7a4cd

…paginated-table

fix css

98ba369

refactor props usage in styles, per xavier

6c2ac14

stephmilovic requested a review from XavierM July 11, 2019 19:33

get rid of results selector when totalCount is less than results

62d5367

XavierM approved these changes Jul 11, 2019

View reviewed changes

stephmilovic merged commit bfee75e into elastic:master Jul 11, 2019

stephmilovic deleted the paginated-table branch July 11, 2019 20:56

stephmilovic mentioned this pull request Jul 11, 2019

[7.x] [SIEM] - Authentications Table, Numbered Pagination (#39474) #40915

Merged

stephmilovic added a commit that referenced this pull request Jul 16, 2019

[7.x] [SIEM] - Authentications Table, Numbered Pagination (#39474) (#…

8b575af

…40915) * cherry * fix lint err

stephmilovic mentioned this pull request Jul 18, 2019

[SIEM] Changes hosts and network tables from load more to paginated #41532

Merged

7 tasks

FrankHassanabad changed the title ~~[SIEM] - Authentications Table, Numbered Pagination~~ [SIEM] Changes authentications table from load more to paginated Jul 30, 2019

FrankHassanabad added release_note:enhancement and removed release_note:skip Skip the PR/issue when compiling release notes labels Jul 30, 2019

Conversation

stephmilovic commented Jun 21, 2019

Summary

Checklist

For maintainers

Uh oh!

elasticmachine commented Jun 21, 2019

Uh oh!

Uh oh!

elasticmachine commented Jun 21, 2019

💔 Build Failed

Uh oh!

stephmilovic commented Jun 21, 2019

Uh oh!

elasticmachine commented Jun 22, 2019

💚 Build Succeeded

Uh oh!

elasticmachine commented Jun 27, 2019

💔 Build Failed

Uh oh!

elasticmachine commented Jun 27, 2019

💔 Build Failed

Uh oh!

elasticmachine commented Jun 28, 2019

💔 Build Failed

Uh oh!

MichaelMarcialis commented Jul 1, 2019

Uh oh!

elasticmachine commented Jul 10, 2019

💔 Build Failed

Uh oh!

elasticmachine commented Jul 10, 2019

💔 Build Failed

Uh oh!

elasticmachine commented Jul 10, 2019

💚 Build Succeeded

Uh oh!

elasticmachine commented Jul 10, 2019

💚 Build Succeeded

Uh oh!

elasticmachine commented Jul 11, 2019

💚 Build Succeeded

Uh oh!

XavierM left a comment

Choose a reason for hiding this comment

Uh oh!

elasticmachine commented Jul 11, 2019

💚 Build Succeeded

Uh oh!

elasticmachine commented Jul 30, 2019

💔 Build Failed

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants