Skip to content

Instantly share code, notes, and snippets.

Last active June 21, 2017 21:08
Show Gist options
  • Save steintore/5322589 to your computer and use it in GitHub Desktop.
Save steintore/5322589 to your computer and use it in GitHub Desktop.
Build status and progress widget for Dashing


Dashing widget to display a Jenkins build status and build progress

The widget is based on the meter-widget which is default in the Dashing installation

The widget can also see the progress of a "pre-build", i.e if you have a job triggering the actual build you want to define, you can configure this job in the jenkins_build.rb as a prebuild.

For more information, please see Coding Like a tosser

##Usage The files, jenkins_build.html and jenkins_build.scss goes in the /widget/jenkins_build directory.

The jenkins_build.rb goes in the /jobs directory

Put the following in your dashingboard.erb file to show the status:

<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
  <div data-id="JOB" data-view="JenkinsBuild" data-title="BUILD" data-min="0" data-max="100"></div>

##Settings (jenkins_build.rb) Change the JENKINS_URI to your correct uri for Jenkins Put all the jobnames and pre job names in the job_mapping

class Dashing.JenkinsBuild extends Dashing.Widget
@accessor 'value', Dashing.AnimatedValue
@accessor 'bgColor', ->
if @get('currentResult') == "SUCCESS"
else if @get('currentResult') == "FAILURE"
else if @get('currentResult') == "PREBUILD"
constructor: ->
@observe 'value', (value) ->
ready: ->
meter = $(@node).find(".jenkins-build")
meter.attr("data-bgcolor", meter.css("background-color"))
meter.attr("data-fgcolor", meter.css("color"))
onData: (data) ->
if data.currentResult isnt data.lastResult
<h2 class="title" data-bind="title"></h2>
<input class="jenkins-build" data-angleOffset=-125 data-angleArc=250 data-width=200 data-readOnly=true data-bind-value="value | shortenedNumber" data-bind-data-min="min" data-bind-data-max="max">
<p class="last-built" data-bind="lastBuilt"></p>
<p class="updated-at" data-bind="updatedAtMessage"></p>
require 'net/http'
require 'json'
require 'time'
JENKINS_URI = URI.parse("http://localhost:8080")
# the key of this mapping must be a unique identifier for your job, the according value must be the name that is specified in jenkins
job_mapping = {
'JOB' => { :job => 'BUILD', :pre_job => 'PRE_BUILD'}
def get_number_of_failing_tests(job_name)
info = get_json_for_job(job_name, 'lastCompletedBuild')
def get_completion_percentage(job_name)
build_info = get_json_for_job(job_name)
prev_build_info = get_json_for_job(job_name, 'lastCompletedBuild')
return 0 if not build_info["building"]
last_duration = (prev_build_info["duration"] / 1000).round(2)
current_duration = ( - build_info["timestamp"] / 1000).round(2)
return 99 if current_duration >= last_duration
((current_duration * 100) / last_duration).round(0)
def get_json_for_job(job_name, build = 'lastBuild')
http =, JENKINS_URI.port)
response = http.request("/job/#{job_name}/#{build}/api/json"))
job_mapping.each do |title, jenkins_project|
current_status = nil
SCHEDULER.every '10s', :first_in => 0 do |job|
last_status = current_status
build_info = get_json_for_job(jenkins_project[:job])
current_status = build_info["result"]
if build_info["building"]
current_status = "BUILDING"
percent = get_completion_percentage(jenkins_project[:job])
elsif jenkins_project[:pre_job]
pre_build_info = get_json_for_job(jenkins_project[:pre_job])
current_status = "PREBUILD" if pre_build_info["building"]
percent = get_completion_percentage(jenkins_project[:pre_job])
send_event(title, {
currentResult: current_status,
lastResult: last_status,
timestamp: build_info["timestamp"],
value: percent
// ----------------------------------------------------------------------------
// Sass declarations
// ----------------------------------------------------------------------------
$background-color: #4b5f24;
$title-color: rgba(255, 255, 255, 1);
$moreinfo-color: rgba(255, 255, 255, 0.3);
$meter-background: rgba(20, 20, 20, 1);
// ----------------------------------------------------------------------------
// Widget-jenkins-build styles
// ----------------------------------------------------------------------------
.widget-jenkins-build {
background-color: $background-color;
input.jenkins-build {
background-color: $meter-background;
color: #fff;
.title {
color: $title-color;
.more-info {
color: $moreinfo-color;
.updated-at {
color: rgba(0, 0, 0, 1);
Copy link

I like this.

How to add new job without modifying jenkins_build.rb?

Copy link

Thanks for sharing this! Would you mind adding a license to the code so that it can be used by those who have to have a license accompanying all code? Preferably MIT so it matches Dashing’s licensing.


Copy link

I had crazy errors with Jenkins malformed json using just 'json' gem. I used httparty, and it worked for me:

 def get_json_for_job(job_name, build = 'lastBuild')
  response = HTTParty.get(JENKINS_URI + "/job/#{job_name}/#{build}/api/json")

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment