This 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 http://127.0.0.1:3030 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:
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.
The GitHub PullRequest widget is a widget which provides a list of configured repositories and the amount of current open Pull Requests.
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.
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.
The TargetProcess burndown widget is a graphical representation of work left to do versus time.
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”.