HDDS-11155. Improve Volumes page UI #7048

devabhishekpal · 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.

...e/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/search/search.tsx

...n/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/select/singleSelect.tsx

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

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

devabhishekpal · 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

devabhishekpal · 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.

hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/app.tsx

...e/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/search/search.tsx

...zone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/volumes/volumes.tsx

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.

devabhishekpal · 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.

devabhishekpal · 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.

devabhishekpal · 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

devabhishekpal added 2 commits August 8, 2024 13:25

Initial Volumes commit

e490df6

Addressed review comments

ea01ce6

devabhishekpal changed the title ~~Initial Volumes commit~~ HDDS-11155. Improve Volumes page UI Aug 8, 2024

Removed console logs

d935fca

adoroszlai added recon UI labels Aug 8, 2024

devabhishekpal 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

devabhishekpal added 3 commits August 13, 2024 12:37

Addressed review comments

1347224

Added default value for searchOptions

6923654

Added comments for default props

81980f7

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

ArafatKhan2198 requested changes Aug 16, 2024

View reviewed changes

devabhishekpal 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

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

ArafatKhan2198 approved these changes Aug 19, 2024

View reviewed changes

devabhishekpal 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

devabhishekpal 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:master Aug 20, 2024
33 checks passed

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

HDDS-11155. Improve Volumes page UI #7048

HDDS-11155. Improve Volumes page UI #7048

devabhishekpal commented Aug 8, 2024 •

edited

Loading

devmadhuu left a comment

devabhishekpal commented Aug 13, 2024

devabhishekpal commented Aug 13, 2024 •

edited

Loading

smitajoshi12 commented Aug 13, 2024

devabhishekpal commented Aug 15, 2024 •

edited

Loading

ArafatKhan2198 left a comment

ArafatKhan2198 left a comment

devmadhuu commented Aug 19, 2024

devabhishekpal commented Aug 19, 2024

devmadhuu commented Aug 19, 2024

devabhishekpal commented Aug 19, 2024

devmadhuu left a comment

devabhishekpal commented Aug 19, 2024

devmadhuu left a comment

ArafatKhan2198 commented Aug 20, 2024

HDDS-11155. Improve Volumes page UI #7048

HDDS-11155. Improve Volumes page UI #7048

Conversation

devabhishekpal commented Aug 8, 2024 • edited Loading

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

devmadhuu left a comment

Choose a reason for hiding this comment

devabhishekpal commented Aug 13, 2024

devabhishekpal commented Aug 13, 2024 • edited Loading

smitajoshi12 commented Aug 13, 2024

devabhishekpal commented Aug 15, 2024 • edited Loading

ArafatKhan2198 left a comment

Choose a reason for hiding this comment

ArafatKhan2198 left a comment

Choose a reason for hiding this comment

devmadhuu commented Aug 19, 2024

devabhishekpal commented Aug 19, 2024

devmadhuu commented Aug 19, 2024

devabhishekpal commented Aug 19, 2024

devmadhuu left a comment

Choose a reason for hiding this comment

devabhishekpal commented Aug 19, 2024

devmadhuu left a comment

Choose a reason for hiding this comment

ArafatKhan2198 commented Aug 20, 2024

devabhishekpal commented Aug 8, 2024 •

edited

Loading

devabhishekpal commented Aug 13, 2024 •

edited

Loading

devabhishekpal commented Aug 15, 2024 •

edited

Loading