前回の【基本設計編】では、ダッシュボードを作る前の「なぜ作るのか」「誰のために作るのか」というダッシュボードの骨子を考えました。今回はその骨子を実際のダッシュボードにするためにNew Relicでできることをみていきましょう。
この記事を読み終える頃には、皆さんのユースケースに沿ったダッシュボードができているはずです。早速、始めてみましょう！
データを集めてチャートの作成
前回の基本設計で皆さんのユースケースで使うダッシュボードで、どのような情報が欲しいかがわかったと思います。まずダッシュボードの最初のステップとして、必要な情報を集めましょう。
-
まずは簡単な方法から：
まずは、APMやBrowserなどの画面で普段からあなたが見ている、使い慣れたチャートを自分のダッシュボードに持ってきましょう。自分が注視したいチャートをダッシュボードに集めておきたい時や、ダッシュボードの利用者がユーザータイプの制限からAPMやBrowserを利用できない時にこの方法が有効でしょう。
デフォルトのチャートの右上に「...」メニューがあり、ここから「Add to dashboard」を選択することで可能です。
-
Data explorerでデータを検索する：
コピーだけでは情報を揃えることが難しいこともあると思います。こういう場合にはData Explorerを使って探すことができるかもしれません。
Data ExplorerはGUIからNRQLを生成し、チャートを作成することができる機能です。詳細は以下のブログにまとめられているので是非読んでみてください。
-
NRQLでチャートを作成する：
さらに柔軟にデータを分析したい場合はNRQL(New Relic Query Language)を使うことができます。SQLライクに記述し、NRDBから自由にデータを取り出し加工することができます。
NRQLについては少しハードル高いと感じるかもしれませんが、以下のブログにあるようにLessonアプリもあるので、チャレンジしてみましょう。
-
データをビジュアライズ:
必要なデータがみつかったら、分かりやすいようにビジュアライズしましょう。New Relicでは様々なチャートタイプでデータを表示することができます。必要な情報が最も直感的に表現されたチャートタイプを選択しましょう。
レイアウトを編集する（配置とサイズ）
集めた情報をただ並べるだけでは、どこから見ていいか分かりません。ダッシュボードで表示されているチャートに視覚的な優先順位を与え、見る人を自然に誘導できるようにしましょう。やり方は簡単。重要な情報を一番良い場所（ダッシュボード上部）で大きく表示しましょう。
大きさや配置は皆さんのニーズによりけりですが、New Relicではこれをドラッグ＆ドロップなどで自由にカスタマイズできます。基本的な機能ではありますが、「見やすさ」のベースになるので大事なポイントです。
【スクショポイント】
マウスカーソルがチャートの右下角を掴んで、大きさを変更している様子の
Markdown機能で説明を追加
チャートだけのダッシュボードだと、数ヶ月後には作った本人でさえ「このグラフ、何のために作ったんだっけ？」となることもあるかもしれません。それぞれのチャートには見てほしいポイントがあり、さらにその先のアクションも想定されているはずです。それらを書き起こし、チャートと一緒にダッシュボードで表示しておくことができます。こうしておけば、初めてダッシュボードを見る人でも何をみて、どうすべきかを理解できますし、作った本人が分からなくなることもありません。
チャートの確認ポイントの他には、そこから派生する運用手順のリンクも追加できます。いずれにせよ、ダッシュボードにチャート以外の情報も集約し、運用者がコンテキストを切り替える認知負荷をなるべく減らしましょう。
「Add widget」メニューから「Add text, images, or links」を選択し、MarkdownやMermaid記法で説明文やフロー図を記述します。
Markdownによるテキスト情報の他には、Mermaid記法で図を表示することもできます。運用フローやシステム構成図を追加することで分かりやすさが向上するか試してみてください。New RelicダッシュボードでのMermaid記法については以下のブログでもまとめられています。
閾値を設定して視認性を向上
チャートを見ただけでその意味するところが理解できればいいですが、難しいケースも多いのではないでしょうか。先ほどお伝えしたMarkdownでテキスト情報を追加すれば幾分マシかもしれませんが、それでもチャートをまじまじと眺める時間が必要です。できればグラフを見るだけでわかるようにしたい！
そこでチャートに閾値を設定し、これを基準に問題があるのかどうかをすぐに分かるようにしてみましょう。
色を変えたいチャートの「...」メニューから「Edit」を選択し、設定パネル内の「Thresholds」項目で、Warning（警告/黄色）やCritical（危険/赤）の値を設定します。
ページ機能で情報を整理
ダッシュボードを一つの画面でシンプルにまとめることができれば素晴らしいでしょう。でもシステムや運用が複雑になればなるほど情報量は多くなってしまいます。こうなると、情報を一枚絵でまとめるのは難しくなります。こうなった時、New Relicではページ機能を使って情報を整理することができます。この機能はダッシュボードでページごとに情報(チャートなど)をまとめ、タブで切り替えて表示することができます。例えば「全体概要」ページで俯瞰してシステム状況を確認し、その後他のページで詳細情報を確認する、などの使い方ができるでしょう。情報確認の動線がある場合は、そういったこともMarkdownで書いておくといいかもしれません。
ダッシュボードを「Edit」した後、「+ Add a page」をクリックして新しいページを作成します。
テンプレート変数でダッシュボードをダイナミックに表示
監視対象が多くなってくると、似たようなチャートを何個も準備する必要が出てくるかもしれません。チャートを見つめながら「サービスの名前が違うだけなのに…」なんてことを思うようなことがあれば、テンプレート変数を使えるかもしれません。これは変数を定義して、これに応じたチャートを動的に表示させるものです。
詳しくは以下のブログで解説されているので読んでみてください。
まとめ
今回は、New Relicダッシュボードを実際に作成するための、具体的な方法をご紹介しました。
まずはチャートの作成とレイアウト調整でダッシュボードの「形」を作り、次にMarkdownや閾値の設定で、そのダッシュボードに「意味」と「視認性」を与えました。さらに、ページ機能やテンプレート変数といった応用的なテクニックを使い、複雑な情報を「整理」し、ダッシュボードを「拡張」する方法も見てきました。
これらの機能は、それぞれが独立した強力なツールです。皆さんのユースケースに合わせて必要なものから試してみて、日々の運用に役立つ、価値あるダッシュボードを育てていってください。
その他
New Relicでは、新しい機能やその活用方法について、QiitaやXで発信しています！
無料でアカウント作成も可能なのでぜひお試しください！
New Relic株式会社のQiita Organizationでは、
新機能を含む活用方法を公開していますので、ぜひフォローをお願いします。
無料のアカウントで試してみよう！
New Relic フリープランで始めるオブザーバビリティ！
