Sua primeira visualização personalizada

consulte dados de qualquer fonte e exiba-os no New Relic dashboard do com visualizações personalizadas.

Neste guia, você aprende como:

Use a CLI nr1 para gerar uma visualização padrão.
Execute sua visualização localmente, onde você pode testar e iterar rapidamente.
Publique sua visualização no catálogo de aplicativos New Relic.
Adicione sua visualização a um dashboard.

Antes de você começar

Se você ainda não o fez:

Crie uma contaNew Relic .
Instale Node.js.
Conclua as etapas do início rápidonr1 para instalar e configurar a CLI.

Crie uma nova visualização

Use nr1 para gerar o padrão para uma nova visualização.

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

Certifique-se de estar trabalhando com a versão mais recente da CLI do New Relic One:

bash

$nr1 update

Crie uma visualização, chamada my-awesome-visualization, em um Nerdpack, chamado 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"

Dica

Se você receber um RequestError para um certificado autoassinado ao executar nr1 create, talvez seja necessário adicionar um certificado à cadeia de certificados do Node. Leia mais sobre esta e outras configurações avançadas em Habilitar configurações avançadas para seu Nerdpack.

Como resultado, você tem um novo diretório visualizations/my-awesome-visualization em my-awesome-nerdpack:

bash

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

O diretório de nível superior visualizations contém todas as visualizações do seu Nerdpack. A visualização que você criou é chamada my-awesome-visualization e possui seu próprio diretório. Os arquivos neste diretório fornecem um exemplo de visualização, um RadarChart preenchido por uma consulta NRQL básica.

Arquivos

nr1.json fornece metadados para sua visualização. A chave configuration nestes metadados define os campos prop-input a serem mostrados na interface. Para saber mais sobre as opções disponíveis na chave configuration , confira Configurar sua visualização personalizada.
index.js define o componente React que recebe os adereços definidos em nr1.json e renderiza sua visualização. Você pode instalar e importar qualquer biblioteca JavaScript que achar útil. O componente de exemplo importa Recharts, uma biblioteca que agrupa submódulos D3 para visualizações fáceis de compor.
styles.scss define os estilos Sass para sua visualização.

Sirva sua visualização localmente

Sirva sua visualização localmente e visualize-a em Apps > Custom Visualizations. Lá, você pode testar rapidamente as alterações em seu código.

No diretório raiz do seu Nerdpack, inicie um servidor Node local:

bash

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

Enquanto está em execução, seu servidor local reconhece alterações em determinados arquivos, como index.js , e atualiza automaticamente sua visualização. No entanto, ele não reconhece alterações em nr1.json ou styles.scss. Portanto, algumas alterações, como aquelas na definição do campo configuration em nr1.json, não serão refletidas na sua visualização até que você reinicie o servidor. Para ver as alterações nesses arquivos, pare o servidor com CTRL+C e inicie-o novamente com nr1 nerdpack:serve.

Abra o link para sua visualização que é mostrada no terminal quando o servidor Node é iniciado:

bash

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

Atualize os campos em Configure visualization properties e observe a atualização automática da sua visualização:

Para adicionar mais dessas propriedades, atualize o campo configuration em nr1.json e reinicie o servidor local.

Configurar essas propriedades é uma forma de atualizar sua visualização. Alterar seu código React é outra.

Em index.js, altere Radar.fillOpacity do seu 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

Observe sua visualização na plataforma New Relic para ver a mudança.

Agora você viu como:

Sirva sua visualização localmente
Veja na plataforma New Relic
Atualize a visualização com propriedades configuráveis e alterações de código

Depois de desenvolver e configurar um gráfico para mostrar seus dados de forma eficaz, você pode salvar essa instância do gráfico, completa com sua configuração e os dados ou consulta, em um dashboard. No entanto, você não pode fazer isso com uma visualização veiculada localmente. Você precisa publicar sua visualização primeiro.

Publique e use sua visualização

Para adicionar uma instância de sua visualização a um dashboard, primeiro você precisa publicar seu Nerdpack.

Publique seu Nerdpack a partir de seu diretório raiz:

bash

$nr1 nerdpack:publish

Procure uma mensagem de sucesso em sua saída:

bash

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

Isso significa que seu Nerdpack foi publicado no catálogo de aplicativos da New Relic, que você pode encontrar em Apps.

Assine seu Nerdpack:

bash

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

Agora você está inscrito no seu Nerdpack e pode construir uma instância de visualização no New Relic.

Mais uma vez, abra a página de Apps na New Relic:

Aqui, você não precisa usar a string de consulta ?nerdpacks=local porque está procurando uma visualização que você publicou e assinou, em vez de uma que seja veiculada localmente.

Vá para Custom Visualizations.
Encontre e clique na sua visualização publicada.
Talvez seja necessário atualizar a página do Browser se não conseguir encontrar a visualização. Observe que este novo bloco não possui mais um rótulo '/' Local . Isso ocorre porque você está visualizando a visualização que publicou e assinou nas etapas anteriores. Se você ainda estiver servindo seu Nerdpack localmente, poderá ver dois blocos aqui, um com o rótulo e outro sem ele.
Configure sua visualização da mesma forma que você fez quando ela foi veiculada localmente.
Clique em Add to dashboard. Siga o prompt para adicionar sua visualização a um dashboard.
Na página inicial, acesse o Dashboards e selecione o dashboard ao qual você adicionou sua visualização e veja sua visualização nele.

Resumo

Parabéns por construir sua primeira visualização! Neste guia, você aprendeu como:

Crie uma visualização
Sirva sua visualização localmente
Iterar alterações e personalizações no código de visualização em Custom Visualizations
Publique sua visualização
Assine sua visualização
Adicione sua visualização a um dashboard

Recursos adicionais

Vídeo de dicas rápidas New Relic : painel e visualizações personalizadas (6 minutos)
Vídeo New Relic NerdBytes: Configurando visualizações personalizadas para painel (7 minutos)
Transmissão ao vivo do New Relic Changelog: visualizações de dados personalizadas no New Relic (30 minutos)

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

Sua primeira visualização personalizada

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

Crie uma nova visualização

Dica

Sirva sua visualização localmente

Publique e use sua visualização

Resumo

Recursos adicionais

Antes de você começar