Refresh look of cluster pods admin tab

[NickLanam]

Summary: Adds summary info, cleans up presentation.
Before...

After (with no pod selected)...

And with one selected...

Relevant Issues: #1174

Type of change: /kind cleanup

Test Plan: Go to /admin/clusters. Click a cluster. Go to the Pixie Pods tab.

[vihangm]

IMO having both the healthy and unhealthy counts in the right side but also having a healthy pods section and unhealthy pods section of the table feels a bit strange and redundant.
What if we collapse it into one table with the aggregate counts but sort it by unhealthy pods first (so that any potentially problematic pods are first up).

[NickLanam]

IMO having both the healthy and unhealthy counts in the right side but also having a healthy pods section and unhealthy pods section of the table feels a bit strange and redundant. What if we collapse it into one table with the aggregate counts but sort it by unhealthy pods first (so that any potentially problematic pods are first up).

First group is control plane pods (which can be a mix of healthy and unhealthy), the other is data plane pods, though I suppose only unhealthy ones so I should at least remove the healthy counter on that one.

Are you suggesting combining the groups anyway and distinguishing them a different way?

[vihangm]

First group is control plane pods (which can be a mix of healthy and unhealthy), the other is data plane pods, though I suppose only unhealthy ones so I should at least remove the healthy counter on that one.

Are you suggesting combining the groups anyway and distinguishing them a different way?

Ah I wasn't paying enough attention, yeah the count in dataplane pods is misleading then.
I still think this page is quite challenging to parse, and the counts don't really add much info since a single control plan pod being unhealthy means that pixie is likely not working.

I do still think that combining the tables and using some iconography to help indicate dataplane/controlplane might improve the flow here, what do you think?

[NickLanam]

With some improvements to the padding, spacing, general C.R.A.P. principles of design.

[vihangm]

Another nit: the before had chevrons to indicate that the rows could be expanded. Now there's no such indicators. can you add some right arrows? >

[NickLanam]

Another nit: the before had chevrons to indicate that the rows could be expanded. Now there's no such indicators. can you add some right arrows? >

It was already there for the selected row, but here it is with it always showing and just being brighter for that row:

[NickLanam]

And now with last round of suggestions.

[aimichelle]

Some more feedback on the design: how does this look if the status message is very long?
And how does it look if we change the table header to "Status Message" instead of "Status" for clarity? (I think just "Status" is a bit confusing since the status is technically the green checkmark).

And for the expanded view when you've clicked into a pod: do you think it'll look better with some padding at the top so that the pod name is a little lower?

[NickLanam]

Some more feedback on the design: how does this look if the status message is very long? And how does it look if we change the table header to "Status Message" instead of "Status" for clarity? (I think just "Status" is a bit confusing since the status is technically the green checkmark).

And for the expanded view when you've clicked into a pod: do you think it'll look better with some padding at the top so that the pod name is a little lower?