Ajoutez PlatformStateContext à votre Nerdlet

Conseil

Cette leçon fait partie d’un cours qui vous apprend à créer une application New Relic à partir de zéro. Si vous ne l’avez pas déjà fait, consultez la présentation.

Chaque leçon du cours s'appuie sur la précédente, alors assurez-vous d'avoir terminé la dernière leçon, Récupérer des données à partir d'un service tiers, avant de commencer celle-ci.

Dans ce cours, vous créez une application New Relic. Cette application affiche des données télémétriques provenant d'un service de démonstration qui exécute un test A/B afin de pouvoir révéler ces données dans des graphiques, comme un dashboard. Votre application New Relic est différente d’un dashboard, car elle fait plus que simplement afficher les données New Relic. Il extrait des données externes, fournit des composants et des fonctionnalités d'interface utilisateur et possède même ses propres petits magasins de données. L'objectif de cette application New Relic est de présenter le contexte afin que vous puissiez mieux comprendre les résultats du test A/B et comment ces résultats sont liés à vos objectifs commerciaux.

Jusqu'à présent, vous avez créé tous vos graphiques, les avez organisés pour une meilleure convivialité, leur avez fourni des données réelles, et bien plus encore. Vous pouvez apporter quelques améliorations finales à l’aide des composants de l’API de la plateforme. Dans cette leçon, vous apprendrez à utiliser les valeurs dans l’état de la plateforme New Relic.

Passage au répertoire add-plateforme-state-context/ab-test du référentiel de cours:

bash

$cd nru-programmability-course/add-platform-state-context/ab-test

Ce répertoire contient le code que nous attendons de votre application à ce stade du cours. En naviguant vers le bon répertoire au début de chaque leçon, vous laissez votre code personnalisé derrière vous, vous protégeant ainsi du transport de code incorrect d'une leçon à l'autre.

Dans nerdlets/ab-test-nerdlet/newsletter-signups.js, ajoutez un PlatformStateContext.Consumer à la méthode render() de votre composant NewsletterSignups :

import React from 'react';
import {
    HeadingText,
    LineChart,
    NrqlQuery,
    PlatformStateContext,
} from 'nr1';

const ACCOUNT_ID = 123456  // <YOUR NEW RELIC ACCOUNT ID>

export default class NewsletterSignups extends React.Component {
    render() {
        return <div>
            <HeadingText className="chartHeader">
                Newsletter subscriptions per version
            </HeadingText>
            <PlatformStateContext.Consumer>
                {
                    (platformState) => {
                        return <NrqlQuery
                            accountIds={[ACCOUNT_ID]}
                            query="SELECT count(*) FROM subscription FACET page_version SINCE 30 MINUTES AGO TIMESERIES"
                            pollInterval={60000}
                        >
                            {
                                ({ data }) => {
                                    return <LineChart data={data} fullWidth />;
                                }
                            }
                        </NrqlQuery>
                    }
                }
            </PlatformStateContext.Consumer>
        </div>
    }
}

Important

Assurez-vous de remplacer <YOUR NEW RELIC ACCOUNT ID> par votre identifiant de compte New Relic actuel.

Notez que NrqlQuery utilise une constante appelée ACCOUNT_ID. Au lieu de coder en dur un identifiant de compte dans votre Nerdlet, vous pouvez utiliser accountIds à partir de l'état de l'URL de la plateforme.

PlatformStateContext.Consumer donne accès à l'état de l'URL de la plateforme. Ce contexte contient une valeur importante que vous utiliserez dans votre application, appelée timeRange.

Notez que votre NrqlQuery utilise une clause SINCE qui identifie la période historique à partir de laquelle votre requête doit récupérer les données. À l’heure actuelle, cette clause SINCE est définie sur 30 MINUTES AGO. Avec timeRange, vous pouvez utiliser le sélecteur d'intervalle de temps de la plateforme pour rendre ce délai ajustable.

Utilisez l'état de la plateforme timeRange:

import React from 'react';
import {
    HeadingText,
    LineChart,
    NrqlQuery,
    PlatformStateContext,
} from 'nr1';

const ACCOUNT_ID = 123456  // <YOUR NEW RELIC ACCOUNT ID>

export default class NewsletterSignups extends React.Component {
    render() {
        return <div>
            <HeadingText className="chartHeader">
                Newsletter subscriptions per version
            </HeadingText>
            <PlatformStateContext.Consumer>
                {
                    (platformState) => {
                        return <NrqlQuery
                            accountIds={[ACCOUNT_ID]}
                            query="SELECT count(*) FROM subscription FACET page_version TIMESERIES"
                            timeRange={platformState.timeRange}
                            pollInterval={60000}
                        >
                            {
                                ({ data }) => {
                                    return <LineChart data={data} fullWidth />;
                                }
                            }
                        </NrqlQuery>
                    }
                }
            </PlatformStateContext.Consumer>
        </div>
    }
}

Important

Assurez-vous de remplacer <YOUR NEW RELIC ACCOUNT ID> par votre identifiant de compte New Relic actuel.

Désormais, NewsletterSignups utilise platformState.timeRange au lieu d'une clause codée en dur SINCE .

Bien que les composants NrqlQuery acceptent un accessoire timeRange pratique, ce n'est pas le cas de tous les composants. Vous pouvez toujours utiliser timeRange dans d'autres contextes en accédant duration, begin_time ou end_time:

<PlatformStateContext.Consumer>
  {(platformState) => {
    console.log(platformState.timeRange.duration);
  }}
</PlatformStateContext.Consumer>;

Accédez à la racine de votre Nerdpack à nru-programmability-course/add-platform-state-context/ab-test.

Générez un nouvel UUID pour votre Nerdpack :

bash

$nr1 nerdpack:uuid -gf

Étant donné que vous avez cloné le référentiel de cours qui contenait un Nerdpack existant, vous devez générer votre propre identifiant unique. Cet UUID mappe votre Nerdpack à votre compte New Relic. Il permet également à votre application de faire requests Nerdgraph au nom de votre compte.

Présentez votre demande localement :

bash

$nr1 nerdpack:serve

Consultez votre candidature.

Votre NrqlQuery utilise désormais l'état de la plateforme timeRange, mais votre graphique affiche probablement toujours les 30 dernières minutes. Pourquoi? D'où vient le timeRange dans l'état de la plateforme ?

Le sélecteur d'intervalle de temps se trouve sur le côté droit de la barre de navigation de votre application.

Modifiez cette valeur et voyez votre graphique se mettre à jour.

Conseil

Si quelque chose ne fonctionne pas, utilisez les outils de débogage de votre navigateur pour essayer d'identifier le problème.

Assurez-vous de :

J'ai copié correctement le code de la leçon
Générer un nouvel UUID
Remplacé toutes les instances de <YOUR NEW RELIC ACCOUNT ID> dans votre projet par votre identifiant de compteNew Relic actuel

Mise à jour VersionPageViews:

import React from 'react';
import {
    HeadingText,
    LineChart,
    NrqlQuery,
    PlatformStateContext,
} from 'nr1';

const ACCOUNT_ID = 1234567  // <YOUR NEW RELIC ACCOUNT ID>

export default class VersionPageViews extends React.Component {
    render() {
        return <div>
            <HeadingText className="chartHeader">
                Version {this.props.version.toUpperCase()} - Page views
            </HeadingText>
            <PlatformStateContext.Consumer>
                {
                    (platformState) => {
                        return <NrqlQuery
                            accountIds={[ACCOUNT_ID]}
                            query={`SELECT count(*) FROM pageView WHERE page_version = '${this.props.version}' TIMESERIES`}
                            timeRange={platformState.timeRange}
                            pollInterval={60000}
                        >
                            {
                                ({ data }) => {
                                    return <LineChart data={data} fullWidth />;
                                }
                            }
                        </NrqlQuery>
                    }
                }
            </PlatformStateContext.Consumer>
        </div>
    }
}

Important

Assurez-vous de remplacer <YOUR NEW RELIC ACCOUNT ID> par votre identifiant de compte New Relic actuel.

De tous les graphiques de votre application New Relic, ces trois graphiques sont ceux qui doivent être mis à jour avec le sélecteur d'intervalle de temps. Les autres, Total subscriptions per version, Total cancellations per version, Version A - Pages vues vs. abonnement, Version B - Pages vues vs. abonnement, affichent les valeurs totales au fil du temps. Ainsi, coder en dur leurs clauses SINCE en 7 DAYS AGO est logique, car il s'agit d'un délai raisonnable pour les besoins de ce cours.

Tout en continuant à servir votre Nerdpack localement, consultez votre application NR1 pour voir vos cartes se mettre à jour avec la plage horaire que vous choisissez.

Conseil

Si quelque chose ne fonctionne pas, utilisez les outils de débogage de votre navigateur pour essayer d'identifier le problème.

Assurez-vous de :

J'ai copié correctement le code de la leçon
Générer un nouvel UUID
Remplacé toutes les instances de <YOUR NEW RELIC ACCOUNT ID> dans votre projet par votre identifiant de compteNew Relic actuel

Une fois que vous avez terminé, arrêtez de diffuser votre application New Relic en appuyant sur CTRL+C dans la fenêtre de terminal de votre serveur local.

Maintenant que vous basez votre requête sur l’état de la plateforme, certains de vos graphiques sont dynamiques dans leurs plages de temps. Il s’agit d’une grande amélioration car elle vous permet d’ajuster vos graphiques pour afficher les données de n’importe quel moment particulier, ce qui est utile pour lier les données aux résultats de l’entreprise.

Les composants de l'API de la plateforme offrent également beaucoup plus de fonctionnalités, notamment la possibilité de diriger l'utilisateur vers un autre emplacement dans New Relic. Vous apprendrez comment faire cela dans la prochaine leçon.

Conseil

Cette leçon fait partie d’un cours qui vous apprend à créer une application New Relic à partir de zéro. Passez à la leçon suivante : ajoutez une navigation à votre nerdlet.

Cette traduction automatique est fournie pour votre commodité.

Ajoutez PlatformStateContext à votre Nerdlet

Conseil

Important

Important

Conseil

Important

Conseil

Conseil