metalk8s icon indicating copy to clipboard operation
metalk8s copied to clipboard

UI improvement for UX

Open Cuervino opened this issue 3 years ago • 1 comments

Component: UI

Why this is needed: Having a better UX

What should be done:

  • [x] 1.The search bar should have the same height as the buttons. ( It looks like know the search bar height is calculated with padding) The correct height is 32px, or matching it with button size On Volume page and Node page. image image

  • [x] 2. The Latency in the volume tab of Node should be aligned to the right (because it's a numerical value) image

  • [x] 3. The unit in the Partition tab of the Node page should have a space between the value and the unit, for having consistency. image

  • [ ] 4. 4 px (or rem/em equivalent) space between the label and its sorting icon In Volume page, and in Volume tab of the Node page. For instance: image

  • [x] 5. Having consistency (and 1 decimal) for usage units

  • GiB everywhere (@ChengYanJin to confirm)

  • Add a space between unit and value

  • Add a decimal In the Overview of Volume page. image

  • [ ] 6. Pods tab

  • 8 px between the columns 'Name & Status"

  • The column and their header should be properly aligned

  • Age column and header should be aligned to the right, and the value (for hours especially) should have a leading "0" image

  • [ ] 7. Update the chart header style The Metrics tabs in Volumes should be aligned with the metrics tabs in Nodes

  • Remove UPPERCASE, put it as Pascal Case

  • Same date format for legends image

  • [x] 8. Having a full clean border on the left and right of Nodes rows image

Cuervino avatar Apr 12 '21 15:04 Cuervino

Hello @Cuervino Most of the points listed here have alreeady been addressed in PR #3305 What is missing:

  1. The column and their header should be properly aligned We have this issue in ALL the tables because the scrollbar takes some space.

  2. The Metrics tabs in Volumes should be aligned with the metrics tabs in Nodes

  3. 8px between label and icon. Because in the small screen we just don't have enough space.. image

ChengYanJin avatar May 06 '21 08:05 ChengYanJin