Tu primera visualización personalizada

consulte datos de cualquier fuente y muéstrelos en su New Relic dashboard con visualizaciones personalizadas.

En esta guía, aprenderá cómo:

Emplee la CLI nr1 para generar una visualización predeterminada.
Ejecute su visualización localmente, donde podrá probar e iterar rápidamente.
Publique su visualización en el catálogo de aplicaciones New Relic.
Agregue su visualización a un dashboard.

Antes de que empieces

Si aún no lo has hecho:

Crea una cuentaNew Relic .
Instale Node.js.
Complete los pasos del nr1 inicio rápido para instalar y configurar la CLI.

Crear una nueva visualización

Emplee nr1 para generar el texto estándar para una nueva visualización.

import React from 'react';
import PropTypes from 'prop-types';
import {
  Radar,
  RadarChart,
  PolarGrid,
  PolarAngleAxis,
  PolarRadiusAxis,
} from 'recharts';
import {Card, CardBody, HeadingText, NrqlQuery, Spinner, AutoSizer} from 'nr1';

export default class MyAwesomeVisualizationVisualization extends React.Component {
  // Custom props you wish to be configurable in the UI must also be defined in
  // the nr1.json file for the visualization. See docs for more details.
  static propTypes = {
    /**
     * A fill color to override the default fill color. This is an example of
     * a custom chart configuration.
     */
    fill: PropTypes.string,

    /**
     * A stroke color to override the default stroke color. This is an example of
     * a custom chart configuration.
     */
    stroke: PropTypes.string,
    /**
     * An array of objects consisting of a nrql `query` and `accountId`.
     * This should be a standard prop for any NRQL based visualizations.
     */
    nrqlQueries: PropTypes.arrayOf(
      PropTypes.shape({
        accountId: PropTypes.number,
        query: PropTypes.string,
      })
    ),
  };

  /**
   * Restructure the data for a non-time-series, facet-based NRQL query into a
   * form accepted by the Recharts library's RadarChart.
   * (https://recharts.org/api/RadarChart).
   */
  transformData = (rawData) => {
    return rawData.map((entry) => ({
      name: entry.metadata.name,
      // Only grabbing the first data value because this is not time-series data.
      value: entry.data[0].y,
    }));
  };

  /**
   * Format the given axis tick's numeric value into a string for display.
   */
  formatTick = (value) => {
    return value.toLocaleString();
  };

  render() {
    const {nrqlQueries, stroke, fill} = this.props;

    const nrqlQueryPropsAvailable =
      nrqlQueries &&
      nrqlQueries[0] &&
      nrqlQueries[0].accountId &&
      nrqlQueries[0].query;

    if (!nrqlQueryPropsAvailable) {
      return <EmptyState />;
    }

    return (
      <AutoSizer>
        {({width, height}) => (
          <NrqlQuery
            query={nrqlQueries[0].query}
            accountId={parseInt(nrqlQueries[0].accountId)}
            pollInterval={NrqlQuery.AUTO_POLL_INTERVAL}
          >
            {({data, loading, error}) => {
              if (loading) {
                return <Spinner />;
              }

              if (error) {
                return <ErrorState />;
              }

              const transformedData = this.transformData(data);

              return (
                <RadarChart
                  width={width}
                  height={height}
                  data={transformedData}
                >
                  <PolarGrid />
                  <PolarAngleAxis dataKey="name" />
                  <PolarRadiusAxis tickFormatter={this.formatTick} />
                  <Radar
                    dataKey="value"
                    stroke={stroke || '#51C9B7'}
                    fill={fill || '#51C9B7'}
                    fillOpacity={0.6}
                  />
                </RadarChart>
              );
            }}
          </NrqlQuery>
        )}
      </AutoSizer>
    );
  }
}

const EmptyState = () => (
  <Card className="EmptyState">
    <CardBody className="EmptyState-cardBody">
      <HeadingText
        spacingType={[HeadingText.SPACING_TYPE.LARGE]}
        type={HeadingText.TYPE.HEADING_3}
      >
        Please provide at least one NRQL query & account ID pair
      </HeadingText>
      <HeadingText
        spacingType={[HeadingText.SPACING_TYPE.MEDIUM]}
        type={HeadingText.TYPE.HEADING_4}
      >
        An example NRQL query you can try is:
      </HeadingText>
      <code>FROM NrUsage SELECT sum(usage) FACET metric SINCE 1 week ago</code>
    </CardBody>
  </Card>
);

const ErrorState = () => (
  <Card className="ErrorState">
    <CardBody className="ErrorState-cardBody">
      <HeadingText
        className="ErrorState-headingText"
        spacingType={[HeadingText.SPACING_TYPE.LARGE]}
        type={HeadingText.TYPE.HEADING_3}
      >
        Oops! Something went wrong.
      </HeadingText>
    </CardBody>
  </Card>
);

visualizations/my-awesome-visualization/index.js

Cerciorar de estar trabajando con la última versión de New Relic One CLI:

bash

$nr1 update

Cree una visualización, llamada my-awesome-visualization, en un Nerdpack, llamado my-awesome-nerdpack:

bash

$nr1 create --type visualization --name my-awesome-visualization
✔  You are attempting to create a nerdlet outside of a nerdpack. We will create a nerdpack for you. What would you like 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"

Sugerencia

Si recibe un RequestError para un certificado autofirmado cuando ejecuta nr1 create, es posible que necesite agregar un certificado a la cadena de certificados de Node. Lea más sobre esta y otras configuraciones avanzadas en Habilitar configuración avanzada para su Nerdpack.

Como resultado, tiene un nuevo directorio visualizations/my-awesome-visualization en my-awesome-nerdpack:

bash

$ls my-awesome-nerdpack/visualizations/my-awesome-visualization
index.js    nr1.json    styles.scss

El directorio visualizations de nivel superior contiene todas las visualizaciones de su Nerdpack. La visualización que creó se llama my-awesome-visualization y tiene su propio directorio. Los archivos de este directorio proporcionan una visualización de ejemplo, un RadarChart poblado por una consulta NRQL básica.

Archivos

nr1.json proporciona metadatos para su visualización. La clave configuration en estos metadatos define los campos de entrada de accesorios que se mostrarán en la UI. Para obtener más información sobre las opciones disponibles en la clave configuration , consulte Configure su visualización personalizada.
index.js define el componente React que recibe los accesorios definidos en nr1.json y representa su visualización. Puede instalar e importar cualquier biblioteca de JavaScript que considere útil. El componente de ejemplo importa Recharts, una biblioteca que incluye submódulos D3 para visualizaciones fáciles de componer.
styles.scss define los estilos Sass para su visualización.

Sirve tu visualización localmente

Entregue su visualización localmente y véala en Apps > Custom Visualizations. Allí podrá probar rápidamente los cambios en su código.

Desde el directorio raíz de tu Nerdpack, inicia un servidor Node local:

bash

$cd my-awesome-nerdpack
$nr1 nerdpack:serve

Mientras se ejecuta, su servidor local reconoce cambios en ciertos archivos, como index.js y actualiza automáticamente su visualización. Sin embargo, no reconoce cambios en nr1.json o styles.scss. Por lo tanto, algunos cambios, como los de la definición del campo configuration en nr1.json, no se reflejarán en su visualización hasta que resetear su servidor. Para ver los cambios en esos archivos, detenga el servidor con CTRL+C y vuelva a iniciarlo con nr1 nerdpack:serve.

Abra el enlace a su visualización que se muestra en la terminal cuando se inicia el servidor de Node:

bash

Visualizations:
⁎  my-awesome-visualization https://one.nr/012ab3cd4Ef

Actualice los campos en Configure visualization properties y observe cómo su visualización se actualiza automáticamente:

Para agregar más de estas propiedades, actualice el campo configuration en nr1.json y resetear su servidor local.

Configurar estas propiedades es una forma de actualizar su visualización. Cambiar tu código de React es otra.

En index.js, cambie Radar.fillOpacity de su componente:

import React from 'react';
import PropTypes from 'prop-types';
import {
  Radar,
  RadarChart,
  PolarGrid,
  PolarAngleAxis,
  PolarRadiusAxis,
} from 'recharts';
import {Card, CardBody, HeadingText, NrqlQuery, Spinner, AutoSizer} from 'nr1';

export default class MyAwesomeVisualizationVisualization extends React.Component {
  // Custom props you wish to be configurable in the UI must also be defined in
  // the nr1.json file for the visualization. See docs for more details.
  static propTypes = {
    /**
     * A fill color to override the default fill color. This is an example of
     * a custom chart configuration.
     */
    fill: PropTypes.string,

    /**
     * A stroke color to override the default stroke color. This is an example of
     * a custom chart configuration.
     */
    stroke: PropTypes.string,
    /**
     * An array of objects consisting of a nrql `query` and `accountId`.
     * This should be a standard prop for any NRQL based visualizations.
     */
    nrqlQueries: PropTypes.arrayOf(
      PropTypes.shape({
        accountId: PropTypes.number,
        query: PropTypes.string,
      })
    ),
  };

  /**
   * Restructure the data for a non-time-series, facet-based NRQL query into a
   * form accepted by the Recharts library's RadarChart.
   * (https://recharts.org/api/RadarChart).
   */
  transformData = (rawData) => {
    return rawData.map((entry) => ({
      name: entry.metadata.name,
      // Only grabbing the first data value because this is not time-series data.
      value: entry.data[0].y,
    }));
  };

  /**
   * Format the given axis tick's numeric value into a string for display.
   */
  formatTick = (value) => {
    return value.toLocaleString();
  };

  render() {
    const {nrqlQueries, stroke, fill} = this.props;

    const nrqlQueryPropsAvailable =
      nrqlQueries &&
      nrqlQueries[0] &&
      nrqlQueries[0].accountId &&
      nrqlQueries[0].query;

    if (!nrqlQueryPropsAvailable) {
      return <EmptyState />;
    }

    return (
      <AutoSizer>
        {({width, height}) => (
          <NrqlQuery
            query={nrqlQueries[0].query}
            accountId={parseInt(nrqlQueries[0].accountId)}
            pollInterval={NrqlQuery.AUTO_POLL_INTERVAL}
          >
            {({data, loading, error}) => {
              if (loading) {
                return <Spinner />;
              }

              if (error) {
                return <ErrorState />;
              }

              const transformedData = this.transformData(data);

              return (
                <RadarChart
                  width={width}
                  height={height}
                  data={transformedData}
                >
                  <PolarGrid />
                  <PolarAngleAxis dataKey="name" />
                  <PolarRadiusAxis tickFormatter={this.formatTick} />
                  <Radar
                    dataKey="value"
                    stroke={stroke || '#51C9B7'}
                    fill={fill || '#51C9B7'}
                    fillOpacity={1.0}
                  />
                </RadarChart>
              );
            }}
          </NrqlQuery>
        )}
      </AutoSizer>
    );
  }
}

const EmptyState = () => (
  <Card className="EmptyState">
    <CardBody className="EmptyState-cardBody">
      <HeadingText
        spacingType={[HeadingText.SPACING_TYPE.LARGE]}
        type={HeadingText.TYPE.HEADING_3}
      >
        Please provide at least one NRQL query & account ID pair
      </HeadingText>
      <HeadingText
        spacingType={[HeadingText.SPACING_TYPE.MEDIUM]}
        type={HeadingText.TYPE.HEADING_4}
      >
        An example NRQL query you can try is:
      </HeadingText>
      <code>FROM NrUsage SELECT sum(usage) FACET metric SINCE 1 week ago</code>
    </CardBody>
  </Card>
);

const ErrorState = () => (
  <Card className="ErrorState">
    <CardBody className="ErrorState-cardBody">
      <HeadingText
        className="ErrorState-headingText"
        spacingType={[HeadingText.SPACING_TYPE.LARGE]}
        type={HeadingText.TYPE.HEADING_3}
      >
        Oops! Something went wrong.
      </HeadingText>
    </CardBody>
  </Card>
);

visualizations/my-awesome-visualization/index.js

Mire su visualización en la plataforma New Relic para ver el cambio.

Ahora viste cómo:

Sirve tu visualización localmente
Véalo en la plataforma New Relic
Actualice la visualización con propiedades configurables y cambios de código.

Una vez que desarrolló y configurado un gráfico para mostrar sus datos de manera efectiva, puede almacenar esa instancia del gráfico, completa con su configuración y los datos o consulta, en un dashboard. Sin embargo, no puede hacer esto con una visualización proporcionada localmente. Primero debes publicar tu visualización.

Publica y emplea tu visualización

Para agregar una instancia de su visualización a un dashboard, primero debe publicar su Nerdpack.

Publica tu Nerdpack desde su directorio raíz:

bash

$nr1 nerdpack:publish

Busque un mensaje de éxito en su salida:

bash

✔  Nerdpack published successfully!
✔  Tagged 5f4c2af8-3b27-40b5-954c-356d1ef88dd0 version 1.0.0 as STABLE.

Esto significa que tu Nerdpack se publicó en el catálogo de aplicaciones New Relic que puedes encontrar en Apps.

Suscríbete a tu Nerdpack:

bash

$nr1 nerdpack:subscribe
Subscribed account 3014918 to the nerdpack 5f4c2af8-3b27-40b5-954c-356d1ef88dd0 on the STABLE channel.

Ahora estás suscrito a tu Nerdpack y puedes crear una instancia de una visualización en New Relic.

Una vez más, abra la página de Apps en New Relic:

Aquí, no necesita usar la cadena de consulta ?nerdpacks=local porque está buscando una visualización que publicó y a la que se suscribió, en lugar de una que se proporcione localmente.

Vaya a Custom Visualizations.
Busque y haga clic en su visualización publicada.
Es posible que deba actualizar la página de su browser si no puede encontrar su visualización. Observe que este nuevo mosaico ya no tiene una etiqueta '/' Local . Esto se debe a que estás viendo la visualización que publicaste y a la que te suscribiste en los pasos anteriores. Si todavía estás sirviendo tu Nerdpack localmente, es posible que veas dos mosaicos aquí, uno con la etiqueta y otro sin ella.
Configure su visualización de la misma manera que lo hizo cuando se entregó localmente.
Haga clic Add to dashboard. Siga el símbolo para agregar su visualización a un dashboard.
Desde la página de inicio, vaya al Dashboards y seleccione el dashboard al que agregó su visualización y vea su visualización en él.

Resumen

¡Felicitaciones por crear su primera visualización! En esta guía, aprendió cómo:

Crear una visualización
Sirve tu visualización localmente
Iterar sobre cambios y personalizaciones del código de visualización en Custom Visualizations
Publica tu visualización
Suscríbete a tu visualización
Agregue su visualización a un dashboard

Recursos adicionales

Video de consejos rápidos New Relic : panel y visualizaciones personalizadas (6 minutos)
New Relic NerdBytes: Configuración de visualizaciones personalizadas para el panel (7 minutos)
Transmisión en tiempo real de New Relic Changelog: visualizaciones de datos personalizadas en New Relic (30 minutos)

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

Tu primera visualización personalizada

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

Crear una nueva visualización

Sugerencia

Sirve tu visualización localmente

Publica y emplea tu visualización

Resumen

Recursos adicionales

Antes de que empieces