Agregue su visualización personalizada a un dashboard

Agregue su visualización personalizada a un nuevo o dashboard existente, mediante programación, con New Relic GraphQL API de , NerdGraph.

Antes de que empieces

Si aún no lo has hecho:

Registrar para obtener una cuenta New Relic
Instalar Node.js
Complete los primeros cuatro pasos del nr1 inicio rápido para instalar y configurar la CLI

Crea y publica tu Nerdpack

Crea un Nerdpack con una visualización. Agregará esta visualización a un dashboard usando NerdGraph.

Otras lecturas

Debido a que esta guía trata sobre el uso de visualizaciones, no sobre su creación y publicación, aborda estos temas rápidamente. Si no está familiarizado con las visualizaciones o desea una explicación detallada sobre cómo lidiar con los Nerdpacks de visualización, consulte los siguientes recursos:

Si ya tiene una visualización que le gustaría agregar a un dashboard, puede omitir esta sección. Pero no olvide realizar los ajustes de código necesarios para hacer referencia a su visualización en lugar de la que emplea esta guía, llamada my-awesome-visualization.

Actualice su nr1 CLI:

bash

$nr1 update

Ahora tienes la última versión.

Cree una visualización llamada my-awesome-visualization en un Nerdpack llamado 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"

Cuando crea una visualización con nr1 create, obtiene una visualización predeterminada. Empleará esta visualización predeterminada a lo largo de este curso.

Navega hasta tu nuevo Nerdpack:

bash

$cd my-awesome-nerdpack

Desde aquí, puede ejecutar nr1 nerdpack comandos.

Publica y suscríbete a tu Nerdpack:

bash

$nr1 nerdpack:publish
$nr1 nerdpack:subscribe

Ahora que su cuenta está suscrita a su visualización, puede describir la configuración de su aplicación con JSON y agregarla a un dashboard con NerdGraph.

Describe tus opciones de visualización con JSON

Ya sea que esté agregando su visualización a un dashboard nuevo o a uno existente, debe enviar su configuración a NerdGraph.

Su objeto JSON de visualización personalizada representa un dashboard widget y consta de los siguientes campos:

Campo	Tipo	Descripción
`title`	Cadena	Título para de su dashboard widget
`visualization`	JSON	Los metadatos para tu visualización
`visualization.id`	Cadena	El ID de su visualización
`rawConfiguration`	JSON	Una configuración completa de tu widget

Sugerencia

También puede agregar otros tipos de widget al panel siguiendo los pasos de esta guía, pero los campos que se describen aquí son específicos del widget de visualización personalizado. Para otros tipos widget , deberá proporcionar datos diferentes.

Explora la API por tu cuenta con nuestro explorador NerdGraph.

Comience con una plantilla JSON basada en los campos que necesita para describir su visualización personalizada:

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

Dale un título a tu widget de visualización:

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

Busque su ID de Nerdpack en 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

Luego, busque su ID de visualización en 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

Configure visualization.id de su widget de visualización en el formulario {NERDPACK-ID}.{VISUALIZATION-ID}:

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

En my-awesome-nerdpack/visualizations/my-awesome-visualization/nr1.json, revise sus opciones de configuración:

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

Los campos name en configuration son importantes para describir su widget de visualización.

Usando el campo name para cada objeto de configuración en el archivo nr1.json de su visualización, cree un rawConfiguration para su 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"
  }
}

Aquí, creó un rawConfiguration proporcionando valores para cada opción de configuración en nr1.json. Tenga en cuenta que nrqlQueries es una matriz porque su tipo es collection. Los otros valores son cadenas. Obtenga más información sobre estas opciones de configuración en Configure su visualización personalizada.

Ahora que describió su widget de visualización en JSON, puede agregar su visualización configurada a un dashboard. En la siguiente sección, aprenderá cómo crear un nuevo dashboard con su visualización. Si ya tiene uno listo, continúe para agregar su visualización a su panel existente.

Crea un nuevo dashboard con tu visualización

Si desea crear un nuevo dashboard para su widget de visualización, emplee la mutación dashboardCreate() de NerdGraph.

La mutación NerdGraph dashboardCreate() toma los siguientes campos:

Campo	Tipo	Descripción
`accountId`	Entero	El ID de la cuenta para la que desea crear su dashboard
`dashboard`	JSON	Los detalles del dashboard que estás creando
`dashboard.name`	Cadena	El nombre de su dashboard
`dashboard.permissions`	Enumeración: `PRIVATE`, `PUBLIC_READ_ONLY`, `PUBLIC_READ_WRITE`	El control de acceso a tu dashboard
`dashboard.pages`	matriz: JSON	Los detalles de las páginas de su dashboard
`dashboard.pages[].name`	Cadena	El nombre de la página dashboard .
`dashboard.pages[].widgets`	matriz: JSON	El widget para agregar a la página dashboard

Sugerencia

También puedes pasar más campos a dashboardCreate() para agregar detalles, widgets y más. Explora la API por tu cuenta con nuestro explorador NerdGraph.

En esta guía, creará un dashboard con una sola página que contiene un solo widget. El widget de visualización que describió en la última sección.

Cree una plantilla de mutación GraphQL basada en los campos que necesita para describir su dashboard en dashboardCreate():

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

Aquí definió la plantilla para un dashboard privado. Ahora es el momento de completar los detalles.

Busque su ID de cuenta e ingréselo para su accountId:

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

Seleccione un nombre para su dashboard y su página:

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

En widgets, coloque el objeto widget que creó en la última sección:

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, agregue los campos de retorno a su mutación:

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

Cerciorar de reemplazar las ID en su consulta de mutación con otras que coincidan con su cuenta, Nerdpack y visualización.

Ahora tiene una mutación lista para enviar a NerdGraph para crear dashboard de una sola página con un widget para su visualización personalizada. Como resultado, verá el GUID de entidad del nuevo dashboard.

En la siguiente sección, aprenderá cómo agregar su visualización a un dashboard existente. Si eso no es relevante para sus objetivos, continúe y envíe su solicitud a NerdGraph.

Agregue su visualización a un dashboardexistente

Para agregar su widget de visualización a un dashboard existente, use la mutación dashboardAddWidgetsToPage() de NerdGraph.

La mutación NerdGraph dashboardAddWidgetsToPage() toma los siguientes campos:

Campo	Tipo	Descripción
`guid`	Cadena	El GUID de entidad para el dashboard al que estás agregando tu widget.
`widgets`	matriz: JSON	El widget para agregar a la página dashboard

Sugerencia

También puedes pasar más campos a dashboardAddWidgetsToPage() para agregar detalles, widgets y más. Explora la API por tu cuenta con nuestro explorador NerdGraph.

Cree una plantilla de mutación GraphQL basada en los campos que necesita para describir su dashboard en dashboardAddWidgetsToPage():

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

Busque el GUID de su dashboard e ingréselo para guid:

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

En el widget, coloque el objeto widget que creó en Describe tus opciones de visualización con 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, agregue los campos de retorno a su mutación:

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

Ahora tiene una mutación lista para enviar a NerdGraph para agregar su visualización personalizada a un dashboard existente. Como resultado, verá descripciones de los errores arrojados para ayudarlo a depurar problemas.

Lo último que debe hacer es enviar su solicitud a NerdGraph.

Envíe su solicitud a NerdGraph

Envíe una solicitud HTTP a NerdGraph con la carga útil que creó en las secciones anteriores para la mutación que mejor se adapte a sus necesidades. Hay muchas herramientas que puede emplear para enviar una solicitud HTTP, pero en esta guía aprenderá cómo comunicar con NerdGraph empleando tres herramientas específicas:

Si emplea otro, puede adaptar estos métodos a su herramienta de desarrollo favorita.

Explorador de API NerdGraph

El explorador API NerdGraph es una implementación de GraphiQL que le permite explorar la API NerdGraph.

Vaya al explorador de API de NerdGraph.

Seleccione o cree una nueva clave de API:

En la consola central, pega tu consulta de mutación:

Importante

Cerciorar de reemplazar las ID en su consulta de mutación con otras que coincidan con su cuenta, Nerdpack y visualización.

Presione Execute Query y vea los resultados en el panel derecho:

Si creó exitosamente un nuevo dashboard, su respuesta tiene un GUID de entidad. Si no tiene un GUID de entidad, la respuesta contiene un mensaje de error para ayudarlo a depurar su consulta.

Si agregó su visualización a un dashboard existente, no verá errores en la respuesta. Si ve un mensaje de error, empléelo para depurar su consulta.

Explorar

El explorador de API NerdGraph le permite ver otros campos y cambiar su consulta sin tener que escribir todo manualmente. Emplee el panel izquierdo para explorar NerdGraph.

cURL

cURL es una utilidad de línea de comando para realizar solicitudes HTTP.

Seleccione o cree una clave de usuario de New Relic. Copie esta clave, porque la usará en el siguiente paso.

Realice una solicitud a NerdGraph, empleando 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

Cerciorar de reemplazar las ID en su consulta de mutación con otras que coincidan con su cuenta, Nerdpack y visualización.

Aquí, envía una solicitud a NerdGraph que tiene dos encabezados, Content-Type y API-Key, y un cuerpo de mensaje binario que contiene una de las consultas de mutación que creó en las secciones anteriores.

Si prefiere emplear un cliente basado en UI, como Postman, puede adaptar este método a un formato que admita su cliente.

New Relic

El newrelic es una interfaz de línea de comando para leer y escribir datos de New Relic .

Si aún no lo hizo, instale newrelic siguiendo los pasos de nuestra guía Introducción a la CLI de New Relic .

Una vez que hizo eso, tendrá newrelic instalado y configurado para realizar solicitudes de NerdGraph.

Realice una solicitud de 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

Cerciorar de reemplazar las ID en su consulta de mutación con otras que coincidan con su cuenta, Nerdpack y visualización.

Vea su nuevo dashboard

Ahora que creó un dashboard con NerdGraph, ¡es hora de verificar su trabajo!

Vaya a one.newrelic.com > All capabilities > Dashboards y seleccione su dashboard.
El dashboard que creó tiene el name que pasó en su mutación, "Mi dashboardimpresionante". También tiene la configuración que enviaste en rawConfiguration, desde la consulta de datos NRQL hasta los colores de relleno y trazo.

Resumen

¡Felicidades! En esta guía, empleó NerdGraph, New Relic GraphQL de API, para agregar su visualización personalizada a un dashboard.

Te ofrecemos esta traducción automática para facilitar la lectura.

Agregue su visualización personalizada a un dashboard

Antes de que empieces.css-21sua1{background:none;border:none;width:0;padding:0;}

Crea y publica tu Nerdpack

Otras lecturas

Describe tus opciones de visualización con JSON

Sugerencia

Crea un nuevo dashboard con tu visualización

Sugerencia

Importante

Agregue su visualización a un dashboardexistente

Sugerencia

Envíe su solicitud a NerdGraph

Explorador de API NerdGraph

Importante

Explorar

cURL

Importante

New Relic

Importante

Vea su nuevo dashboard

Resumen

Antes de que empieces