My book recommendations

Prerequisites for building an awesome dashboard – Part One

dashboardYou are working as a software developer in a team? So, the question is, how transparent is your development process?

At my current employer AOE – each team has its own Information Radiator with a custom dashboard. To get an idea of what an Information Radiator or dashboard is, read the whole blog post, there are some pictures which give you a good impression.

But it`s not my primary target to give you only an impression, I will also show you how you could build such awesome dashboards.


This post is part of a series called “Building an awesome dashboard“. We’re going to create a custom dashboard with multiple different widgets from scratch. It will be a six-part series, and in the first part I will give you a general overview, some motivation and the basic setup of all prerequisites.

The next parts that are planned for the next few weeks are the following:

Part Two: Create a custom dashboard
Part Three: Using the Jenkins Job widget
Part Four: Using the TargetProcess widgets
Part Five: Using the GitHub PullRequest widget
Part Six: Using the Meeting Reminder widget

Motivation

Imagine you are working in a development team with multiple developers and each developer is frequently pushing new code or code changes.

Does everyone know what´s going on in the continuous integration pipeline at any time? Does everyone know if the code changes of a developer breaks the unit tests somewhere else? Does everyone know how long the current build is still running? What about the Selenium tests on the internal integration test system, are they green? And hell, which build number is installed on the staging system currently?

All this questions and more are answered with a corresponding dashboard. A dashboard gives your whole team a great visibility and insight. You know exactly what’s going on in all aspects of your development process.

The best place for such dashboards is an Information Radiator. Here you could see an example of one of our teams at the AOE Office in Krefeld:

IMG_6127 FullSizeRender IMG_6285

After this series you could also have a dashboard like the following:

dashboard

Prerequisites

Installing Dashing-JS

Allright, let`s start with the prerequisites. First of all, we need Dashing-JS. This is a NodeJS port of Dashing, an Sinatra based framework that lets you build beautiful dashboards.

Open your prefered terminal and execute the following command to install Dashing-JS globally on your local or external host system:

$ sudo npm install -g dashing-js

Create a project

Create a directory for the new dashboard project:

$ mkdir /var/www/dashing/

You can also choose any other directory on your system.
Go into this directory and execute the “new” Dashing-JS command to create a new project:

$ cd /var/www/dashing/
$ dashing-js new dashboard_testproject

The output should be looking like this:

Creating "dashboard_testproject"
      create  dashboard_testproject
      create  dashboard_testproject/assets
      create  dashboard_testproject/dashboards

      [ ... ]

      create  dashboard_testproject/assets/fonts/fontawesome-webfont.ttf
      create  dashboard_testproject/assets/images/logo.png
      create  dashboard_testproject/assets/javascripts/d3.v3-3.3.11.min.js
      create  dashboard_testproject/assets/fonts/fontawesome-webfont.svg

Every new Dashing-JS project comes with sample widgets and sample dashboards for you to explore. But most of them could be ignore or maybe delete – if you want – because we wouldn`t use them.

The directory is setup as follows, the meaning of each directory is discribed on the Dashing-JS website:

├── Procfile
├── README.md
├── assets
│   ├── fonts
│   ├── images
│   ├── javascripts
│   └── stylesheets
├── dashboards
│   ├── layout.ejs
│   ├── layout.jade
│   ├── sample.ejs
│   ├── sample.jade
│   ├── sampletv.ejs
│   └── sampletv.jade
├── jobs
│   ├── buzzwords.job.js
│   ├── convergence.job.js
│   └── sample.job.js
├── lib
├── node_modules
│   └── dashing-js
├── package.json
├── public
│   ├── 404.html
│   └── favicon.ico
├── server.js
└── widgets
    ├── clock
    ├── comments
    ├── graph
    ├── iframe
    ├── image
    ├── list
    ├── meter
    ├── number
    └── text

Last but not least it`s important to install all node dependencies:

$ cd dashboard_testproject
$ sudo npm install

After that, you are able to start dashing with an example dashboard:

$ dashing-js start

Open http://localhost:3030 in your browser. Could you see the following image? Yes? Congratulations! This is the default example dashboard of Dashing-JS.

My_super_sweet_dashboardAnd that’s it for today, I will get back to you soon with the next part, which will explain the creation of a custom dashboard.

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn
  • s.k

    Can it run windows?

    • I dont use windows, so I dont know.
      But you can use vagrant (virtual machine) on windows

      • s.k

        Thanks for the reply.

  • kfh222

    Hi Julian,
    I tried this recipe out right after you posted it, and it worked fine, I had no problems.
    I then tried to add changes from the original jenkins dashboard post and had the same problems I had originally.
    So, I’m eagerly waiting for part 2!

    Thanks,
    Kelly

  • Pingback: Create a custom dashboard – Part Two – Julian Kleinhans()

  • Bob 4u

    Hi Julian – Would you let me know whats the version of node , npm you used? I am getting lot of errors when installing dashing-js with node-0.12.*, npm -2.*.

    Appreciate your help. /Bob

    • Bob 4u

      i am using CentOs6.5, installed node v0.10.43, npm 1.4.29
      and getting the following error. Any idea?

      [root @bob ~] dashing-js install https://github.com/kj187/dashing-jenkins_job/archive/master.zip

      Installing zip “https://github.com/kj187/dashing-jenkins_job/archive/master.zip”

      create widgets/dashing-jenkins_job-master/README.md

      create widgets/dashing-jenkins_job-master/config.jenkins_job.sample.js

      create widgets/dashing-jenkins_job-master/jenkins_job.coffee

      create widgets/dashing-jenkins_job-master/jenkins_job.html

      create jobs/jenkins_job.job.js

      events.js:72

      throw er; // Unhandled ‘error’ event

      ^

      Error: ENOENT, open ‘jobs/jenkins_job.job.js’

  • Pingback: Using the Jenkins Job dashboard widget – Part three – Julian Kleinhans()

  • Fish

    Hi julian – i installed kj187 project, But i miss css file , error: Served asset /application.css – 500 Error compiling asset: Data must be a string or a buffer