Fadilとは

FadilはMoney Forward社内のエンジニアの生産性を可視化することができるweb アプリケーションです。詳しくはこちらの記事に書かれているので今回は省略します。

個人のメトリクスを可視化できるようにした背景

phase1 リリースで Repository ごとの Commit, Monthly Active Developers, Pull Request Countなどのメトリクスを表示する機能は実装しました。 fadilプロジェクトの定例ミーティングの中で「phase2では個人のメトリクスも見れるようになったら面白いね」という話が出たので実装することが決まりました。（fadil開発チームではこのような雰囲気で、比較的自由に機能追加などを決めることができます。)

(phase1 時点でのメトリクスの画面)

どのようにやるか

個人のメトリクスを表示するのに必要な機能は大きく分けて

個人のメトリクスを集計する部分
ユーザーのGitHubユーザーネームを取得する部分

の2つに分けられます。

個人のメトリクスを集計する部分

既存の集計タスクには、Repository ごとのメトリクスと全社のメトリクスを主計するロジックしかないので個人のメトリクスを集計できるロジックを追加します。

個人のメトリクスとして表示させたいと考えたのは

Commit → commit 数
Issue → issue を open した数
Pull Request Count → Pull Request を出した数
Review → Review をした数

の4つです。(今後どんどん増やしていく予定です。)

上記をふまえて、DBの構成を修正しました。

(個人のメトリクスに対応したDB構成の一部)

集計タスクのコード

今までのメトリクスの集計ロジックはそれぞれのテーブルの repository_id を group メソッドでまとめて metrics テーブルに入れています。個人のメトリクスを集計するときは repository_id でまとめていたところを author に変えることで集計できるようにしています。

以下に示しているのが個人 commit メトリクスの集計タスクです。

    def calc_individual_commits(from, to)
      indiv_commits = Commit.group("author", "date")
                            .where(date: from..to)
                            .count
      github_id_hash = indiv_commits.keys.each_with_object({}) do |key, h|
        v = h[key[0]] || {}
        v[key[1]] = indiv_commits[key]
        h[key[0]] = v
      end
      metrics = []
      github_id_hash.each do |github_id, h|
        (from..to).each do |date|
          LOG_INFO.info("METRICS: CALC INDIVIDUAL COMMITS --> Date: #{date}, Author :#{github_id}")
          metrics << {}.tap do |r|
            r["name"] = "indiv_commits"
            r["author"] = github_id
            r["date"] = date
            r["value"] = h[date] || 0
          end
        end
      end
      upsert_indiv_metrics(metrics)
    end

ユーザーのGitHubユーザーネームを取得する部分(GitHub認証)

クライアント側で個人のメトリクスを表示するにはユーザーそれぞれのGitHubユーザーネームが必要です。 GitHubとの認証は次ような流れで行うように決めました。

クライアント側からGitHub oauth アプリケーションの url に遷移する
GitHub側から code が返ってくる
クライアント側からサーバー側にパラメーターとしてGitHubから受け取った code を入れてPOSTリクエストを送る
クライアント側から受け取った code を access token と交換するためにサーバー側からGitHub API にPOST リクエストを送る
GitHub側から token を受け取る
header に受け取った token を入れてサーバー側からGitHub API に GET リクエストを行う
userのデータを受け取る
クライアント側にuserのデータを返す

GitHub認証の実装

GitHub認証しているかしていないかの状態管理はCookieで行いました。ボタンが押された際に確認を行なって、認証ページに遷移させるか、マイページに遷移させるかを判断しています。

<v-btn v-if="this.$cookies.get('github_id') == null || this.$cookies.get('github_id') == 'null'" text @click="github">
    <v-icon left dark>mdi-account</v-icon>
    My Page
</v-btn>
<v-btn v-else text>
    <nuxt-link
      class="remove-text-decoration black--text"
      :to="localePath({name: 'user-name', params: { name: this.$cookies.get('user_id') } })"
    >
        <v-icon left dark>mdi-account</v-icon>
        My Page
    </nuxt-link>
</v-btn>