Dusk - Yet Another Graphite Dashboard

2013-06-21 19:36:28 by jdixon

Not too long ago we were looking for a way to visualize a group of metrics across our entire fleet. Although you could render all of the metrics on one graph, it becomes nearly impossible to distinguish one from another. Jesse Newland (@jnewland) suggested that we look at Cubism.js' horizon charts. The nice thing about horizon charts is that you can cram a lot of information into a small vertical space, due to the way they render "overlapping" values with increasing intensity. One thing led to another, and soon Dusk was born.

This project started with the objective of identifying hotspots across a large number of systems. It remains true to this goal with a couple twists. I wanted to try and pack as many horizon charts into as compact a visual frame as possible, while still allowing the reader to discern one metric from another. When viewing a Dusk dashboard, each metric scales up as you hover over it. This is not as straightforward as you might expect. Because cubism uses a special canvas element that updates as new metrics arrive, you can't simply resize the height attribute. Rather, we accomplish virtually the same effect using the experimental scaleY CSS transform.

If you've tried out my other dashboard projects, you probably recognize that I dislike unnecessary configuration. With Dusk I took this one step further; I wanted to avoid any external service dependencies typically required for multi-user collaboration or state management. As such, this dashboard is almost entirely navigated from the URL. The sole exception is the concept of favorites, allowing you to "save" preferred dashboard views by starring them in the navigation bar. The catch here is that your favorites are stored entirely in your session cookie; delete your cookies or switch browsers and they will no longer be visible.

I believe the trade-off here is entirely worth it. Deployment and usage is ridiculously easy. Load a dashboard by appending a Graphite-compatible metric string (preferably with wildcards) at the end of the /metrics/ URI. For example:

By default, Dusk uses the 2nd node in the metric path as the heads-up name. This particular node was chosen because Collectd typically sets the hostname in that part of the metric path and it's expected that most users will use the wildcard there. You can override this by passing the zero-indexed value in the URL with the index parameter.

Dusk is not your typical dashboard application. It's goals are simple and finite. It's great for experimentation but I would never recommend it as your primary dashboard interface. Nevertheless, I think it serves an important purpose in identifying hotspots and host activity patterns. If you get a chance to try it out I welcome your feedback.


at 2013-06-21 21:07:09, Benjamin Krein wrote in to say...

Neat! How do you set the from & until parameters?

at 2013-06-21 21:29:57, Jason Dixon wrote in to say...

@Benjamin - Cubism.js doesn't support Graphite from/until params. Theoretically you could craft the context and data by hand but it's not something I'm personally interested in. Happy to consider pull requests though.

at 2013-06-27 16:45:37, Josh Serrin wrote in to say...

How are the from and until parameters defined? I'm only getting a timewindow of ~2 minutes but would like to see the entire window (~3hrs). I also notice that the timewindow remains consistent (read: from increases with until). Below is the query output generated by Dusk...

16:41:37 web.1 | - - [27/Jun/2013 16:41:37] "GET /render?format=raw&target=alias(carbon.agents.graphite-a.errors%2C'')&from=1372365590&until=1372365679 HTTP/1.1" 200 35 0.0146

at 2013-06-27 16:49:13, Jason Dixon wrote in to say...

@Josh - See my previous reply to Benjamin.

at 2013-07-10 01:36:00, Mike McLane wrote in to say...

Cubism's step values are where you'd need to adjust. I'm not sure off the top of my head there's a way to fetch from graphite "hey, what's the time interval here?". If there was, you could do some minor math and then adjust the step value on the fly. I'll.. dig into this more. This seems like a faster way to rough out metrics via cubism, thanks Jason!

at 2013-11-18 16:49:15, Mark wrote in to say...

I likewise only seem to be able to get 15 minutes worth displayed, and that is so tiny that the graphs are barely visible. It's small enough that everything just looks like more or less tightly grouped vertical lines. Is there some other tweak that needs to be made to be able to get a more useful view akin to what is in this screenshot?

Add a comment:




max length 4000 chars