✨ Use InfiniteScroller pattern for the Task Drawer #2049

rszwajko · 2024-08-05T18:35:54Z

Implement InfiniteScroller based on oVirt VmPortal implementation and
use it to fetch additional tasks in the Task Drawer.
Key features:

fetch data using useInfiniteQuery from React Query
track sentinel visibility using IntersectionObserver API
monitor item count to prevent extra fetchMore calls

Resolves: #1973
Reference-Url: https://github.com/oVirt/ovirt-web-ui/blob/dfe0c4b8c92638f6e41b9fe0b09e0d07509618ae/src/components/VmsList/index.js#L50
Signed-off-by: Radoslaw Szwajkowski rszwajko@redhat.com

codecov · 2024-08-05T18:43:48Z

Codecov Report

Attention: Patch coverage is 13.72549% with 88 lines in your changes missing coverage. Please review.

Project coverage is 42.15%. Comparing base (b654645) to head (d54892f).
Report is 224 commits behind head on main.

Files with missing lines	Patch %	Lines
.../app/components/task-manager/TaskManagerDrawer.tsx	11.11%	32 Missing ⚠️
...mponents/InfiniteScroller/useVisibilityTracker.tsx	7.69%	24 Missing ⚠️
client/src/app/queries/tasks.ts	10.00%	18 Missing ⚠️
...p/components/InfiniteScroller/InfiniteScroller.tsx	26.31%	14 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #2049      +/-   ##
==========================================
+ Coverage   39.20%   42.15%   +2.95%     
==========================================
  Files         146      174      +28     
  Lines        4857     5577     +720     
  Branches     1164     1376     +212     
==========================================
+ Hits         1904     2351     +447     
- Misses       2939     3210     +271     
- Partials       14       16       +2

Flag	Coverage Δ
client	`42.15% <13.72%> (+2.95%)`	⬆️
server	`?`

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

rszwajko · 2024-08-14T18:45:54Z

Infinite scroller inside Task Drawer

(queries with 2 sec delay to show loading progress)

Screencast.from.2024-08-14.20-36-24.mp4

Implement InfiniteScroller based on oVirt VmPortal implementation and use it to fetch additional tasks in the Task Drawer. Key features: 1. fetch data using useInfiniteQuery from React Query 2. track sentinel visibility using IntersectionObserver API 3. monitor item count to prevent extra fetchMore calls Reference-Url: https://github.com/oVirt/ovirt-web-ui/blob/dfe0c4b8c92638f6e41b9fe0b09e0d07509618ae/src/components/VmsList/index.js#L50 Signed-off-by: Radoslaw Szwajkowski <rszwajko@redhat.com>

rszwajko · 2024-09-03T12:19:10Z

@sjd78 @ibolton336
the current version contains log entries and a test page size (2 items) - it makes things easier to test during the review.
I'll remove it before the merge.

sjd78

It is working well, just a few comments and questions.

client/src/app/components/InfiniteScroller/InfiniteScroller.tsx

client/src/app/components/task-manager/TaskManagerDrawer.tsx

client/src/app/queries/tasks.ts

client/src/app/components/InfiniteScroller/useVisibilityTracker.tsx

…r.tsx Co-authored-by: Scott Dickerson <sdickers@redhat.com> Signed-off-by: Radoslaw Szwajkowski <rszwajko@redhat.com>

Signed-off-by: Radoslaw Szwajkowski <rszwajko@redhat.com>

rszwajko · 2024-09-05T16:54:02Z

@sjd78 @ibolton336
I've removed the extra logs. There is also one code change - extra wrapper to avoid setting the state on unmounted component (which theoretically may happen as IntersectionObserver is browser API)

sjd78

LGTM

Fixes: 1. initial delay in first fetch - root cause was delayed initialization of sentinel reference 2. extra page fetch request - algorithm based on items count was not sufficient Reference-Url: #2049 Signed-off-by: Radoslaw Szwajkowski <rszwajko@redhat.com> Co-authored-by: Scott Dickerson <sdickers@redhat.com>

Fixes: 1. initial delay in first fetch - root cause was delayed initialization of sentinel reference 2. extra page fetch request - algorithm based on items count was not sufficient Reference-Url: konveyor#2049 Signed-off-by: Radoslaw Szwajkowski <rszwajko@redhat.com> Co-authored-by: Scott Dickerson <sdickers@redhat.com>

Fixes: 1. initial delay in first fetch - root cause was delayed initialization of sentinel reference 2. extra page fetch request - algorithm based on items count was not sufficient Reference-Url: konveyor#2049 Signed-off-by: Radoslaw Szwajkowski <rszwajko@redhat.com> Co-authored-by: Scott Dickerson <sdickers@redhat.com> Signed-off-by: Shevijacobson <shevijacob@gmail.com>

Fixes: 1. initial delay in first fetch - root cause was delayed initialization of sentinel reference 2. extra page fetch request - algorithm based on items count was not sufficient Reference-Url: konveyor#2049 Signed-off-by: Radoslaw Szwajkowski <rszwajko@redhat.com> Co-authored-by: Scott Dickerson <sdickers@redhat.com> Signed-off-by: DvoraShechter1 <d0583212560@gmail.com>

Fixes: 1. initial delay in first fetch - root cause was delayed initialization of sentinel reference 2. extra page fetch request - algorithm based on items count was not sufficient Reference-Url: konveyor#2049 Signed-off-by: Radoslaw Szwajkowski <rszwajko@redhat.com> Co-authored-by: Scott Dickerson <sdickers@redhat.com> Signed-off-by: HadasahR <d025834828@gmail.com>

Fixes: 1. initial delay in first fetch - root cause was delayed initialization of sentinel reference 2. extra page fetch request - algorithm based on items count was not sufficient Reference-Url: konveyor#2049 Signed-off-by: Radoslaw Szwajkowski <rszwajko@redhat.com> Co-authored-by: Scott Dickerson <sdickers@redhat.com>

rszwajko force-pushed the infiniteScroller branch from 5e72edd to f6ed149 Compare August 12, 2024 13:56

rszwajko force-pushed the infiniteScroller branch from b74b3c2 to ef89747 Compare August 30, 2024 17:25

rszwajko force-pushed the infiniteScroller branch from ef89747 to a326194 Compare September 3, 2024 12:14

rszwajko changed the title ~~✨ Port InfiniteScroller~~ ✨ Use InfiniteScroller pattern for the Task Drawer Sep 3, 2024

rszwajko marked this pull request as ready for review September 3, 2024 12:15

rszwajko requested review from ibolton336 and sjd78 as code owners September 3, 2024 12:15

sjd78 reviewed Sep 4, 2024

View reviewed changes

rszwajko and others added 4 commits September 5, 2024 15:14

Update client/src/app/components/InfiniteScroller/useVisibilityTracke…

681394d

…r.tsx Co-authored-by: Scott Dickerson <sdickers@redhat.com> Signed-off-by: Radoslaw Szwajkowski <rszwajko@redhat.com>

Merge remote-tracking branch 'upstream/main' into infiniteScroller

5ad5d27

Remove extra logs, add setVisibleSafe wrapper for extra safety

a7af822

Signed-off-by: Radoslaw Szwajkowski <rszwajko@redhat.com>

Change page saize to 20

d54892f

Signed-off-by: Radoslaw Szwajkowski <rszwajko@redhat.com>

sjd78 added this to the v0.6.0 milestone Sep 7, 2024

sjd78 approved these changes Sep 7, 2024

View reviewed changes

rszwajko merged commit 7cd3ebb into konveyor:main Sep 9, 2024
13 checks passed

rszwajko mentioned this pull request Sep 10, 2024

🐛 Fix fetching in InfiniteScroller #2085

Merged

rszwajko mentioned this pull request Sep 26, 2024

✨ Add ActionsColumn to Job Functions table #2101

Merged

This was referenced Oct 1, 2024

operator konveyor-operator (0.6.0-alpha.1) k8s-operatorhub/community-operators#5094

Merged

operator konveyor-operator (0.6.0-alpha.1) redhat-openshift-ecosystem/community-operators-prod#5272

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

✨ Use InfiniteScroller pattern for the Task Drawer #2049

✨ Use InfiniteScroller pattern for the Task Drawer #2049

rszwajko commented Aug 5, 2024 •

edited

Loading

codecov bot commented Aug 5, 2024 •

edited

Loading

rszwajko commented Aug 14, 2024 •

edited

Loading

rszwajko commented Sep 3, 2024

sjd78 left a comment

rszwajko commented Sep 5, 2024 •

edited

Loading

sjd78 left a comment

✨ Use InfiniteScroller pattern for the Task Drawer #2049

✨ Use InfiniteScroller pattern for the Task Drawer #2049

Conversation

rszwajko commented Aug 5, 2024 • edited Loading

codecov bot commented Aug 5, 2024 • edited Loading

Codecov Report

rszwajko commented Aug 14, 2024 • edited Loading

Infinite scroller inside Task Drawer

rszwajko commented Sep 3, 2024

sjd78 left a comment

Choose a reason for hiding this comment

rszwajko commented Sep 5, 2024 • edited Loading

sjd78 left a comment

Choose a reason for hiding this comment

rszwajko commented Aug 5, 2024 •

edited

Loading

codecov bot commented Aug 5, 2024 •

edited

Loading

rszwajko commented Aug 14, 2024 •

edited

Loading

rszwajko commented Sep 5, 2024 •

edited

Loading