Personnaliser les données NRQL

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 des composants NrqlQuery à votre nerdlet, avant de commencer celle-ci.

Dans cette série, vous créez une application New Relic, ou application NR1 en abrégé, qui affiche les données de test A/B dans une variété de graphiques. La plupart des graphiques doivent afficher des données provenant d’un service de démonstration que vous avez lancé au début de cette série.

Dans la dernière leçon, vous avez fourni des données réelles, provenant de la base de données de New Relic, aux graphiques suivants :

Abonnement newsletter par version
Version A - Pages vues
Version B - Pages vues
Abonnement total par version

Étant donné que vous avez de l'expérience dans l'interrogation des données d'abonnement et de consultation de pages, vous vous sentez peut-être prêt à fournir des données à encore plus de graphiques :

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

Cependant, ces graphiques sont différents des graphiques pour lesquels vous avez fourni des données, car ils comparent les données de deux sources différentes : subscription événement et pageView événement.

Dans cette leçon, vous apprendrez à formater des données provenant de plusieurs sources pour qu'elles existent dans le même graphique.

Expérimenter avec les données dans l'explorateur de données

Depuis le menu de navigation supérieur de votre page d'accueil New Relic , accédez à Data explorer.

Ici, vous pouvez expérimenter avec la requête d'événement subscription et la requête d'événement pageView pour vous assurer de récupérer les bonnes données dans votre application.

Sélectionnez subscription dans le menu Custom events .

Cette requête NRDB pour les totaux d'événements d'abonnement par minute au cours des 30 dernières minutes et affiche ces données dans un graphique.

Cliquez sur Dimensions pour voir la liste des attributs associés à ces abonnement événement.

Vous pouvez filtrer et regrouper les abonnements événement en utilisant ces dimensions. Pour la version A - Pages vues vs. abonnement et la version B - Pages vues vs. abonnement, vous souhaitez filtrer vos totaux d'abonnement par page_version.

Cliquez sur la requête NRQL pour accéder au générateur de requêtes.

Ici, vous pouvez afficher et modifier manuellement la requête pour récupérer les données dont vous avez besoin.

Ajoutez une clause WHERE pour filtrer les totaux d'abonnement par page_version:

SELECT count(*) FROM subscription WHERE page_version = 'a' SINCE 30 MINUTES AGO TIMESERIES

Supprimez la clause TIMESERIES pour récupérer un décompte :

SELECT count(*) FROM subscription WHERE page_version = 'a' SINCE 30 MINUTES AGO

Modifiez la clause SINCE pour voir les totaux de la semaine dernière :

SELECT count(*) FROM subscription WHERE page_version = 'a' SINCE 7 DAYS AGO

Cliquez sur Run et voyez les données visualisées dans un graphique d’affichage au lieu d’un graphique linéaire.

La version A - Pages vues vs. abonnement et la version B - Pages vues vs. abonnement nécessitent un total combiné de quatre valeurs de données :

Total des abonnements de tous les temps pour la version A
Nombre total de pages vues pour la version A
Total des abonnements de tous les temps pour la version B
Nombre total de pages vues pour la version B
Expérimentez avec le générateur de requêtes pour découvrir les quatre requêtes qui récupèrent les bonnes données. Au final, vous obtiendrez les quatre requêtes suivantes :
```
SELECT count(*) FROM subscription WHERE page_version = 'a' SINCE 7 DAYS AGO
SELECT count(*) FROM pageView WHERE page_version = 'a' SINCE 7 DAYS AGO
SELECT count(*) FROM subscription WHERE page_version = 'b' SINCE 7 DAYS AGO
SELECT count(*) FROM pageView WHERE page_version = 'b' SINCE 7 DAYS AGO
```
détail technique
Contrairement à d’autres langages de requête structurés, NRQL ne fournit pas de mécanisme permettant de joindre des données entre différentes sources. C'est pourquoi vous devez effectuer deux requêtes pour obtenir les totaux d'événements subscription et pageView .
Jusqu'à présent, vous avez fourni à chaque graphique une seule requête. Ici, vous devez fournir deux requêtes par graphique. Dans les étapes restantes, vous apprendrez à personnaliser les résultats NrqlQuery pour fusionner des données provenant de plusieurs sources.

Fusionner NRQL à partir de plusieurs sources

Accédez au répertoire customize-nrql-data/ab-test du référentiel de cours:

bash

$cd nru-programmability-course/customize-nrql-data/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 le fichier totals.js de votre Nerdlet, implémentez constructor() et la méthode du cycle de vie React componentDidMount() dans VersionTotals:

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

export default class VersionTotals extends React.Component {
    constructor() {
        super(...arguments);

        this.state = {
            tableData: {
                metadata: {
                    id: `totals-${this.props.version}`,
                    name: `Version ${this.props.version}`,
                    columns: ['name', 'count'],
                },
                data: [
                    {
                        name: 'Subscriptions',
                        count: 0
                    },
                    {
                        name: 'Page views',
                        count: 0
                    },
                ],
            }
        }
    }

    componentDidMount() {
        NrqlQuery.query({
            accountIds: this.props.accountIds,
            query: `SELECT count(*) FROM subscription WHERE page_version = '${this.props.version}' SINCE 7 DAYS AGO`,
            formatType: NrqlQuery.FORMAT_TYPE.RAW
        }).then(({ data }) => {
            if (data.raw) {
                let tableData = {...this.state.tableData}
                tableData.data[0].count = data.raw.results[0].count
                this.setState({tableData})
            }
        })

        NrqlQuery.query({
            accountIds: this.props.accountIds,
            query: `SELECT count(*) FROM pageView WHERE page_version = '${this.props.version}' SINCE 7 DAYS AGO`,
            formatType: NrqlQuery.FORMAT_TYPE.RAW
        }).then(({ data }) => {
            if (data.raw) {
                let tableData = {...this.state.tableData}
                tableData.data[1].count = data.raw.results[0].count
                this.setState({tableData})
            }

        })
    }

    render() {
        return <div>
            <HeadingText className="chartHeader">
                Version {this.props.version.toUpperCase()} - Page views vs. subscriptions
            </HeadingText>
            <TableChart data={[this.state.tableData]} fullWidth />
        </div>
    }
}

Important

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

Ici, vous initialisez votre état dans le constructeur du composant. L'état a une valeur unique, tableData, qui contient des données de série et des métadonnées pour TableChart. Dans componentDidMount(), vous interrogez les données qui remplissent les données dans cet état.

componentDidMount() est une méthode du cycle de vie React qui est appelée lorsqu'un composant est monté dans l'arborescence des composants. Vous utilisez cette méthode, au lieu du constructeur, pour interroger les données, car votre logique, qui requests des données à New Relic, introduit des effets secondaires et définit des valeurs d'état, ce que vous ne devriez pas faire dans le constructeur.

Dans componentDidMount(), vous utilisez NrqlQuery d’une nouvelle manière. Tout d'abord, vous avez spécifié formatType à NrqlQuery.FORMAT_TYPE.RAW car vous allez modifier les données au lieu de les fournir directement à un graphique. Avant, vous utilisiez sa forme JSX dans la méthode render() d'un graphique. Deuxièmement, vous avez appelé sa méthode query() et géré les résultats dans un rappel then() , qui les enregistre dans la console.

Dans le fichier index.js de votre Nerdlet, créez une constante appelée ACCOUNT_ID et transmettez-la à VersionTotals:

import React from 'react';
import { ChartGroup, Grid, GridItem } from 'nr1';
import EndTestSection from './end-test';
import NewsletterSignups from './newsletter-signups';
import PastTests from './past-tests';
import TotalCancellations from './total-cancellations';
import TotalSubscriptions from './total-subscriptions';
import VersionDescription from './description';
import VersionPageViews from './page-views';
import VersionTotals from './totals';

const ACCOUNT_ID = 123456  // <YOUR-ACCOUNT-ID>
const VERSION_A_DESCRIPTION = 'The newsletter signup message says, "Sign up for our newsletter"'
const VERSION_B_DESCRIPTION = 'The newsletter signup message says, "Sign up for our newsletter and get a free shirt!"'

export default class AbTestNerdletNerdlet extends React.Component {
    render() {
        return <div>
            <Grid className="wrapper">
                <GridItem columnSpan={6}>
                    <VersionDescription
                        description={VERSION_A_DESCRIPTION}
                        version="A"
                    />
                </GridItem>
                <GridItem columnSpan={6}>
                    <VersionDescription
                        description={VERSION_B_DESCRIPTION}
                        version="B"
                    />
                </GridItem>
                <GridItem columnSpan={12}><hr /></GridItem>
                <GridItem columnSpan={12}><NewsletterSignups /></GridItem>
                <GridItem columnSpan={6}><TotalSubscriptions /></GridItem>
                <GridItem columnSpan={6}><TotalCancellations /></GridItem>
                <GridItem columnSpan={6}>
                    <VersionTotals version='a' accountId={ACCOUNT_ID} />
                </GridItem>
                <GridItem columnSpan={6}>
                    <VersionTotals version='b' accountId={ACCOUNT_ID} />
                </GridItem>
                <ChartGroup>
                    <GridItem columnSpan={6}>
                        <VersionPageViews version='a' />
                    </GridItem>
                    <GridItem columnSpan={6}>
                        <VersionPageViews version='b' />
                    </GridItem>
                </ChartGroup>
                <GridItem columnSpan={12}><EndTestSection /></GridItem>
                <GridItem columnSpan={12}><PastTests /></GridItem>
            </Grid>
        </div>
    }
}

Important

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

Accédez à la racine de votre Nerdpack à nru-programmability-course/customize-nrql-data/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.

Présentez votre demande localement :

bash

$nr1 nerdpack:serve

Accédez à votre application dans New Relic.

Pour visualiser votre log, utile pour découvrir les erreurs dans votre application, activez les outils développeurs dans votre navigateur préféré et accédez à la Console:

Instructions pour Firefox
Instructions pour Safari
Instructions pour Chrome
Avec votre application à l’écran, remarquez les données NRQL dans la console.
Ce log de console vous indique que vous pouvez trouver les données que vous recherchez, à savoir le nombre subscription ou pageView, à data.raw.results[0].count. L’étape suivante consiste à stocker ce nombre dans state.tableData.
Conseil
Si quelque chose ne fonctionne pas, utilisez ces outils de débogage 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

Dans totals.js, stockez les données de requête dans l'état :

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

export default class VersionTotals extends React.Component {
    constructor() {
        super(...arguments);

        this.state = {
            tableData: {
                metadata: {
                    id: `totals-${this.props.version}`,
                    name: `Version ${this.props.version}`,
                    columns: ['name', 'count'],
                },
                data: [
                    {
                        name: 'Subscriptions',
                        count: 0
                    },
                    {
                        name: 'Page views',
                        count: 0
                    },
                ],
            }
        }
    }

    componentDidMount() {
        NrqlQuery.query({
            accountIds: this.props.accountIds,
            query: `SELECT count(*) FROM subscription WHERE page_version = '${this.props.version}' SINCE 7 DAYS AGO`,
            formatType: NrqlQuery.FORMAT_TYPE.RAW
        }).then(({ data }) => {
            if (data.raw) {
                let tableData = {...this.state.tableData}
                tableData.data[0].count = data.raw.results[0].count
                this.setState({tableData})
            }
        })

        NrqlQuery.query({
            accountIds: this.props.accountIds,
            query: `SELECT count(*) FROM pageView WHERE page_version = '${this.props.version}' SINCE 7 DAYS AGO`,
            formatType: NrqlQuery.FORMAT_TYPE.RAW
        }).then(({ data }) => {
            if (data.raw) {
                let tableData = {...this.state.tableData}
                tableData.data[1].count = data.raw.results[0].count
                this.setState({tableData})
            }

        })
    }

    render() {
        return <div>
            <HeadingText className="chartHeader">
                Version {this.props.version.toUpperCase()} - Page views vs. subscriptions
            </HeadingText>
            <TableChart data={[this.state.tableData]} fullWidth />
        </div>
    }
}

Portez une attention particulière aux données auxquelles vous accédez. Les indices d'éventail sont particulièrement importants à maîtriser. Les données d'abonnement doivent aller à state.tableData.data[0].count car dans tableData, c'est le premier élément de l'éventail de données :

data: [
    {
        name: 'Subscriptions',
        count: 0
    },
    {
        name: 'Page views',
        count: 0
    },
],

Par une logique similaire, les données de page vue doivent aller à state.tableData.data[1].count.

Avec votre Nerdpack servi localement, visualisez votre application pour voir vos graphiques servir des données réelles.

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

Dans cette leçon, vous avez appris à utiliser NrqlQuery.query() pour extraire des données de plusieurs sources et les assembler dans des données que votre graphique peut utiliser. Notez qu'il existe encore deux graphiques dans votre application NR1 qui utilisent des données fictives :

Total des désabonnements par version
Tests passés

Malheureusement, votre application de démonstration ne crée pas d'événement New Relic personnalisé lorsqu'un utilisateur se désabonne de votre newsletter ou que vous terminez un test A/B. Dans la prochaine leçon, vous apprendrez à utiliser NerdGraph et NerdStorage pour remplir Past tests.

Cours

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 : accédez à NerdStorage depuis votre nerdlet.

Cette traduction automatique est fournie pour votre commodité.

Conseil

Expérimenter avec les données dans l'explorateur de données .css-21sua1{background:none;border:none;width:0;padding:0;}

détail technique

Fusionner NRQL à partir de plusieurs sources

Important

Important

Conseil

Conseil

Cours

Expérimenter avec les données dans l'explorateur de données