Votre première visualisation personnalisée

interrogez les données de n'importe quelle source et affichez-les sur votre dashboard New Relic avec des visualisations personnalisées.

Dans ce guide, vous apprendrez comment :

Utilisez la CLI nr1 pour générer une visualisation par défaut.
Exécutez votre visualisation localement où vous pouvez rapidement tester et itérer.
Publiez votre visualisation dans le catalogue d’applications New Relic.
Ajoutez votre visualisation à un dashboard.

Avant de commencer

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

Créez un compte New Relic.
Installez Node.js.
Suivez les étapes du démarrage rapidenr1 pour installer et configurer la CLI.

Créer une nouvelle visualisation

Utilisez nr1 pour générer le modèle pour une nouvelle visualisation.

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

Assurez-vous que vous travaillez avec la dernière version de la CLI New Relic :

bash

$nr1 update

Créez une visualisation, appelée my-awesome-visualization, dans un Nerdpack, appelé 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"

Conseil

Si vous recevez un RequestError pour un certificat auto-signé lorsque vous exécutez nr1 create, vous devrez peut-être ajouter un certificat à la chaîne de certificats du nœud. Pour en savoir plus sur cette configuration avancée et d'autres, consultez Activer la configuration avancée pour votre Nerdpack.

En conséquence, vous avez un nouveau répertoire visualizations/my-awesome-visualization dans my-awesome-nerdpack:

bash

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

Le répertoire de niveau supérieur visualizations contient toutes les visualisations de votre Nerdpack. La visualisation que vous avez créée s'appelle my-awesome-visualization et possède son propre répertoire. Les fichiers de ce répertoire fournissent un exemple de visualisation, un RadarChart rempli par une requête NRQL de base.

Fichiers

nr1.json fournit des métadonnées pour votre visualisation. La clé configuration dans ces métadonnées définit les champs d'entrée de propriétés à afficher dans l'interface utilisateur. Pour en savoir plus sur les options disponibles sous la touche configuration , consultez la section Configurer votre visualisation personnalisée.
index.js définit le composant React qui reçoit les accessoires définis dans nr1.json et restitue votre visualisation. Vous pouvez installer et importer n'importe quelle bibliothèque JavaScript que vous trouvez utile. Le composant d'exemple importe Recharts, une bibliothèque qui encapsule les sous-modules D3 pour des visualisations faciles à composer.
styles.scss définit les styles Sass pour votre visualisation.

Diffusez votre visualisation localement

Diffusez votre visualisation localement et affichez-la dans Apps > Custom Visualizations. Là, vous pouvez tester rapidement les modifications apportées à votre code.

Depuis le répertoire racine de votre Nerdpack, démarrez un serveur Node local :

bash

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

Pendant son exécution, votre serveur local reconnaît les modifications apportées à certains fichiers, tels que index.js et actualise automatiquement votre visualisation. Cependant, il ne reconnaît pas les modifications apportées à nr1.json ou styles.scss. Par conséquent, certaines modifications, telles que celles apportées à la définition du champ configuration dans nr1.json, ne seront pas reflétées dans votre visualisation tant que vous n'aurez pas redémarré votre serveur. Pour voir les modifications apportées à ces fichiers, arrêtez le serveur avec CTRL+C et redémarrez-le avec nr1 nerdpack:serve.

Ouvrez le lien vers votre visualisation qui s'affiche dans le terminal au démarrage du serveur Node :

bash

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

Mettez à jour les champs sous Configure visualization properties et regardez votre visualisation se mettre à jour automatiquement :

Pour ajouter davantage de ces propriétés, mettez à jour le champ configuration dans nr1.json et redémarrez votre serveur local.

La configuration de ces propriétés est une façon de mettre à jour votre visualisation. Changer votre code React en est une autre.

Dans index.js, modifiez Radar.fillOpacity de votre composant :

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

Regardez votre visualisation dans la plateforme New Relic pour voir le changement.

Vous avez maintenant vu comment faire :

Diffusez votre visualisation localement
Voir sur la plateforme New Relic
Mettre à jour la visualisation avec des propriétés configurables et des modifications de code

Une fois que vous avez développé et configuré un graphique pour afficher vos données de manière efficace, vous pouvez enregistrer cette instance du graphique, avec votre configuration et les données ou la requête, dans un dashboard. Cependant, vous ne pouvez pas le faire avec une visualisation servie localement. Vous devez d’abord publier votre visualisation.

Publiez et utilisez votre visualisation

Pour ajouter une instance de votre visualisation à un dashboard, vous devez d'abord publier votre Nerdpack.

Publiez votre Nerdpack depuis son répertoire racine :

bash

$nr1 nerdpack:publish

Recherchez un message de réussite dans votre sortie :

bash

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

Cela signifie que votre Nerdpack a été publié dans le catalogue d'applications New Relic que vous pouvez trouver sous Apps.

Abonnez-vous à votre Nerdpack :

bash

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

Vous êtes désormais abonné à votre Nerdpack et pouvez créer une instance d'une visualisation dans New Relic.

Une fois de plus, ouvrez la page Apps de New Relic:

Ici, vous n'avez pas besoin d'utiliser la chaîne de requête ?nerdpacks=local , car vous recherchez une visualisation que vous avez publiée et à laquelle vous êtes abonné, plutôt qu'une visualisation diffusée localement.

Accédez à Custom Visualizations.
Recherchez et cliquez sur votre visualisation publiée.
Vous devrez peut-être actualiser la page de votre navigateur si vous ne trouvez pas votre visualisation. Notez que cette nouvelle tuile n'a plus d'étiquette '/' Local . C'est parce que vous regardez la visualisation que vous avez publiée et à laquelle vous vous êtes abonné au cours des étapes précédentes. Si vous proposez toujours votre Nerdpack localement, vous verrez peut-être deux tuiles ici, une avec l'étiquette et une sans.
Configurez votre visualisation de la même manière que vous l’avez fait lorsqu’elle était diffusée localement.
Cliquez sur Add to dashboard. Suivez l'invite pour ajouter votre visualisation à un dashboard.
Depuis la page d’accueil, accédez à Dashboards et sélectionnez le dashboard auquel vous avez ajouté votre visualisation, puis visualisez votre visualisation dans celui-ci.

Résumé

Félicitations pour avoir créé votre première visualisation ! Dans ce guide, vous avez appris à :

Créer une visualisation
Diffusez votre visualisation localement
Itérer sur les modifications et personnalisations du code de visualisation dans Custom Visualizations
Publiez votre visualisation
Abonnez-vous à votre visualisation
Ajoutez votre visualisation à un dashboard

Ressources supplémentaires

Vidéo de conseils rapides sur New Relic : Dashboards et visualisations personnalisées (6 minutes)
Vidéo New Relic NerdBytes : Configuration de visualisations personnalisées pour les dashboards (7 minutes)
Diffusion en direct du log des modifications de New Relic : visualisations de données personnalisées sur New Relic (30 minutes)

Cette traduction automatique est fournie pour votre commodité.

Votre première visualisation personnalisée

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

Créer une nouvelle visualisation

Conseil

Diffusez votre visualisation localement

Publiez et utilisez votre visualisation

Résumé

Ressources supplémentaires

Avant de commencer