Semaphore Build status widget for Dashing

readme.md

Semaphore Build status widget for Dashing

Show build status for you CI build statuses from Semaphore on your Dashing dashboard.

Preview

Dependencies

Add the Semaphore ruby gem to your gemfile

gem 'semaphoreapp', '~> 0.1.1'

and run bundle install

Usage

1. Add widget to a dashboard

   <li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
     <div data-id="semaphore" data-view="Semaphore" data-title="Semaphore Builds"></div>
     <i class="icon-ok icon-background"></i>
   </li>

2. Add semaphore.rb to your jobs directory

3. Profit

semaphore.coffee

class Dashing.Semaphore extends Dashing.Widget

semaphore.html

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

<ul class="semaphore-log">
  <li data-foreach-branch="branches" data-bind="branch.name" data-bind-class="branch.status"></li>
</ul>

<p class="updated-at" data-bind="updatedAtMessage"></p>

semaphore.rb

require 'semaphoreapp'

auth_token = ENV['semaphore_token']
project_name = ENV['semaphore_project']
main_branch_name = ENV['semaphore_branch'] || 'master'
number_of_branches = (ENV['semaphore_branches'] || 4).to_i

Semaphoreapp.auth_token = auth_token

SCHEDULER.every '1m', :first_in => 0 do |job|
  project = Semaphoreapp::Project.find_by_name(project_name)
  main_branch = Semaphoreapp::Branch.find_by_name(project.hash_id, main_branch_name)

  branches = [{ name: main_branch_name, status: main_branch.get_status.result }]

  builds = project.branches.sort{|a,b| b.started_at.to_s <=> a.started_at.to_s}.reject{|b| b.branch_name == main_branch_name}
  branches += builds.map do |branch|
    {
      name: branch.branch_name,
      status: branch.result
    }
  end

  send_event('semaphore', branches: branches.take(number_of_branches))
end

semaphore.scss

// ----------------------------------------------------------------------------
// Sass declarations
// ----------------------------------------------------------------------------
$background-color:  #ec663c;

$title-color:       rgba(255, 255, 255, 0.7);
$moreinfo-color:    rgba(255, 255, 255, 0.7);

// ----------------------------------------------------------------------------
// Widget-semaphore styles
// ----------------------------------------------------------------------------
.widget-semaphore {
  background-color: #333;

  li {
    margin-bottom:3px;
    padding: 3px 15px;
    border-radius: 5px;
  }
  li {
    text-align: right;
  }

  li:before {
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    text-decoration: inherit;
    -webkit-font-smoothing: antialiased;
    width: auto;
    height: auto;
    line-height: normal;
    vertical-align: baseline;
    background-image: none;
    background-position: 0% 0%;
    background-repeat: repeat;
    margin-top: 0;
    text-decoration: inherit;
    display: inline-block;
    speak: none;
    float: left;
    margin-top: 5px;
  }

  .passed:before {
    color: #8FB347;
    content:"\f00c";
  }
  .failed:before {
    color: #AD3B0E;
    content: "\f00d";
  }
  .pending:before {
    color: #508FB8;
    content: "\f059";
  }

  .updated-at {
    color: rgba(255, 255, 255, 0.1);
  }
}