Introducing Tessera, a Graphite Frontend

We're happy to announce a new open-source project that grew out of a Hack Week project here at Urban Airship.  Like many software-as-a-service companies, we capture pervasive metrics about our system with Graphite. From basic system performance information to detailed application-level metrics, the data we collect tells us when an HBase cluster needs to be rebalanced, which features of our APIs are used most often, and, because of the nature of our service, when interesting things happen in the world.

What makes Tessera different?

One has only to browse the Tools That Work With Graphite section of Graphite's documentation to see that there is no shortage of alternative front ends for Graphite. Why create yet another one?

Graphite strongly associates metrics queries with graphs. The core of its API involves creating a URL that encodes your data query and presentation options; what you get in return is a chart of the data. It's a supremely simple way to integrate metrics data -- if you can create an <img/> tag you can embed metrics data anywhere, and most front-ends for Graphite treat the chart and the query as one and the same.

But Graphite is more than just a chart server -- it can also serve up raw metrics data -- and it can be valuable to present that data in forms other than a chart.

So Tessera starts by separating the queries from the presentations. Each query is a named object in the dashboard, which can be referenced by any number of visualizations. Then we add a rich array of presentations to choose from, including a variety of text-based visualizations which allow for highlighting key summary data.


Here's an example for a common use case, that of comparing a metric to its past behavior using Graphite's timeShift() function.  We have a pair of charts comparing the same metric for a period of three hours, and the same three hours a day prior. Even if you overlaid the two data series in one chart, it'd be pretty hard to discern whether there's a trend.

But if we supplement that with another visualization that presents analysis of the raw data, we can make it plainly obvious where the trend lies.

It makes the difference between presenting data and presenting information.


Here's another example - a stock graph from Graphite which shows a sustained spike in push activity over an extended period of time (about 10 minutes).

While that's interesting in an and of itself, the presentation doesn't really tell us some of the things we'd like to know. Furthermore, in Graphite's built-in dashboard, your ability to interact with the data is pretty much limited to changing the window of time you're viewing. In Tessera, the separation between query and presentation allows us to highlight different aspects of the data in different ways. How about we try it like this instead...

Now we have 4 presentations linked to the same query, which immediately show not only the shape of the activity, but the average, peak, and total for the period.

This richer set of presentations was one of the key goals of Tessera - it comes with a wide variety of charts, textual presentations of data, and layout and highlighting options. The ability to extract summarized data and key numbers out of the raw metrics and present them individually, along with arbitrary styled text and a range of layout options, allows us to tell a story about what the data means, rather than just presenting a collection of spikes and trends.

(The peak event was the United States scoring a goal in the World Cup, by the way)

Interactive Transforms

Not only that, but we have some additional options available for drilling down into the data. We can apply a range of transforms to view different time ranges or time scales, export a high resolution graph, or create entirely new display dynamically.

For example, one of the initial set of transforms, Isolate, will take the selected dataset and render a new dashboard presenting that as an interactive chart on its own, allowing you to focus in on one specific metric of interest, with summation data dynamically added.

We're planning to add a lot more to this interactivity, including the ability to define links between related presentations, and further ways to transform and drill down into the data.


And because building the same dashboard over and over again for each cluster or service is tedious and error prone, queries can be templatized using the HandlebarsJS template engine. Handlebars is a flexible template language that's also easily extensible, which allows for straightforward integration with dynamic service discovery tools like clusto, allowing you to create reusable dashboards that look up your server nodes dynamically.


And of course, there's a dark theme so your eyes are not blasted when you have to check the graphs in response to a 3 AM alert. And once you have color themes, why not add Solarized?

Work in Progress

Like all open source projects, Tessera is a work in progress.  It's got an informal roadmap (in the form of the github issues list. to a solid 1.0 release, and then some bigger additional features down the line, such as dashboard snapshots and the ability to compose dashboards out of reusable pieces.  We've had fun building Tessera and using it internally, and we hope you'll find it useful too.

If you're interested in improving it for your needs, check out the project on github - file an issue, submit a pull request, or come work for us! We're hiring in both San Francisco and Portland.