[Metrics UI] Allow user to sort nodes on waffle map by metric value

[hbharding]

Background

Currently, nodes on the waffle map are organized alphabetically by name / id. It was designed this way so that the nodes always appear in a consistent location. For example, my "Apples" node always appears in the top left, and my "Zebra" node always appears in the bottom right. This way, if I'm looking for a particular node, I know the general location of where to look. This use case makes sense for a lot of users, especially ones with small deployments, but it has some downsides:

• For Kubernetes pods that come and go and are dynamically named on creation, sorting alphabetically doesn't really do much.
• For large deployments where scrolling is necessary, the visualization prioritizes "Apples" and pushes "Zebras" down the page, which means I might never see that something is going on with my "Zebra" nodes.
• When there are lots of nodes, the colors on the waffle map produce a grainy image, which makes it difficult to visually isolate nodes by their color. As a metaphor / example, imagine trying to find the 12 dead pixels on this static TV screen:

Proposal

Allowing the user to choose how nodes are sorted on the waffle map opens up a visual dimension which can help the user better understand the overall health of their nodes. Sorting nodes by a metric value would produce a gradient image that is logical, less chaotic, and easy to understand. For example, pretending this image is a waffle map, I can easily see the groups of my "hot", "lukewarm", "cool", and "cold" nodes, and I can also see that the overall status is about 50:50 hot/cold.

Illustrations aside, here's how this might look in the Metrics UI.

To start, I'm proposing we keep this as simple as possible by introducing a "sort by" field next to the "group by" field which only has 2 options:

• Name
• Metric value (corresponds to the currently selected metric)
• and a way to reverse the direction (A -> Z / Z -> A / High -> Low / Low -> High )

Sorting would happen at the group level. I think "Name" should remain the default sorting method so that users aren't surprised or confused when they update Kibana.

Example mockup of groups + sorting

Happy to hear anyones thoughts / questions / feedback.

[elasticmachine]

Pinging @elastic/logs-metrics-ui (Team:logs-metrics-ui)