Thoughts and learnings in my journey through all things technology. Developer operations, software development, server administration and anything else that I decide should be written.

Tags


Beautiful Dashboards with Dashing-JS

11th November 2014

Overview

Let's face the facts, every organization likes to have a dashboard of some kind or another. It might just be as simple as showing of numbers or showing operational statistics to detect issues early. Dashboarding is just a way of life in almost each and every organization.

Enter in Dashing-JS, a port of Dashing, for node.js. Dashing-JS is a simple dashboarding tool that can easily poll for statistics and bring them into a simple view. It is aesthetically pleasing pleasing to the eye and simple to implement in just a few hours with the majority of your metrics.

Introduction

Dashing-JS has a few simple concepts that should be introduced prior to jumping into code.

Dashboards

Dashboards contain information that is pulled from jobs. Each dashboard is an instance of a template. You can have several dashboards per instance.

Jobs

Jobs do the work and return back events which talk to the dashboards. The jobs are just simple code which will poll for statistics and send an event.

Widgets

Widgets explain how to show the data on the dashboard. These are built in CoffeeScript (nothing is perfect). There are a few that are built-in including a clock, comments, graph, igrame, image, list, meter, number and text.

Getting Started

Before we can build our first dashboard, we need to install the dashing-js command-line interface. You can install this from npm:

npm install -g dashing-js  

Once that is installed, it is time to create our first dashboard.

dashing-js new my-dashboard  

Sweet, we now have the base for the dashboard but we are not quite ready yet as we need to install our dependencies.

cd my-dashboard  
npm install  

We are now ready to dashboard! To see a quick sample start the server and fire up your browser:

dashing-js start  

Now navigate to http://127.0.0.1:3030 and you will have a sample dashboard that has already been built out for you.

Tweaking a Few Items

By default, dashing-js will not start as a daemon and it will utilize jade as the default templating language. If you're like me, you find jade unusable. Since there is already a sample using ejs let's utilize that...

npm install --save ejs  

Then we can start the server as a daemon as well as using a different templating language:

dashing-js -d -e ejs start  

You can also change the port (-p) and job path (-j) if you prefer.

Writing Jobs

Jobs are simply pollers. You will likely either utilize setInterval or setTimeout depending on how you would like to poll for statistics.

In this case, I'll utilize setInterval and call AWS cloudwatch for some simple statistics and send them to the dashboard.

// jobs/aws.js
var aws = require('aws-sdk')  
  , cw  = new aws.CloudWatch();

function getQueueLength() {  
    var eventName = 'queue_length';
    cw.getMetricStatistics({
        EndTime: new Date,
        MetricName: 'ApproximateNumberOfMessagesVisible',
        Namespace: 'AWS/SQS',
        Period: 60,
        StartTime: new Date((new Date).getTime() - 5*60000),
        Statistics: [
            'Average'
        ],
        Dimensions: [{
            Name: 'QueueName',
            Value: 'MyQueue'
        }],
        Unit: 'Count'
    }, function(err, data) {
        if (!err && data.Datapoints.length > 0) {
            data = data.Datapoints.pop();
            return send_event(eventName, data.Average);
        }
        return send_event(eventName, 0);
    });
}

getQueueLength();  
setInterval(getQueueLength, 60000);  

Let's quickly look at what is going on here.

Our function calls cloudwatch and upon completion utilizes a function called send_event. This function sends an event to the dashboard to update it's respective point.

In addition, we call the method and then put it on an interval. The reason we call it first is so that we do not have a 60 second delay before showing data.

Showing it on the Dashboard

Since this is a number, we can show it on the dashboard utilizing the number widget. Open up a dashboard (dashboard/sample.ejs) and put in a new row such as:

    <li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
      <div data-id="queue_length" data-view="Number" data-title="Queue Length" style="background-color:#96bf48;"></div>
      <i class="fa fa-upload icon-background"></i>
    </li>

The data-id attribute is the event name that was previously utilized. The data-view attribute tells us which widget that we will be utilizing. You will also notice that we have an icon background attached to this. Dashing-JS utilizes Font-Awesome and makes it simple to attach numbers.

Conclusion

If you are looking for a simple dashboard, that can easily be extended, Dashing-JS is a great choice. It is sleek, flexible and easy to extend. It takes very little resources and is insanely easy to drop in.

I am a VP of engineering for a small start up. I have over a decade of experience in engineering, database administration, server administration and management.

View Comments