[UX Proposal] Replace Table components with DataGrid components

[kamingleung]

The Indexes page in Index Management provides users a view of their indexes with important information such as Health, statuses, and metrics.

Problem

However, users are having trouble reading and adjusting information in table of indexes.

• The width of the table columns are fixed and content gets truncated automatically (E.g.: Long index names get truncated Index Management UI: Name Width and Row Count #848)
• Users are unable to resize the columns
• Users are unable to hide/show columns

Proposal

We are proposing to replace the Table component with the Data Grid component for the following pages:

• Indexes
• Policy managed indexes

By utilizing the Data Grid component, users can:

• Resize columns
• Adjust information density
• Hide/show columns

Example:

Help wanted

In this issue, I propose we explore and produce mockups on how the pages would look like with the updated Data Grid component, so that there is clear guidance for implementation. Mockups should include:

• Indexes page
• Policy managed indexes page

[kamingleung]

@likeanushkaa Will you be interested in exploring the UX on this?

[likeanushkaa]

Yes @kamingleung . I would like to take this up. Do you have a deadline in mind?

[kamingleung]

Hi @likeanushkaa, thank you for following this.
I think we can start exploring this now since folks have started working on a PR. We can use the aligned deliverables to provide guidance to the PR. Do you want to take a first iteration and we can start discussing here? How much effort do you think it will take?

[likeanushkaa]

Hello, is this issue still open?

[hackery]

This would be very useful, especially in the AWS implementation where there are separate panels listing indices in hot/warm/cold storage tiers which is supposed to help with management but being unable to see the full index names (and usually it's the date suffix being truncated) makes it unwieldy to navigate.

@kamingleung I'm curious though, in your first screenshot above, the index names are shown line-wrapped, which isn't representative of the description - is this some previous version of the UI?

It's also worth noting a partial workaround: there is a mouseover popup which shows the full index name:

Not practical when you want to scan through a large list, though, or take a screenshot covering more than one index.