Guthub status widget for dashing

README.md

##Description Simple Dashing widget (and associated job) to display current github status.

##Dependencies httparty

Add it to dashing's gemfile:

gem 'httparty'

and run bundle install.

##Usage To use this widget, copy traffic_lights.html, traffic_lights.coffee, and traffic_lights.scss into the /widgets/traffic_lights directory. Put the github_status.rb file in your /jobs folder.

To include the widget in a dashboard, add the following snippet to the dashboard layout file:

<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
  <div data-id="github_status" data-view="traffic_lights" data-title="GitHub"></div>
</li>

github_status.rb

require 'httparty'

GITHUB_STATUS_TO_TRAFFIC_LIGHT_MAP = {
  'good' => 'green',
	'minor' => 'amber',
	'major' => 'red'
}
GITHUB_STATUS_URI = 'https://status.github.com/api/last-message.json'
GITHUB_STATUS_EVENT_ID = 'github_status'

SCHEDULER.every '1m', :first_in => 0 do
	response = HTTParty.get(GITHUB_STATUS_URI)
	data = {
		status: GITHUB_STATUS_TO_TRAFFIC_LIGHT_MAP[response["status"]],
		message: response["body"]
	}
	send_event(GITHUB_STATUS_EVENT_ID, data)
end

traffic_lights.coffee

class Dashing.TrafficLights extends Dashing.Widget
  ready: ->
    @onData(this)

  onData: (data) ->
    widget = $(@node)
    widget.find('.light').removeClass('on above')
    widget.find('.light.red').addClass('on') if data.status == 'red'
    widget.find('.light.amber').addClass('on') if data.status == 'amber'
    widget.find('.light.green').addClass('on') if data.status == 'green'
    widget.find('.light.amber').addClass('above') if data.status == 'red'
    widget.find('.light.green').addClass('above') if data.status == 'red' || data.status == 'amber'

traffic_lights.html

<div class="title-box">
  <h1 class="title" data-bind="title"></h1>
</div>
<div class="traffic-light-display">
	<div class="traffic-light">
		<div class="red light"></div>
		<div class="amber light"></div>
		<div class="green light"></div>
	</div>
</div>
<div class="status-description">
	<span class="description" data-bind="message"></span>
</div>

traffic_lights.scss

.widget-traffic-lights{
  background-color: #2A455C;
	line-height: 1.4em;
	.title-box {
		height: 75px;
	}
	.traffic-light-display {
		padding: 5px 0px;
	}

	.traffic-light {
		background-color: #181407;
		width: 50px;
		padding: 3px 0px;
		margin: auto;
		border-radius: 5px;
    	-webkit-border-radius: 5px;
    	-moz-border-radius: 5px;
		.light {
			width: 30px;
    		height: 30px;
    		border-radius: 100px;
		    -webkit-border-radius: 150px;
		    -moz-border-radius: 150px;
		    margin: 3px auto;
		    &.red {
  				background: -webkit-linear-gradient(top, #181407, #690202);	
  				background: -moz-linear-gradient(top, #181407, #690202);
  				background: linear-gradient(top, #181407, #690202);
		    	&.on {
		    		background: none;
		    		background-color: #FF0000;
		    	}
		    }
		    &.amber {
		    	background: -webkit-linear-gradient(top, #1B1500, #B18904);	
  				background: -moz-linear-gradient(top, #1B1500, #B18904);
  				background: linear-gradient(top, #1B1500, #B18904);
		    	&.on {
		    		background: none;
		    		background-color: #FFFF00;
		    	}
		    	&.above {
		    		background: -webkit-linear-gradient(bottom, #1B1500, #B18904);	
  					background: -moz-linear-gradient(bottom, #1B1500, #B18904);
  					background: linear-gradient(bottom, #1B1500, #B18904);
		    	}
		    }
		    &.green {
		    	background: -webkit-linear-gradient(top, #0B1401, #4B8A08);	
  				background: -moz-linear-gradient(top, #0B1401, #4B8A08);
  				background: linear-gradient(top, #0B1401, #4B8A08);
		    	&.on {
		    		background: none;
		    		background-color: #84FF00;
		    	}
		    	&.above {
		    		background: -webkit-linear-gradient(bottom, #0B1401, #4B8A08);	
  					background: -moz-linear-gradient(bottom, #0B1401, #4B8A08);
  					background: linear-gradient(bottom, #0B1401, #4B8A08);
		    	}
		    }
		}
	}
	.status-description {
		padding: 10px 10px 0px 10px;
		height: 75px;
		.description {
			font-size: 0.8em;
			font-style: italic;
			display: inline-block;
			line-height: 1.3em;
		}
	}
}

Thanks @k2chogori.