ペペロミア & memoir開発ブログ

React Nativeで開発しているペペロミア & memoirの技術系記事を投稿してます

Retoolでコード健全性の可視化のダッシュボードを作成

コードのカバレッジを継続的に計測したくて作成。
元々、codecovがデファクトだったが、以前あったセキュリティ問題から使用するのは微妙だなと思っていたので、Retoolを使用してダッシュボードを作成して可視化してみた。

インスパイヤ元の記事

以下の記事を参考に作成

zenn.dev

PR

github.com

github.com

Retoolとは?

retool.com

  • ローコード開発ツールで、あらゆるデータベースを元にグラフ、チャート、検索フォーム、データ入力などのUIを作成できるサービス
  • あらゆるサービスをサポートしている(例: RDB系のサービス、Firestore、スプレットシート、GitHub、Datadog、Slack、Asana、etc...)
  • 個人の場合では無料で使用できる
  • 一部jsもサポートしていて、柔軟性も高い

構成

実装

インスパイヤ元の記事を参考にzxTypeScriptでデータ取得のスクリプトを作成。
まずは、テストのカバレッジ取得のコードが以下になる。

scripts/send-metrics/coverage.ts

import { $, cd } from 'zx';

export const aggregateCoverages = async () => {
  cd('../../');

  try {
    await $`yarn test --collectCoverage=true --coverageReporters=json-summary`;
  } catch (err) {
    console.error(err);
  }
  try {
    const result =
      await $`cat coverage/coverage-summary.json | jq -r '.total | keys[] as $k | {("coverage_" + $k):(.[$k].pct)}' | jq -s add`;

    return JSON.parse(result.stdout);
  } catch (err) {
    console.error(err);
  }
};

カバレッジレポートにtotalのカバレッジの値がjson形式で出力されるので、その情報を元にjqを使って必要な情報のみ抽出。

次は、テストの総数とテストの時間を取得のコードが以下になる。

scripts/send-metrics/jestResult.ts

import dayjs from 'dayjs';
import { $ } from 'zx';

export const getJestResult = async () => {
  let r = {
    time: 0,
    numTotalTests: 0,
  };

  try {
    await $`yarn test --json --outputFile=testResults.json`;
  } catch (err) {
    console.error(err);
  }
  try {
    const numTotalTests =
      await $`cat testResults.json | jq -r '.numTotalTests'`;

    r.numTotalTests = Number(numTotalTests);

    const testResults = await $`cat testResults.json | jq -r '.testResults'`;
    const items = JSON.parse(testResults.stdout);
    const startTime = items[0].startTime;
    const endTime = items[items.length - 1].endTime;
    const time = dayjs(endTime).diff(dayjs(startTime), 'milliseconds');

    r.time = time;
  } catch (err) {
    console.error(err);
  }

  console.log(r);

  return r;
};

Jestでjsonオプションを指定すると、テストのレポートをjson形式で出力できるので、その情報を元に必要な情報を抽出。

上記の情報をFirestoreに保存。保存の形式は以下みたいな感じ

Firestoreの情報を元にRetoolで以下のダッシュボードを作成。

■ ダッシュボードのURL
https://jurassic.retool.com/embedded/public/ca1843e7-ce2b-41ad-92c1-1ca7ff8cd944

Retoolならチャート情報の作成以外にも、日付指定の入力フォームアラート表示も出来て良い感じだった。

以下みたいに書けば、最新データのパーセンテージを表示することも可能。

Retoolでのダッシュボード作成は、かなり良かったので、今後も使っていくと思います。