Ajoutez la navigation à 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 dernière, alors assurez-vous d'avoir terminé la dernière leçon, Ajouter PlatformStateContext à votre nerdlet, avant de commencer celle-ci.

Dans la dernière leçon, vous avez utilisé PlatformStateContext du SDK New Relic pour rechercher la plage horaire sélectionnée par l'utilisateur à partir du sélecteur d'intervalle de temps de l'application. Vous allez maintenant découvrir un autre composant qui interagit avec la plateforme New Relic : navigation.

Le composant navigation vous permet d'ouvrir l'entité, de naviguer vers l'entité et de créer des objets Location pour l'entité à partir de votre Nerdlet. Vous pouvez également utiliser navigation pour d'autres Nerdlets et lanceurs.

Accédez au répertoire add-navigation/ab-test du référentiel de cours:

bash

$cd nru-programmability-course/add-navigation/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 newsletter-signups.js, créez une nouvelle méthode, appelée NewsletterSignups.openApmEntity():

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

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

export default class NewsletterSignups extends React.Component {
    openAPMEntity() {
        navigation.openStackedEntity(ENTITY_GUID)
    }

    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.

Cette méthode utilise navigation.openStackedEntity() pour afficher l'entité APM de votre application de démonstration dans une vue empilée. L'avis openApmEntity() nécessite votre ENTITY_GUID. Vous devez localiser cet ID et le stocker dans une constante.

Accédez à APM.

Consultez les métadonnées de votre service Newsletter .

Copiez le GUID de l'entité.

Créer une constante ENTITY_GUID :

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

const ACCOUNT_ID = 1234567  // <YOUR NEW RELIC ACCOUNT ID>
const ENTITY_GUID = "<YOUR NEW RELIC ENTITY GUID>"

export default class NewsletterSignups extends React.Component {
    openAPMEntity() {
        navigation.openStackedEntity(ENTITY_GUID)
    }

    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> et <YOUR NEW RELIC ENTITY GUID> par votre ID de compte New Relic réel et le GUID d'entité que vous venez de copier, respectivement.

Maintenant, openApmEntity() sait quelle entité afficher. Ensuite, vous devez créer un bouton pour appeler cette méthode.

Créez un bouton pour afficher votre entité APM :

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

const ACCOUNT_ID = 1234567  // <YOUR NEW RELIC ACCOUNT ID>
const ENTITY_GUID = "<YOUR NEW RELIC ENTITY GUID>"

export default class NewsletterSignups extends React.Component {
    openAPMEntity() {
        navigation.openStackedEntity(ENTITY_GUID)
    }

    render() {
        return <div>
            <HeadingText className="chartHeader">
                Newsletter subscriptions per version
            </HeadingText>
            <Button onClick={this.openAPMEntity}>
                App performance
            </Button>
            <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> et <YOUR NEW RELIC ENTITY GUID> par votre ID de compte New Relic et votre GUID d'entité réels, respectivement.

Ici, vous avez créé un bouton et l'avez configuré pour appeler openApmEntity() lorsqu'il est cliqué.

Importer Stack et StackItem:

import React from 'react';
import {
    Button,
    HeadingText,
    LineChart,
    NrqlQuery,
    PlatformStateContext,
    Stack,
    StackItem,
    navigation,
} from 'nr1';

const ACCOUNT_ID = 1234567  // <YOUR NEW RELIC ACCOUNT ID>
const ENTITY_GUID = "<YOUR NEW RELIC ENTITY GUID>"

export default class NewsletterSignups extends React.Component {
    openAPMEntity() {
        navigation.openStackedEntity(ENTITY_GUID)
    }

    render() {
        return <div>
            <HeadingText className="chartHeader">
                Newsletter subscriptions per version
            </HeadingText>
            <Button onClick={this.openAPMEntity}>
                App performance
            </Button>
            <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> et <YOUR NEW RELIC ENTITY GUID> par votre ID de compte New Relic et votre GUID d'entité réels, respectivement.

Vous utiliserez Stack et StackItem pour disposer le bouton à l'extrême droite de la même ligne sur laquelle se trouve le HeadingText .

Disposez le Stack:

import React from 'react';
import {
    Button,
    HeadingText,
    LineChart,
    NrqlQuery,
    PlatformStateContext,
    Stack,
    StackItem,
    navigation,
} from 'nr1';

const ACCOUNT_ID = 1234567  // <YOUR NEW RELIC ACCOUNT ID>
const ENTITY_GUID = "<YOUR NEW RELIC ENTITY GUID>"

export default class NewsletterSignups extends React.Component {
    openAPMEntity() {
        navigation.openStackedEntity(ENTITY_GUID)
    }

    render() {
        return <div>
            <Stack fullWidth>
                <StackItem grow={true}>
                    <HeadingText className="chartHeader">
                        Newsletter subscriptions per version
                    </HeadingText>
                </StackItem>
                <StackItem>
                    <Button onClick={this.openAPMEntity}>
                        App performance
                    </Button>
                </StackItem>
            </Stack>
            <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> et <YOUR NEW RELIC ENTITY GUID> par votre ID de compte New Relic et votre GUID d'entité réels, respectivement.

Ici, vous avez utilisé un Stack pleine largeur pour configurer la mise en page de la ligne. Pour que le HeadingText remplisse toute la ligne à l'exception de la largeur du bouton, vous avez utilisé l'accessoire StackItem.grow .

Accédez à la racine de votre Nerdpack à nru-programmability-course/add-navigation/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

Accédez à https://one.newrelic.com?nerdpacks=local et affichez votre application sous Apps > Your apps.

Cliquez sur App performance.

Vous voyez maintenant l’entité empilée.

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> et <YOUR NEW RELIC ENTITY GUID> dans votre projet par votre ID de compte New Relic réel et GUID d'entité, respectivement

Félicitations ! Vous avez terminé d'écrire tout le code que vous allez écrire pour votre application de test A/B New Relic. Vous disposez désormais d’une application qui génère des données New Relic à partir de votre service de démonstration et qui exécute un test A/B. Vous avez créé plusieurs graphiques, boutons et autres éléments d’interface utilisateur. Et vous avez organisé vos composants dans une vue lisible et utilisable.

En plus des visuels, vous avez fourni des données à vos graphiques à partir de plusieurs sources de données dans et en dehors de New Relic. Vous avez créé une fonctionnalité backend qui utilise le propre datastore de votre application New Relic. Vous avez également utilisé les API de la plateforme pour interagir avec l’interface utilisateur de la plateforme et afficher une vue d’entité empilée.

Vous avez vraiment accompli beaucoup de choses tout au long de ce cours, jusqu'à présent. Il ne reste plus que quelques petites choses à faire ! Tout d'abord, il faut apprendre à publier et à souscrire à votre application New Relic afin qu'elle puisse fonctionner sur notre plateforme plutôt que sur votre propre serveur local. Deuxièmement, il s’agit d’apprendre à gérer certains problèmes courants que vous pourriez rencontrer dans le développement d’applications New Relic.

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 : décrivez votre application pour le catalogue.

Cette traduction automatique est fournie pour votre commodité.

Conseil

Important

Important

Important

Important

Important

Conseil

Conseil