HDDS-11155. Improve Volumes page UI by spacemonkd · Pull Request #7048 · apache/ozone

spacemonkd · 2024-08-08T08:04:38Z

What changes were proposed in this pull request?

This PR will add a new Volumes page which contains a better implementation for the UI

Please describe your PR in detail:

This PR adds a new Volumes Page with improved layout and design.
The new page would help to eventually improve the overall look and feel for Recon
Currently the page is disabled to the user so as to not affect any existing functionality
Apart from this it also shifts towards lazy loading pages so that we can efficiently split the build into smaller chunks

What is the link to the Apache JIRA

https://issues.apache.org/jira/browse/HDDS-11155

How was this patch tested?

This patch was tested manually via both localhost and building and running Ozone via docker
Screenshots:

Old UI

Screenshot	Description
	Volumes Page
	Columns Selector Dropdown
	Limit Selector Dropdown

New UI

Screenshot	Description
	Volumes Page
	Columns Selector Dropdown
	Limit Selector Dropdown
	Volume Search

devmadhuu

Thanks @devabhishekpal for the patch. Few comments. Patch review still in progress.

spacemonkd · 2024-08-13T12:36:08Z

Hi @devmadhuu, thanks for the extensive review.
Could you please take another look?

spacemonkd · 2024-08-13T12:36:32Z

@smitajoshi12 Could you please take a look as well?

smitajoshi12 · 2024-08-13T15:21:56Z

Loader Can we increase so it will be clearly visiible

spacemonkd · 2024-08-15T17:36:55Z

Hi @smitajoshi12, current loader animation is attached below relative to screen size.
I think we won't require a larger loader size as it will occupy the screen space more than required and look odd.
Please do let me know what you think and I can go ahead with increasing the size.
Thanks

Screen.Recording.2024-08-15.at.23.04.02.mov

ArafatKhan2198

Thanks a lot for keeping the patch updated @devabhishekpal here are a few more comments for you to look into.

ArafatKhan2198

Thanks for the continuous effort on this @devabhishekpal
LGTM !

devmadhuu · 2024-08-19T06:50:21Z

I am getting below NS_BINDING_ABORTED error for the first time when we landup on volumes page from Overview page. Pls check this.

spacemonkd · 2024-08-19T07:00:44Z

Hi @devmadhuu, thanks for pointing this out.
So NS_BINDING_ABORTED is coming because when we are switching the context/page we are aborting any background requests that might be present.
Since when we are switching the page from V1 to V2 we are by default mounting new components, this is being thrown as all background requests are being rejected.
You might also be seeing the pop-up telling previous request was cancelled.

devmadhuu · 2024-08-19T07:04:08Z

Hi @devmadhuu, thanks for pointing this out. So NS_BINDING_ABORTED is coming because when we are switching the context/page we are aborting any background requests that might be present. Since when we are switching the page from V1 to V2 we are by default mounting new components, this is being thrown as all background requests are being rejected. You might also be seeing the pop-up telling previous request was cancelled.

IMO, user might not be interested in that UI popup for error. Backend in F12 window for debugging is OK, but we shouldn't show on UI which is of no interest to user what we are doing technically. So whenever any background requests being cancelled or terminated, pls make sure we don't know this pop-up message. Its of no relevance to end user.

spacemonkd · 2024-08-19T07:23:41Z

Thanks for your inputs @devmadhuu.
Yes I believe since this is already being logged inside the network tab as cancelled request, we can remove the notifications from the UI.
Removed it in the latest commit 94c1798

devmadhuu

Thanks for improving the patch @devabhishekpal , I think we should make the search on volumes intuitive. I mean since this is UI side search where we have all data available and no backend call needed here, so better if we show and filter as user types in and there should not be any need of hitting Enter or Search icon.

spacemonkd · 2024-08-19T12:15:33Z

Hi @devmadhuu, thanks for your inputs, changed this in the latest PR.
Added a debounce with timeout of 300ms. Now we do not need to press any search button, but whatever we will be typing in that 300ms timeframe will be used as a search term till we type again.

devmadhuu

Thanks @devabhishekpal for improving the patch. Changes LGTM now. +1

ArafatKhan2198 · 2024-08-20T05:20:12Z

Thank you, @devabhishekpal, for your excellent work on this improvement—the new UI will greatly enhance the user experience & thanks @devmadhuu for the thorough review.

* master: (50 commits) HDDS-11331. Fix Datanode unable to report for a long time (apache#7090) HDDS-11346. FS CLI gives incorrect recursive volume deletion prompt (apache#7102) HDDS-11349. Add NullPointer handling when volume/bucket tables are not initialized (apache#7103) HDDS-11209. Avoid insufficient EC pipelines in the container pipeline cache (apache#6974) HDDS-11284. refactor quota repair non-blocking while upgrade (apache#7035) HDDS-9790. Add tests for Overview page (apache#6983) HDDS-10904. [hsync] Enable PutBlock piggybacking and incremental chunk list by default (apache#7074) HDDS-11322. [hsync] Block ECKeyOutputStream from calling hsync and hflush (apache#7098) HDDS-11325. Intermittent failure in TestBlockOutputStreamWithFailures#testContainerClose (apache#7099) HDDS-11340. Avoid extra PubBlock call when a full block is closed (apache#7094) HDDS-11155. Improve Volumes page UI (apache#7048) HDDS-11324. Negative value preOpLatencyMs in DN audit log (apache#7093) HDDS-11246. [Recon] Use optional chaining instead of explicit undefined check for Objects in Container and Pipeline Module. (apache#7037) HDDS-11323. Mark TestLeaseRecovery as flaky HDDS-11338. Bump zstd-jni to 1.5.6-4 (apache#7085) HDDS-11337. Bump Spring Framework to 5.3.39 (apache#7084) HDDS-11327. [hsync] Revert config default ozone.fs.hsync.enabled to false (apache#7079) HDDS-11325. Mark testWriteMoreThanMaxFlushSize as flaky HDDS-11336. Bump slf4j to 2.0.16 (apache#7086) HDDS-11335. Bump exec-maven-plugin to 3.4.1 (apache#7087) ... Conflicts: hadoop-hdds/container-service/src/main/java/org/apache/hadoop/ozone/container/common/statemachine/DatanodeConfiguration.java hadoop-hdds/container-service/src/main/java/org/apache/hadoop/ozone/container/ozoneimpl/OzoneContainer.java

spacemonkd added 2 commits August 8, 2024 13:25

Initial Volumes commit
e490df6

Addressed review comments
ea01ce6

spacemonkd changed the title ~~Initial Volumes commit~~HDDS-11155. Improve Volumes page UIAug 8, 2024

Removed console logs
d935fca

adoroszlai added recon UI labels Aug 8, 2024

spacemonkd added 2 commits August 8, 2024 21:37

Refactored dead code, reverted separate tag row for selection
2994f28

Added simple loader, removed unused imports
4fb6941

ArafatKhan2198 requested review from ArafatKhan2198 and devmadhuu and removed request for ArafatKhan2198 August 12, 2024 05:47

Removed unused totalCount, added search for Admin column
6937a05

devmadhuu reviewed Aug 12, 2024
View reviewed changes

spacemonkd added 3 commits August 13, 2024 12:37

Addressed review comments
1347224

Added default value for searchOptions
6923654

Added comments for default props
81980f7

spacemonkd requested a review from devmadhuu August 13, 2024 12:36

ArafatKhan2198 requested changes Aug 16, 2024
View reviewed changes

spacemonkd added 3 commits August 16, 2024 13:38

Fixed ValueContainer not triggering dropdown
4947f05

Added component comments, addressed ACL drawer not closing properly
40c2588

Migrated fix for select dropdown on isSearchable false
021c6d6

spacemonkd requested a review from ArafatKhan2198 August 16, 2024 14:12

ArafatKhan2198 approved these changes Aug 19, 2024
View reviewed changes

spacemonkd added 2 commits August 19, 2024 11:56

Disable the disable switch
ff742d9

Add suspense on routes
5858ec2

Ignore network cancelled requests
94c1798

devmadhuu reviewed Aug 19, 2024
View reviewed changes

Removed manual search, added debounce to auto search
837304d

spacemonkd requested a review from devmadhuu August 19, 2024 12:16

devmadhuu approved these changes Aug 20, 2024
View reviewed changes

ArafatKhan2198 merged commit ebad350 into apache:masterAug 20, 2024

spacemonkd deleted the HDDS-11155 branch August 20, 2024 05:20

Uh oh!

Conversation

spacemonkd commented Aug 8, 2024• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What changes were proposed in this pull request?

What is the link to the Apache JIRA

How was this patch tested?

Old UI

New UI

Uh oh!

devmadhuu left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

spacemonkd commented Aug 13, 2024

Uh oh!

spacemonkd commented Aug 13, 2024• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

smitajoshi12 commented Aug 13, 2024

Uh oh!

spacemonkd commented Aug 15, 2024• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ArafatKhan2198 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

ArafatKhan2198 left a comment

Choose a reason for hiding this comment

Uh oh!

devmadhuu commented Aug 19, 2024

Uh oh!

spacemonkd commented Aug 19, 2024

Uh oh!

devmadhuu commented Aug 19, 2024

Uh oh!

spacemonkd commented Aug 19, 2024

Uh oh!

devmadhuu left a comment

Choose a reason for hiding this comment

Uh oh!

spacemonkd commented Aug 19, 2024

Uh oh!

devmadhuu left a comment

Choose a reason for hiding this comment

Uh oh!

ArafatKhan2198 commented Aug 20, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

spacemonkd commented Aug 8, 2024•
edited
Loading

spacemonkd commented Aug 13, 2024•
edited
Loading

spacemonkd commented Aug 15, 2024•
edited
Loading