Ajouter un sélecteur d'intervalle de temps

Ce guide vous guide tout au long du processus d'ajout d'accès à notre sélecteur d'intervalle de temps dans l'exemple d'application d'aperçu des transactions.

L'exemple d'application fournit un aperçu des données télémétriques montrant les transactions de votre compte par application, le temps de réponse moyen, les codes de réponse HTTP et les erreurs de transaction. Lorsque vous activez le sélecteur d'intervalle de temps, l'utilisateur peut spécifier la plage horaire des données à afficher.

Nous avons également une vidéo de 12 minutes qui couvre les étapes ci-dessous.

Avant de commencer

Pour développer des projets, vous avez besoin de notre CLI (interface de ligne de commande) New Relic One. Si vous ne l'avez pas encore installé, procédez comme suit :

Installez Node.js.
Suivez les étapes 1 à 4 du démarrage rapide de la CLI. À l’étape 1, assurez-vous de faire une copie du numéro précédant le nom de votre compte. Il s'agit de votre identifiant de compte et vous en aurez besoin plus tard.

Important

Si vous avez déjà installé la CLI New Relic One, mais que vous ne vous souvenez pas de votre identifiant de compte, redémarrez le démarrage rapide de la CLI , puis cliquez sur la flèche vers le bas Get your API key . L'ID de compte est le numéro qui précède le nom de votre compte.

Pour plus de détails, voir Configurer votre environnement de développement.

Préparez l'exemple de code du sélecteur d'intervalle de temps

Pour commencer, procédez comme suit pour mettre à jour l'UUID (ID unique) de l'application et exécuter l'exemple d'application localement :

Si vous ne l'avez pas déjà fait, clonez les exemples d'applications à partir de notre référentiel GitHub pratique.

bash

$git clone https://github.com/newrelic/nr1-how-to.git

Passer au répertoire nr1-howto-add-time-picker-nerdlet:

bash

$cd nr1-how-to/add-time-picker/nerdlets/nr1-howto-add-time-picker-nerdlet

Dans votre éditeur de texte préféré, ouvrez index.js.

Remplacez YOUR_ACCOUNT_ID par votre identifiant de compte :

Important

Votre ID de compte est disponible dans le démarrage rapide de la CLI (voir Avant de commencer).

this.accountId = <ADD YOUR ACCOUNT ID>;

Accédez au répertoire add-time-picker :

bash

$cd /nr1-how-to/add-time-picker

Exécutez ces commandes pour mettre à jour l’UUID et diffuser l’exemple d’application :

bash

$nr1 update
$nr1 nerdpack:uuid -gf
$nr1 nerdpack:serve

Une fois l'exemple d'application diffusé avec succès, accédez à la version locale de New Relic (https://one.newrelic.com/?nerdpacks=local), cliquez sur Apps, puis sur Add Time Picker.

Après avoir lancé l'application Add Time Picker , vous voyez un dashboard qui donne un aperçu des transactions de votre compte New Relic.

Par défaut, l'application affiche vos données des 60 dernières minutes. Si vous basculez le sélecteur d'intervalle de temps, les graphiques ne sont pas mis à jour car l'application d'aperçu des transactions n'est pas connectée à la plateforme New Relic. Il n'a pas accès aux données du sélecteur d'intervalle de temps.

Dans les sections suivantes, vous ajouterez le sélecteur d'intervalle de temps à l'exemple d'application et ajouterez l'heure à la requête.

Importer le `PlatformStateContext`

La première étape de l'ajout du sélecteur d'intervalle de temps consiste à importer le composant PlatformStateContext .

Important

Si vous avez besoin de plus de détails sur l'exemple PlatformStateContext qui suit, consultez la page API et composants.

Voici ce que fait le composant PlatformStateContext :

Encapsule tout le code dans l'instruction de retour de la méthode de rendu.
Effectue un appel de fonction en transmettant l'état de la plateforme New Relic.
Renvoie tout le code de notre instruction de retour actuelle.

Procédez comme suit :

Dans un éditeur de texte, ouvrez /add-time-picker/nerdlets/nr1-howto-add-time-picker-nerdlet/index.js.

Ajoutez le composant PlatformStateContext à la fin de l’instruction d’importation pour qu’elle ressemble à ceci :

import {
  Grid,
  GridItem,
  HeadingText,
  AreaChart,
  TableChart,
  PieChart,
  PlatformStateContext,
} from 'nr1';

Juste en dessous du return actuel, insérez ce code pour le composant PlatformStateContext :

<PlatformStateContext.Consumer>
    {(platformState) => {
return (
// ADD THE CURRENT RETURN CODE HERE
)
}}
</PlatformStateContext.Consumer>

Déplacez le code d'application actuel afin qu'il se trouve sous le return de l'appel de fonction platformState . L'instruction return devrait maintenant ressembler à ceci :

return (
  <PlatformStateContext.Consumer>
    {(platformState) => {
      return (
        <>
          <Grid
            className="primary-grid"
            spacingType={[Grid.SPACING_TYPE.NONE, Grid.SPACING_TYPE.NONE]}
          >
            <GridItem className="primary-content-container" columnSpan={6}>
              <main className="primary-content full-height">
                <HeadingText
                  spacingType={[HeadingText.SPACING_TYPE.MEDIUM]}
                  type={HeadingText.TYPE.HEADING_4}
                >
                  Transaction Overview
                </HeadingText>
                <TableChart
                  fullWidth
                  accountId={this.accountId}
                  query={trxOverview}
                />
              </main>
            </GridItem>
            <GridItem className="primary-content-container" columnSpan={6}>
              <main className="primary-content full-height">
                <HeadingText
                  spacingType={[HeadingText.SPACING_TYPE.MEDIUM]}
                  type={HeadingText.TYPE.HEADING_4}
                >
                  Average Response Time
                </HeadingText>
                <AreaChart
                  fullWidth
                  accountId={this.accountId}
                  query={avgResTime}
                />
              </main>
            </GridItem>
            <GridItem className="primary-content-container" columnSpan={6}>
              <main className="primary-content full-height">
                <HeadingText
                  spacingType={[HeadingText.SPACING_TYPE.MEDIUM]}
                  type={HeadingText.TYPE.HEADING_4}
                >
                  Response Code
                </HeadingText>
                <PieChart
                  fullWidth
                  accountId={this.accountId}
                  query={responseCodes}
                />
              </main>
            </GridItem>
            <GridItem className="primary-content-container" columnSpan={6}>
              <main className="primary-content full-height">
                <HeadingText
                  spacingType={[HeadingText.SPACING_TYPE.MEDIUM]}
                  type={HeadingText.TYPE.HEADING_4}
                >
                  Transaction Errors
                </HeadingText>
                <PieChart
                  fullWidth
                  accountId={this.accountId}
                  query={errCount}
                />
              </main>
            </GridItem>
          </Grid>
        </>
      );
    }}
  </PlatformStateContext.Consumer>
);

Ajoutez une instruction console.log pour vous assurer que vous voyez les données appropriées. Insérez le code suivant dans l'instruction de retour PlatformState juste avant la tag d'ouverture du composant <Grid> :

/* Taking a peek at the PlatformState */
console.log(platformState);

Une fois ces étapes terminées, la console de votre navigateur affiche le log.

Ajoutez l'heure à la requête

Dans votre console, vous devriez voir certaines données de l’état de la plateforme New Relic. Vous êtes maintenant prêt à ajouter timeRange données pour mettre à jour les graphiques dans l’application de présentation des transactions.

Cette étape nécessite d’importer la méthode utilitaire timeRangeToNrql à partir de la bibliothèque de la communauté d’applications New Relic.

Important

Vous pouvez obtenir plus de détails sur la bibliothèque communautaire d'applications New Relic à partir de notre référentiel GitHub (repository).

Cette méthode d'assistance prend vos données de durée PlatformState.timeRange , les formate à partir de millisecondes et renvoie une instruction SINCE formatée à ajouter à votre NRQL.

Importez la méthode timeRangeToNrql en insérant cette ligne de code sous les autres sections import :

Important

Vous n’avez pas besoin d’inclure le AccountDropdown de l’exemple d’importation de la communauté.

import { timeRangeToNrql } from '@newrelic/nr1-community';

Transmettez le platformState à l'assistant timeRangeToNrql et enregistrez sa sortie sous forme d'instruction since pour une utilisation ultérieure :

const since = timeRangeToNrql(platformState);

Après avoir créé la variable since , parcourez le code de l'instruction de retour PlatformStateContext et concaténez la variable since dans chacune des requêtes de composants de graphique existantes. Voici un exemple TableChart :

<TableChart fullWidth accountId={this.accountId} query={trxOverview + since} />;

Après avoir mis à jour tous les composants du graphique, vérifiez que le fichier index.js final ressemble à ceci :

Important

Cet exemple de code complété se trouve dans votre nerdlet final.js.

import React from 'react';
import {
  PlatformStateContext,
  Grid,
  GridItem,
  HeadingText,
  AreaChart,
  TableChart,
  PieChart,
} from 'nr1';
import { timeRangeToNrql } from '@newrelic/nr1-community';

export default class Nr1HowtoAddTimePicker extends React.Component {
  constructor(props) {
    super(props);
    this.accountId = 1;
  }
  render() {
    const avgResTime = `SELECT average(duration) FROM Transaction FACET appName TIMESERIES AUTO `;
    const trxOverview = `FROM Transaction SELECT count(*) as 'Transactions', apdex(duration) as 'apdex', percentile(duration, 99, 95) FACET appName `;
    const errCount = `FROM TransactionError SELECT count(*) as 'Transaction Errors' FACET error.message `;
    const responseCodes = `SELECT count(*) as 'Response Code' FROM Transaction FACET httpResponseCode `;

    return (
      <PlatformStateContext.Consumer>
        {(platformState) => {
          /* Taking a peek at the platformState */
          console.log(platformState);

          const since = timeRangeToNrql(platformState);
          console.log(since);

          return (
            <>
              <Grid
                className="primary-grid"
                spacingType={[Grid.SPACING_TYPE.NONE, Grid.SPACING_TYPE.NONE]}
              >
                <GridItem className="primary-content-container" columnSpan={6}>
                  <main className="primary-content full-height">
                    <HeadingText
                      spacingType={[HeadingText.SPACING_TYPE.MEDIUM]}
                      type={HeadingText.TYPE.HEADING_4}
                    >
                      Transaction Overview
                    </HeadingText>
                    <TableChart
                      fullWidth
                      accountId={this.accountId}
                      query={trxOverview + since}
                    />
                  </main>
                </GridItem>
                <GridItem className="primary-content-container" columnSpan={6}>
                  <main className="primary-content full-height">
                    <HeadingText
                      spacingType={[HeadingText.SPACING_TYPE.MEDIUM]}
                      type={HeadingText.TYPE.HEADING_4}
                    >
                      Average Response Time
                    </HeadingText>
                    <AreaChart
                      fullWidth
                      accountId={this.accountId}
                      query={avgResTime + since}
                    />
                  </main>
                </GridItem>
                <GridItem className="primary-content-container" columnSpan={6}>
                  <main className="primary-content full-height">
                    <HeadingText
                      spacingType={[HeadingText.SPACING_TYPE.MEDIUM]}
                      type={HeadingText.TYPE.HEADING_4}
                    >
                      Response Code
                    </HeadingText>
                    <PieChart
                      fullWidth
                      accountId={this.accountId}
                      query={responseCodes + since}
                    />
                  </main>
                </GridItem>
                <GridItem className="primary-content-container" columnSpan={6}>
                  <main className="primary-content full-height">
                    <HeadingText
                      spacingType={[HeadingText.SPACING_TYPE.MEDIUM]}
                      type={HeadingText.TYPE.HEADING_4}
                    >
                      Transaction Errors
                    </HeadingText>
                    <PieChart
                      fullWidth
                      accountId={this.accountId}
                      query={errCount + since}
                    />
                  </main>
                </GridItem>
              </Grid>
            </>
          );
        }}
      </PlatformStateContext.Consumer>
    );
  }
}

Résumé

Une fois toutes les étapes de cet exemple terminées, vous avez implémenté avec succès le sélecteur d'intervalle de temps dans votre application en important le composant PlatformStateContext et en accédant à son objet de données timePicker .

Cette traduction automatique est fournie pour votre commodité.

Ajouter un sélecteur d'intervalle de temps

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

Important

Préparez l'exemple de code du sélecteur d'intervalle de temps

Important

Importer le PlatformStateContext

Important

Ajoutez l'heure à la requête

Important

Important

Important

Résumé

Avant de commencer

Importer le `PlatformStateContext`