Semaphore Single Branch Build Status

README.md

##Preview

Description

Simple Dashing widget that displays a single branch's build status for a specified Semaphore repository. Build status is reflected by the color of the widget. The difference between this widget and rastasheep's is that this widget displays the title and author of the latest commit to help quickly identify the source of a build problem.

##Usage

#####Dependencies

Add semaphoreapp to the gemfile:

gem 'semaphoreapp'

and then just run

$ bundle install

#####Setup

To install this widget, simply run dashing install 14b561fd3a8a112cb558.

Then substitute the following placeholders in semaphore_branch.rb with the appropriate values:

• YOUR_SEMAPHORE_AUTH_KEY => your Semaphore auth token
• exact_repo_name_here => the exact name of the repo to monitor on Semaphore itself (needs to match Semaphore)
• exact_branch_name_here => the exact name of the branch to monitor on Semaphore itself (needs to match Semaphore)
• BRANCH_WIDGET_DATA_ID => the target HTML element's data-id attribute in your layout
• REPO_TITLE_TO_DISPLAY => the name of the repo to be displayed on the widget (doesn't need to match Semaphore)

Finally, to include the widget on a dashboard, drop the following snippet into your layout:

<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
  <div data-view="SemaphoreBranch" data-id="whatever_id_you_like"></div>
</li>

semaphore_branch.coffee

class Dashing.SemaphoreBranch extends Dashing.Widget

  ready: ->
    # This is fired when the widget is done being rendered

  onData: (data) ->
    $(@node).removeClass('failed pending passed');
    $(@node).addClass(data['status'])

semaphore_branch.html

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

<h3 data-bind="text"></h3>

<p class="more-info" data-bind="moreinfo | raw"></p>

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

semaphore_branch.rb

require 'semaphoreapp'
 
class SemaphoreConnector
 
  def initialize auth_key="YOUR_SEMAPHORE_AUTH_KEY"
    Semaphoreapp.auth_token = auth_key
  end
 
  def project_list
    Semaphoreapp::Project.all.map {|project| project.name }
  end
 
  def get_project project_name
    Semaphoreapp::Project.find_by_name(project_name)
  end
 
  def get_branches project_name
    Semaphoreapp::Project.find_by_name(project_name).branches.map {|branch| branch.branch_name }
  end
 
  def branch_status project_name, branch_title
    requested_branch = get_project(project_name).branches.find {|branch| branch.branch_name == branch_title }
    requested_branch_info = {
      "name" => requested_branch.branch_name,
      "build_number" => requested_branch.build_number,
      "build_status" => requested_branch.result,
      "last_build" => requested_branch.build_url,
      "last_build_time" => requested_branch.finished_at,
      "latest_commit_author" => requested_branch.commit.author_name,
      "latest_commit_message" => requested_branch.commit.message,
      "latest_commit_link" => requested_branch.commit.url
    }
  end
 
  def number_of_branches project_name
    get_branches(project_name).count
  end
 
end
 
@semaphore = SemaphoreConnector.new
 
def build_commit_info branch
  "\"#{branch['latest_commit_message'].slice!(0, 22)}...\"<br> - #{branch['latest_commit_author']}"
end
 
SCHEDULER.every '1m', :first_in => 0 do |job|
  @your_project = @semaphore.branch_status("exact_repo_name_here", "exact_branch_name_here")
  
  send_event('BRANCH_WIDGET_DATA_ID', {
    title: "REPO_TITLE_TO_DISPLAY",
    text: @your_project['name'],
    moreinfo: build_commit_info(@your_project),
    status: @your_project['build_status']
  })
 
end

semaphore_branch.scss

// ----------------------------------------------------------------------------
// Sass declarations
// ----------------------------------------------------------------------------
$pass-color:  #8fb347;
$fail-color:  #ad3b0e;
$else-color:  #9CB4C7;

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

// ----------------------------------------------------------------------------
// Widget-semaphore-branch styles
// ----------------------------------------------------------------------------
.widget-semaphore-branch {

  .title {
    color: $title-color;
  }

  .more-info {
    color: $moreinfo-color;
  }

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

  &.large h3 {
    font-size: 65px;
  }

  &.passed
  {
    background-color: $pass-color;
  }

  &.failed
  {
    background-color: $fail-color;
  }

  &.pending
  {
    background-color: $else-color;
  }

}