Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Circle CI Build Status widget for Dashing (Multiple Builds)

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

screen shot 2013-05-01 at 11 14 01

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

class Dashing.CircleCiList extends Dashing.Widget
<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>
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
$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;
}
}
}
}
@djl197

This comment has been minimized.

Copy link

commented Nov 17, 2013

Hi,
I have just tried to use this and I am struggling, All the items I add appear below the background image not overlaid. And secondly when I update the status i dont get the colors. I have copied the code from above and double checked. So I suspect I am doing something stupid. Do you have a working example you can point me to.......

@ssalinas

This comment has been minimized.

Copy link

commented Jan 13, 2014

Having the same issue as above, any thoughts/resolutions?

@jspies

This comment has been minimized.

Copy link

commented Jan 19, 2014

There's a typo in the scss file. On line 10, change the underscore to a hyphen

@petehamilton

This comment has been minimized.

Copy link
Owner Author

commented Mar 7, 2014

Sorry for not getting back to you guys. Seems my settings are such that Github doesn't notify me of Gist comments :(

As @jspies says, the underscore->dash should fix things (updated).

@cheeseplus

This comment has been minimized.

Copy link

commented Apr 18, 2019

Dropping by to say thanks for the code! Also worth noting that these days one can easily grab the avatar URL directly from CircleCI's API instead of going to talk to Gravatar. In our case if the user didn't set up their gitconfig to use a matching e-mail, we'd get the default Gravatar icon. One can remove line 27 entirely email_hash = Digest::MD5.hexdigest(latest_build['committer_email']) and then change the data payload as below:

avatar_url: latest_build['user']['avatar_url']
@Dssdiego

This comment has been minimized.

Copy link

commented May 15, 2019

Dropping by to say thanks for the code! Also worth noting that these days one can easily grab the avatar URL directly from CircleCI's API instead of going to talk to Gravatar. In our case if the user didn't set up their gitconfig to use a matching e-mail, we'd get the default Gravatar icon. One can remove line 27 entirely email_hash = Digest::MD5.hexdigest(latest_build['committer_email']) and then change the data payload as below:

avatar_url: latest_build['user']['avatar_url']

This worked fo me! Thanks @cheeseplus!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.