Ajoutez des composants NrqlQuery à votre Nerdlet

Dans cette série, vous créez une application New Relic à part entière qui ingère des données à partir d'un service de démonstration qui exécute un test A/B. L'application affiche les données de test A/B de manière intéressante afin que vous puissiez finalement choisir si la version A ou la version B est la plus efficace pour atteindre votre objectif commercial : augmenter les abonnements à des newsletters de haute qualité.

Dans les didacticiels précédents, vous avez créé des graphiques pour visualiser vos données et vous avez organisé ces graphiques afin de pouvoir les utiliser et les comprendre. Vous avez également créé un formulaire dans votre application pour terminer votre test une fois que vous êtes sûr de la version la plus efficace. Jusqu'à présent, vous ne pouvez pas évaluer quelle version est la plus efficace, car vos graphiques affichent des données fictives, telles que :

const versionASignups = {
    metadata: {
        id: 'version-a-newsletter-signups',
        name: 'Version A',
        viz: 'main',
        color: 'blue',
    },
    data: [
        { x: 0, y: 0 },
        { x: 10, y: 10 },
        { x: 20, y: 15 },
        { x: 30, y: 5 },
        { x: 40, y: 30 },
        { x: 50, y: 25 },
    ],
}

L'accessoire data d'un graphique est utile pour fournir des données créées manuellement comme celles-ci ou même des données tierces reformatées. Mais pour la plupart de vos graphiques, vous souhaitez afficher les données New Relic en temps réel. Par exemple, Newsletter subscriptions by version doit afficher les données d'abonnement, qui existent dans la base de données de New Relic, NRDB en abrégé.

Pour interroger NRDB, vous devez d'abord savoir quelles données vous recherchez. Vous vous souvenez de votre service backend de démonstration ? Eh bien, ce service signale un événement d’abonnement à New Relic lorsqu’un utilisateur s’abonne à une newsletter depuis votre site. Vous pouvez visualiser ces événements d'abonnement dans New Relic pendant que vos services de démonstration sont en cours d'exécution.

Voir l'abonnement événement dans New Relic

Avant d'interroger NRDB à partir de vos graphiques, essayez d'interroger les données à partir de l'interface Web de New Relic.

Mettre à jour NewsletterSignups avec un NrqlQuery

Avant de commencer à intégrer les données New Relic dans votre application NR1, consultez votre guide de conception.

Votre application New Relic comporte huit graphiques au total, notamment des graphiques linéaires, des graphiques à secteurs et des graphiques de tableau. Chacun de ces graphiques affiche actuellement des données fictives, mais ils doivent afficher des données réelles pour être utiles. Tout d'abord, concentrez-vous sur l'interrogation des données pour le graphique le plus haut : Newsletter subscriptions per version.

Avec la requête que vous avez créée dans l’explorateur de données, vous disposez déjà des données dont vous avez besoin pour ce graphique.

Ensuite, vous apprendrez à transmettre votre requête NRQL à votre graphique Newsletter subscriptions per version .

$
cd nru-programmability-course/add-nrql-components/ab-test

import React from 'react';
import {
    HeadingText,
    LineChart,
    NrqlQuery,
} 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>
            <NrqlQuery
                accountIds={[ACCOUNT_ID]}
                query="SELECT count(*) FROM subscription FACET page_version SINCE 30 MINUTES AGO TIMESERIES"
            >
                {
                    ({ data }) => {
                        return <LineChart data={data} fullWidth />;
                    }
                }
            </NrqlQuery>
        </div>
    }
}

<LineChart
    accountIds={<YOUR NEW RELIC ACCOUNT ID>}
    query="SELECT count(*) FROM subscription FACET page_version SINCE 30 MINUTES AGO TIMESERIES"
/>

$
nr1 nerdpack:uuid -gf

$
nr1 nerdpack:serve

import React from 'react';
import {
    HeadingText,
    LineChart,
    NrqlQuery,
} 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>
            <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>
        </div>
    }
}

Remplissez votre PieChart avec subscription

Maintenant que vous avez vu comment transmettre les données New Relic à Newsletter subscriptions per version, il est temps de passer à Total subscriptions per version. Ces deux graphiques sont similaires dans la mesure où ils comparent les données d'abonnement événement regroupées par version. Les principales différences entre Newsletter subscriptions per version et Total subscriptions per version sont :

• L'un est un graphique linéaire et l'autre est un graphique à secteurs
• L'un affiche les données de séries chronologiques et l'autre affiche les totaux de tous les temps

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

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

export default class TotalSubscriptions extends React.Component {
    render() {
        return <div>
            <HeadingText className="chartHeader">
                Total subscriptions per version
            </HeadingText>
            <NrqlQuery
                accountIds={[ACCOUNT_ID]}
                query="SELECT count(*) FROM subscription FACET page_version SINCE 7 DAYS AGO"
                pollInterval={60000}
            >
                {
                    ({ data }) => {
                        return <PieChart data={data} fullWidth />
                    }
                }
            </NrqlQuery>
        </div>
    }
}

Bien joué! Vous avez configuré certains graphiques pour rechercher des données d'abonnement réelles à partir de la base de données de New Relic.

Remplir les graphiques avec pageView données d'événement

Considérez les graphiques restants qui utilisent encore des données fictives :

• Total des désabonnements par version
• Version A - Pages vues vs. abonnement
• Version B - Pages vues vs. abonnement
• Version A - Pages vues
• Version B - Pages vues
• Tests passés

Certains de ces graphiques doivent afficher les données de consultation des pages. Heureusement, votre application de démonstration crée un événement personnalisé pour chaque page vue comme elle le fait pour l'abonnement ! Étant donné que la version A - Pages vues vs. abonnement et la version B - Pages vues vs. abonnement nécessitent des données provenant de deux sources, ignorez-les pour l'instant et concentrez-vous sur la version A - Pages vues et la version B - Pages vues.

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

const ACCOUNT_ID = 123456  // <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>
            <NrqlQuery
                accountIds={[ACCOUNT_ID]}
                query={`SELECT count(*) FROM pageView WHERE page_version = '${this.props.version}' TIMESERIES`}
                pollInterval={60000}
            >
                {
                    ({ data }) => {
                        return <LineChart data={data} fullWidth />;
                    }
                }
            </NrqlQuery>
        </div>
    }
}

Ouf, c'est beaucoup de requêtes, mais votre application a l'air géniale ! Vous affichez désormais des données réelles dans quatre graphiques. Vous vous souvenez des deux graphiques que vous avez ignorés parce qu’ils nécessitent des données provenant de deux sources ?

• Version A - Pages vues vs. abonnement
• Version B - Pages vues vs. abonnement

Vous devez les gérer différemment de la manière dont vous avez traité les graphiques, car NRQL n'a aucune méthode pour interroger les données à partir de plusieurs sources. Dans la prochaine leçon, vous apprendrez à fournir des données à ces deux graphiques.