GitHub Organization Open Pull Requests

README.md

##Preview

Description

Simple Dashing widget that displays all currently open pull requests across a GitHub organization.

##Usage

#####Dependencies

Add octokit to the gemfile:

gem 'octokit'

and then just run

$ bundle install

#####Setup

To install this widget, simply run dashing install 9d91e0f0bc78265e8281.

Then substitute the following placeholders in github_prs.rb with the appropriate values:

• YOUR_GITHUB_AUTH_TOKEN => your GitHub personal access token
• YOUR_EXACT_GITHUB_ORGANIZATION_NAME => the exact name of the organization to monitor on GitHub itself
• PR_WIDGET_DATA_ID => the target HTML element's data-id attribute in your layout

Finally, to include the widget on a dashboard, drop the following snippet into your layout:

<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
  <div data-view="PullRequests" data-id="whatever_id_you_like"></div>
</li>

github_prs.rb

require 'octokit'

SCHEDULER.every '1m', :first_in => 0 do |job|
  client = Octokit::Client.new(:access_token => "YOUR_GITHUB_AUTH_TOKEN")
  my_organization = "YOUR_EXACT_GITHUB_ORGANIZATION_NAME"
  repos = client.organization_repositories(my_organization).map { |repo| repo.name }

  open_pull_requests = repos.inject([]) { |pulls, repo|
    client.pull_requests("#{my_organization}/#{repo}", :state => 'open').each do |pull|
      pulls.push({
        title: pull.title,
        repo: repo,
        updated_at: pull.updated_at.strftime("%b %-d %Y, %l:%m %p"),
        creator: "@" + pull.user.login,
        })
    end
    pulls
  }

  send_event('PR_WIDGET_DATA_ID', { header: "Open Pull Requests", pulls: open_pull_requests })
end

pull_requests.coffee

class Dashing.PullRequests extends Dashing.Widget

  ready: ->
    # This is fired when the widget is done being rendered

  onData: (data) ->
    # Handle incoming data
    # You can access the html node of this widget with `@node`
    # Example: $(@node).fadeOut().fadeIn() will make the node flash each time data comes in.

pull_requests.html

<h1 class="header" data-bind="header"></h1>

<ul class="list">
  <li data-foreach-pull="pulls">
    <p class="title" data-bind="pull.title"></p>
    <div class="pull_info">
      <span class="repo" data-bind="pull.repo"></span>
      <span>•</span>
      <span class="creator" data-bind="pull.creator"></span>
      <span>•</span>
      <span class="updated_at" data-bind="pull.updated_at"></span>
    </div>
  </li>
</ul>

<p class="more-info" data-bind="moreinfo"></p>
<p class="updated-at" data-bind="updatedAtMessage"></p>

pull_requests.scss

// ----------------------------------------------------------------------------
// Sass declarations
// ----------------------------------------------------------------------------
$background-color:  gray;
$value-color:       #fff;

$pass-color:        #8fb347;
$fail-color:        #ad3b0e;
$else-color:        #9CB4F4;

$title-color:       rgba(255, 255, 255, 0.7);
$label-color:       rgba(255, 255, 255, 0.7);
$moreinfo-color:    rgba(255, 255, 255, 0.7);

// ----------------------------------------------------------------------------
// Widget-pull-requests styles
// ----------------------------------------------------------------------------
.widget-pull-requests {

  background-color: teal;
  vertical-align: top;

  .header {
    color: $label-color;
  }

  span {
    font-size: 12px;
  }

  .title {
    font-size: 0.8em;
    font-weight: 500;
  }

  .pull_info {
    line-height: 60%;
  }

  ol, ul {
    margin: 0 15px;
    text-align: left;
    color: $label-color;
  }

  ol {
    list-style-position: inside;
  }

  li {
    margin-bottom: 20px;
  }

  .list {
    list-style: none;
  }

  .pull {
    color: $label-color;
  }

  .value {
    float: right;
    margin-left: 12px;
    font-weight: 600;
    color: $value-color;
  }

  .updated-at {
    color: rgba(0, 0, 0, 0.3);
  }

  .more-info {
    color: $moreinfo-color;
  }

}