HDDS-9622. Disk Usage Legend Labels are large then UI is breaking

[devabhishekpal]

What changes were proposed in this pull request?

HDDS-9622. Added responsive functionality for Disk Usage chart

Please describe your PR in detail:

• Currently we have a Disk Usage page in Ozone Recon, which displays the space occupied by various keys, buckets and volumes.
• However when we these entity names are very large, the label overlaps the Pie Chart that is rendered as a part of the UI to show the usage.
• This change will introduce a more responsive approach to displaying the labels, where we change the layout based on the window size (height and width).
• If we are having a large display size, we should be able to display the information beside the chart, else we should break the labels down to the next row.

What is the link to the Apache JIRA

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

How was this patch tested?

This was a UI related patch and was tested manually.

• When we have small-medium label lengths:

• When we are having larger label lengths:

https://github.com/apache/ozone/assets/43001336/c5d6c74a-3661-43cc-9912-f86a70490868

[devabhishekpal]

Hello @ivandika3 @smitajoshi12 could you please review this PR? Any other inputs would also be appreciated.

[smitajoshi12]

@devabhishekpal PR Title should match to JIRA title. Can you try with Buckets and other objects and keys.

[devabhishekpal]

@smitajoshi12 Thanks for the suggestions. I changed the PR title, and also updated the screen recording with the behaviour on long label lengths for volumes, buckets and keys in various widths.

[devabhishekpal]

@ivandika3 @devmadhuu @dombizita Could you also PTAL and let me know of any other suggestions? Thanks a lot

[ivandika3]

@devabhishekpal LGTM +1.

[ChenSammi]

@dombizita , do you think this one is ready to merge?

[devabhishekpal]

This has been addressed with the recent migration to ECharts and limiting the entities to the top 30 records. Please refer to the related JIRA for more information.