GitHub Status Widget for Dashing

README.md

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

github_pngs.sh

cd assets/images
wget https://status.github.com/images/logo-{good,minor,major}.png https://status.github.com/images/invertocat.png
cd -

github_status.coffee

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)

github_status.html

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

github_status.rb

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

github_status.scss

// ----------------------------------------------------------------------------
// 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);
    }
}

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.

@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.

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

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

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.