Adicione sua visualização personalizada a um dashboard

Adicione sua visualização personalizada a um novo ou dashboard existente, programaticamente, com New Relic GraphQL API da , NerdGraph.

Antes de você começar

Se você ainda não o fez:

Cadastre-se para uma conta New Relic
Instale o Node.js.
Conclua as primeiras quatro etapas do início rápidonr1 para instalar e configurar a CLI

Crie e publique seu Nerdpack

Crie um Nerdpack com visualização. Você adicionará essa visualização a um dashboard usando NerdGraph.

Leitura adicional

Como este guia trata do uso de visualizações, e não de sua criação e publicação, ele aborda esses tópicos com facilidade. Se você não está familiarizado com visualizações ou gostaria de uma explicação completa sobre como lidar com Nerdpacks de visualização, verifique os seguintes recursos:

Se você já tem uma visualização que gostaria de adicionar a um dashboard, ignore esta seção. Mas não se esqueça de fazer os ajustes de código necessários para referenciar sua visualização em vez daquela que este guia usa, chamada my-awesome-visualization.

Atualize sua CLI nr1 :

bash

$nr1 update

Agora você tem a versão mais recente.

Crie uma visualização chamada my-awesome-visualization em um Nerdpack chamado my-awesome-nerdpack:

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"

Ao criar uma visualização com nr1 create, você obtém uma visualização padrão. Você usará essa visualização padrão ao longo deste curso.

Navegue até seu novo Nerdpack:

bash

$cd my-awesome-nerdpack

A partir daqui, você pode executar comandos nr1 nerdpack .

Publique e assine seu Nerdpack:

bash

$nr1 nerdpack:publish
$nr1 nerdpack:subscribe

Agora que sua conta está inscrita em sua visualização, você pode descrever a configuração do seu aplicativo com JSON e adicioná-lo a um dashboard com NerdGraph.

Descreva suas opções de visualização com JSON

Esteja você adicionando sua visualização a um novo dashboard ou a um existente, você precisa enviar sua configuração para o NerdGraph.

Seu objeto JSON de visualização customizada representa um dashboard widget e consiste nos seguintes campos:

Campo	Tipo	Descrição
`title`	Corda	Título do do seu dashboard widget
`visualization`	JSON	Os metadados para sua visualização
`visualization.id`	Corda	ID da sua visualização
`rawConfiguration`	JSON	Uma configuração completa do seu widget

Dica

Você também pode adicionar outros tipos de widget ao painel com as etapas deste guia, mas os campos descritos aqui são específicos para widget de visualização personalizado. Para outros tipos de widget, você precisa fornecer dados diferentes.

Explore a API por conta própria com nosso explorador NerdGraph.

Comece com um modelo JSON baseado nos campos necessários para descrever sua visualização personalizada:

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

Dê um título ao seu widget de visualização:

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

Procure seu ID Nerdpack em my-awesome-nerdpack/nr1.json:

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

my-awesome-nerdpack/nr1.json

Em seguida, procure seu ID de visualização em 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

Defina visualization.id do seu widget de visualização no formato {NERDPACK-ID}.{VISUALIZATION-ID}:

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

Em my-awesome-nerdpack/visualizations/my-awesome-visualization/nr1.json, revise suas opções de configuração:

{
  "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

Os name campos em configuration são importantes para descrever seu widget de visualização.

Usando o campo name para cada objeto de configuração no arquivo nr1.json de sua visualização, crie um rawConfiguration para seu widget:

{
  "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"
  }
}

Aqui, você criou um rawConfiguration fornecendo valores para cada opção de configuração em nr1.json. Observe que nrqlQueries é uma matriz porque seu tipo é collection. Os outros valores são strings. Saiba mais sobre essas opções de configuração em Configurar sua visualização personalizada.

Agora que descreveu seu widget de visualização em JSON, você pode adicionar sua visualização configurada a um dashboard. Na próxima seção, você aprenderá como criar um novo dashboard com sua visualização. Se você já tiver um pronto, avance para adicionar sua visualização ao painel existente.

Crie um novo dashboard com sua visualização

Se você deseja criar um novo dashboard para seu widget de visualização, use a mutação dashboardCreate() do NerdGraph.

A mutação NerdGraph dashboardCreate() ocupa os seguintes campos:

Campo	Tipo	Descrição
`accountId`	Inteiro	O ID da conta para a qual você deseja criar seu dashboard
`dashboard`	JSON	Os detalhes do dashboard que você está criando
`dashboard.name`	Corda	O nome do seu dashboard
`dashboard.permissions`	Enum: `PRIVATE`, `PUBLIC_READ_ONLY`, `PUBLIC_READ_WRITE`	O controle de acesso do seu dashboard
`dashboard.pages`	matriz: JSON	Os detalhes das páginas do seu dashboard
`dashboard.pages[].name`	Corda	O nome da página dashboard
`dashboard.pages[].widgets`	matriz: JSON	O widget a ser adicionado à página dashboard

Dica

Você também pode passar mais campos para dashboardCreate() para adicionar detalhes, widget e muito mais. Explore a API por conta própria com nosso explorador NerdGraph.

Neste guia, você cria um dashboard com uma única página que contém um único widget. O widget de visualização que você descreveu na última seção.

Crie um modelo de mutação GraphQL com base nos campos necessários para descrever seu dashboard em dashboardCreate():

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

Aqui você definiu o modelo para um dashboard privado. Agora é hora de preencher os detalhes.

Procure o ID da sua conta e insira-o em accountId:

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

Selecione um nome para seu dashboard e sua página:

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

Em widgets, coloque o objeto widget que você criou na última seção:

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
    }
  )
}

Finalmente, adicione os campos de retorno à sua mutação:

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
    }
  }
}

Importante

Certifique-se de substituir os IDs em sua consulta de mutação por aqueles que correspondam à sua conta, Nerdpack e visualização.

Agora, você tem uma mutação pronta para enviar ao NerdGraph para criar dashboard de página única com um widget para sua visualização personalizada. Como resultado, você verá o GUID da entidade do novo dashboard.

Na próxima seção, você aprenderá como adicionar sua visualização a um dashboard existente. Se isso não for relevante para seus objetivos, envie sua solicitação para NerdGraph.

Adicione sua visualização a um dashboardexistente

Para adicionar seu widget de visualização a um dashboard existente, use a mutação dashboardAddWidgetsToPage() do NerdGraph.

A mutação NerdGraph dashboardAddWidgetsToPage() ocupa os seguintes campos:

Campo	Tipo	Descrição
`guid`	Corda	O GUID da entidade do dashboard ao qual você está adicionando seu widget
`widgets`	matriz: JSON	O widget a ser adicionado à página dashboard

Dica

Você também pode passar mais campos para dashboardAddWidgetsToPage() para adicionar detalhes, widget e muito mais. Explore a API por conta própria com nosso explorador NerdGraph.

Crie um modelo de mutação GraphQL com base nos campos necessários para descrever seu dashboard em dashboardAddWidgetsToPage():

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

Procure o GUID do seu dashboard e insira-o para guid:

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

No widget, coloque o objeto widget que você criou em Descreva suas opções de visualização com 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"
        }
      }
    ]
  )
}

Finalmente, adicione os campos de retorno à sua mutação:

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
    }
  }
}

Agora você tem uma mutação pronta para ser enviada ao NerdGraph para adicionar sua visualização personalizada a um dashboard existente. Como resultado, você verá descrições de quaisquer erros gerados para ajudá-lo a depurar problemas.

A última coisa que você precisa fazer é enviar sua solicitação ao NerdGraph.

Envie sua solicitação para NerdGraph

Envie uma solicitação HTTP ao NerdGraph com a carga útil que você construiu nas seções anteriores para a mutação que melhor atende às suas necessidades. Existem muitas ferramentas que você pode usar para enviar uma solicitação HTTP, mas neste guia você aprenderá como se comunicar com o NerdGraph usando três ferramentas específicas:

Se você usar outro, poderá adaptar esses métodos para sua ferramenta de desenvolvimento favorita.

Explorador de API NerdGraph

O NerdGraph API Explorer é uma implementação do GraphiQL que permite explorar a API NerdGraph.

Vá para o explorador de API NerdGraph.

Selecione ou crie uma nova chave de API:

No console central, cole sua consulta de mutação:

Importante

Certifique-se de substituir os IDs em sua consulta de mutação por aqueles que correspondam à sua conta, Nerdpack e visualização.

Pressione Execute Query e veja os resultados no painel direito:

Se você criou um novo dashboard com sucesso, sua resposta terá um GUID de entidade. Se você não possui um GUID de entidade, a resposta contém mensagem de erro para ajudá-lo a depurar sua consulta.

Se você adicionou sua visualização a um dashboard existente, não verá erros na resposta. Se você vir uma mensagem de erro, use-a para depurar sua consulta.

Explorar

O NerdGraph API Explorer permite que você veja outros campos e altere sua consulta sem digitar tudo manualmente. Use o painel esquerdo para explorar o NerdGraph.

cURL

cURL é um utilitário de linha de comando para fazer solicitações HTTP.

Selecione ou crie uma chave de usuário New Relic. Copie esta chave, pois você a usará na próxima etapa.

Faça uma solicitação ao NerdGraph, usando cURL:

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": ""}'

Importante

Certifique-se de substituir os IDs em sua consulta de mutação por aqueles que correspondam à sua conta, Nerdpack e visualização.

Aqui, você envia uma solicitação ao NerdGraph que possui dois cabeçalhos, Content-Type e API-Key, e um corpo de mensagem binária contendo uma das consultas de mutação que você construiu nas seções anteriores.

Se preferir usar um cliente baseado em interface, como Postman, você pode adaptar esse método para um formato compatível com seu cliente.

CLI New Relic

O newrelic é uma interface de linha de comando para leitura e gravação de dados do New Relic.

Se ainda não o fez, instale newrelic seguindo as etapas do nosso guia Introdução à CLI do New Relic .

Depois de fazer isso, você terá newrelic instalado e configurado para fazer solicitações do NerdGraph.

Faça uma solicitação NerdGraph usando newrelic nerdgraph query:

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
$        }
$    }
$}'

Importante

Certifique-se de substituir os IDs em sua consulta de mutação por aqueles que correspondam à sua conta, Nerdpack e visualização.

Veja seu novo dashboard

Agora que você construiu um dashboard com NerdGraph, é hora de verificar seu trabalho!

Vá para one.newrelic.com > All capabilities > Dashboards e selecione seu dashboard.
O dashboard que você criou tem o name que você passou na sua mutação, "My Awesome dashboard". Também possui a configuração que você enviou em rawConfiguration, desde a consulta de dados NRQL até as cores de preenchimento e traço.

Resumo

Parabéns! Neste guia, você usou NerdGraph, New Relic GraphQL da API, para adicionar sua visualização personalizada a um dashboard.

Esta tradução de máquina é fornecida para sua comodidade.

Adicione sua visualização personalizada a um dashboard

Antes de você começar.css-21sua1{background:none;border:none;width:0;padding:0;}

Crie e publique seu Nerdpack

Leitura adicional

Descreva suas opções de visualização com JSON

Dica

Crie um novo dashboard com sua visualização

Dica

Importante

Adicione sua visualização a um dashboardexistente

Dica

Envie sua solicitação para NerdGraph

Explorador de API NerdGraph

Importante

Explorar

cURL

Importante

CLI New Relic

Importante

Veja seu novo dashboard

Resumo

Antes de você começar