Personaliza Nerdpacks de código abierto

La mayoría de Nerdpacks del catálogo de Instant Observability son de código abierto. Esto significa que puede clonar o bifurcar su repositorio, personalizarlos para satisfacer sus necesidades específicas y volver a publicarlos para usarlos con su cuenta. En esta guía, personalizas un Nerdpack con visualizaciones y lo publicas en tu cuenta. Sin embargo, para personalizar cualquier Nerdpack, sigues los mismos pasos.

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

Ver un Nerdpack

Suscribir al Nerdpack de Victory Charts Visualizations y abra la visualización de la Circular progress bar en New Relic.

Vaya a one.newrelic.com > All capabilities > Apps.

Haga clic en Victory Charts Visualizations Nerdpack en el catálogo.

Agregue Victory Charts Visualizations a su cuenta.

Vaya a one.newrelic.com > All capabilities > Apps y abra Custom visualizations.

En la lista de visualizaciones en Custom visualizations, haga clic en Circular progress bar, que instaló como parte del Nerdpack de Victory Charts Visualizations.

En Configure visualization properties, seleccione su cuenta e ingrese una consulta NRQL.

Ahora verá un gráfico circular que muestra un porcentaje basado en su consulta.

Sugerencia

Lea nuestra documentación para obtener instrucciones sobre cómo configurar la visualización de la barra de progreso.

Observe algunas cosas acerca de esta visualización:

No controlas el color del gráfico.
Las secciones del gráfico tienen bordes redondeados.
Por el bien de este tutorial, imagine que este gráfico representa sus datos exactamente como usted desea, excepto por dos cosas. Le gustaría emplear bordes rectos y controlar los colores del gráfico manualmente. En el mundo real, puedes encontrarte con Nerdpacks como este donde te gusta lo que ofrecen, pero te gustarían más si pudieras modificarlos. Bueno, puedes modificarlos y, a continuación, aprenderás cómo hacerlo.

Debido a que vas a emplear una versión modificada de Victory Charts Visualizations Nerdpack en lugar de aquella a la que te suscribiste, puedes cancelar la subscripción a nuestra versión ahora.

Clonar un nerdpack

Busque el repositorio de código fuente en la entrada del catálogo de Nerdpack y clónelo en su máquina local.

En la UI, vaya a + Integrations & Agents.

Haga clic en Victory Charts Visualizations Nerdpack en el catálogo.

Vaya al repositorio de código fuente de Nerdpack.

Todos los Nerdpacks de código abierto del catálogo tienen enlaces a su código fuente en la información de su catálogo.

Clonar el repositorio:

bash

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

¡Ahora tienes una versión local del Nerdpack de Victory Charts Visualizations! Observe que empleó nr1 nerdpack:clone en lugar de git clone para copiar el repositorio. nr1 nerdpack:clone ofrece una funcionalidad integrada para ayudar a mantener su copia local distinta del Nerdpack original en el catálogo público de Instant Observability. Específicamente, genera un nuevo UUID de Nerdpack para que no tengas que hacerlo tú mismo:

bash

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

Si cambia al directorio nr1-victory-visualizations y mira el log de git, verá la nueva confirmación:

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

En nr1-victory-visualizations/nr1.json, cambia displayName de tu 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

Ahora, cuando publiques o publiques tu Nerdpack personalizado, podrás distinguirlo fácilmente del original.

Personaliza un Nerdpack

Modifique la visualización de la Circular progress bar para usar bordes rectos y colores personalizables.

La Circular progress bar muestra un VictoryPie con algunos campos predefinidos. Los campos que modificarás son:

En tu Nerdpack local, abre nr1-victory-visualizations/visualizations/circular-progress-bar/nr1.json.

nr1.json es el archivo de metadatos de la visualización de la barra de progreso circular . Emplee este archivo para agregar una opción colorScale configurable, que corresponde al campo colorScale en VictoryPie.

Agregue collection de string campos para personalizar los colores de su 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

El campo VictoryPie que usará con esta actualización se llama colorScale. Acepta una matriz de colores y aplica cada color a un segmento de la barra de progreso. Entonces, en las opciones de configuración de su visualización, especificó una colección de cadenas que usa para pasar colores a su gráfico.

En el mismo directorio de visualización, abra index.js.

En render(), configure la propiedad colorScale del 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

Primero, creó una nueva constante, llamada colorScale, que es una matriz de los valores segmentColor de this.props.colors. Luego, configura la propiedad colorScale del componente VictoryPie . Finalmente, eliminaste VictoryPie.style porque los colores ahora están controlados por colorScale.

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

bash

$nr1 nerdpack:serve

Una vez que el servidor se esté ejecutando, busque la URL de su 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 su visualización servida localmente y configure su gráfico con su cuenta, consulta de datos y colores de segmento.

Sugerencia

Para agregar un segundo color, haga clic en + en la parte superior derecha de la propiedad Colors .

Como hay dos segmentos, agregas dos colores. El primer color es para la sección de progreso. El segundo color es para el porcentaje restante.

En index.js, elimine la propiedad cornerRadius del 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

Esto revertirá las esquinas de la barra a los 90 grados predeterminados en lugar de redondearlas. Mientras su servidor local se está ejecutando, reconoce automáticamente los cambios en index.js. Entonces, vea su visualización en su browser para ver la actualización.

¡Perfecto! Clonaste y actualizaste la visualización de la Circular progress bar de código abierto del catálogo de Instant Observability. Lo único que queda por hacer es publicar tu versión en el catálogo para que tus cuentas puedan suscribir.

Ahora que estás listo para publicar tu Nerdpack, detén tu servidor local con CTRL+C.

Agregar una visualización personalizada a un dashboard

Publica tu versión de Victory charts Nerdpack en el catálogo. Luego suscribir y use su visualización en un dashboard.

Sugerencia

Debido a que usaste nr1 clone para clonar el repositorio de Nerdpack, tu copia local ya tiene su propio UUID. Este es un requisito previo para publicar su versión en el catálogo de Instant Observability. Si usaste git clone para copiar, necesitas actualizar el UUID del Nerdpack manualmente:

bash

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

Desde su directorio raíz, publica tu Nerdpack:

bash

$nr1 nerdpack:publish

Suscríbete a tu Nerdpack:

bash

$nr1 nerdpack:subscribe

Aquí, te suscribiste a tu Nerdpack con la CLI. Esta es efectivamente la misma acción que realizó anteriormente en esta guía dentro de la UI sitio web, pero desde su terminal.

Vaya a la vista de Apps en New Relic.

Desde Apps, abra Custom visualizations.

Desde aquí, haga clic en la visualización de la Circular progress bar . Actualice las opciones de configuración de su visualización como lo hizo cuando servía su Nerdpack localmente.

Haga clic en Add to dashboard.

Vaya a su dashboard y vea su nueva barra de progreso circular personalizada.

Resumen

En esta guía, usted:

Suscrito a un Nerdpack del catálogo de Instant Observability.
Cloné un Nerdpack de código abierto.
Editó una visualización existente para satisfacer sus necesidades.
Publicado y suscrito a tu propio Nerdpack personalizado.
Se agregó una visualización de su Nerdpack personalizado a un dashboard.

Ahora que ya sabes cómo construir sobre la base de los Nerdpacks de código abierto, puedes emplear el trabajo de la comunidad de desarrolladores de New Relic para acelerar la creación de aplicaciones y visualizaciones.

Sugerencia

Si desea mantener su propia versión en un repositorio remoto, considere bifurcar el repositorio original.

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

Personaliza Nerdpacks de código abierto

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

Ver un Nerdpack

Sugerencia

Clonar un nerdpack

Personaliza un Nerdpack

Sugerencia

Agregar una visualización personalizada a un dashboard

Sugerencia

Resumen

Sugerencia

Antes de que empieces