[Logs UI] Add pagination to the log stream shared component #81193

afgomez · 2020-10-20T15:56:50Z

Summary

This PR implements infinite scroll (AKA pagination) in the log stream shared component.

The first two commits change the existing /log_entries/entries API to return the hasMoreBefore and hasMoreAfter flags. The UI will use this information to decide if it should try to query the API to fetch more pages when the user scrolls.

The third commit uses this new flags in the existing log stream page.

The rest of the commits implement the pagination for the shared log stream component.

Extend the API response with `hasMoreBefore` and `hasMoreAfter` attributes. The value is a three-state boolean, where `undefined` means "we don't know if there are more pages". The API calls go in one direction, either before a `cursor`, or after it. To check if there are entries in the opposite direction we would need to do an extra API call. Instead of doing that for every request, we delegate the responsibility of doing the extra API call to the clients.

elasticmachine · 2020-10-20T15:56:53Z

Pinging @elastic/logs-metrics-ui (Team:logs-metrics-ui)

afgomez · 2020-11-05T09:39:54Z

@elasticmachine merge upstream

afgomez · 2020-11-09T15:31:15Z

@elasticmachine merge upstream

weltenwort

Not sure if it is related to these changes, but I'm not able to see the end-of-stream row at the bottom of the "view in context" modal:

This is on Chromium 86.0.4240.183. It doesn't occur on Firefox. 🤔

afgomez · 2020-11-09T18:50:48Z

@weltenwort it's probably unrelated. I will take a look tomorrow morning though just to be sure and open a ticket for it.

weltenwort

Thanks for providing such a clear progression of the implementation. This made it easier to read. 👍 It seemed work in general, but the "view-in-context" modal still behaves weird for me in Chromium (as mentioned in a previous comment).

Aside from a few style and edge-case nits I noticed that too many queries might be fired when scrolling towards an edge. I commented on that below.

x-pack/plugins/infra/public/components/log_stream/index.tsx

x-pack/plugins/infra/public/containers/logs/log_stream/index.ts

x-pack/plugins/infra/public/components/log_stream/index.tsx

afgomez · 2020-11-10T14:52:02Z

The height issue with the "View in context" modal also happens in master. I'll open a ticket to fix it on a separate PR.

weltenwort

The "fetch storm" on scroll is gone, feels pretty solid - nice job 👏

The ACs mention documentation. Is there anything to be done here?

weltenwort · 2020-11-11T18:23:13Z

x-pack/plugins/infra/public/containers/logs/log_stream/index.ts

+  const prevStartTimestamp = usePrevious(startTimestamp);
+  const prevEndTimestamp = usePrevious(endTimestamp);


nice, I love the expressiveness of usePrevious!

afgomez · 2020-11-12T11:08:01Z

The ACs mention documentation. Is there anything to be done here?

I don't think so. Initially I thought it would be interesting to disable the pagination with a prop, but I cannot think of a use case for it. Since the consumers cannot control how it works there's nothing to add to the docs.

afgomez · 2020-11-12T11:08:13Z

@elasticmachine merge upstream

kibanamachine · 2020-11-12T12:54:12Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request
Commit: 7fafdd9

Metrics [docs]

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
`infra`	2.5MB	2.5MB	+5.4KB

History

💚 Build #87318 succeeded 9b2f2a8
💚 Build #87122 succeeded 378803a
💚 Build #86801 succeeded 37a0bcd
💚 Build #86056 succeeded 3e2723e
💚 Build #83027 succeeded fe16d22

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

* master: [Advanced Settings] Introducing telemetry (elastic#82860) [alerts] add executionStatus to event log doc for action execute (elastic#82401) Add additional sources routes (elastic#83227) [ML] Persisted URL state for the "Anomaly detection jobs" page (elastic#83149) [Logs UI] Add pagination to the log stream shared component (elastic#81193) [Index Management] Add an index template link to data stream details (elastic#82592) Add maps_oss folder to code_owners (elastic#83204) fix truncation issue (elastic#83000) [Ingest Manger] Move asset getters out of registry (elastic#83214)

… alerts/action-groups-as-conditions * origin/alerts/stack-alerts-public: (91 commits) removed import from plugin code as it causes FTR to fail [Advanced Settings] Introducing telemetry (elastic#82860) [alerts] add executionStatus to event log doc for action execute (elastic#82401) Add additional sources routes (elastic#83227) [ML] Persisted URL state for the "Anomaly detection jobs" page (elastic#83149) [Logs UI] Add pagination to the log stream shared component (elastic#81193) [Index Management] Add an index template link to data stream details (elastic#82592) Add maps_oss folder to code_owners (elastic#83204) fix truncation issue (elastic#83000) [Ingest Manger] Move asset getters out of registry (elastic#83214) make defaulted field non maybe Remove unused asciidoc file (elastic#83228) [Lens] Remove background from lens embeddable (elastic#83061) [Discover] Unskip flaky tests based on discover fixture index pattern (elastic#82991) Removing unnecessary trailing slash in CODEOWNERS Trying to fix CODEOWNERS again, where was a non-existent team prior (elastic#83236) Trying to fix CODEOWERS, missing a starting slash (elastic#83233) skip flaky suite (elastic#83231) Add enzyme rerender test helper (elastic#83208) Move Elasticsearch type definitions out of APM (elastic#83081) ...

…1193) (#83283) Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

afgomez added 6 commits October 20, 2020 12:37

Return from the adapter if a response has more pages

415421f

Use hasMoreBefore and hasMoreAfter from the API response

398a644

Track pagination state inside useLogStream

54c9b21

Add pagination callbacks to useLogStream

5fcc039

Handle pagination in the log stream shared component

aebf81f

afgomez added v8.0.0 Feature:Logs UI Logs UI feature Team:Infra Monitoring UI - DEPRECATED DEPRECATED - Label for the Infra Monitoring UI team. Use Team:obs-ux-infra_services v7.11.0 labels Oct 20, 2020

afgomez added this to the Logs UI 7.11 milestone Oct 20, 2020

afgomez requested a review from a team as a code owner October 20, 2020 15:56

afgomez added the release_note:skip Skip the PR/issue when compiling release notes label Oct 20, 2020

afgomez mentioned this pull request Oct 20, 2020

Infinite scrolling in "view logs in context" #61848

Closed

afgomez added 2 commits October 21, 2020 11:33

Fix highlights API

0319c80

Fix before pagination

fe16d22

Merge branch 'master' into 77033-log-stream-component-pagination

3e2723e

Merge branch 'master' into 77033-log-stream-component-pagination

37a0bcd

weltenwort self-requested a review November 9, 2020 17:17

weltenwort reviewed Nov 9, 2020

View reviewed changes

weltenwort reviewed Nov 10, 2020

View reviewed changes

Update react-use import style

d770bcf

afgomez added 2 commits November 10, 2020 16:18

Prevent fetch storms if the UI is already fetching

7e5c892

Wrap pagination handler with a useCallback

378803a

Reset pagination flags when the time range is extended

9b2f2a8

afgomez requested a review from weltenwort November 11, 2020 12:03

weltenwort approved these changes Nov 11, 2020

View reviewed changes

Merge branch 'master' into 77033-log-stream-component-pagination

7fafdd9

afgomez merged commit 0e7bcf6 into elastic:master Nov 12, 2020

afgomez deleted the 77033-log-stream-component-pagination branch November 12, 2020 14:11

afgomez mentioned this pull request Nov 12, 2020

[7.x] [Logs UI] Add pagination to the log stream shared component (#81193) #83283

Merged

afgomez mentioned this pull request Nov 16, 2020

[Metrics UI] Enhanced host details - Logs #80308

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Logs UI] Add pagination to the log stream shared component #81193

[Logs UI] Add pagination to the log stream shared component #81193

afgomez commented Oct 20, 2020 •

edited

Loading

elasticmachine commented Oct 20, 2020

afgomez commented Nov 5, 2020

afgomez commented Nov 9, 2020

weltenwort left a comment

afgomez commented Nov 9, 2020

weltenwort left a comment

afgomez commented Nov 10, 2020 •

edited

Loading

weltenwort left a comment

weltenwort Nov 11, 2020

afgomez commented Nov 12, 2020

afgomez commented Nov 12, 2020

kibanamachine commented Nov 12, 2020

		const prevStartTimestamp = usePrevious(startTimestamp);
		const prevEndTimestamp = usePrevious(endTimestamp);

[Logs UI] Add pagination to the log stream shared component #81193

[Logs UI] Add pagination to the log stream shared component #81193

Conversation

afgomez commented Oct 20, 2020 • edited Loading

Summary

elasticmachine commented Oct 20, 2020

afgomez commented Nov 5, 2020

afgomez commented Nov 9, 2020

weltenwort left a comment

Choose a reason for hiding this comment

afgomez commented Nov 9, 2020

weltenwort left a comment

Choose a reason for hiding this comment

afgomez commented Nov 10, 2020 • edited Loading

weltenwort left a comment

Choose a reason for hiding this comment

weltenwort Nov 11, 2020

Choose a reason for hiding this comment

afgomez commented Nov 12, 2020

afgomez commented Nov 12, 2020

kibanamachine commented Nov 12, 2020

💚 Build Succeeded

Metrics [docs]

Async chunks

History

afgomez commented Oct 20, 2020 •

edited

Loading

afgomez commented Nov 10, 2020 •

edited

Loading