Personnaliser les Nerdpacks open source

La plupart des Nerdpacks du catalogue Instant Observability sont open source. Cela signifie que vous pouvez cloner ou forker leur référentiel, les personnaliser en fonction de vos besoins spécifiques et les republier pour les utiliser avec votre compte. Dans ce guide, vous personnalisez un Nerdpack avec des visualisations et le publiez sur votre compte. Cependant, pour personnaliser n'importe quel Nerdpack, vous suivez les mêmes étapes.

Avant de commencer

Si vous ne l'avez pas déjà fait :

Inscrivez-vous pour un compte New Relic
Installer Node.js
Effectuez les quatre premières étapes du démarrage rapidenr1 pour installer et configurer la CLI

Voir un Nerdpack

Abonnez-vous au Nerdpack Victory Charts Visualizations et ouvrez la visualisation Circular progress bar dans New Relic.

Accédez à one.newrelic.com > All capabilities > Apps.

Cliquez sur le Nerdpack Victory Charts Visualizations dans le catalogue.

Ajoutez des Victory Charts Visualizations à votre compte.

Accédez à one.newrelic.com > All capabilities > Apps, ouvrez Custom visualizations.

Dans la liste des visualisations dans Custom visualizations, cliquez sur Circular progress bar, que vous avez installée dans le cadre du Nerdpack Victory Charts Visualizations .

Sous Configure visualization properties, sélectionnez votre compte et entrez une requête NRQL.

Vous voyez maintenant un graphique circulaire qui affiche un pourcentage basé sur votre requête.

Conseil

Lisez notre documentation pour obtenir des instructions sur la façon de configurer la visualisation de la barre de progression.

Notez quelques éléments à propos de cette visualisation :

Vous ne contrôlez pas la couleur du graphique
Les sections du graphique ont des bords arrondis
Pour les besoins de ce tutoriel, imaginez que ce graphique représente vos données exactement comme vous le souhaitez, à deux exceptions près. Vous souhaitez utiliser des bords droits et contrôler les couleurs du graphique manuellement. Dans le monde réel, vous pouvez rencontrer des Nerdpacks comme celui-ci où vous aimez ce qu'ils offrent, mais vous les aimeriez encore plus si vous pouviez les peaufiner. Eh bien, vous pouvez les modifier, et ensuite, vous apprendrez comment !

Étant donné que vous allez utiliser une version modifiée du Victory Charts Visualizations Nerdpack au lieu de celle à laquelle vous vous êtes abonné, vous pouvez vous désabonner de notre version maintenant.

Cloner un Nerdpack

Recherchez le référentiel de code source à partir de l'entrée de catalogue de Nerdpack et clonez-le sur votre machine locale.

Dans l'interface utilisateur, accédez à + Integrations & Agents.

Cliquez sur le Nerdpack Victory Charts Visualizations dans le catalogue.

Accédez au référentiel de code source de Nerdpack.

Tous les Nerdpacks open source du catalogue ont des liens vers leur code source dans les informations de leur catalogue.

Cloner le référentiel :

bash

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

Vous disposez désormais d'une version locale du Nerdpack Victory Charts Visualizations ! Notez que vous avez utilisé nr1 nerdpack:clone au lieu de git clone pour copier le référentiel. nr1 nerdpack:clone offre des fonctionnalités intégrées pour vous aider à garder votre copie locale distincte du Nerdpack d'origine dans le catalogue public Instant Observability. Plus précisément, il génère un nouvel UUID Nerdpack afin que vous n'ayez pas à le faire vous-même :

bash

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

Si vous passez au répertoire nr1-victory-visualizations et regardez le log git, vous verrez le nouveau 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"
 }

Dans nr1-victory-visualizations/nr1.json, changez displayName de votre 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

Désormais, lorsque vous diffusez ou publiez votre Nerdpack personnalisé, vous pouvez facilement le distinguer de l'original.

Personnaliser un Nerdpack

Ajustez la visualisation Circular progress bar pour utiliser des bords droits et des couleurs personnalisables.

La Circular progress bar affiche un VictoryPie avec certains champs prédéfinis. Les champs que vous modifierez sont :

Dans votre Nerdpack local, ouvrez nr1-victory-visualizations/visualizations/circular-progress-bar/nr1.json.

nr1.json est le fichier de métadonnées de la visualisation de Circular progress bar . Utilisez ce fichier pour ajouter une option colorScale configurable, qui correspond au champ colorScale sur VictoryPie.

Ajoutez un collection sur string champs pour personnaliser les couleurs de votre graphique :

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

Le champ VictoryPie que vous utiliserez avec cette mise à jour s'appelle colorScale. Il accepte un éventail de couleurs et applique chaque couleur à un segment de la barre de progression. Ainsi, dans les options de configuration de votre visualisation, vous avez spécifié une collection de chaînes que vous utilisez pour transmettre des couleurs à votre graphique.

Dans le même répertoire de visualisation, ouvrez index.js.

Dans render(), définissez la propriété colorScale du composant 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

Tout d’abord, vous avez créé une nouvelle constante, appelée colorScale, qui est un éventail des valeurs segmentColor de this.props.colors. Ensuite, vous définissez la propriété colorScale du composant VictoryPie . Finalement, vous avez supprimé VictoryPie.style car les couleurs sont désormais contrôlées par colorScale.

Depuis le répertoire racine de votre Nerdpack, exécutez un serveur local :

bash

$nr1 nerdpack:serve

Une fois le serveur en cours d'exécution, recherchez l'URL de votre 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

Ouvrez votre visualisation servie localement et configurez votre graphique avec votre compte, votre requête de données et vos couleurs de segment.

Conseil

Pour ajouter une deuxième couleur, cliquez sur le + en haut à droite de la propriété Colors .

Parce qu'il y a deux segments, vous ajoutez deux couleurs. La première couleur est pour la section de progression. La deuxième couleur correspond au pourcentage restant.

Dans index.js, supprimez la propriété cornerRadius du composant 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

Cela ramènera les coins de la barre aux 90 degrés par défaut au lieu d'être arrondis. Pendant que votre serveur local est en cours d'exécution, il reconnaît automatiquement les modifications apportées à index.js. Alors, visualisez votre visualisation dans votre navigateur pour voir la mise à jour.

Parfait! Vous avez cloné et mis à jour la visualisation de la Circular progress bar open source à partir du catalogue Instant Observability. Il ne reste plus qu'à publier votre version dans le catalogue afin que vos comptes puissent s'y abonner.

Maintenant que vous êtes prêt à publier votre Nerdpack, arrêtez votre serveur local avec CTRL+C.

Ajouter une visualisation personnalisée à un dashboard

Publiez votre version des Victory charts Nerdpack dans le catalogue. Ensuite, abonnez-vous et utilisez votre visualisation dans un dashboard.

Conseil

Étant donné que vous avez utilisé nr1 clone pour cloner le référentiel Nerdpack, votre copie locale possède déjà son propre UUID. Il s’agit d’une condition préalable à la publication de votre version dans le catalogue Instant Observability. Si vous avez utilisé git clone pour copier, vous devez mettre à jour l'UUID du Nerdpack manuellement :

bash

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

Depuis son répertoire racine, publiez votre Nerdpack :

bash

$nr1 nerdpack:publish

Abonnez-vous à votre Nerdpack :

bash

$nr1 nerdpack:subscribe

Ici, vous vous êtes abonné à votre Nerdpack avec la CLI. Il s’agit en fait de la même action que vous avez effectuée plus tôt dans ce guide dans l’interface utilisateur Web, mais à partir de votre terminal.

Accédez à la vue Apps dans New Relic.

Depuis Apps, ouvrez Custom visualizations.

À partir de là, cliquez sur la visualisation Circular progress bar . Mettez à jour les options de configuration de votre visualisation comme vous l'avez fait lorsque vous diffusiez votre Nerdpack localement.

Cliquez sur Add to dashboard.

Accédez à votre dashboard et voyez votre nouvelle barre de progression circulaire personnalisée.

Résumé

Dans ce guide, vous :

Je me suis abonné à un Nerdpack du catalogue Instant Observability.
J'ai cloné un Nerdpack open source.
Modifiez une visualisation existante pour répondre à vos besoins.
Publié et abonné à votre propre Nerdpack personnalisé.
Ajout d'une visualisation de votre Nerdpack personnalisé à un dashboard.

Maintenant que vous savez comment construire à partir des fondations des Nerdpacks open source, vous pouvez utiliser le travail de la communauté de développeurs New Relic pour accélérer la création d'applications et de visualisations.

Conseil

Si vous souhaitez maintenir votre propre version dans un référentiel distant, envisagez de forker le référentiel original (repository).

Cette traduction automatique est fournie pour votre commodité.

Personnaliser les Nerdpacks open source

Avant de commencer .css-21sua1{background:none;border:none;width:0;padding:0;}

Voir un Nerdpack

Conseil

Cloner un Nerdpack

Personnaliser un Nerdpack

Conseil

Ajouter une visualisation personnalisée à un dashboard

Conseil

Résumé

Conseil

Avant de commencer