[Discover] Added context aware logic for logs view in discover to show Load More…#211176
Conversation
… for pagination rather than regular page number based pagination
achyutjhunjhunwala
added
release_note:feature
|
Pinging @elastic/obs-ux-logs-team (Team:obs-ux-logs) |
...lugins/shared/discover/public/application/main/components/layout/discover_documents.test.tsx
Outdated
Show resolved
Hide resolved
kertal
added
Feature:Discover
davismcphee
left a comment
davismcphee
left a comment
There was a problem hiding this comment.
I gave this a spin locally, and it's working well overall, but I am noticing that UI flickering I was referring to in the issue when scrolling to the point where the footer is toggled. It's a bit harder to hit using debounce vs throttle, but still there:
I'm also not really a fan of the debounce effect in general. It makes things feel laggy and delayed while scrolling IMO. Is there a particular reason to use it over throttle?
…ents/data_table_footer.test.tsx Co-authored-by: Felix Stürmer <weltenwort@users.noreply.github.com>
…ents/data_table_footer.test.tsx Co-authored-by: Felix Stürmer <weltenwort@users.noreply.github.com>
|
@achyutjhunjhunwala Thanks for looking into it more! Unfortunately I noticed an issue when testing where the footer visibility gets reset and remains visible on loading complete if scrolling up and then down again while loading more: I played around with it a bit and opened a tiny PR against this one with an alternate approach that doesn't use local state and should avoid the reset issue: achyutjhunjhunwala#1. Let me know if you think it makes sense to try something like this instead! |
Alternate approach to hiding footer on "load more" complete
@davismcphee This approach indeed fixes the bug which you found. I have accepted the PR. Eg -
|
weltenwort
left a comment
weltenwort
left a comment
There was a problem hiding this comment.
LGTM, thank you. I defer to @davismcphee for the ongoing discussion 😇.
There was a problem hiding this comment.
Everything seems to be working great now! Thanks for all the work on this and LGTM 👍 I left a couple test related comments that would be great to address if possible, but I don't want to block merging this more than I already have.
Regarding hasScrollToBottom, that's true, although I think it's ok for now since the footer is currently the only component which depends on it. I think we can cross that bridge if/when we get there 🙂
Also quick side note, I updated the labels to backport to 8.19 too since it's pre-FF and we're trying to keep our work in sync between 8.19 and 9.1 when possible.
...lugins/shared/discover/public/application/main/components/layout/discover_documents.test.tsx
Show resolved
Hide resolved
...unctional/test_suites/common/discover/context_awareness/extensions/_get_pagination_config.ts
Show resolved
Hide resolved
davismcphee
added
backport:version
|
Starting backport for target branches: 8.x https://github.com/elastic/kibana/actions/runs/13811573108 |
💛 Build succeeded, but was flaky
Failed CI StepsMetrics [docs]Module Count
Public APIs missing comments
Async chunks
Public APIs missing exports
Page load bundle
Unknown metric groupsAPI count
History
|
💔 All backports failed
Manual backportTo create the backport manually run: Questions ?Please refer to the Backport tool documentation |
|
@davismcphee I am seeing this sort of Backport failed message for the 1st time. Does this mean i need to backport all those other PRs to get this one also done |
💚 All backports created successfully
Note: Successful backport PRs will be merged automatically after passing CI. Questions ?Please refer to the Backport tool documentation |
|
@achyutjhunjhunwala Looks like you got this figured out anyway since I see the backport now, but generally the answer is no. I think it's just a suggestion based on where it noticed conflicts occurred. |
achyutjhunjhunwala
deleted the
add-logic-to-load-more-in-logs-view-in-discover
branch
…to show Load More… (#211176) (#214229) # Backport This will backport the following commits from `main` to `8.x`: - [[Discover] Added context aware logic for logs view in discover to show Load More… (#211176)](#211176) <!--- Backport version: 9.6.6 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport) <!--BACKPORT [{"author":{"name":"Achyut Jhunjhunwala","email":"achyut.jhunjhunwala@elastic.co"},"sourceCommit":{"committedDate":"2025-03-12T12:39:27Z","message":"[Discover] Added context aware logic for logs view in discover to show Load More… (#211176)\n\n## Summary\n\nCloses - https://github.com/elastic/kibana/issues/166679\n\n## What's included ?\n\n- The PR adds a feature in Logs View of Observability (to start with) to\nhide the regular pagination toolbar from the footer and show Load More\nonly when the user has scrolled to the bottom of the page.\n- The table would always load the items in batches of default set 500 \n- This PR also add 2 helper functions `useThrottleFn` and\n`useDebounceFn`. Current React help library which KIbana uses called\n-`react-use` does not have these and we cannot use Lodash variant of\nthese. We need such hooks which are React safe. Hence added these 2\n\n\n## What's pending ?\n\n- [x] Unit tests for the 2 new helper React hooks\n- [x] Unit tests for data table footer component\n- [x] Unit tests for Profile Resolution\n- [x] Functional Serverless Tests\n- [x] Functional Stateful Tests\n\n\n\n\n---------\n\nCo-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>\nCo-authored-by: Davis McPhee <davismcphee@hotmail.com>\nCo-authored-by: Felix Stürmer <weltenwort@users.noreply.github.com>\nCo-authored-by: Davis McPhee <davis.mcphee@elastic.co>","sha":"591c5b73c00f8a4e5316aed9c1d32c7316e6dd34","branchLabelMapping":{"^v9.1.0$":"main","^v8.19.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Feature:Discover","release_note:feature","Team:obs-ux-logs","Project:OneDiscover","backport:version","v9.1.0","v8.19.0"],"title":"[Discover] Added context aware logic for logs view in discover to show Load More…","number":211176,"url":"https://github.com/elastic/kibana/pull/211176","mergeCommit":{"message":"[Discover] Added context aware logic for logs view in discover to show Load More… (#211176)\n\n## Summary\n\nCloses - https://github.com/elastic/kibana/issues/166679\n\n## What's included ?\n\n- The PR adds a feature in Logs View of Observability (to start with) to\nhide the regular pagination toolbar from the footer and show Load More\nonly when the user has scrolled to the bottom of the page.\n- The table would always load the items in batches of default set 500 \n- This PR also add 2 helper functions `useThrottleFn` and\n`useDebounceFn`. Current React help library which KIbana uses called\n-`react-use` does not have these and we cannot use Lodash variant of\nthese. We need such hooks which are React safe. Hence added these 2\n\n\n## What's pending ?\n\n- [x] Unit tests for the 2 new helper React hooks\n- [x] Unit tests for data table footer component\n- [x] Unit tests for Profile Resolution\n- [x] Functional Serverless Tests\n- [x] Functional Stateful Tests\n\n\n\n\n---------\n\nCo-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>\nCo-authored-by: Davis McPhee <davismcphee@hotmail.com>\nCo-authored-by: Felix Stürmer <weltenwort@users.noreply.github.com>\nCo-authored-by: Davis McPhee <davis.mcphee@elastic.co>","sha":"591c5b73c00f8a4e5316aed9c1d32c7316e6dd34"}},"sourceBranch":"main","suggestedTargetBranches":["8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/211176","number":211176,"mergeCommit":{"message":"[Discover] Added context aware logic for logs view in discover to show Load More… (#211176)\n\n## Summary\n\nCloses - https://github.com/elastic/kibana/issues/166679\n\n## What's included ?\n\n- The PR adds a feature in Logs View of Observability (to start with) to\nhide the regular pagination toolbar from the footer and show Load More\nonly when the user has scrolled to the bottom of the page.\n- The table would always load the items in batches of default set 500 \n- This PR also add 2 helper functions `useThrottleFn` and\n`useDebounceFn`. Current React help library which KIbana uses called\n-`react-use` does not have these and we cannot use Lodash variant of\nthese. We need such hooks which are React safe. Hence added these 2\n\n\n## What's pending ?\n\n- [x] Unit tests for the 2 new helper React hooks\n- [x] Unit tests for data table footer component\n- [x] Unit tests for Profile Resolution\n- [x] Functional Serverless Tests\n- [x] Functional Stateful Tests\n\n\n\n\n---------\n\nCo-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>\nCo-authored-by: Davis McPhee <davismcphee@hotmail.com>\nCo-authored-by: Felix Stürmer <weltenwort@users.noreply.github.com>\nCo-authored-by: Davis McPhee <davis.mcphee@elastic.co>","sha":"591c5b73c00f8a4e5316aed9c1d32c7316e6dd34"}},{"branch":"8.x","label":"v8.19.0","branchLabelMappingKey":"^v8.19.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}] BACKPORT--> --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
…w Load More… (elastic#211176) ## Summary Closes - elastic#166679 ## What's included ? - The PR adds a feature in Logs View of Observability (to start with) to hide the regular pagination toolbar from the footer and show Load More only when the user has scrolled to the bottom of the page. - The table would always load the items in batches of default set 500 - This PR also add 2 helper functions `useThrottleFn` and `useDebounceFn`. Current React help library which KIbana uses called -`react-use` does not have these and we cannot use Lodash variant of these. We need such hooks which are React safe. Hence added these 2 ## What's pending ? - [x] Unit tests for the 2 new helper React hooks - [x] Unit tests for data table footer component - [x] Unit tests for Profile Resolution - [x] Functional Serverless Tests - [x] Functional Stateful Tests  --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Davis McPhee <davismcphee@hotmail.com> Co-authored-by: Felix Stürmer <weltenwort@users.noreply.github.com> Co-authored-by: Davis McPhee <davis.mcphee@elastic.co>
10 participants
Summary
Closes #166679
What's included ?
useThrottleFnanduseDebounceFn. Current React help library which KIbana uses called -react-usedoes not have these and we cannot use Lodash variant of these. We need such hooks which are React safe. Hence added these 2What's pending ?