Digital Dashboard:

John Fisher
Aug 21, 2018 · 6 min read

Making a Dashboard work for you, part one

https://commons.wikimedia.org/wiki/File:NS_Savannah_control_room_MD1.jpg

It’s five o’clock, do you know where your servers are?

Servers and endpoints generate huge amounts of data today. DevOps techniques enable far more servers per OPs employee than legacy systems did in the past. DevOps also creates an ecology where servers and endpoints come and go in a virtual environment, so there’s no walking into the machine room and seeing red LEDs. Managers struggle to digest and present their system data to upper management, and they struggle to comprehend the current system state, a process now called ‘observability.’

Data is not Knowledge, and Knowledge is not Understanding

The Problem

Image: http://www.ephf.ca/blog.asp?id=63

Solutions

You have multiple systems doing useful things and you’d like to know their status at a glance. But writing your own application is a lot of work, and worse, it creates an ongoing maintenance burden that’s likely too costly for consideration. What’s available out there?

Grafana has a lot of capability:

Grafana is actively maintained and widely used for a variety of visualization chores.

Images by https://medium.com/@ashish_fagna/influxdb-to-grafana-visualizing-time-series-data-in-real-time-2174940a894d and https://www.bigclown.com/doc/integrations/grafana-for-visualization/

Grafana is a golang-JavaScript application with built-in webserver that can be run on many different platforms. (We used the Docker container on EC2 in AWS.) Grafana has integrations with many data sources, especially those that are used for time-series data.

Information at:

We chose to use Grafana as part of a CI/CD Pipeline project. Our high-ceilinged space came equipped with hanging projectors and roll-down screens. So we decided to dashboard the current status of our Pipeline up in the air above the cubes. Here’s an overview of what we discovered.

Quick Grafana Pros and Cons:

Pros:

Cons:

Dashboard basics: Things you need in order to run dashboards…

Typically this is streaming data like a log file, with timestamps and some sort of metrics. For example: temperature, wind speed, humidity. But it can be single-point data like current water level.

These are specialized, but come as plugins to Grafana, so relatively easy.

This is harder than you think. There is too much data by definition, you just want the essentials.

Grafana does this.

Grafana does this.

Skills required to setup a well-organized Grafana :

Initial setup:

You can have a Grafana server setup and running in a few minutes, but you’ll need a host, either hardware or an instance in the cloud, and some system admin ability. The Grafana documentation is good, so I won’t duplicate that- http://docs.grafana.org/installation/docker/

You can also install via Apt or Yum, or on Windows or MacOS.

If you want to experiment, run a Docker container on your MacOS or Linux box.

The Concepts:

To make a dashboard:

  1. Install the Grafana test data datasource plugin, from the datasources tab
  2. Create a dashboard from the manage dashboards tab
  3. Pull down the selection of panels and drop one onto the dashboard
  4. Connect this particular panel with the datasource
  5. At the top of the panel pull down the list and select edit

Now you can follow the documentation and use the GUI to display data in your panel.

Not so good: the themes are problematic

Grafana themes are color palettes for both the admin pages and the user-facing dashboards. By default Grafana starts with the dark theme, which is the one you’ll see if you Google “grafana images.” It also has a light theme, easily switched. But the theme functions as CSS for both the admin and editor pages and the dashboards. It’s nice but not critical to have a theme for the admin pages, but I really want to control the look of my dashboards, one by one. Furthermore you can’t just edit the CSS for the theme, it has to be baked in at build time, which most of us won’t want to bother with. If you modify the code for panels, they have an individual CSS file, but it’s not easy to get it to override the theme settings. Given the way CSS works, I expected there to be a cascade from app to dashboard to panel. But it’s not done that way. (Angular developers may have no problem with this)

Take Control:

You can take control of the colors and other attributes of your dashboards, by forking and modifying the panel code. I’ll cover this in the second part of this article.

Image by https://stackoverflow.com/questions/43073124/grafana-updated-all-graphs-on-dashboard-from-metric-selection

John Fisher

Written by

Robotics and DevOps Manager