Skip to content

Instantly share code, notes, and snippets.

@petehamilton
Last active July 8, 2021 09:50
Show Gist options
  • Save petehamilton/5494978 to your computer and use it in GitHub Desktop.
Save petehamilton/5494978 to your computer and use it in GitHub Desktop.
Circle CI Build Status widget for Dashing (Single Builds)

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

CircleCI Dashing Widget

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

class Dashing.CircleCi extends Dashing.Widget
onData: (data) ->
@_checkStatus(data.widget_class)
_checkStatus: (status) ->
$(@node).removeClass('failed pending passed')
$(@node).addClass(status)
<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>
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
$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;
}
}
@joergrech
Copy link

Does this widget still work? I get the following error every activation of circle-ci.rb:

scheduler caught exception:

can't convert String into Integer
.../dashing_dashboard/jobs/circle_ci.rb:50:in `[]'

Refering to the line:

email_hash = Digest::MD5.hexdigest(latest_build['committer_email'])

And on startup I get from circle_ci.rb (I installed both your widgets):

.../dashing_dashboard/jobs/circle_ci_list.rb:4: warning: already initialized constant PROJECTS

Btw: before getting so far I needed to specify the gem "httparty" in my gemfile and call "bundle install".

@petehamilton
Copy link
Author

HTTParty should be a dependency, apologies for not adding that to the README, will do that now.

For the error on line 50, I'm not entirely sure why that's being caused. latest_build should be a valid hash and 'committer_email' should be a valid index. Could you debug the response from CircleCI, anonymise and post?

PROJECTS is being reinitialised because I used a constant. I will update it to be a lowercase variable projects instead, should still work fine, but remove the conflict.

@gaelrottier
Copy link

When I try to get the CircleCI logo, I get a 403 error page, is the logo private ?

@camswords
Copy link

I'm having the same error on line 50 can't convert String into Integer.

The response that fails to parse has the contents:

{
"message" : "You must log in first."
}

@camswords
Copy link

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.

@camswords
Copy link

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

@wcamarao
Copy link

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?

@burly
Copy link

burly commented Nov 17, 2013

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

@bradrobertson
Copy link

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.

@masha256
Copy link

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]}"

@jjgs
Copy link

jjgs commented Mar 30, 2016

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>

@joergrech
Copy link

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

@nekocentral
Copy link

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

@jeromelachaud
Copy link

jeromelachaud commented Jan 22, 2018

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']}\""

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment