Polish the new IA for dashboard

[alanwguo]

Signed-off-by: Alan Guo aguo@anyscale.com

Why are these changes needed?

Update to more closely match the design spec.

1. Update nav bar styles
2. Move actors table for job to actors page in job details
3. Made cards responsive for narrow screens
4. Made metrics charts match style of overview cards
5. Update Icon for collapsible section
6. Various visual polish throughout app

Related issue number

Checks

• I've signed off every commit(by using the -s flag, i.e., git commit -s) in this PR.
• I've run scripts/format.sh to lint the changes in this PR.
• I've included any doc changes needed for https://docs.ray.io/en/master/.
• I've made sure the tests are passing. Note that there might be a few flaky tests, see the recent failures at https://flakey-tests.ray.io/
• Testing Strategy
  • Unit tests
  • Release tests
  • This PR is not tested :(

[rkooo567]

Hmm do we only separate out actors from the job page? What about task / pg table?

[alanwguo]

Hmm do we only separate out actors from the job page? What about task / pg table?

I asked the same question to Huaiwei. Yes, this is expected for now. We separate out actors table because we believe that it is an important data people want to be able to find more easily.

[scottsun94]

Hmm do we only separate out actors from the job page? What about task / pg table?

I asked the same question to Huaiwei. Yes, this is expected for now. We separate out actors table because we believe that it is an important data people want to be able to find more easily.

It was probably my fault and I probably didn't communicate it clearly enough. I think we should keep actor table in both places

• job -> charts page (people could see all types of info like actor info, task info together)
• job -> actors page (as Alan said, people are able to find them more easily compared to scrolling down to find it within the charts page)

[rkooo567]

What about other tables then? Is there a reason why we only consider actor table in a special way?

[rkooo567]

Test failures seem relevant

[scottsun94]

What about other tables then? Is there a reason why we only consider actor table in a special way?

I guess my criterion on when to add a tab for something is:

• add tabs when the info is frequently used alone and users don’t want to click several times on the chart page to find it.

If you think other tables meet this, we should consider creating tabs for them.

Placement group: I don't think that people will look at them alone? We could either keep it as a separate section. Or it could be grouped under "scheduler and autoscaler" section?
Task: I guess people need to look at progress bar or timeline view with the task table together? It doesn't make sense to have a separate tab for tasks?

[rkooo567]

I see.

Tasks: Yes, I think it should be with progress bar.
Pg: Yes, I think it should be used with actor / task table. I think the best UX is actually the pg scheduling status is embedded into task/actor table.

[rkooo567]

Btw I am not merging it because the windows failure is related

[alanwguo]

Ready to merge!