はじめに

New Relicのダッシュボードに表示している情報を「New Relicユーザを持たない人へ見せることはできないか？」を調査・実装しましたのでそのまとめとなります。

今回はNerdGraphを利用して、New Relicダッシュボード情報の取得し共有可能なモニタリンググラフ（ChartURL）を生成する方法を取りました。

やりたかったこと

最近、私の会社でAWS環境の監視・モニタリングにNew Relicの利用をはじめました。現在では下記のようなさまざまなデータをNew Relicに集約しています。

サイトの稼働やサービスレベルの測定: Synthetics/SLM
EC2やECSやRDSなどのサーバのリソース状況モニタリング： New Relicエージェント/CloudWatch連携
稼働しているアプリケーションのモニタリング: APM
などなど、運用・監視に必要な情報はすべてNew Relicにデータを転送しています。

New Relic上でぽちぽちして各データを確認すれば非常に便利かつ綺麗なUIで表示してくれますが、月間稼働レポートや全体のリソース状況を一目で簡単に把握できるようにするためにダッシュボードはかかせません！！ New Relic上のダッシュボードには、頻繁に閲覧する重要なデータの集約を行っています。

このダッシュボードにある情報をNew Relicアカウントを持っていない人へ連携する際に、その画面のスクショやPDFでもいいのですが、それだと 「受け取った側は確認したい期間や対象を絞ることができない」 ので、

実際のグラフをどうにか提供できないか？
可能ならば、New Relicで表示しているダッシュボードと同じような項目、順番で提供できないか？
ダッシュボードは案件ごとにあるため多数存在している。なので、できれば自動的にダッシュボードが生成できないか？

というのがやりたかったこととなります。

元々は、Zabbix・AWS CloudWatch・Cacti等々を利用しモニタリングをしており、その際はダッシュボード提供をしていたので、今回New Relicでモニタリングを一元管理するにあたり、同じようなことができないか？ということで、調査をスタートしました。
これが実現できると、今まで通りNew Relicのユーザを持っていない社員やお客様へ、実際のモニタリングデータを提供できることが可能になります。

今回は備忘も兼ねて、APIを見つける方法などをどのように進めていったかを順を追って記載していこうと思います。

New Relicアカウントなしでも参照可能なグラフの取得

まず確認したのはNew Relicにログインせずに表示可能なグラフデータはあるのか？という点です。
それは、すぐに見つかりました。

ダッシュボードに置かれている各ウィジェットの右上の「…」から「Get chart link」というものがあるので押下します。

すると、このようなURLを取得でき、

開いてみると、、全く同じグラフが取得できるではないですか！

これをダッシュボードに設置しているグラフ分取得し、HTMLに置いてあげればダッシュボードの提供ができそうな予感がしてきました。
次に、ダッシュボードにあるウィジェットを全て取得したいので、New RelicのAPIを利用して取得する方法を確認します。

なお、このURLをHTMLのiframeにこのような形で記載すれば、HTML内にNew Relicのグラフを埋め込めることが可能です。

<iframe>https://chart-embed.service.newrelic.com....</iframe>

New Relicダッシュボードのウィジェットを取得する

まずは、New Relic APIであるNerdGraphを利用し、先ほどの「ChartURL」の取得を行っていきます。

NerdGraphとは

NerdGraph

NerdGraphは、いくつかのNew Relic APIの1つです。NerdGraphは、New Relicデータにクエリを実行して、特定の設定を実行するための推奨APIです。NerdGraphには、New RelicのさまざまなAPIおよびマイクロサービスからデータを返すための単一のAPIインタフェースがあります。NerdGraphには、時間経過とともに他の設定機能が追加される予定です。

こちらのセットアップを参考にします。

利用するには
New Relicにログイン後 NerdGraph API explorerを開きます。
API実行するために、New Relicのユーザキーも必要となります。

下記ような画面からGUI上で操作していきます。

NerdGraphで取得可能なダッシュボードデータの確認

まずは使えそうなクエリがあるかを調べてみます。xxxURLかな。と予想の元「url」と検索してみます。

結構な数ヒットしましたが、データ構造等から想像して使えそうなクエリを２つに絞りました。

ChartURL取得API 候補１： DashboardLiveUrl.url

DashboardLiveUrl.urlの方がDashboardとついてるので良さそうに見えますが、実際に実行してみると
※url の右横にある□を押すとエディタに下記が表示されます。

{
  actor {
    dashboard {
      liveUrls {
        liveUrls
      }
    }
  }
}

画面左の query を見ると、他にも出力すると良さそうな項目があるのでそちらを何個か選択し、下記のように選択して実行します。
※実行はピンクの「▷」のボタンから実行できます。

実行結果を見ると、これだと順不同でウィジェットを取得している？ようで、ウィジェットの表示順番がぐちゃぐちゃになってしまいます。タイトル等で整理することでもできそうですが、今回は別の方法を取ることにしました。

ChartURL取得API 候補２： NrdbResultContainer.embededChartUrl

こちらはNRQLを元にChartURLを生成できるクエリのようです。

例えば、下記を実行してみます。

{
  actor {
    account(id: <ACCOUNTID>) {
      nrql(query: "SELECT count(*) FROM Metric TIMESERIES") {
        embeddedChartUrl(chartType: LINE)
      }
    }
  }
}

実行すると、ChartURLが表示され

NRQLのデータグラフを、生成されたURLから閲覧することができました。

ですので、別クエリからダッシュボードの左上から順にNRQLを取得できれば無事目的を達成できることになります。
今回はこちらのクエリを採用しました。

続けて、ダッシュボードのNRQLを取得するクエリを確認していきます。

ダッシュボードNRQL取得API

同様に、ダッシュボードにあるウィジェット情報を取得できそうなクエリを「nrql」で検索して、Dashboard関連のクエリを探してみると、「DashboardLineWidgetConfiguration.nrqlQueries」が見つかりました。

ためしに □ を押下して、エディタで開いてみると、
entities / nrqlQueries がエラーになっているようです。

赤くなっている文字へカーソルを当ててみるとエラー内容を確認できました。

エラー内容の通り、ダッシュボードのguidが必要となりそうですので、
作成の元にしたい「New Relic ダッシュボードのguid」を

New Relic - ダッシュボード - Metadata

から確認します。

確認したguidを、

actor > entities > guids!: "xxxx"

の箇所へ入力します。
また、同様に、「nrqlQueries」内にある「query」にチェックを入れ、下記のようにクエリを作成します。

{
  actor {
    entities(guids: "xxxxxxxx") {
      ... on DashboardEntity {
        pages {
          widgets {
            configuration {
              line {
                nrqlQueries {
                  query
                }
              }
            }
          }
        }
      }
    }
  }
}

こちらを実行することでようやくダッシュボードにあるNRQLを取得することに成功しました！

ただ、上記APIだと、Lineで表示されているグラフのみしか取得できないため、最終的にはconfigurationからではなく、rawConfigurationを利用して、下記のようにしてダッシュボードの構成情報を取得するようにしています。

{
  actor {
    entity(guid: "xxxxxxxx") {
      ... on DashboardEntity {
        name
        permissions
        pages {
          name
          widgets {
            title
            rawConfiguration
            layout {
              width
            }
            visualization {
              id
            }
          }
        }
      }
    }
  }
}

これで、ダッシュボードの左上から順にウィジェットを複数取得することに成功しました。
また、こちらだとダッシュボードのページが複数になっていても全て取得できるようです。

これで

NRQLをもとにChartURLを生成
ダッシュボードのNRQLを左上から順番に取得

のクエリを確認できました。
あとはこれをどのようにHTMLに変換していくかとなります。

NerdGraph実行結果をHTMLに変換する

クエリを書いた状態で、キー情報の横にある
「Tools」 - 「Copy as CURL」
を押下すれば、curlを実行するのに必要な情報を取得可能です。このようなcurlが取得できます。

curl https://api.newrelic.com/graphql \
  -H 'Content-Type: application/json' \
  -H 'API-Key: NRAK-xxxxxxxxxxxx' \
  --data-binary '{"query":"{\n  actor {\n    entity(guid: \"xxxxx\") {\n      ... on DashboardEntity {\n        name\n        permissions\n        pages {\n          name\n          widgets {\n            title\n            rawConfiguration\n            layout {\n              width\n            }\n            visualization {\n              id\n            }\n          }\n        }\n      }\n    }\n  }\n}\n", "variables":""}'

さて、このNerdGraphの実行結果をどのようにHTMLに変換するかですが、、、
レスポンスはJSONのような形で、すでに左上からウィジェットを取得できそうと言うことで、
今回は単純に上から順にHTMLにはめるだけよさそうです。そのため、Pythonを使ってレスポンスをループ・処理させることにしました。

PythonでのHTML変換処理

処理概要

上記curlでクエリ実行できることがわかったので、Pythonの処理としては

1. 「ダッシュボードのウィジェット・NRQLを左上から順番に取得」するAPIを実行
2. ダッシュボードのウィジェットが取得できるので一つづつ処理を行う（ウィジェットごとにループ）
  2-a. NRQLを取得できたので、「NRQLをもとにChartURLを生成」するAPIにリクエストし、ChartURLを取得
  2-b. HTMLのiframeにChatURLを埋め込む
3. HTMLが完成！！

とループ処理させれば、New Relicのダッシュボードと同じデータ構造を作成することができます。

環境準備

今回はpythonでHTTPリクエストを実施するのに、requests を利用しています。
必要に応じて端末上で

pip install requests

を実行し、モジュールをインストールしたら、下記で実行可能になります。

python main.py

レスポンスをHTMLに変換するPythonスクリプト

レスポンスの結果を１ウィジェットづつループさせる処理は下記の通り作成しました。
※一部CSS/JSを当て込む処理等々については省略して記載しています。

ダッシュボードに置いてあるウィジェットによってはエラーとなることもあるので、その場合は適宜修正して利用ください。

また、上部にある下記パラメータは適宜置換してください。

NR_API_ENDPOINT = "https://api.newrelic.com/graphql" # New RelicAPIエンドポイント※先ほどのcurlから確認
API_KEY = "NRAK-xxxxxx" # curlに記載されていたAPIキー情報
DASHBOARD_GUID = "xxxxxxxxxx" # New RelicダッシュボードのGUID

main.py

import requests
import json

global DASHBOARD_GUID

NR_API_ENDPOINT = "https://api.newrelic.com/graphql" # New Relic APIエンドポイント※先ほどのcurlから確認
API_KEY = "NRAK-xxxxxx" # curlに記載されていたAPIキー情報
DASHBOARD_GUID = "xxxxxxxxxx" # New RelicダッシュボードのGUID

def post_request_to_newrelic_api(query):
  """
  New RelicAPIにリクエストを投げる
  """
  response = requests.post(NR_API_ENDPOINT, headers={'API-Key': f'{API_KEY}'}, json={"query": query })

  if response.status_code == 200:
    # JSON型にロード
    json_dictionary = json.loads(response.content)
    return json_dictionary

  else:
      raise Exception(f'Nerdgraph query failed {response.status_code}.')


def newrelic_api_get_chart_url(nr_query, nr_accountid, charttype):
  """
  NRQLをもとにCharURLを取得するAPIを実行するための処理
  """
  # NerdGraphにリクエスト
  # chartTypeがUPPERケースのみ許可されているのでcharttype.upper()する
  get_chart_url_query = """{ actor { account(id:""" + str(nr_accountid) + """) {nrql(query: " """+ nr_query + """ ") { embeddedChartUrl(chartType:""" + charttype.upper() + """)}}}}"""
  result = post_request_to_newrelic_api(get_chart_url_query)
  print(result)

  return result.get("data").get("actor").get("account").get("nrql", "").get("embeddedChartUrl","")


def nerdgraph_get_dashboard_entity():
  """
  ダッシュボードのウィジェット情報（NRQL/幅/配置等々）を取得
  """
  get_default_dashboard_query="""{
    actor {
      entity(guid: \"""" + DASHBOARD_GUID + """\") {
        ... on DashboardEntity {
          name
          permissions
          pages {
            name
            widgets {
              title
              rawConfiguration
              layout {
                width
              }
              visualization {
                id
              }
            }
          }
        }
      }
    }
  }"""

  return post_request_to_newrelic_api(get_default_dashboard_query)


def create_dashboard_html():
  entity = newrelic_api_get_dashboard_entity().get("data").get("actor").get("entity")

  # 最終的なHTML。変数を初期化
  html_text = ""
  # HTML headerの作成
  html_text += """
  <html lang=ja>
  <head>
    <link href="common.css" rel="stylesheet" />
    <script type="text/javascript" src="common.js"></script>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
  </head>

  <body>
    <hr />
  """

  # ダッシュボードの情報からNRQLを取得
  for page in entity.get("pages"):
    html_text += f'<h2> {page.get("name")} </h2>'

    div_flag = False
    # 左上から順番にウィジェット、テキストを取得
    for widget in page.get("widgets"):
      title = widget.get("title")
      text = widget.get("rawConfiguration").get("text")

      # Label(Text area)の処理
      if widget.get("visualization").get("id") == "viz.markdown":
        # Incidentsは不要
        if not text.startswith("# Incidents"):
          # ２回目以降はdivを閉じる
          if div_flag:
            html_text += '</div><br />'

          html_text += f'<hr />'
          html_text += f'<h3 id="{text}"> {text} </h3>'
          # 2回目以降はdivを閉じるためのフラグ
          div_flag = True

      # ウィジェットの処理
      if title != "":

        charttype = widget.get("visualization").get("id", "")

        for nrqlQueries in widget.get("rawConfiguration").get("nrqlQueries"):
            # NRQLに改行があるとエラーになるので排除する
            nrquery = nrqlQueries.get("query").replace("\n","")
            
            # NRQLのアカウントを確認
            if nrqlQueries.get("accountId") is not None:
                accountid = nrqlQueries.get("accountId")
            else:
                accountid = nrqlQueries.get("accountIds")[0]

            # ChartTypeは「viz.table」等なので「viz.」を削ってから渡す
            chart_url = nerdgraph_get_chart_url(nrquery, accountid, charttype.replace("viz.",""))
            
            html_text += f'<div>'
            html_text += f'<p>{title}</p>'
            html_text += f'<iframe scrolling="yes" frameborder="no" src="{chart_url}">'
            html_text += f'<!--{title}--></iframe></div>'
    html_text += "</div><br />\n"
  html_text += "</body></html>"

  print("HTML Output: \n" + html_text)


def main():
  create_dashboard_html()
  return "Success"


if __name__ == "__main__":
    main()

こちらを利用することで、APIからのJSONレスポンスをHTMLに変換可能です。
あとは、必要に応じてCSS/JS用のclass等の属性をHTMLに付与すれば見栄えも良くすることが可能です。

ダッシュボードを公開するためのインフラ構成

最終的にはダッシュボードを表示するためにHTMLと、見栄えをきれいにするためにCSS/JSを用意しました。
また、普段AWSを利用しているのでその中でも、簡単にWebページをホストできるAmplifyを選択することにしました。

AWS Amplifyとは？

AWS Amplifyは、AWSが提供する、モバイルアプリケーションとウェブアプリケーションの開発を容易にするための開発プラットフォームです。フロントエンド開発とクラウドサービスの統合をシームレスに行うことができます。

リポジトリ（CodeCommit）から直接アプリケーションを、ビルド ~ デプロイまでしてくれるCI/CDパイプラインをAWSマネージドで管理してくれるAWSサービスで、簡単なWebページの公開であれば非常に簡単に利用することができます。

インフラ構成

HTML / CSS / JSを用意したら、あとはCodeCommitにそれらのソースコードをPUSHします。
ダッシュボードページの配信はAmplifyを用いてデプロイされますが、内部的にはCloudFront+S3構成となります。

また、先ほどPythonスクリプトはLambdaから実行できるようにしたので最終的にはこのような構成となりました。

最終的なダッシュボード

今回、実際に利用しているHTML/CSSなどは公開しておりませんが、最終的にはこのようなページを作成することができました。こちらのブログで提供可能なダッシュボード・データがなく、紹介がスクショになってしまい申し訳ないです。。。

New Relic上のダッシュボード設定元にChartURLをHTML上に並べたことで、自動でこのような画面を生成することが可能となりました。これで、New Relicアカウントにログインすることなく閲覧することが可能となりました。

今回できなかったこと・課題

ウィジェットオプションを使う

New Relicのグラフ表示オプションにはy軸の範囲が大きすぎてデータが見づらい際にデータを見やすくするオプションや、データの表示形式をテーブルや円グラフなど種類を変えるなどのオプションが存在しています。

例えば、このように「Fit it to data」を選択すると、グラフのy軸を値にフィットさせてくれるオプションです。

こちらのようなグラフオプションは、各グラフの右上にある「…」 - 「edit」からグラフの見栄えの設定が可能です。

今回のAPIからNRQLを使ってChartURLを生成する方法だと、このようなオプションの指定ができないため、データによっては見づらいグラフもありました。
現状、回避策はないようなので、今後のアップデートに期待となります。

一時URLの発行

発行したChartURLは一時的なものではなく発行すると、永久的にアクセス可能なURLとなっています。
そのため、万が一URLが漏洩した際は下記から取り消しをする必要がありそうでした。参考までに。

NerdGraphチュートリアル

さいごに

New Relic API - NerdGraphを使って、New Relicアカウントなしで閲覧可能なダッシュボードを生成してみました。
課題は残ったものの、NerdGraphの勉強にもなりましたし、なにより当初の目的を達成することができました！！

同じ悩みを持った誰かの参考になれば幸いです。
また、New Relicの仕様変更でこのような機能を提供していただけないか？については、引き続きウォッチしていきます。

今回作成したAmplifyの作成方法詳細については、また別の機会にブログにまとめようと思います。