Circle CI Build Status widget for Dashing (Single Builds)

README.md

Description

Dashing widget to show the build status of a CircleCI project.

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
2. Copy the circle_ci.rb file into the jobs folder

OR dashing install 5494978

Then copy the CircleCI logo below into your assets folder

There is also another version for more compactly displaying multiple builds which you can see here

circle_ci.coffee

class Dashing.CircleCi extends Dashing.Widget
  onData: (data) ->
    @_checkStatus(data.widget_class)

  _checkStatus: (status) ->
    $(@node).removeClass('failed pending passed')
    $(@node).addClass(status)

circle_ci.html

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

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

<span class="label small" data-bind="build_id"></span>
<div class="commit-info">
  <img data-bind-src="avatar_url" />
  <span class="label committer-name" data-bind="committer_name"></span>
  <span class="label small commit-body" data-bind="commit_body"></span>
  <div class="clearfix"></div>
</div>

<h2 class="state" data-bind="state"></h2>
<span class="label small" data-bind="time"></span>

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

circle_ci.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 duration(time)
  secs  = time.to_int
  mins  = secs / 60
  hours = mins / 60
  days  = hours / 24

  if days > 0
    "#{days}d #{hours % 24}h ago"
  elsif hours > 0
    "#{hours}h #{mins % 60}m ago"
  elsif mins > 0
    "#{mins}m #{secs % 60}s ago"
  elsif secs >= 0
    "#{secs}s ago"
  end
end

def calculate_time(finished)
  finished ? duration(Time.now - Time.parse(finished)) : "--"
end

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

def build_data(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'])
  build_id = "#{latest_build['branch']}, build ##{latest_build['build_num']}"

  data = {
    build_id: build_id,
    repo: "#{project[:repo]}",
    branch: "#{latest_build['branch']}",
    time: "#{calculate_time(latest_build['stop_time'])}",
    state: "#{latest_build['status'].capitalize}",
    widget_class: "#{translate_status_to_class(latest_build['status'])}",
    committer_name: latest_build['committer_name'],
    commit_body: "\"#{latest_build['body']}\"",
    avatar_url: "http://www.gravatar.com/avatar/#{email_hash}"
  }
  return data
end

SCHEDULER.every '10s', :first_in => 0  do
  projects.each do |project|
    data_id = "circle-ci-#{project[:user]}-#{project[:repo]}-#{project[:branch]}"
    data = build_data(project, ENV['CIRCLE_CI_AUTH_TOKEN'])
    send_event(data_id, data) unless data.empty?
  end
end

circle_ci.scss

$state-color:              #FFF;
$background-color:         #8fb347;
$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);
$moreinfo-color:    rgba(255, 255, 255, 0.7);

.widget-circle-ci{

  background-color: $background-color;
  vertical-align: top;

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

  .committer-info {
    margin: 10px 0px;
    padding: 5px;
    background: rgba(255, 255, 255, 0.3);

    img {
      float:left;
    }

    .label {
      text-align: left;
      padding-left: 90px;
      font-size: 20px;
      &.small {
        font-size: 14px;
      }
    }
  }

  .title {
    color: $title-color;
  }

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

  ol {
    list-style-position: inside;
  }

  li {
    margin-bottom: 5px;
  }

  .list-nostyle {
    list-style: none;
  }

  .label {
    text-align: center;
    display: block;
    color: $label-color;
    font-size: 24px;
    word-wrap: break-word;

    &.small {
      font-size: 18px;
    }
  }

  .state {
    text-align: center;
    display: block;
    font-weight: 600;
    color: $state-color;
    font-size: 40px;
    word-wrap: break-word;
  }

  .updated-at {
    color: rgba(0, 0, 0, 0.3);
  }

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

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

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

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

}

logo-circle-ci.png

I fixed the log in error by logging out, logging back in and creating a new api key. I don't really understand why circle ci's rest api didn't work the first time for me.

Also make sure you change the projects on line 4 of circle_ci.rb to your specific project settings.

This is great. Thanks @petehamilton!

Same here as @camswords - on Circle CI I needed to logout, login and regen an api token.

Now I'm thinking if I'm missing something. The projects hash contains enough data to build a dashboard .erb for circle, rendering one li element for each project. Is that handled by some code already?

Hi @petehamilton!

I have a pipeline with 3 stages in, I'd like to have 3 widgets to display the status of each stage (if it's been ran). Is this possible/easy to do with this?

Thanks

works great! FYI, I found that the commit body was always blank, but subject is populated with the commit msg. Not sure if that's a change to the CircleCI api.

You might document how to set the data-id attribute on the dashboard widget. I had to dig into the job to find its name must be:

"circle-ci-#{project[:user]}-#{project[:repo]}-#{project[:branch]}"

Example dashboard.erb file:

<% content_for(:title) { "Build Status" } %>
<div class="gridster">
  <ul>
    <li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
      <div data-id="circle-ci-USER-PROJECT-BRANCH" data-view="CircleCi" data-title="Foo Project"></div>
    </li>
  </ul>
</div>

Info: The commit message isn't shown anymore. Maybe CircleCI change something in their API?

How hard would it be to make a version of this for buddy.works ?

in circle_ci.rb:
line 41, should be: api_url = 'https://circleci.com/api/v1.1/project/github/%s/%s/tree/%s?circle-token=%s'
and line 59: commit_body: "\"#{latest_build['subject']}\""