Update panel styling to improve readability

[mcarrano]

Use of saturated panel background colors to reflect status on current background results in poor overall readability. Recommend updating panel json for all Tendrl dashboards according to the following guidance to improve readability per Grafana panel type.

1- SingleStat panels - use text coloring to reflect state, where applicable, i.e. "Healthy" = green; "Unhealthy = orange"

2- Vonage Status Panels (used for multiple, stacked values) - set 'ColorMode = Metric' to use text rather than background fill to reflect status.

3- Table panels - set 'ColorMode' = Value to use text rather that background fill to reflect status.

The attached screen shot shows how this will look when applied to the Tendrl-Cluster-At-A-Glance dashboard. Note that the background for all panels is light gray. I have also attached the json of this dashboard for reference.

Tendrl-Gluster-at-a-Glance Copy-1507669380270.txt

[mcarrano]

@julienlim FYI

[cloudbehl]

@mcarrano I think this is a good Idea and Surely it will improve the readability of the dashboard.

We can change the coloring for the single stat and the Vonage Status plugin panel to improve the readability. But in the table panel, we are indicating the status which needs to be visually bold because the number doesn't make much sense in that case. So for the table panel, we can go with the current pattern.

@mcarrano @julienlim @nthomas-redhat @brainfunked

[nthomas-redhat]

@cloudbehl , looks good to me

[cloudbehl]

@mcarrano made the changes. Please have a look.

[julienlim]

@cloudbehl @mcarrano - looks good. I'll look forward to seeing these changes in all the dashboards wherever applicable.

[julienlim]

@cloudbehl @mcarrano @nthomas-redhat @Tendrl/tendrl-qe
I just redeployed with tendrl-ansible using master, and the styling updates for the singlestat panels and status panels look good!

[julienlim]

@cloudbehl @mcarrano I just made one of my nodes in the cluster go down, and noticed that the Cluster Status changed to red (unhealthy). It should be orange (unhealthy).

This needs to be synchronized with also Tendrl UI. There's a related bug at Tendrl/ui#673 (comment).

I also noted that the tables (table panels) at the bottom still have the background colors there vs. the text color change. Can we change it per @mcarrano's suggestion above. If we can change it so the entire row text color changes to the color used for the status, it should look less overpowering but still provide enough visual cues to the user.

[mcarrano]

Looks so much better @cloudbehl Thanks for making these changes.

[julienlim]

@cloudbehl Per @mcarrano's investigation, he said regarding the table panels that it did not appear to be possible to apply the text color to the entire row as we had hoped.

So, for now let's leave the tables as currently implemented.

Thank you for the quick turnaround in implementing the singlestat and status panel changes!

[rishubhjain]

@julienlim If possible please verify if the issue is still reproducible after the fix. Please update the this issue as per your verification.

[julienlim]

Just noting that this "update panel styling to improve readability" bug impacts all the dashboards:

• Dashboard Spec - Cluster Dashboard
• Dashboard Spec - Host Dashboard
• Dashboard Spec - Volume Dashboard
• Dashboard Spec - Brick Dashboard