JavaScript
chrome-extension
docker
GitBucket
GitDay 24

GitBucketのissueで作業量を設定できるプラグイン

== 2018/4/7 追記 ==========================================
本記事ではChrome拡張とDockerによって実現していましたが、
その後GitBucket Plugin化しました。

gitbucket-issue-estimation-plugin

リリースページからjarファイルをダウンロードして<GITBUCKET_HOME>/plugins/に置くだけで導入可能です。
== =======================================================

Git Advent Calendarが埋まっていなかったので、大晦日ですが代わりに投稿させていただきました。

はじめに

GitBucketのマイルストーンの進捗率はissueの件数ベースなので、issueごとに作業量のバラつきがあったりすると現実的な進捗率と乖離してしまいます。

そこで今回はChrome拡張とDockerイメージを作成して、
issueに作業量を設定できるようにして、マイルストーンで作業量ベースの進捗率を確認できるようにしました。

Chrome拡張とDockerイメージはどちらも公開しているので簡単に導入できます。是非試してみてください。

導入すると

GitBucketのissueで作業量が設定できるようになり、
導入後_イシュー画面.png

マイルストーンで作業量ベースの進捗率が見れるようになります。
導入後_マイルストーン画面.png

またissue一覧画面でも作業量を設定できるようになります。
導入後_イシュー一覧画面.png

導入手順

1. Docker側

GitBucketと同じネットワーク環境に作業量保存用のサーバを立てます。Dockerが導入されていることが前提です。

  • docker-compose.ymlを作成(MongoDBのボリューム用にdocker-compose.ymlファイルと同階層にdbフォルダを作成してください)
docker-compose.yml
version: "3.3"
services:
  server:
    image: takumon/gitbucket-issue-estimation-server
    ports:
      - 3000:3000
    depends_on:
      - mongo
    links:
      - mongo
    environment:
      MONGO_URL: mongodb://mongo:27017/test
  mongo:
    image: mongo:3.5.12
    ports:
      - 27017:27017
    volumes:
      - ./db:/data/db
  • docker-conpose.ymlがあるフォルダで下記を実行
$ docker-compose up -d

2. GitBucket側

Chrome拡張をインストールする前に、GitBucketのトークンを発行してメモしておきます。

  • GitBucketヘッダー右上アイコン > Account Setting を選択
    導入手順_GitBucketトークン発行_1.png

  • 左メニュー Applicationsを選択し、Generate new tokenのToken descriptionにトークンの概要を記載、その後Generate tokenボタンをクリック
    導入手順_GitBucketトークン発行_2.png

  • 発行されたトークンをコピー(後の手順で使います)
    導入手順_GitBucketトークン発行_3.png

3. Chrome Extension側

  • Chromeを開きChromeウェブストアでgitbucket-issue-estimation-clientをインストール
    導入手順_GitBucket_拡張インストール_4.png

  • 右上の「E」アイコンをクリック、下記情報を入力しSaveボタンクリック

    • gitbucket-issue-estimation-server URL
      • サーバ側の手順で立てたサーバのURL 例: http://127.0.0.1:3000
    • GitBucket Token
      • GitBucket側の手順でメモしたトークン 導入手順_GitBucketトークン発行_4.png

具体的な仕組み

Docker側はMongoDBとNode.jsを使っていて、issueの作業量の検索登録・更新・削除APIを提供しているだけです。
Chrome拡張側で下記のように全体をコントロールしています。

(1) ・・・ GitBucketの画面からissueとマイルストーンの情報を取得、issueの作業量、作業量ベースの進捗率を画面に挿入
(2) ・・・ 画面から取得したissueの情報をもとに詳細情報を取得
(3) ・・・ issueの作業量を検索・登録・更新・削除

全体像.png

Chrome拡張作成時にGitBucket APIまわりで躓いたこと

GitBucketのAPIGithubのREST API v3に準拠していますが、一部実装されていない部分があったので、Chrome拡張作成時に躓きました。

state=allが効かない

未解決issueと解決済issue両方をいっぺんに取得したかったのですが、GitBucketのAPIではstate=allが効きません。そのためstate=openstate=closedを指定して2回に分けて取得する実装にしました。

per_pageが効かない(1度に25件が最大)

GitBucketのAPIではper_page(検索時の1ページあたりの件数)が実装されていません。
そのためマイルストーンに紐づくissue取得時は、1ページ目を検索して取得結果が25件の場合は次のページも検索するような実装にしました。

closed_at(クローズ日)が取得できない

Chrome拡張作成当初は、バーンダウンチャートを表示しようと思っていたのですが、issueのクローズ日が取得出来ないので断念しました。

※ 参考にさせていただいたサイト

まとめ

本来こういう追加機能はGitBucketプラグインで作るべきなのかもしれませんが、今回はChrome拡張とDockerイメージで実現してみました。
Chrome拡張は任意の画面にJavaScriptやCSSを差し込めるので、既存のWebサービスををちょっと便利にするのにはうってつけですね。