README.md

Description

Dashing widget to show the status of builds from CircleCI. Also shows the avatar of the person who is running/breaking/passing the current build.

Usage

• Get a Circle API Token from your Account Dashboard and set it in your environment as CIRCLE_CI_AUTH_TOKEN
• Add the httparty to your Gemfile and run bundle install

Then:

1. Copy the below coffee/scss/html files into a widget folder named circle_ci_list
2. Copy the circle_ci_list.rb file into the jobs folder

OR dashing install 5494590

Then copy the CircleCI logo below into your assets folder

There is also another version for displaying one tile per project which you can see here

circle_ci_list.coffee

class Dashing.CircleCiList extends Dashing.Widget

circle_ci_list.html

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

<img class="background" src="/assets/logo-circle-ci.png">

<ul class="items list-nostyle">
  <li class="item" data-foreach-item="items" data-bind-class="item.widget_class">
    <span class="label repo" data-bind="item.repo"></span>
    <span class="label branch" data-bind="item.branch"></span>
    <img class="avatar" data-bind-src="item.avatar_url" />
    <div class="clearfix" />
  </li>
</ul>

circle_ci_list.rb

require 'httparty'
require 'digest/md5'

projects = [
  { user: 'MY_GITHUB_USER_OR_ORG', repo: 'XXX', branch: 'master' },
  { user: 'MY_GITHUB_USER_OR_ORG', repo: 'YYY', branch: 'dev' },
]

def translate_status_to_class(status)
  statuses = {
    'success' => 'passed',
      'fixed' => 'passed',
    'running' => 'pending',
     'failed' => 'failed'
  }
  statuses[status] || 'pending'
end

def update_builds(project, auth_token)
  api_url = 'https://circleci.com/api/v1/project/%s/%s/tree/%s?circle-token=%s'
  api_url = api_url % [project[:user], project[:repo], project[:branch], auth_token]
  api_response =  HTTParty.get(api_url, :headers => { "Accept" => "application/json" } )
  api_json = JSON.parse(api_response.body)
  return {} if api_json.empty?

  latest_build = api_json.select{ |build| build['status'] != 'queued' }.first
  email_hash = Digest::MD5.hexdigest(latest_build['committer_email'])

  data = {
    repo: "#{project[:repo]}",
    branch: "#{latest_build['branch']}",
    widget_class: "#{translate_status_to_class(latest_build['status'])}",
    avatar_url: "http://www.gravatar.com/avatar/#{email_hash}"
  }
  return data
end

SCHEDULER.every '10s', :first_in => 0  do
  items = projects.map{ |p| update_builds(p, ENV['CIRCLE_CI_AUTH_TOKEN']) }
  send_event('circle-ci-list', { items: items })
end

circle_ci_list.scss

$value-color:              #FFF;
$background-color:         #444;
$background-error-color:   #A31F1F;
$background-passed-color:  #8fb347;
$background-pending-color: #47bbb3;

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

.widget.widget-circle-ci-list{

  background-color: $background-color;
  padding: 0px;
  vertical-align: top;

  img.background {
    width: 100% !important;
    position: absolute;
    left: 0;
    top: 30px;
    opacity: 0.05;
  }

  .title {
    color: $title-color;
  }

  ol, ul {
    margin: 0px;
    text-align: left;
    color: $label-color;
  }

  ol {
    list-style-position: inside;
  }

  li {
    margin-bottom: 5px;
  }

  .list-nostyle {
  }

  .items{
    list-style: none;

    li {
      margin-top: 5px;

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

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

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

      .label {
        display: block;
        color: $label-color;
        font-size: 20px;
        word-wrap: break-word;

        &.repo {
          float: left;
          text-align: left;
          padding: 5px 0px 5px 10px;
        }

        &.branch {
          float: left;
          text-align: left;
          padding-top: 10px;
          font-size: 14px;
          padding: 11px 0px 5px 5px;
        }
      }

      .avatar {
        float: right;
        text-align: right;
        width: 40px;
      }
    }
  }
}

logo-circle-ci.png