petehamilton · March 31, 2020 18:18 · Mar 7, 2014 · Aug 30, 2013 · Aug 30, 2013 · May 21, 2013
diff --git a/circle_ci_list.scss b/circle_ci_list.scss
@@ -7,7 +7,7 @@ $background-pending-color: #47bbb3;
 $title-color:       rgba(255, 255, 255, 1);
 $label-color:       rgba(255, 255, 255, 0.7);
 
-.widget.widget-circle-ci_list{
+.widget.widget-circle-ci-list{
 
   background-color: $background-color;
   padding: 0px;

diff --git a/README.md b/README.md
@@ -17,3 +17,5 @@ OR `dashing install 5494590`
 Then copy the CircleCI logo below into your assets folder
 
 ![screen shot 2013-05-01 at 11 14 01](https://f.cloud.github.com/assets/510845/448488/2c0b0012-b248-11e2-9c8a-a9382e007785.png)
+
+There is also another version for displaying one tile per project which you can see [here](https://gist.github.com/petehamilton/5494978)
diff --git a/README.md b/README.md
@@ -14,6 +14,6 @@ Then:
 
 OR `dashing install 5494590`
 
-Then copy the [CircleCI Logo](https://f.cloud.github.com/assets/510845/448516/6e8d2842-b249-11e2-91b6-9a2ffcd08bb0.png into `assets/images`) into your assets folder
+Then copy the CircleCI logo below into your assets folder
 
 ![screen shot 2013-05-01 at 11 14 01](https://f.cloud.github.com/assets/510845/448488/2c0b0012-b248-11e2-9c8a-a9382e007785.png)
diff --git a/circle_ci_list.html b/circle_ci_list.html
@@ -1,6 +1,6 @@
 <h1 class="title" data-bind="title"></h1>
 
-<img class="background" src="/assets/circle-ci-logo.png">
+<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">

diff --git a/logo-circle-ci.png b/logo-circle-ci.png
diff --git a/README.md b/README.md
@@ -6,6 +6,7 @@
 
 - Get a Circle API Token from your [Account Dashboard](https://circleci.com/account/api) 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`

diff --git a/README.md b/README.md
@@ -4,10 +4,9 @@
 
 ## Usage
 
-Get a Circle API Token from your [Account Dashboard](https://circleci.com/account/api) and set it in your environment as `CIRCLE_CI_AUTH_TOKEN`
-
-Add the `httparty` to your Gemfile and run `bundle install`
-
+- Get a Circle API Token from your [Account Dashboard](https://circleci.com/account/api) 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

diff --git a/README.md b/README.md
@@ -6,6 +6,9 @@
 
 Get a Circle API Token from your [Account Dashboard](https://circleci.com/account/api) and set it in your environment as `CIRCLE_CI_AUTH_TOKEN`
 
+Add the `httparty` to your Gemfile and run `bundle install`
+
+
 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
 

diff --git a/circle_ci_list.rb b/circle_ci_list.rb
@@ -1,7 +1,7 @@
 require 'httparty'
 require 'digest/md5'
 
-PROJECTS = [
+projects = [
   { user: 'MY_GITHUB_USER_OR_ORG', repo: 'XXX', branch: 'master' },
   { user: 'MY_GITHUB_USER_OR_ORG', repo: 'YYY', branch: 'dev' },
 ]
@@ -36,6 +36,6 @@ def update_builds(project, auth_token)
 end
 
 SCHEDULER.every '10s', :first_in => 0  do
-  items = PROJECTS.map{ |p| update_builds(p, ENV['CIRCLE_CI_AUTH_TOKEN']) }
+  items = projects.map{ |p| update_builds(p, ENV['CIRCLE_CI_AUTH_TOKEN']) }
   send_event('circle-ci-list', { items: items })
 end
diff --git a/README.md b/README.md
@@ -11,6 +11,6 @@ Get a Circle API Token from your [Account Dashboard](https://circleci.com/accoun
 
 OR `dashing install 5494590`
 
-Then copy the [CircleCI Logo](https://f.cloud.github.com/assets/510845/448516/6e8d2842-b249-11e2-91b6-9a2ffcd08bb0.png into `assets/images`)
+Then copy the [CircleCI Logo](https://f.cloud.github.com/assets/510845/448516/6e8d2842-b249-11e2-91b6-9a2ffcd08bb0.png into `assets/images`) into your assets folder
 
 ![screen shot 2013-05-01 at 11 14 01](https://f.cloud.github.com/assets/510845/448488/2c0b0012-b248-11e2-9c8a-a9382e007785.png)
diff --git a/README.md b/README.md
@@ -6,17 +6,11 @@
 
 Get a Circle API Token from your [Account Dashboard](https://circleci.com/account/api) and set it in your environment as `CIRCLE_CI_AUTH_TOKEN`
 
-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
-
-1. `dashing install 5494590`
-
-FINALLY
+OR `dashing install 5494590`
 
-Copy the [CircleCI Logo](https://f.cloud.github.com/assets/510845/448516/6e8d2842-b249-11e2-91b6-9a2ffcd08bb0.png into `assets/images`)
+Then copy the [CircleCI Logo](https://f.cloud.github.com/assets/510845/448516/6e8d2842-b249-11e2-91b6-9a2ffcd08bb0.png into `assets/images`)
 
 ![screen shot 2013-05-01 at 11 14 01](https://f.cloud.github.com/assets/510845/448488/2c0b0012-b248-11e2-9c8a-a9382e007785.png)
diff --git a/circle_ci_list.scss b/circle_ci_list.scss
@@ -6,7 +6,6 @@ $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.widget-circle-ci_list{
 

diff --git a/circle_ci_list.scss b/circle_ci_list.scss
@@ -0,0 +1,92 @@
+$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);
+$moreinfo-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;
+      }
+    }
+  }
+}
diff --git a/README.md b/README.md
@@ -17,6 +17,6 @@ OR
 
 FINALLY
 
-Copy the CircleCI image from https://f.cloud.github.com/assets/510845/448516/6e8d2842-b249-11e2-91b6-9a2ffcd08bb0.png into `assets/images`
+Copy the [CircleCI Logo](https://f.cloud.github.com/assets/510845/448516/6e8d2842-b249-11e2-91b6-9a2ffcd08bb0.png into `assets/images`)
 
 ![screen shot 2013-05-01 at 11 14 01](https://f.cloud.github.com/assets/510845/448488/2c0b0012-b248-11e2-9c8a-a9382e007785.png)
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 ## Description
 
-[Dashing](http://shopify.github.io/dashing/) widget to show the status of builds from CircleCI
+[Dashing](http://shopify.github.io/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
 

diff --git a/README.md b/README.md
@@ -4,15 +4,19 @@
 
 ## Usage
 
-1. Get a Circle API Token from your [Account Dashboard](https://circleci.com/account/api) and set it in your environment as `CIRCLE_CI_AUTH_TOKEN`
-2. Copy the below coffee/scss/html files into a widget folder named `circle_ci_list`
-3. Copy the `circle_ci_list.rb` file into the `jobs` folder
-4. Copy the CircleCI image from https://f.cloud.github.com/assets/510845/448516/6e8d2842-b249-11e2-91b6-9a2ffcd08bb0.png into `assets/images`
+Get a Circle API Token from your [Account Dashboard](https://circleci.com/account/api) and set it in your environment as `CIRCLE_CI_AUTH_TOKEN`
+
+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
 
-1. Get a Circle API Token from your [Account Dashboard](https://circleci.com/account/api) and set it in your environment as `CIRCLE_CI_AUTH_TOKEN`
-2. `dashing install 5494590`
-3. Copy the CircleCI image from https://f.cloud.github.com/assets/510845/448516/6e8d2842-b249-11e2-91b6-9a2ffcd08bb0.png into `assets/images`
+1. `dashing install 5494590`
+
+FINALLY
+
+Copy the CircleCI image from https://f.cloud.github.com/assets/510845/448516/6e8d2842-b249-11e2-91b6-9a2ffcd08bb0.png into `assets/images`
 
 ![screen shot 2013-05-01 at 11 14 01](https://f.cloud.github.com/assets/510845/448488/2c0b0012-b248-11e2-9c8a-a9382e007785.png)
diff --git a/README.md b/README.md
@@ -10,6 +10,7 @@
 4. Copy the CircleCI image from https://f.cloud.github.com/assets/510845/448516/6e8d2842-b249-11e2-91b6-9a2ffcd08bb0.png into `assets/images`
 
 OR
+
 1. Get a Circle API Token from your [Account Dashboard](https://circleci.com/account/api) and set it in your environment as `CIRCLE_CI_AUTH_TOKEN`
 2. `dashing install 5494590`
 3. Copy the CircleCI image from https://f.cloud.github.com/assets/510845/448516/6e8d2842-b249-11e2-91b6-9a2ffcd08bb0.png into `assets/images`

diff --git a/README.md b/README.md
@@ -1,13 +1,17 @@
-# CircleCI Build Statuses
+## Description
+
+[Dashing](http://shopify.github.io/dashing/) widget to show the status of builds from CircleCI
 
 ## Usage
 
-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
+1. Get a Circle API Token from your [Account Dashboard](https://circleci.com/account/api) and set it in your environment as `CIRCLE_CI_AUTH_TOKEN`
+2. Copy the below coffee/scss/html files into a widget folder named `circle_ci_list`
+3. Copy the `circle_ci_list.rb` file into the `jobs` folder
+4. Copy the CircleCI image from https://f.cloud.github.com/assets/510845/448516/6e8d2842-b249-11e2-91b6-9a2ffcd08bb0.png into `assets/images`
 
 OR
+1. Get a Circle API Token from your [Account Dashboard](https://circleci.com/account/api) and set it in your environment as `CIRCLE_CI_AUTH_TOKEN`
+2. `dashing install 5494590`
+3. Copy the CircleCI image from https://f.cloud.github.com/assets/510845/448516/6e8d2842-b249-11e2-91b6-9a2ffcd08bb0.png into `assets/images`
 
-```
-dashing install 5494590
-```
 ![screen shot 2013-05-01 at 11 14 01](https://f.cloud.github.com/assets/510845/448488/2c0b0012-b248-11e2-9c8a-a9382e007785.png)
diff --git a/gistfile1.txt → circle_ci_list.html b/gistfile1.txt → circle_ci_list.html
diff --git a/README.md b/README.md
@@ -5,4 +5,9 @@
 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
+```
 ![screen shot 2013-05-01 at 11 14 01](https://f.cloud.github.com/assets/510845/448488/2c0b0012-b248-11e2-9c8a-a9382e007785.png)
diff --git a/README.md b/README.md
@@ -1,8 +1,8 @@
 # CircleCI Build Statuses
 
-![screen shot 2013-05-01 at 11 14 01](https://f.cloud.github.com/assets/510845/448488/2c0b0012-b248-11e2-9c8a-a9382e007785.png)
-
 ## Usage
 
 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
+
+![screen shot 2013-05-01 at 11 14 01](https://f.cloud.github.com/assets/510845/448488/2c0b0012-b248-11e2-9c8a-a9382e007785.png)
diff --git a/README.md b/README.md
@@ -2,3 +2,7 @@
 
 ![screen shot 2013-05-01 at 11 14 01](https://f.cloud.github.com/assets/510845/448488/2c0b0012-b248-11e2-9c8a-a9382e007785.png)
 
+## Usage
+
+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
diff --git a/f b/f
@@ -1 +0,0 @@
-f

diff --git a/README.md b/README.md
@@ -0,0 +1,4 @@
+# CircleCI Build Statuses
+
+![screen shot 2013-05-01 at 11 14 01](https://f.cloud.github.com/assets/510845/448488/2c0b0012-b248-11e2-9c8a-a9382e007785.png)
+
diff --git a/circle_ci_list.coffee b/circle_ci_list.coffee
@@ -0,0 +1 @@
+class Dashing.CircleCiList extends Dashing.Widget
diff --git a/circle_ci_list.rb b/circle_ci_list.rb
@@ -0,0 +1,41 @@
+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
diff --git a/f b/f
@@ -0,0 +1 @@
+f
diff --git a/gistfile1.txt b/gistfile1.txt
@@ -0,0 +1,12 @@
+<h1 class="title" data-bind="title"></h1>
+
+<img class="background" src="/assets/circle-ci-logo.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>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,4 @@
		# CircleCI Build Statuses

		![screen shot 2013-05-01 at 11 14 01](https://f.cloud.github.com/assets/510845/448488/2c0b0012-b248-11e2-9c8a-a9382e007785.png)
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		class Dashing.CircleCiList extends Dashing.Widget