Agregue componentes NrqlQuery a su Nerdlet

En este serial, usted está creando una aplicación New Relic completa que ingiere datos de un servicio de demostración que ejecuta una Prueba A/B. La aplicación muestra los datos de la Prueba A/B de formas interesantes para que, en última instancia, puedas elegir si la Versión A o la Versión B es más efectiva para lograr tu objetivo comercial: aumentar la subscripción a boletines informativos de alta calidad.

En tutoriales anteriores, creó gráficos para visualizar sus datos y los organizó para poder usarlos y comprenderlos. También creó un formulario en su aplicación para finalizar su prueba una vez que esté seguro de la versión más efectiva. Sin embargo, hasta ahora no puedes medir qué versión es más efectiva porque tus gráficos estuvieron mostrando datos simulados, como por ejemplo:

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 },
    ],
}

El accesorio data de un gráfico es útil para proporcionar datos elaborados manualmente como este o incluso datos de terceros reformateados. Pero para muchos de sus gráficos, desea mostrar datos de New Relic en tiempo real. Por ejemplo, Newsletter subscriptions by version debería mostrar los datos de subscripción, que existen en la base de datos de New Relic, NRDB para abreviar.

Para consultar NRDB, primero necesita saber qué datos está buscando. ¿Recuerda su servicio backend de demostración? Bueno, ese servicio informa un evento de subscripción a New Relic cuando un usuario se suscribe a un boletín informativo de su sitio. Puede ver estos eventos de subscripción en New Relic mientras se ejecutan sus servicios de demostración.

Ver evento subscripción en New Relic

Antes de consultar NRDB desde sus gráficos, experimente consultando datos desde la interfaz sitio web de New Relic.

Actualiza NewsletterSignups con un NrqlQuery

Antes de comenzar a integrar datos de New Relic en su aplicación NR1, consulte su guía de diseño.

Su aplicación New Relic tiene ocho gráficos en total, incluidos gráficos de líneas, gráficos circulares y gráficos de tablas. Actualmente, cada uno de estos gráficos muestra datos simulados, pero deben mostrar datos reales para que sean útiles. Primero, concentrar en consultar los datos del gráfico superior: Newsletter subscriptions per version.

Con la consulta que creó en el Explorador de datos, ya tiene los datos que necesita para este gráfico.

A continuación, aprenderá cómo pasar su consulta NRQL a su tabla de 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>
    }
}

Rellena tu PieChart con subscription

Ahora que viste cómo pasar los datos de New Relic a Newsletter subscriptions per version, es momento de pasar a Total subscriptions per version. Estos dos gráficos son similares en que comparan los datos de eventos de subscripción agrupados por versión. Las principales diferencias entre Newsletter subscriptions per version y Total subscriptions per version son:

• Uno es un gráfico de líneas y el otro es un gráfico circular.
• Uno muestra datos de seriales temporales y el otro muestra totales de todos los tiempos.

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 hecho! Configuraste unos gráficos para consultar datos de subscripción reales desde la base de datos de New Relic.

Rellenar gráficos con pageView datos de eventos

Considere los gráficos restantes que todavía usan datos simulados:

• Total de bajas por versión
• Versión A: visitas a la página frente a subscripción
• Versión B: visitas a la página frente a subscripción
• Versión A: vistas de página
• Versión B - Vistas de página
• Pruebas pasadas

Algunos de estos gráficos deben mostrar datos de vistas de página. Afortunadamente, su aplicación de demostración crea un evento personalizado para cada vista de página, como lo hace con la subscripción. Dado que Version A - Page views vs. subscriptions y Version B - Page views vs. subscriptions requieren datos de dos fuentes, ignórelos por ahora y concentrar en Version A - Page views y Version B - Page views.

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>
    }
}

¡Uf, son muchas consultas, pero tu aplicación se ve genial! Ahora estás mostrando datos reales en cuatro gráficos. ¿Recuerda los dos gráficos que ignoró porque requieren datos de dos fuentes?

• Versión A: visitas a la página frente a subscripción
• Versión B: visitas a la página frente a subscripción

Debe manejarlos de forma diferente a como lo hizo con los gráficos con los que estuvo trabajando porque NRQL no tiene ningún método para consultar datos de múltiples fuentes. En la siguiente lección, aprenderá cómo proporcionar datos a estos dos gráficos.