search

opserver / Opserver

Stack Exchange's Monitoring System
https://opserver.github.io/Opserver/
MIT License
4.51k stars 827 forks source link

Visual Representation of values in SQL Top Queries view #207

Closed afscrome closed 7 years ago

afscrome commented 8 years ago

In the Top SQL Queries view I find that most of the values end up being too large to comprehend. What I find is more often of interest is not so the actual numbers, but their relative value to others . For this I am trying to come up with a way to visually represent this.

What I have come up with so far is putting a small bar graph beside each query, where bar shows the size of the query stats against the maximum value.

image

I like how this is very concise and unobtrusive, although I'm not sure if it's a bit cryptic - it makes perfect sense to me having written it, but is that true of other users? I also found that (for my workload at least), the columns were better ordered by "Avg -> Total -> Per Min" rather than "CPU -> Time -> Reads -> Executions" which makes it easier to read, but makes it more cryptic to understand as the bar order doesn't match the column order.

Any feedback / comment on this idea, or alternative ways of visualising the numbers?

For reference, below are a few other approaches I tried (but rejected)

Adding a bar under each (like the Memory usage on the dashboards) - this I felt just made the page too cluttered, and I found the bars too small to read. image

Vertical bar beside each value - the vertical bars are a bit fatter so easeir to read, but still left the page feeling cluttered. image

NickCraver commented 8 years ago

I'll be honest here...I don't know what I'm looking at. The vertical bars will never work in a comparative capacity when the comparison is at a perpendicular I think - your mind has to rotate and translate n rows to compare and that I just can't see working.

I think the most promising is the horizontal bars across - I love the idea I'm just not sure we can easily maintain the information density (e.g. adding vertical height to the rows is bad). Off the top of my head, here's what I'd suggest giving a shot:

  1. Make the bar a background instead, e.g. a light gray overlay that fills n% of the cell for that case, etc.
  2. Possibly (only if there's still too much clutter) remove the bars except on the sorted column, that's what you're comparing.