Skip to content

Instantly share code, notes, and snippets.

@dacamp
Last active May 23, 2016 20:02
Show Gist options
  • Save dacamp/7166065 to your computer and use it in GitHub Desktop.
Save dacamp/7166065 to your computer and use it in GitHub Desktop.
GitHub Status Widget for Dashing

##Preview

Description

Simple Dashing widget (and associated job) to display GitHub Status. Uses GitHubs Status API

##Dependencies

httparty

Add it to dashing's gemfile:

gem 'httparty'

and run bundle install. Everything should work now :)

##Usage

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

You'll also need various images from GitHub InvertoCat, Good Logo, Minor Logo, and Major Logo. Download them. Please do not leech them from Github for each request you make to your widgit! Download them, and put the files in your /assets/images 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="GithubStatus" data-title="GitHub Status"></div>
</li>

##Settings

Status is fetched every minute, which maybe a bit much. You can change that by editing the job schedule.

cd assets/images
wget https://status.github.com/images/logo-{good,minor,major}.png https://status.github.com/images/invertocat.png
cd -
class Dashing.GithubStatus extends Dashing.Widget
ready: ->
@onData(this)
onData: (data) ->
widget = $(@node)
widget.removeClass("good minor major").addClass(data.status)
widget.find('#github-logo').removeClass("good minor major").addClass(data.status)
widget.find('#message').removeClass("good minor major").addClass(data.status)
<div id="latest-message" class="wrap">
<p id="message" data-bind="body"></span>
</div>
<div id="github-logo"></div>
<p class="updated-at" data-bind="updatedAtMessage"></p>
require 'httparty'
github_api = 'https://status.github.com/api/last-message.json'
SCHEDULER.every '1m', :first_in => 0 do
send_event('github_status', HTTParty.get(github_api).parsed_response)
end
// ----------------------------------------------------------------------------
// Widget-github-status styles
// ----------------------------------------------------------------------------
.widget-github-status {
background: #2A455C url("/assets/invertocat.png") no-repeat center;
position: relative;
overflow: hidden;
&.good {color:#396;}
&.minor {color:#f29d50;}
&.major {color:#c30;}
div {
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
}
#latest-message{
top: 25px;
margin: 0 5px;
#message {
background:#ccc;
border-radius:3px;
border:1px solid #ccc;
&.good {
background:#eaf4ef;
border-color:#99ccb2;
}
&.minor {
background:#fdf5ed;
border-color:#f8cea7;
}
&.major {
background:#f9eae5;
border-color:#e5997f;
}
}
}
#github-logo{
bottom: 20px;
height:54px;
width: 250px;
background-size: 100% !important;
&.good { background: url("/assets/images/logo-good.png"); }
&.minor { background: url("/assets/images/logo-minor.png"); }
&.major { background: url("/assets/images/logo-major.png"); }
}
.updated-at {
color: rgba(255, 255, 255, 0.7);
}
}
@kimh
Copy link

kimh commented Jan 14, 2014

You have extra indentation at github_status.coffee
https://gist.github.com/dacamp/7166065#file-github_status-coffee-L5

You should remove it. Otherwise, onData callback doesn't work.

@dacamp
Copy link
Author

dacamp commented Jan 14, 2014

@kimh good catch! I'm going to migrate this over to a repo, want to make a pull request? Completely optional, I'll fix it myself if you're not interested.

@lynnaloo
Copy link

lynnaloo commented Mar 4, 2014

Under "Usage" you suggest downloading the images to assets/images, but in the code it is expecting them to exist in the assets root.

@dacamp
Copy link
Author

dacamp commented Feb 8, 2015

@lynnaloo thanks! dunno i didn't see your comment a year ago :/ oh well, fixed!

@alexsheehan1
Copy link

alexsheehan1 commented May 22, 2016

I cant get the githubstatus image to show up for some reason. the images are all there in the assets/images and i double checked the coffee file and they point to them correctly so im not sure why they are not visible on the widget.

edit: it seems that the coffee file should points to the images as /assets not /assets/images, as it was originally before lynnaloo suggests changing it. after changing from assets/images to just assets/, it displays correctly.

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