My book recommendations

Create a custom dashboard – Part Two

My_dashboard_titleThis post is part of a series called “Building an awesome dashboard“. This is the part two which will explain the creation of an custom dashboard.

Beside that I will give you an overview about all custom widgets we will use in this series.

Part One: Prerequisites for building an awesome dashboard
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

Create a custom dashboard

Allright, at this point we have only running a boring sample dashboard. Now it`s time to build our own dashboard as a foundation for all upcoming widgets.

Create your own dashboard

This is really easy, just make sure you are inside the new project directory, which was created during the first part, and execute the following command:

$ cd /var/www/dashing/dashboard_testproject
$ dashing-js generate dashboard demo

You will get the following output:

$ Generating dashboard "demo"
      create  dashboards/demo.jade
      create  dashboards/demo.ejs

Now you can choose between two different template engines. If you are not familiar with Jade I would recommend you to use EJS, it`s almost plain HTML. You could delete the file with the template engine which you are not using.

Now its time to start dashing

$ dashing-js start

If you choosed EJS as your prefered template engine, you have to add an additional argument, because Jade is the default template engine.

$ dashing-js -e ejs start

Open in your browser. You should see the following:


If you dont see this dashboard you have to switch the default dashboard. Open the server.js file which is located in the root directory of your project. Add the following line, save and restart dashing-js.

// Set your default dashboard here
dashing.default_dashboard = 'demo';

Thats all, now you have your own custom dashboard. In the next following blog posts we will fill this dashboard with life. But I will give you a short overview about all the widgets we will use.

Custom widget overview

All in all we will use 6 different widgets. The setup and configuration of each widget will be part of the next following blog posts. Here is the overview:

Jenkins Job widget:

The Jenkins Job widget is a generic widget for Jenkins jobs which provides a highly visible view of the build status and build progress of selected Jenkins jobs. Via configuration it is possible to add multiple widgets for different Jenkins jobs.

GitHub PullRequest widget:

The GitHub PullRequest widget is a widget which provides a list of configured repositories and the amount of current open Pull Requests.

TargetProcess Impediments widget:

The TargetProcess impediment widget is a small widget which provides the total amount of impediments of a specific sprint (context/acid). Below this amount, a profile image of the responsible persons are shown.

TargetProcess Sprint widget:

The TargetProcess sprint widget is a small widget which provides the team the end date of the current sprint and their left working days count. Additionally you will see an overall sprint progress.

TargetProcess Burndown widget:

The TargetProcess burndown widget is a graphical representation of work left to do versus time.

Meeting Reminder widget:

The Meeting Reminder widget is one of my favorite widgets. You can define all your ceremonies (Daily, Weekly, Sprint Planning, Sprint Review …) via configuration and a big red widget with an reminder of an upcoming meeting is appearing in the top right dashboard for example. So you will never be to late at any meeting.

Thank you for your time. I will get back to you soon with part three “Using the Jenkins Job widget”.


Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn