Jenkins Dashboard using dashing

README.md

This is an example of adding Jenkins build status to a [dashing-dashboard](https://github.com/Shopify/dashing

If a job is running, the widget will have a grey background. If a job succeeded at its last run, it will have a green background. If a job failed at its last run, it will have a red background.

Requirements:

• Ruby 1.9
• dashing
• moment.js
• Jenkins CI Server

dashboardsjenkins.erb

<% content_for(:title) { "Jenkins Status" } %>
<div class="gridster">
  <ul>

    <!-- add as many jenkins job widgets as you like --> 

    <li data-row="1" data-col="2" data-sizex="1" data-sizey="1">
      <div data-id="myapp" data-view="Jenkins" data-title="myapp"></div>
    </li>
  </ul>
</div>

jenkins.coffee

class Dashing.Jenkins extends Dashing.Widget

  @accessor 'bgColor', ->
    if @get('currentResult') == "SUCCESS"
      "#8EC15C"
    else if @get('currentResult') == "FAILURE"
      "#D26771"
    else
      "#999"

  refreshLastRun: =>
    if timestamp = @get('timestamp')
      lastRun = moment(timestamp).fromNow();
      @set('lastRunDateTime', "#{lastRun}")

  ready: ->
    @refreshLastRun()
    $(@node).fadeOut().css('background-color',@get('bgColor')).fadeIn()

  onData: (data) ->
    @refreshLastRun()
    if data.currentResult != data.lastResult
      $(@node).fadeOut().css('background-color',@get('bgColor')).fadeIn()

jenkins.erb

<% content_for(:title) { "Jenkins Status" } %>
<div class="gridster">
  <ul>

    <!-- add as many jenkins job widgets as you like --> 

    <li data-row="1" data-col="2" data-sizex="1" data-sizey="1">
      <div data-id="myapp" data-view="Jenkins" data-title="myapp"></div>
    </li>
  </ul>
</div>

jenkins.html

<h1 class="title" data-bind="title"></h1>

<p class="build-number"> 
  <a data-bind-href="url">#<span data-bind="number"></span></a>
</p>

<p class="last-run" data-bind="lastRunDateTime"></p>

jenkins.rb

require 'net/http'
require 'json'

JENKINS_BASE_URL = 'localhost' # specifiy the base url of your jenkins server here
JENKINS_PORT = 80 # specify the port of the server here

# 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 = {
  'myapp' => 'org.mycompany.myapp.test'
}

job_mapping.each do |title, jenkins_project|

  current_status = nil
  SCHEDULER.every '10s', :first_in => 0 do
    last_status = current_status
    http = Net::HTTP.new(JENKINS_BASE_URL, JENKINS_PORT)
    response = http.request(Net::HTTP::Get.new("/job/#{jenkins_project}/lastBuild/api/json"))
    build_info = JSON.parse(response.body)
    current_status = build_info["result"]
    send_event(title, { 
      currentResult: current_status, 
      lastResult: last_status, 
      number: build_info["number"], 
      url: build_info["url"],
      timestamp: build_info["timestamp"] })
  end
end

jenkins.scss

// ----------------------------------------------------------------------------
// Sass declarations
// ----------------------------------------------------------------------------
$title-color:       rgba(255, 255, 255, 0.7);;

// ----------------------------------------------------------------------------
// Widget-number styles
// ----------------------------------------------------------------------------
.widget-jenkins { 
  
  .title { 
    color: $title-color;
  }

  .last-run {
    padding-top: 50px;
    color: rgba(0, 0, 0, 0.3);
  }
  
}

jobsjenkins.rb

require 'net/http'
require 'json'

JENKINS_BASE_URL = 'localhost' # specifiy the base url of your jenkins server here
JENKINS_PORT = 80 # specify the port of the server here

# 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 = {
  'myapp' => 'org.mycompany.myapp.test'
}

job_mapping.each do |title, jenkins_project|

  current_status = nil
  SCHEDULER.every '10s', :first_in => 0 do
    last_status = current_status
    http = Net::HTTP.new(JENKINS_BASE_URL, JENKINS_PORT)
    response = http.request(Net::HTTP::Get.new("/job/#{jenkins_project}/lastBuild/api/json"))
    build_info = JSON.parse(response.body)
    current_status = build_info["result"]
    send_event(title, { 
      currentResult: current_status, 
      lastResult: last_status, 
      number: build_info["number"], 
      url: build_info["url"],
      timestamp: build_info["timestamp"] })
  end
end

widgetsjenkinsjenkins.coffee

class Dashing.Jenkins extends Dashing.Widget

  @accessor 'bgColor', ->
    if @get('currentResult') == "SUCCESS"
      "#8EC15C"
    else if @get('currentResult') == "FAILURE"
      "#D26771"
    else
      "#999"

  refreshLastRun: =>
    if timestamp = @get('timestamp')
      lastRun = moment(timestamp).fromNow();
      @set('lastRunDateTime', "#{lastRun}")

  ready: ->
    @refreshLastRun()
    $(@node).fadeOut().css('background-color',@get('bgColor')).fadeIn()

  onData: (data) ->
    @refreshLastRun()
    if data.currentResult != data.lastResult
      $(@node).fadeOut().css('background-color',@get('bgColor')).fadeIn()

widgetsjenkinsjenkins.html

<h1 class="title" data-bind="title"></h1>

<p class="build-number"> 
  <a data-bind-href="url">#<span data-bind="number"></span></a>
</p>

<p class="last-run" data-bind="lastRunDateTime"></p>

widgetsjenkinsjenkins.scss

// ----------------------------------------------------------------------------
// Sass declarations
// ----------------------------------------------------------------------------
$title-color:       rgba(255, 255, 255, 0.7);;

// ----------------------------------------------------------------------------
// Widget-number styles
// ----------------------------------------------------------------------------
.widget-jenkins { 
  
  .title { 
    color: $title-color;
  }

  .last-run {
    padding-top: 50px;
    color: rgba(0, 0, 0, 0.3);
  }
  
}

Do you have an example using a HTTPS Jenkins server?