대시보드에 사용자 정의 시각화 추가

뉴렐릭의 GraphQL API 인 NerdGraph를 사용하여 프로그래밍 방식으로 새 대시보드나 기존 대시보드에 사용자 지정 시각화를 추가하세요.

시작하기 전에

아직 하지 않은 경우:

뉴렐릭 계정에 가입하세요
Node.js설치
CLI를 설치하고 구성하려면 nr1 빠른 시작 의 처음 4단계를 완료하세요.

Nerdpack 생성 및 게시

시각화를 사용하여 Nerdpack을 만듭니다. NerdGraph를 사용하여 이 시각화를 대시보드에 추가합니다.

추가 읽기

이 가이드는 시각화를 만들고 게시하는 것이 아니라 시각화 사용에 관한 것이므로 이러한 주제를 쉽게 다룰 수 있습니다. 시각화에 익숙하지 않거나 시각화 Nerdpack 처리에 대한 철저한 설명을 원하는 경우 다음 리소스를 확인하세요.

대시보드에 추가하려는 시각화가 이미 있는 경우 이 섹션을 건너뛸 수 있습니다. 하지만 이 가이드에서 사용하는 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를 탐색해 보세요.

이 가이드에서는 단일 위젯이 포함된 단일 페이지로 대시보드를 만듭니다. 마지막 섹션 에서 설명한 시각화 위젯.

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에 요청 보내기

요구 사항에 가장 적합한 변형을 위해 이전 섹션에서 구축한 페이로드를 사용하여 NerdGraph에 HTTP 요청을 보냅니다. HTTP 요청을 보내는 데 사용할 수 있는 도구는 많지만 이 가이드에서는 세 가지 특정 도구를 사용하여 NerdGraph와 통신하는 방법을 알아봅니다.

다른 방법을 사용하는 경우 선호하는 개발 도구에 이러한 방법을 적용할 수 있습니다.

NerdGraph API 탐색기

NerdGraph API 탐색기는 NerdGraph 탐색할 수 있는 GraphiQL 의 API 구현입니다.

NerdGraph API 탐색기 로 이동합니다.

새 API 키를 선택하거나 생성합니다.

센터 콘솔에 변형 쿼리를 붙여넣습니다.

중요

변형 쿼리의 ID를 계정, Nerdpack 및 시각화와 일치하는 ID로 바꾸십시오.

Execute Query [쿼리 실행을] 누르고 오른쪽 창에서 결과를 확인하세요.

새 대시보드를 성공적으로 생성한 경우 응답에 엔터티 GUID가 포함됩니다. 엔터티 GUID가 없는 경우 응답에는 쿼리 디버깅에 도움이 되는 오류 메시지가 포함됩니다.

기존 대시보드에 시각화를 추가한 경우 응답에 오류가 표시되지 않습니다. 오류 메시지가 표시되면 이를 사용하여 쿼리를 디버그하세요.

탐구하다

NerdGraph API 탐색기를 사용하면 모든 항목을 수동으로 입력하지 않고도 다른 필드를 보고 쿼리를 변경할 수 있습니다. NerdGraph를 탐색하려면 왼쪽 창을 사용하세요.

곱슬 곱슬하다

cURL은 HTTP 요청을 만들기 위한 명령줄 유틸리티입니다.

뉴렐릭 사용자 키를 선택하거나 생성하세요. 이 키는 다음 단계에서 사용하므로 복사하세요.

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로 바꾸십시오.

여기서는 두 개의 헤더 Content-Type 및 API-Key)와 이전 섹션에서 빌드한 변형 쿼리 중 하나가 포함된 바이너리 메시지 본문이 있는 NerdGraph에 요청을 보냅니다.

Postman 과 같은 UI 기반 클라이언트를 사용하려는 경우 이 방법을 클라이언트가 지원하는 형식에 맞게 조정할 수 있습니다.

뉴렐릭 CLI

newrelic 는 뉴렐릭 데이터를 읽고 쓰기 위한 펭귄줄 인터페이스입니다.

아직 설치하지 않았다면 뉴렐릭 CLI 시작하기 가이드의 단계에 따라 newrelic 설치하세요.

이 작업을 완료하면 NerdGraph 요청을 만들기 위해 newrelic 설치 및 구성됩니다.

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 으로 이동하여 대시보드를 선택하세요.
귀하가 생성한 대시보드에는 귀하의 변형 "My Awesome 대시보드"에 전달한 name 가 있습니다. 또한 NRQL 데이터 쿼리에서 채우기 및 획 색상까지 rawConfiguration에서 보낸 설정도 있습니다.

요약

축하해요! 이 가이드에서는 뉴렐릭의 GraphQL API 인 NerdGraph를 사용하여 대시보드에 사용자 정의 시각화를 추가했습니다.

사용자의 편의를 위해 제공되는 기계 번역입니다.

대시보드에 사용자 정의 시각화 추가

시작하기 전에.css-21sua1{background:none;border:none;width:0;padding:0;}

Nerdpack 생성 및 게시

추가 읽기

JSON을 사용하여 시각화 옵션 설명

팁

시각화를 사용하여 새 대시보드 만들기

팁

중요

기존 대시보드에 시각화 추가

팁

NerdGraph에 요청 보내기

NerdGraph API 탐색기

중요

탐구하다

곱슬 곱슬하다

중요

뉴렐릭 CLI

중요

새 대시보드 보기

요약

시작하기 전에