Diary of a Perpetual Student

Perpetual Student: A person who remains at university far beyond the normal period

Mackerelのカスタムダッシュボードにグラフアノテーションを表示する機能は如何にして生まれたか

arthur-1 Mackerel Advent Calendar 2023ラソン25日目の記事です。いよいよラストのエントリとなりましたが、特別なことは書かずにこれまでと同じ調子で書きます。

カスタムダッシュボードにグラフアノテーションを表示できるようになりました!

blog.arthur1.dev

上記エントリで頭だしはしていたのですが、カスタムダッシュボードにグラフアノテーションを表示する機能がリリースされました。(Mackerel公式の告知は追ってされると思います。フライングしてすみません。)

今回はMackerelの仮説検証アジャイル開発のMVP(Minimum Viable Product)として実装したこの機能について、どのような思考を経て生まれたのかをご紹介します。

いくつかの機能パターン

Mackerelにはグラフアノテーションという機能があるのですが、これはサービス・ロールグラフの全画面表示やサービス詳細ページでのみ表示・編集ができるものの、カスタムダッシュボードでは表示すらできない状態でした。素早く価値を届けてユーザーの反応を伺うために、編集のことを考えつつもまずは表示だけできる状態でリリースすることを決めました。

表示だけとはいえ、いくつかの機能パターンが考えられます。

  • 全てのグラフウィジェットに対応させるorサービス・ロールグラフだけ対応させる
  • カスタムダッシュボード全体に設定を持つorウィジェットごと設定を持つ
  • 1つのサービス・ロールを指定できるor複数のサービス・ロールを指定できる
  • 設定を永続化するor設定を永続化しない

今回MVPとして以下のような仕様でリリースしました

  • 全てのグラフウィジェットに対応させるorサービス・ロールグラフだけ対応させる
  • カスタムダッシュボード全体に設定を持つorウィジェットごと設定を持つ
  • 1つのサービス・ロールを指定できるor複数のサービス・ロールを指定できる
  • 設定を永続化するor設定を永続化しない

全てのグラフウィジェットに対応する理由

MVPとして、サービスやロールグラフのグラフウィジェットにのみ、それぞれ対応するアノテーションを表示すれば良いという考えもありましたが、棄却しました。これは単純に、ホストグラフや式グラフ・としてラベル対応メトリックのPromQLグラフでグラフアノテーションを表示できないのは不便だと考えたからです。未来のMackerelを想像したときに、新機能であるPromQLグラフのことは見据えておきたいです。

サービス・ロールグラフ以外はサービス・ロールに紐づけるための情報がないため、ユーザーがどのサービス・ロールのグラフアノテーションを表示するかを設定する必要があります。サービス・ロールグラフ以外のウィジェットだけそのように外から指定できるようにしても良いのですが、機能が複雑になると感じました。そこで、全てのグラフウィジェットの種類で統一で、グラフアノテーションを表示したいならサービスやロールを指定する必要があるというインタフェースにしました。

1つだけしかサービス・ロールだけを指定できない理由

将来的にカスタムダッシュボードの画面上からもグラフアノテーションを追加したり編集できたりするようにしたいです。ところが、Mackerelの既存のUIではサービスやロールが1つに定まっていることが前提のデザインになっています。

サービスやロールは選択できず、サービスとロールどちらに紐づけるかのトグルスイッチのみ

新しいUIを作らなければ追加や編集の機能提供ができず時間を要すること、また、仮にたくさんのサービスやロールに紐づくグラフアノテーションを表示したとしても、色分けなどで区別できるようにしたいなど表示においてもデザイン上の懸念があることから、単一のサービス・ロールのみを指定してグラフアノテーションを表示する機能としました。

カスタムダッシュボード全体に設定を持つ理由&設定を永続化しない理由

どのサービス・ロールのグラフアノテーションを表示するかという設定をグラフウィジェットごと個別に持つ方法で提供したいと最初は考えていました。なぜなら、同じダッシュボード上に複数のサービスやロールのグラフを表示するユースケースは多く存在するからです。その場合、ウィジェットの定義に含めることになるので自然と設定が永続化されます。

しかし、1つだけしかサービス・ロールだけを指定できない仕様との相性が悪いと考えました。サービス同士に依存関係がある場合があるため、複数のサービス・ロールを指定したり、あるいは1つしか指定できなくても切り替えたりできるようにしたいです。しかし、前述した通り複数のサービス・ロールを指定しない機能とすることに決めたので、表示する対象のサービス・ロールをスムーズに切り替えられるようにする必要があります。

ウィジェットごと設定を持ってしまうと切り替えが困難になるため、ダッシュボード全体に設定を持ち、これをダッシュボードのヘッダーから簡単に切り替えられるようにしました。

また、デフォルトで特定のサービス・ロールのグラフアノテーションが表示されている状態でダッシュボードを開くことができるよう、この状態をURLのクエリパラメータに持つようにしました。

まとめ

Mackerelの仮説検証アジャイル開発は素早くユーザーに価値ある機能を提供することを目指しています。今回の機能は「素早く」と「価値ある」の両立ができるように、さらにOpenTelemetry(ラベル対応メトリック)が中心となる世界でも通用する機能となるように熟考して作られました。

今後はユーザーの皆さまの反応を見ながらさらに1ステップ進めていくことになります。このUXの延長で編集する機能を追加するかもしれないし、やっぱりウィジェットの設定としてどのサービス・ロールのアノテーションを表示するかを持つ機能にシフトチェンジするかもしれません。また、サービス・ロールを選択するときに、そこにすでにグラフアノテーションが投稿されているかが分かると嬉しいというアイデアもあります。

ぜひMackerelのイベントやSNSなどで本機能について意見をお寄せください!