Skip to content

Instantly share code, notes, and snippets.

@iainjmitchell iainjmitchell/README.md
Last active Nov 12, 2018

Embed
What would you like to do?
Guthub status widget for dashing

##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>

screenshot

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
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'
<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>
.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;
}
}
}
@k2chogori

This comment has been minimized.

Copy link

commented Jul 4, 2013

Hi,

There is an error in this:
data-view="traffic_lights"

It should be:
data-view="TrafficLights" because in traffic_lights.coffee you create class Dashing.TrafficLights ( not traffic_lights ).

@rliessum

This comment has been minimized.

Copy link

commented Dec 30, 2016

Thanks @k2chogori.

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.