Cockroach: clusterviz: cluster overview

[dianasaur323]

• [X] Implement the above view
• ~[ ] Pull top entry of event log as the last event + timestamp (when it started / occurred)~ (moved to #20540)
• ~[ ] Link to full event log~ (moved to #20540)
• [X] Node liveness numbers should reflect the same coloring as our current one - suspect is yellow, dead is red. We can keep live as the standard blue.
• ~[ ] Node liveness needs to point to the node list - we may need to add a link here @kuanluo~
• [X] Replication status ordering should be Total Ranges (Blue), Under-Replicated Ranges (Yellow), then Unavailable ranges (Red).
• [x] Let's make sure we show something appropriate and consistent for the loading state here
• ~[ ] Let's break up the different shades of grey by 20%. So lightest grey is 20% full, 2nd lightest grey is 40% full, and so on.~
• ~[ ] Support collapsing the overview to get more space for the node list/node canvas.~ (moved to #20540)
• [x] Work on top three browsers (might be hard to capture all issues for now, but let's get the ones that are reported by CockroachDB internal users)
• [x] Make the title consistent in formatting with the other tabs
• ~[ ] Top bar is responsive, where as node list is fixed width - find a more elegant solution for this~ (moved to #20540)

cc @kuanluo @vilterp @couchand @mrtracy @cuongdo

• [X] For the open source version, create a page with the cluster overview + node list.

[cuongdo]

could you also add something regarding what the different shades of gray mean for the "Capacity Usage" bar?

[dianasaur323]

@couchand added in your open source cluster overview version into this. thanks!!

[couchand]

Just edited the issue with the outcome of some meatspace discussions: support collapsing the overview and we're punting on the grey background for now.

[couchand]

@dianasaur323 I'm thinking it doesn't make sense to have the node liveness link to the node list: it's already on this page. Also, since it's on this page, we can probably just get rid of the dedicated node list page, right?

[dianasaur323]

@couchand Well, the problem is that in the CCL version, we would no longer have this page. How can we reconcile the two?

[couchand]

As I understand it, the CCL version will still have the node list, it will just be a panel coming up from the bottom rather than taking up the whole page. Is that not still the plan?

[kuanluo]

I believe for the next release, we won't have the node list coming p from the bottom. But now that I think about it, perhaps we can just bring the current node list there, and have that behavior?

[dianasaur323]

Yes, @couchand and I discussed offline. We will just wrap the node list into the cluster overview, and it sounds like it won’t be hard to have it expandable.

[couchand]

On #19908 @tschottdorf mentioned that the capacity bar chart is unintuitive. I think the reason is that the total capacity doesn't actually appear anywhere except for encoded in the length of the grey background. Perhaps we should add it.

There are two places I could see putting it:

1) always forcing the tick labels to include the total usable capacity, or
2) adding a denominator to the current usage aside at the bottom.

[dianasaur323]

I think 1 might cause us to have tick marks that don't fall in a natural looking spot. Enlisting @kuanluo to provide her thoughts. I was about to offer up an opinion, but I think it would be ugly :)

[kuanluo]

Ha, Josué's original mock have the tick labels, so I am in favor of Option 1.

[dianasaur323]

Sounds like we might have to do some testing on different browsers before shipping as well, so added that as a little tick mark. Let's talk about what that actually means tomorrow during our cluster viz meeting.

[cuongdo]

🎉