Personalize Nerdpacks de código aberto

A maioria dos Nerdpacks do catálogo de Instant Observability são de código aberto. Isso significa que você pode clonar ou bifurcar seu repositório, personalizá-lo para atender às suas necessidades específicas e publicá-lo novamente para usar com sua conta. Neste guia, você personaliza um Nerdpack com visualizações e publica em sua conta. Porém, para personalizar qualquer Nerdpack, você segue os mesmos passos.

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

Veja um Nerdpack

Assine o Nerdpack Victory Charts Visualizations e abra a visualização da Circular progress bar no New Relic.

Acesse one.newrelic.com > All capabilities > Apps.

Clique no Nerdpack Victory Charts Visualizations no catálogo.

Adicione Victory Charts Visualizations à sua conta.

Acesse one.newrelic.com > All capabilities > Apps e abra Custom visualizations.

Na lista de visualizações em Custom visualizations, clique em Circular progress bar, que você instalou como parte do Nerdpack Victory Charts Visualizations.

Em Configure visualization properties, selecione sua conta e insira uma consulta NRQL.

Agora você vê um gráfico circular que mostra uma porcentagem com base na sua consulta.

Dica

Leia nossa documentação para obter instruções sobre como configurar a visualização da barra de progresso.

Observe algumas coisas sobre esta visualização:

Você não controla a cor do gráfico
As seções do gráfico têm bordas arredondadas
Para este tutorial, imagine que este gráfico representa seus dados exatamente como você deseja, exceto por duas coisas. Você gostaria de usar bordas retas e controlar as cores do gráfico manualmente. No mundo real, você pode encontrar Nerdpacks como este, onde você gosta do que eles oferecem, mas gostaria mais deles se pudesse ajustá-los. Bem, você pode ajustá-los e, a seguir, aprenderá como!

Como você usará uma versão ajustada do Victory Charts Visualizations Nerdpack em vez daquela que você assinou, você pode cancelar a assinatura de nossa versão agora.

Clonar um Nerdpack

Encontre o repositório do código-fonte na entrada do catálogo do Nerdpack e clone-o em sua máquina local.

Na interface, acesse + Integrations & Agents.

Clique no Nerdpack Victory Charts Visualizations no catálogo.

Vá para o repositório de código-fonte do Nerdpack.

Todos os Nerdpacks de código aberto no catálogo possuem links para seu código-fonte nas informações do catálogo.

Clone o repositório:

bash

$nr1 nerdpack:clone -r https://github.com/newrelic/nr1-victory-visualizations.git

Agora você tem uma versão local do Nerdpack Victory Charts Visualizations ! Observe que você usou nr1 nerdpack:clone em vez de git clone para copiar o repositório. nr1 nerdpack:clone oferece funcionalidade integrada para ajudar a manter sua cópia local distinta do Nerdpack original no catálogo público de Instant Observability. Especificamente, ele gera um novo UUID do Nerdpack para que você não precise fazer isso sozinho:

bash

Re-generating UUID...
Committing new UUID...

Se você mudar para o diretório nr1-victory-visualizations e observar o log do git, verá o novo commit:

bash

$git log -1 -p
commit e356bb5b10c3ecc8f93bae66d5739e1676ee21ef (HEAD -> main)
Author: New Relic CLI <nr1@newrelic.com>
Date:   Tue May 25 14:29:37 2021 -0400
    "chore: Auto-generated UUID"
diff --git a/nr1.json b/nr1.json
index 054de52..7a107b5 100644
--- a/nr1.json
+++ b/nr1.json
@@ -1,6 +1,6 @@
 {
   "schemaType": "NERDPACK",
-  "id": "cf5f13d9-815f-4907-a21d-83d02fa2a4fb",
+  "id": "ab123c45-678d-9012-efg3-45hi6jkl7890",
   "displayName": "Victory charts visualizations",
   "description": "Visualizations built on top of Victory charts"
 }

Em nr1-victory-visualizations/nr1.json, altere displayName do seu Nerdpack:

{
  "schemaType": "NERDPACK",
  "id": "269055dd-67e8-4713-8da3-bff01c6a8687",
  "displayName": "My custom Victory Charts visualizations",
  "description": "Visualizations built on top of Victory charts"
}

nr1-victory-visualizations/nr1.json

Agora, ao servir ou publicar seu Nerdpack personalizado, você pode facilmente distingui-lo do original.

Personalize um Nerdpack

Ajuste a visualização da Circular progress bar para usar bordas retas e cores personalizáveis.

A Circular progress bar renderiza um VictoryPie com alguns campos predefinidos. Os campos que você ajustará são:

No seu Nerdpack local, abra nr1-victory-visualizations/visualizations/circular-progress-bar/nr1.json.

nr1.json é o arquivo de metadados da visualização da Circular progress bar. Use este arquivo para adicionar uma opção colorScale configurável, que corresponde ao campo colorScale em VictoryPie.

Adicione collection de string campos para você personalizar as cores do seu gráfico:

{
  "schemaType": "VISUALIZATION",
  "id": "circular-progress-bar",
  "displayName": "Circular progress bar",
  "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": "thresholds",
      "title": "Thresholds",
      "type": "namespace",
      "items": [
        {
          "name": "criticalThreshold",
          "title": "Critical threshold",
          "description": "Value at which progress is displayed as critical",
          "type": "number"
        },
        {
          "name": "highValuesAreSuccess",
          "title": "Above threshold is success",
          "description": "If toggled on, values above the threshold display as successful. Otherwise, values at or above the threshold display as critical.",
          "type": "boolean"
        }
      ]
    },
    {
      "name": "colors",
      "title": "Colors",
      "type": "collection",
      "items": [
        {
          "name": "segmentColor",
          "title": "Segment color",
          "description": "The color of a bar segment.",
          "type": "string"
        }
      ]
    }
  ]
}

nr1.json

O campo VictoryPie que você usará com esta atualização é chamado colorScale. Aceita uma matriz de cores e aplica cada cor a um segmento da barra de progresso. Portanto, nas opções de configuração da sua visualização, você especificou uma coleção de strings que usa para passar cores para o seu gráfico.

No mesmo diretório de visualização, abra index.js.

Em render(), defina a propriedade colorScale do componente VictoryPie :

import React from 'react';
import PropTypes from 'prop-types';
import { VictoryPie, VictoryAnimation, VictoryLabel } from 'victory';
import {
  Card,
  CardBody,
  HeadingText,
  NrqlQuery,
  Spinner,
  AutoSizer,
} from 'nr1';
import NrqlQueryError from '../../src/nrql-query-error';
import { baseLabelStyles } from '../../src/theme';
import { getUniqueAggregatesAndFacets } from '../../src/utils/nrql-validation-helper';
import Colors from '../../src/colors';

const BOUNDS = {
  X: 400,
  Y: 400,
};

const LABEL_SIZE = 24;
const LABEL_PADDING = 10;
const CHART_WIDTH = BOUNDS.X;
const CHART_HEIGHT = BOUNDS.Y - LABEL_SIZE - LABEL_PADDING;

export default class CircularProgressBar 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 = {
    /**
     * 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,
      })
    ),

    /**
     * Configuration that determines what values to display as critical or
     * successful.
     */
    thresholds: PropTypes.shape({
      criticalThreshold: PropTypes.number,
      highValuesAreSuccess: PropTypes.bool,
    }),
  };

  /**
   * Restructure the data for a aggregate NRQL query with no TIMESERIES and no
   * FACET into a for our visualization works well with.
   */
  transformData = (data) => {
    const {
      data: [series],
      metadata: { color: colorFromData, name: label },
    } = data[0];

    const percent = series.y * 100;
    const color = this.getColor(percent, colorFromData);

    return {
      percent,
      label,
      series: [
        { x: 'progress', y: percent, color },
        { x: 'remainder', y: 100 - percent, color: 'transparent' },
      ],
    };
  };

  nrqlInputIsValid = (data) => {
    const { data: seriesEntries } = data[0];
    const { uniqueAggregates, uniqueFacets } = getUniqueAggregatesAndFacets(
      data
    );
    const isNonTimeseries = seriesEntries.length === 1;

    return (
      uniqueAggregates.size === 1 && uniqueFacets.size === 0 && isNonTimeseries
    );
  };

  getColor = (value, colorFromData) => {
    const { red6: red, green6: green } = Colors.base;
    const {
      thresholds: { criticalThreshold, highValuesAreSuccess },
    } = this.props;

    const threshold = parseFloat(criticalThreshold);

    if (isNaN(threshold)) {
      return colorFromData;
    }

    if (highValuesAreSuccess) {
      return value > threshold ? green : red;
    }

    return value < threshold ? green : red;
  };

  render() {
    const { nrqlQueries, colors } = this.props;
    const colorScale = Array.from(colors, (x) => x.segmentColor);

    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 (
                  <NrqlQueryError
                    title="NRQL Syntax Error"
                    description={error.message}
                  />
                );
              }

              if (!this.nrqlInputIsValid(data)) {
                return (
                  <NrqlQueryError
                    title="Unsupported NRQL query"
                    description="The provided NRQL query is not supported by this visualization. Please make sure to have exactly 1 aggregate function in the SELECT clause and no FACET or TIMESERIES clauses."
                  />
                );
              }

              const { percent, label, series } = this.transformData(data);

              return (
                <svg
                  viewBox={`0 0 ${BOUNDS.X} ${BOUNDS.Y}`}
                  width={width}
                  height={height}
                  className="CircularProgressBar"
                >
                  <VictoryPie
                    standalone={false}
                    animate={{ duration: 1000 }}
                    data={series}
                    width={CHART_WIDTH}
                    height={CHART_HEIGHT}
                    padding={10}
                    innerRadius={135}
                    cornerRadius={25}
                    labels={() => null}
                    colorScale={colorScale}
                  />
                  <VictoryAnimation duration={1000} data={percent}>
                    {(percent) => (
                      <VictoryLabel
                        textAnchor="middle"
                        verticalAnchor="middle"
                        x={CHART_WIDTH / 2}
                        y={CHART_HEIGHT / 2}
                        text={`${Math.round(percent)}%`}
                        style={{ ...baseLabelStyles, fontSize: 45 }}
                      />
                    )}
                  </VictoryAnimation>
                  <VictoryLabel
                    text={label}
                    lineHeight={1}
                    x={CHART_WIDTH / 2}
                    y={BOUNDS.Y - LABEL_SIZE}
                    textAnchor="middle"
                    style={{ ...baseLabelStyles, fontSize: LABEL_SIZE }}
                  />
                </svg>
              );
            }}
          </NrqlQuery>
        )}
      </AutoSizer>
    );
  }
}

const EmptyState = () => (
  <Card className="EmptyState">
    <CardBody className="EmptyState-cardBody">
      <HeadingText
        spacingType={[HeadingText.SPACING_TYPE.LARGE]}
        type={HeadingText.TYPE.HEADING_3}
      >
        Please provide a NRQL query & account ID pair
      </HeadingText>
      <HeadingText
        spacingType={[HeadingText.SPACING_TYPE.MEDIUM]}
        type={HeadingText.TYPE.HEADING_4}
      >
        This Visualization supports NRQL queries with a single SELECT clause
        returning a percentage value (0 to 100 rather than 0 to 1). For example:
      </HeadingText>
      <code>
        {'FROM Transaction SELECT percentage(count(*), WHERE duration < 0.1)'}
      </code>
    </CardBody>
  </Card>
);

index.js

Primeiro, você criou uma nova constante, chamada colorScale, que é uma matriz dos valores segmentColor de this.props.colors. Em seguida, você define a propriedade colorScale do componente VictoryPie . Por fim, você removeu VictoryPie.style porque as cores agora são controladas por colorScale.

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

bash

$nr1 nerdpack:serve

Quando o servidor estiver em execução, encontre o URL do seu circular-progress-bar local:

bash

Visualizations:
 ⁎  circular-progress-bar https://one.nr/04ERPALBYjW
 ⁎  range-chart https://one.nr/0oqQaxezJj1
 ⁎  stacked-bar-chart https://one.nr/0PLRElq3bwa

Abra sua visualização veiculada localmente e configure seu gráfico com sua conta, consulta de dados e cores de segmento.

Dica

Para adicionar uma segunda cor, clique no + no canto superior direito da propriedade Colors .

Como existem dois segmentos, você adiciona duas cores. A primeira cor é para a seção de progresso. A segunda cor é para a porcentagem restante.

Em index.js, remova a propriedade cornerRadius do componente VictoryPie :

import React from 'react';
import PropTypes from 'prop-types';
import { VictoryPie, VictoryAnimation, VictoryLabel } from 'victory';
import {
  Card,
  CardBody,
  HeadingText,
  NrqlQuery,
  Spinner,
  AutoSizer,
} from 'nr1';
import NrqlQueryError from '../../src/nrql-query-error';
import { baseLabelStyles } from '../../src/theme';
import { getUniqueAggregatesAndFacets } from '../../src/utils/nrql-validation-helper';
import Colors from '../../src/colors';

const BOUNDS = {
  X: 400,
  Y: 400,
};

const LABEL_SIZE = 24;
const LABEL_PADDING = 10;
const CHART_WIDTH = BOUNDS.X;
const CHART_HEIGHT = BOUNDS.Y - LABEL_SIZE - LABEL_PADDING;

export default class CircularProgressBar 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 = {
    /**
     * 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,
      })
    ),

    /**
     * Configuration that determines what values to display as critical or
     * successful.
     */
    thresholds: PropTypes.shape({
      criticalThreshold: PropTypes.number,
      highValuesAreSuccess: PropTypes.bool,
    }),
  };

  /**
   * Restructure the data for a aggregate NRQL query with no TIMESERIES and no
   * FACET into a for our visualization works well with.
   */
  transformData = (data) => {
    const {
      data: [series],
      metadata: { color: colorFromData, name: label },
    } = data[0];

    const percent = series.y * 100;
    const color = this.getColor(percent, colorFromData);

    return {
      percent,
      label,
      series: [
        { x: 'progress', y: percent, color },
        { x: 'remainder', y: 100 - percent, color: 'transparent' },
      ],
    };
  };

  nrqlInputIsValid = (data) => {
    const { data: seriesEntries } = data[0];
    const { uniqueAggregates, uniqueFacets } = getUniqueAggregatesAndFacets(
      data
    );
    const isNonTimeseries = seriesEntries.length === 1;

    return (
      uniqueAggregates.size === 1 && uniqueFacets.size === 0 && isNonTimeseries
    );
  };

  getColor = (value, colorFromData) => {
    const { red6: red, green6: green } = Colors.base;
    const {
      thresholds: { criticalThreshold, highValuesAreSuccess },
    } = this.props;

    const threshold = parseFloat(criticalThreshold);

    if (isNaN(threshold)) {
      return colorFromData;
    }

    if (highValuesAreSuccess) {
      return value > threshold ? green : red;
    }

    return value < threshold ? green : red;
  };

  render() {
    const { nrqlQueries, colors } = this.props;
    const colorScale = Array.from(colors, (x) => x.segmentColor);

    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 (
                  <NrqlQueryError
                    title="NRQL Syntax Error"
                    description={error.message}
                  />
                );
              }

              if (!this.nrqlInputIsValid(data)) {
                return (
                  <NrqlQueryError
                    title="Unsupported NRQL query"
                    description="The provided NRQL query is not supported by this visualization. Please make sure to have exactly 1 aggregate function in the SELECT clause and no FACET or TIMESERIES clauses."
                  />
                );
              }

              const { percent, label, series } = this.transformData(data);

              return (
                <svg
                  viewBox={`0 0 ${BOUNDS.X} ${BOUNDS.Y}`}
                  width={width}
                  height={height}
                  className="CircularProgressBar"
                >
                  <VictoryPie
                    standalone={false}
                    animate={{ duration: 1000 }}
                    data={series}
                    width={CHART_WIDTH}
                    height={CHART_HEIGHT}
                    padding={10}
                    innerRadius={135}
                    labels={() => null}
                    colorScale={colorScale}
                  />
                  <VictoryAnimation duration={1000} data={percent}>
                    {(percent) => (
                      <VictoryLabel
                        textAnchor="middle"
                        verticalAnchor="middle"
                        x={CHART_WIDTH / 2}
                        y={CHART_HEIGHT / 2}
                        text={`${Math.round(percent)}%`}
                        style={{ ...baseLabelStyles, fontSize: 45 }}
                      />
                    )}
                  </VictoryAnimation>
                  <VictoryLabel
                    text={label}
                    lineHeight={1}
                    x={CHART_WIDTH / 2}
                    y={BOUNDS.Y - LABEL_SIZE}
                    textAnchor="middle"
                    style={{ ...baseLabelStyles, fontSize: LABEL_SIZE }}
                  />
                </svg>
              );
            }}
          </NrqlQuery>
        )}
      </AutoSizer>
    );
  }
}

const EmptyState = () => (
  <Card className="EmptyState">
    <CardBody className="EmptyState-cardBody">
      <HeadingText
        spacingType={[HeadingText.SPACING_TYPE.LARGE]}
        type={HeadingText.TYPE.HEADING_3}
      >
        Please provide a NRQL query & account ID pair
      </HeadingText>
      <HeadingText
        spacingType={[HeadingText.SPACING_TYPE.MEDIUM]}
        type={HeadingText.TYPE.HEADING_4}
      >
        This Visualization supports NRQL queries with a single SELECT clause
        returning a percentage value (0 to 100 rather than 0 to 1). For example:
      </HeadingText>
      <code>
        {'FROM Transaction SELECT percentage(count(*), WHERE duration < 0.1)'}
      </code>
    </CardBody>
  </Card>
);

index.js

Isso reverterá os cantos da barra para os 90 graus padrão, em vez de serem arredondados. Enquanto seu servidor local está em execução, ele reconhece automaticamente as alterações em index.js. Portanto, visualize sua visualização em seu navegador para ver a atualização.

Perfeito! Você clonou e atualizou a visualização da Circular progress bar do código aberto do catálogo de Instant Observability. A única coisa que resta a fazer é publicar sua versão no catálogo para que suas contas possam assiná-la.

Agora que você está pronto para publicar seu Nerdpack, interrompa seu servidor local com CTRL+C.

Adicione uma visualização personalizada a um dashboard

Publique sua versão do Victory charts Nerdpack no catálogo. Em seguida, assine-o e use sua visualização em um dashboard.

Dica

Como você usou nr1 clone para clonar o repositório do Nerdpack, sua cópia local já possui seu próprio UUID. Este é um pré-requisito para publicar sua versão no catálogo de Instant Observability. Se você usou git clone para copiar, será necessário atualizar o UUID do Nerdpack manualmente:

bash

$nr1 nerdpack:uuid -gf
The new generated id is ab123c45-678d-9012-efg3-45hi6jkl7890

No diretório raiz, publique seu Nerdpack:

bash

$nr1 nerdpack:publish

Assine seu Nerdpack:

bash

$nr1 nerdpack:subscribe

Aqui, você assinou seu Nerdpack com a CLI. Esta é efetivamente a mesma ação que você executou anteriormente neste guia na interface da web, mas a partir do seu terminal.

Vá para a visualização de Apps no New Relic.

Em Apps, abra Custom visualizations.

A partir daqui, clique na visualização da Circular progress bar . Atualize as opções de configuração da sua visualização como você fez quando estava servindo seu Nerdpack localmente.

Clique em Add to dashboard.

Vá para o seu dashboard e veja sua nova barra de progresso circular personalizada.

Resumo

Neste guia, você:

Inscreveu-se em um Nerdpack do catálogo de Instant Observability.
Clonou um Nerdpack de código aberto.
Editou uma visualização existente para atender às suas necessidades.
Publicado e assinado em seu próprio Nerdpack personalizado.
Adicionada uma visualização do seu Nerdpack personalizado a um dashboard.

Agora que você sabe como construir a base dos Nerdpacks de código aberto, pode usar o trabalho da comunidade de desenvolvedores da New Relic para acelerar a criação de aplicativos e visualizações.

Dica

Se você quiser manter sua própria versão em um repositório remoto, considere bifurcar o repositório original.

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

Personalize Nerdpacks de código aberto

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

Veja um Nerdpack

Dica

Clonar um Nerdpack

Personalize um Nerdpack

Dica

Adicione uma visualização personalizada a um dashboard

Dica

Resumo

Dica

Antes de você começar