ダッシュボードにカスタム視覚化を追加する

New Relic の GraphQL API であるNerdGraphを使用して、プログラムによってカスタム視覚化を新規または既存のダッシュボードに追加します。

あなたが始める前に

まだ行っていない場合:

New Relicアカウントにサインアップ
Node.jsをインストールする
CLI をインストールして構成するには、 nr1クイックスタートの最初の 4 つの手順を完了してください。

Nerdpackを作成して公開する

視覚化された Nerdpack を作成します。 NerdGraph を使用して、この視覚化をダッシュボードに追加します。

参考文献

このガイドは、視覚化の作成と公開ではなく、視覚化の使用に関するものであるため、これらのトピックについては簡単に説明します。視覚化に詳しくない場合、または視覚化 Nerdpacks の取り扱いについて詳細な説明が必要な場合は、次のリソースを参照してください。

ダッシュボードに追加したい視覚化がすでにある場合は、このセクションをスキップできます。ただし、このガイドで使用されているmy-awesome-visualizationではなく、独自の視覚化を参照するために、必要なコード調整を行うことを忘れないでください。

nr1 CLI を更新します:

bash

$nr1 update

これで最新バージョンが手に入りました。

my-awesome-nerdpackという Nerdpack にmy-awesome-visualizationという視覚化を作成します。

bash

$nr1 create -t visualization -n my-awesome-visualization
✔ You're trying to create a visualization outside of a Nerdpack.  We'll create a Nerdpack for you—what do you want to name it? … my-awesome-nerdpack
✔ nerdpack created successfully!
nerdpack my-awesome-nerdpack is available at "./my-awesome-nerdpack"
✔ visualization created successfully!
visualization my-awesome-visualization is available at "./my-awesome-nerdpack/visualizations/my-awesome-visualization"

nr1 createを使用して視覚化を構築すると、デフォルトの視覚化が取得されます。このコース全体でこのデフォルトの視覚化を使用します。

新しい Nerdpack に移動します。

bash

$cd my-awesome-nerdpack

ここから、 nr1 nerdpackコマンドを実行できます。

Nerdpack を公開および購読する:

bash

$nr1 nerdpack:publish
$nr1 nerdpack:subscribe

これで、アカウントが視覚化にサブスクライブされたので、JSON を使用してアプリの設定を記述し、NerdGraph を使用してダッシュボードに追加できます。

JSONで視覚化オプションを記述する

新しいダッシュボードに視覚化を追加する場合でも、既存のダッシュボードに追加する場合でも、設定を NerdGraph に送信する必要があります。

カスタム視覚化 JSON オブジェクトはダッシュボードウィジェットを表し、次のフィールドで構成されます。

フィールド	タイプ	説明
`title`	弦	ダッシュボードウィジェットのタイトル
`visualization`	JSON	視覚化のメタデータ
`visualization.id`	弦	視覚化のID
`rawConfiguration`	JSON	ウィジェットの完全な設定

ヒント

このガイドの手順に従ってダッシュボードに他のタイプのウィジェットを追加することもできますが、ここで説明するフィールドはカスタム視覚化ウィジェットに固有のものです。他のウィジェットタイプの場合は、異なるデータを提供する必要があります。

NerdGraph エクスプローラーを使用して、API を独自に探索します。

カスタム視覚化を記述するために必要なフィールドに基づいた JSON テンプレートから始めます。

{
  "title": "",
  "visualization": {
    "id": ""
  },
  "rawConfiguration": {}
}

視覚化ウィジェットにタイトルを付けます。

{
  "title": "My Awesome Visualization",
  "visualization": {
    "id": ""
  },
  "rawConfiguration": {}
}

my-awesome-nerdpack/nr1.jsonから Nerdpack ID を検索します:

{
  "schemaType": "NERDPACK",
  "id": "ab123c45-678d-9012-efg3-45hi6jkl7890",
  "displayName": "MyAwesomeNerdpack",
  "description": "Nerdpack my-awesome-nerdpack"
}

my-awesome-nerdpack/nr1.json

次に、 my-awesome-nerdpack/visualizations/my-awesome-visualization/nr1.jsonから視覚化 ID を検索します。

{
  "schemaType": "VISUALIZATION",
  "id": "my-awesome-visualization",
  "displayName": "MyAwesomeVisualization",
  "description": "",
  "configuration": [
    {
      "name": "nrqlQueries",
      "title": "NRQL Queries",
      "type": "collection",
      "items": [
        {
          "name": "accountId",
          "title": "Account ID",
          "description": "Account ID to be associated with the query",
          "type": "account-id"
        },
        {
          "name": "query",
          "title": "Query",
          "description": "NRQL query for visualization",
          "type": "nrql"
        }
      ]
    },
    {
      "name": "fill",
      "title": "Fill color",
      "description": "A fill color to override the default fill color",
      "type": "string"
    },
    {
      "name": "stroke",
      "title": "Stroke color",
      "description": "A stroke color to override the default stroke color",
      "type": "string"
    }
  ]
}

my-awesome-nerdpack/visualizations/my-awesome-visualization/nr1.json

視覚化ウィジェットのvisualization.idを形式{NERDPACK-ID}.{VISUALIZATION-ID}に設定します。

{
  "title": "My Awesome Visualization",
  "visualization": {
    "id": "ab123c45-678d-9012-efg3-45hi6jkl7890.my-awesome-visualization"
  },
  "rawConfiguration": {}
}

my-awesome-nerdpack/visualizations/my-awesome-visualization/nr1.jsonで設定オプションを確認します。

{
  "schemaType": "VISUALIZATION",
  "id": "my-awesome-visualization",
  "displayName": "MyAwesomeVisualization",
  "description": "",
  "configuration": [
    {
      "name": "nrqlQueries",
      "title": "NRQL Queries",
      "type": "collection",
      "items": [
        {
          "name": "accountId",
          "title": "Account ID",
          "description": "Account ID to be associated with the query",
          "type": "account-id"
        },
        {
          "name": "query",
          "title": "Query",
          "description": "NRQL query for visualization",
          "type": "nrql"
        }
      ]
    },
    {
      "name": "fill",
      "title": "Fill color",
      "description": "A fill color to override the default fill color",
      "type": "string"
    },
    {
      "name": "stroke",
      "title": "Stroke color",
      "description": "A stroke color to override the default stroke color",
      "type": "string"
    }
  ]
}

my-awesome-nerdpack/visualizations/my-awesome-visualization/nr1.json

configurationのnameフィールドは、視覚化ウィジェットを記述するために重要です。

視覚化のnr1.jsonファイル内のすべての設定オブジェクトのnameフィールドを使用して、ウィジェットのrawConfigurationを構築します。

{
  "title": "My Awesome Visualization",
  "visualization": {
    "id": "ab123c45-678d-9012-efg3-45hi6jkl7890.my-awesome-visualization"
  },
  "rawConfiguration": {
    "nrqlQueries": [
      {
        "accountId": 1234567,
        "query": "FROM NrUsage SELECT sum(usage) FACET metric SINCE 1 week ago"
      }
    ],
    "fill": "pink",
    "stroke": "green"
  }
}

ここでは、 nr1.jsonの各設定オプションに値を指定してrawConfigurationを作成しました。 nrqlQueriesは型がcollectionなので配列であることに注意してください。その他の値は文字列です。これらの設定オプションの詳細については、「カスタム視覚化を構成する」を参照してください。

視覚化ウィジェットを JSON で記述したので、構成した視覚化をダッシュボードに追加できます。次のセクションでは、視覚化を使用して新しいダッシュボードを作成する方法を学習します。すでに準備ができている場合は、先に進んで、既存のダッシュボードに視覚化を追加します。

視覚化を使用して新しいダッシュボードを作成する

視覚化ウィジェット用の新しいダッシュボードを作成する場合は、NerdGraph のdashboardCreate()ミューテーションを使用します。

NerdGraph dashboardCreate()ミューテーションは次のフィールドを取ります:

フィールド	タイプ	説明
`accountId`	整数	ダッシュボードを作成するアカウントのID
`dashboard`	JSON	作成するダッシュボードの詳細
`dashboard.name`	弦	ダッシュボードの名前
`dashboard.permissions`	列挙型: `PRIVATE` 、 `PUBLIC_READ_ONLY` 、 `PUBLIC_READ_WRITE`	ダッシュボードのアクセス制御
`dashboard.pages`	配列: JSON	ダッシュボードのページの詳細
`dashboard.pages[].name`	弦	ダッシュボードページの名前
`dashboard.pages[].widgets`	配列: JSON	ダッシュボードページに追加するウィジェット

ヒント

詳細やウィジェットなどを追加するために、 dashboardCreate()にさらにフィールドを渡すこともできます。 NerdGraph エクスプローラーを使用して、API を独自に探索してください。

このガイドでは、1 つのウィジェットを含む 1 つのページを持つダッシュボードを作成します。前のセクションで説明した視覚化ウィジェット。

dashboardCreate()でダッシュボードを記述するために必要なフィールドに基づいて GraphQL ミューテーションテンプレートを構築します。

mutation {
  dashboardCreate(
    accountId: 0
    dashboard: {
      name: ""
      pages: [{ name: "", widgets: [] }]
      permissions: PRIVATE
    }
  )
}

ここでは、プライベートダッシュボードのテンプレートを定義しました。さて、詳細を記入しましょう。

アカウント ID を検索し、 accountIdに入力します:

mutation {
  dashboardCreate(
    accountId: 1234567
    dashboard: {
      name: ""
      pages: [{ name: "", widgets: [] }]
      permissions: PRIVATE
    }
  )
}

ダッシュボードとそのページの名前を選択します。

mutation {
  dashboardCreate(
    accountId: 1234567
    dashboard: {
      name: "My Awesome Dashboard"
      pages: [{ name: "One Page to Rule Them All", widgets: [] }]
      permissions: PRIVATE
    }
  )
}

widgetsに、前のセクションで作成したウィジェットオブジェクトを配置します。

mutation {
  dashboardCreate(
    accountId: 1234567
    dashboard: {
      name: "My Awesome Dashboard"
      pages: [
        {
          name: "One Page to Rule Them All"
          widgets: [
            {
              title: "My Awesome Visualization"
              visualization: {
                id: "ab123c45-678d-9012-efg3-45hi6jkl7890.my-awesome-visualization"
              }
              rawConfiguration: {
                nrqlQueries: [
                  {
                    accountId: 1234567
                    query: "FROM NrUsage SELECT sum(usage) FACET metric SINCE 1 week ago"
                  }
                ]
                fill: "pink"
                stroke: "green"
              }
            }
          ]
        }
      ]
      permissions: PRIVATE
    }
  )
}

最後に、ミューテーションにリターンフィールドを追加します。

mutation {
  dashboardCreate(
    accountId: 1234567
    dashboard: {
      name: "My Awesome Dashboard"
      pages: [
        {
          name: "One Page to Rule Them All"
          widgets: [
            {
              title: "My Awesome Visualization"
              visualization: {
                id: "ab123c45-678d-9012-efg3-45hi6jkl7890.my-awesome-visualization"
              }
              rawConfiguration: {
                nrqlQueries: [
                  {
                    accountId: 1234567
                    query: "FROM NrUsage SELECT sum(usage) FACET metric SINCE 1 week ago"
                  }
                ]
                fill: "pink"
                stroke: "green"
              }
            }
          ]
        }
      ]
      permissions: PRIVATE
    }
  ) {
    entityResult {
      guid
    }
  }
}

重要

ミューテーションクエリ内の ID を、アカウント、Nerdpack、視覚化に一致する ID に置き換えてください。

これで、カスタム視覚化用のウィジェットを含む単一ページのダッシュボードを作成するために NerdGraph に送信するミューテーションの準備が整いました。その結果、新しいダッシュボードのエンティティ GUID が表示されます。

次のセクションでは、既存のダッシュボードに視覚化を追加する方法を学習します。それがあなたの目標に関係ない場合は、先に進んでNerdGraph にリクエストを送信してください。

既存のダッシュボードに視覚化を追加する

既存のダッシュボードに視覚化ウィジェットを追加するには、NerdGraph のdashboardAddWidgetsToPage()ミューテーションを使用します。

NerdGraph dashboardAddWidgetsToPage()ミューテーションは次のフィールドを取ります:

フィールド	タイプ	説明
`guid`	弦	ウィジェットを追加するダッシュボードのエンティティ GUID
`widgets`	配列: JSON	ダッシュボードページに追加するウィジェット

ヒント

詳細やウィジェットなどを追加するために、 dashboardAddWidgetsToPage()にさらにフィールドを渡すこともできます。 NerdGraph エクスプローラーを使用して、API を独自に探索してください。

dashboardAddWidgetsToPage()でダッシュボードを記述するために必要なフィールドに基づいて GraphQL ミューテーションテンプレートを構築します。

mutation {
  dashboardAddWidgetsToPage(guid: "", widgets: []) {
    errors {
      description
    }
  }
}

ダッシュボードの GUID を検索し、それをguidに入力します:

mutation {
  dashboardAddWidgetsToPage(
    guid: "AbCdEFghIJkLMNo1PQRSTUVWXYZAbCD2Ef34GHI"
    widgets: []
  ) {
    errors {
      description
    }
  }
}

うに、 JSON を使用して視覚化オプションを記述するで作成したうオブジェクトを配置します。

mutation {
  dashboardAddWidgetsToPage(
    guid: "AbCdEFghIJkLMNo1PQRSTUVWXYZAbCD2Ef34GHI"
    widgets: [
      {
        visualization: {
          id: "ab123c45-678d-9012-efg3-45hi6jkl7890.my-awesome-visualization"
        }
        rawConfiguration: {
          nrqlQueries: [
            {
              accountId: 1234567
              query: "FROM NrUsage SELECT sum(usage) FACET metric SINCE 1 week ago"
            }
          ]
          fill: "pink"
          stroke: "green"
        }
      }
    ]
  )
}

最後に、ミューテーションにリターンフィールドを追加します。

mutation {
  dashboardAddWidgetsToPage(
    guid: "AbCdEFghIJkLMNo1PQRSTUVWXYZAbCD2Ef34GHI"
    widgets: [
      {
        visualization: {
          id: "ab123c45-678d-9012-efg3-45hi6jkl7890.my-awesome-visualization"
        }
        rawConfiguration: {
          nrqlQueries: [
            {
              accountId: 1234567
              query: "FROM NrUsage SELECT sum(usage) FACET metric SINCE 1 week ago"
            }
          ]
          fill: "pink"
          stroke: "green"
        }
      }
    ]
  ) {
    errors {
      description
    }
  }
}

これで、NerdGraph に送信して、既存のダッシュボードにカスタム視覚化を追加するミューテーションが準備できました。その結果、発生したエラーの説明が表示され、問題のデバッグに役立ちます。

最後に、実際に NerdGraph にリクエストを送信する必要があります。

NerdGraphにリクエストを送信

前のセクションで作成したペイロードを使用して、ニーズに最適なミューテーションの HTTP リクエストを NerdGraph に送信します。 HTTP リクエストを送信するために使用できるツールは多数ありますが、このガイドでは、次の 3 つの特定のツールを使用して NerdGraph と通信する方法を学習します。

別のものを使用する場合は、これらの方法をお気に入りの開発ツールに適応させることができます。

NerdGraph APIエクスプローラ

NerdGraphAPI エクスプローラーは、NerdGraph を探索できる GraphiQLAPI の実装です。

NerdGraph API エクスプローラーに移動します。

新しい API キーを選択または作成します。

センターコンソールに、ミューテーションクエリを貼り付けます。

重要

ミューテーションクエリ内の ID を、アカウント、Nerdpack、視覚化に一致する ID に置き換えてください。

Execute Query [クエリの実行]を押して、右側のペインに結果を表示します。

新しいダッシュボードが正常に作成された場合、応答にはエンティティ GUID が含まれます。エレメント GUID がない場合は、クエリのデバッグに役立つエラーメッセージが応答に含まれます。

既存のダッシュボードに視覚化を追加した場合、応答にエラーは表示されません。エラーメッセージが表示された場合は、それを使用してクエリをデバッグしてください。

探検する

NerdGraph API エクスプローラーを使用すると、すべてを手動で入力しなくても、他のフィールドを表示したり、クエリを変更したりできます。左側のペインを使用して NerdGraph を探索します。

cURL

cURL は、HTTP リクエストを行うためのコマンドラインユーティリティです。

New Relicユーザーキーを選択または作成します。このキーは次の手順で使用するため、コピーしてください。

cURLを使用して NerdGraph にリクエストを送信します。

bash

$curl https://api.newrelic.com/graphql \
>  -H 'Content-Type: application/json' \
>  -H 'API-Key: <YOUR-USER-KEY>' \
>  --data-binary '{"query": "mutation {dashboardCreate(dashboard: {name: \"My Awesome Dashboard\", pages: [{name: \"One Page to Rule Them All\", widgets: [{title: \"My Awesome Visualization\", visualization: {id: \"ab123c45-678d-9012-efg3-45hi6jkl7890.my-awesome-visualization\"}, rawConfiguration: {nrqlQueries: [{accountId: 3014918, query: \"FROM NrUsage SELECT sum(usage) FACET metric SINCE 1 week ago\"}], fill: \"pink\", stroke: \"green\"}}]}], permissions: PRIVATE}, accountId: <YOUR-ACCOUNT-ID>) { entityResult { guid }}}", "variables": ""}'

重要

ミューテーションクエリ内の ID を、アカウント、Nerdpack、視覚化に一致する ID に置き換えてください。

ここでは、2 つのヘッダーContent-TypeとAPI-Keyと、前のセクションで作成したミューテーションクエリの 1 つを含むバイナリメッセージ本文を持つリクエストを NerdGraph に送信します。

Postmanのような UI ベースのクライアントを使用する場合は、このメソッドをクライアントがサポートする形式に適応させることができます。

New Relic CLI

newrelicは、New Relic データを読み書きするためのコマンドラインインターフェースです。

まだインストールしていない場合は、「New Relic CLI を使い始める」ガイドの手順に従ってnewrelicインストールしてください。

これを実行すると、 newrelicがインストールされ、NerdGraph リクエストを行うように構成されます。

newrelic nerdgraph queryを使用して NerdGraph リクエストを作成します:

bash

$newrelic nerdgraph query 'mutation {
$    dashboardCreate(
$        accountId: 1234567,
$        dashboard: {
$            name: "My Awesome Dashboard",
$            pages: [
$                {
$                    name: "One Page to Rule Them All",
$                    widgets: [
$                        {
$                            title: "My Awesome Visualization",
$                            visualization: {
$                                id: "de0b4768-1504-4818-a898-da7cd14f0bfb.my-awesome-visualization"
$                            },
$                            rawConfiguration: {
$                                nrqlQueries: [
$                                    {
$                                        accountId: <YOUR-ACCOUNT-ID>,
$                                        query: "FROM NrUsage SELECT sum(usage) FACET metric SINCE 1 week ago"
$                                    }
$                                ],
$                                fill: "pink",
$                                stroke: "green"
$                            }
$                        }
$                    ]
$                },
$            ],
$            permissions: PRIVATE
$        }
$    )   {
$        entityResult {
$            guid
$        }
$    }
$}'

重要

ミューテーションクエリ内の ID を、アカウント、Nerdpack、視覚化に一致する ID に置き換えてください。

新しいダッシュボードを表示する

NerdGraph を使用してダッシュボードを構築したので、次は作業内容を確認します。

one.newrelic.com > All capabilities > Dashboardsに移動してダッシュボードを選択します。
作成したダッシュボードには、ミューテーションで渡したname 「My Awesome ダッシュボード」が含まれます。また、 NRQLデータクエリから塗りつぶしや線の色まで、rawConfiguration で送信した設定も含まれます。

概要

おめでとう！このガイドでは、New Relic の GraphQL API である NerdGraph を使用して、ダッシュボードにカスタム視覚化を追加しました。

この機械翻訳は、参考として提供されています。

ダッシュボードにカスタム視覚化を追加する

あなたが始める前に.css-21sua1{background:none;border:none;width:0;padding:0;}

Nerdpackを作成して公開する

参考文献

JSONで視覚化オプションを記述する

ヒント

視覚化を使用して新しいダッシュボードを作成する

ヒント

重要

既存のダッシュボードに視覚化を追加する

ヒント

NerdGraphにリクエストを送信

NerdGraph APIエクスプローラ

重要

探検する

cURL

重要

New Relic CLI

重要

新しいダッシュボードを表示する

概要

あなたが始める前に