Dashing Pull Request GitHub Enterprise Widget

Dashing Pull Request GitHub Enterprise Widget.md

Dashing Widget - Pull Requests For GitHub Enterprise

• Place the coffee,html and scss files into a folder named pull_requests in the widgets folder
• Place the rb file into the jobs folder

Add octokit to the gemfile:

gem 'octokit'

and then just run

$ bundle install

Make sure to you have a config/config.yml file.

In this file you need your

• Git oauth key
• Git organisation
• Git API endpoint - should look like "https://YOUR_DOMAIN.co.uk/api/v3/"
• Git repos you wish to monitor

Example config.yml

git-oauth-key: 0cc9443ewfjoewjfoewfewfew
git-org: Bob
git-end-point: https://YOUR_DOMAIN.co.uk/api/v3/
git-repos: [your_repo_1,your_repo_2]

Add this to your dashboard file:

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

github_prs.rb

require 'octokit'

config = YAML.load_file("config/config.yml")
oauth = config["git-oauth-key"]
gitorg = config["git-org"]
gitendpoint = config["git-end-point"]
reposm = config["git-repos"]


SCHEDULER.every '1m', :first_in => 0 do |job|
  client = Octokit::Client.new(:api_endpoint => gitendpoint,  :access_token => gitorg)
  my_organization = @gitorg
  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|
      if reposm.include? repo
        pulls.push({
          title: pull.title,
          repo: repo,
          updated_at: pull.updated_at.strftime("%b %-d %Y, %l:%m %p"),
          creator: "@" + pull.user.login,
          })
        end
    end
    pulls
  }

  send_event('pull_req', { 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: #556270;
  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;
  }

}