GitLab Group Open Merge Requests Dashing Widget

README.md

Preview

Description

A Dashing widget that displays all currently open merge requests for a GitLab group. Based off of the widget: GitHub Organization Open Pull Requests by dragonai.

Dependencies

The only dependency is gitlab.

Add it to Dashing's Gemfile:

gem 'gitlab'

and run bundle install.

Usage

To use this widget, simply run:

dashing install 11317ce6e6b11163e12d

To add the widget to your dashboard, include the following snippet in the layout file:

<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
  <div data-view="GitlabMergeRequests" data-id="gitlab-merge-requests"></div>
</li>

Settings

Substitute the following placeholders in gitlab_merge_requests.rb with the appropriate values:

• my_group_path: the path of your group
• config.endpoint: The API url for your GitLab, only change this if you host your own GitLab.
• config.private_token: The API token from your account
• pr_widget_data_id: the data-id from the snippet in the layout (the default of gitlab-merge-requests will just work)

The job to update the merge requests is run every minute but you can adjust this as needed.

gitlab_merge_requests.coffee

class Dashing.GitlabMergeRequests 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.

gitlab_merge_requests.html

<h1 class="header">GitLab</h1>
<h2 class="sub-header" data-bind="header"></h2>

<ul class="list">
    <li data-foreach-merge="merges" class="merge">
        <div class="merge-title" data-bind="merge.title"></div>
        <div class="merge-info">
            <div data-bind="merge.creator"></div>
            <div>&nbsp;&middot;&nbsp;</div>
            <div data-bind="merge.repo"></div>
            <div>&nbsp;&middot;&nbsp;</div>
            <div data-bind="merge.updated_at"></div>
        </div>
        <div style="clear: both;"></div>
    </li>
</ul>

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

gitlab_merge_requests.png

gitlab_merge_requests.rb

require 'gitlab'
require 'date'

# TODO: Move config to yaml
my_group_path = 'my-awesome-group'
Gitlab.configure do |config|
  # API endpoint URL, default
  config.endpoint       = 'https://gitlab.com/api/v3'
  
  # User's private token or OAuth2 access token
  config.private_token  = 'qEsq1pt6HJPaNciie3MG'
end

pr_widget_data_id = 'gitlab-merge-requests'
SCHEDULER.every '1m', :first_in => 0 do |job|
  my_group = Gitlab.groups(:search => my_group_path).find do |group| 
    group.path == my_group_path 
  end
  projects = Gitlab.group(my_group.id).projects.map do |proj| 
    { :id => proj['id'], :name => proj['name'] } 
  end
  
  open_merge_requests = projects.inject([]) { |merges, proj|
    Gitlab.merge_requests(proj[:id], :state => 'opened').each do |request|
      merges.push({
        title: request.title,
        repo: proj[:name], 
        updated_at: DateTime.parse(request.updated_at).strftime("%b %-d %Y, %l:%m %p"),
        creator: "@" + request.author.username
        })
    end
    merges
  }

  send_event(pr_widget_data_id, { header: "Open Merge Requests", merges: open_merge_requests })
end

gitlab_merge_requests.scss

// ----------------------------------------------------------------------------
// Sass declarations
// ----------------------------------------------------------------------------
$background-color:  teal;

$heading-color:     rgba(255, 255, 255, 0.7);
$merge-title-color: rgba(255, 255, 255, 1.0);
$merge-info-color: rgba(255, 255, 255, 1.0);

// ----------------------------------------------------------------------------
// Widget-gitlab-merge-requests styles
// ----------------------------------------------------------------------------
.widget-gitlab-merge-requests {

  background-color: $background-color;
  vertical-align: top !important;

  .header {
    margin-bottom: 0;
    font-size: xx-large;
    color: $heading-color;
  }

  .sub-header {
    color: $heading-color;
    font-size: large;
    margin-bottom: 1vh;
  }

  .merge {
    margin-bottom: 2vh;
  }

  .merge-title {
    font-size: medium;
    font-weight: bold;
    color: $merge-title-color;
  }

  .merge-info {
    font-size: small;
    font-style: italic;
    color: $merge-info-color;
  }

  .merge-info div {
    float:left;
  }

  .list {
    list-style: none;
  }

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

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

  ol {
    list-style-position: inside;
  }

}

Hi, is this widget working with the gitlab api v4? I am not getting it to display data, but get no errors. How exactly is the my_group_path syxntax? My group is called core and the project main, should I enter 'core/main' or just 'core' as my group?

@Jay-Way sorry I didn't see this because gists don't seem to generate notifications. I haven't used dashing for several years now, but if I get some time to update these I will