Adicione componentes NrqlQuery ao seu Nerdlet

Nesta série, você está construindo um aplicativo New Relic completo que ingere dados de um serviço de demonstração que está executando um teste A/B. O aplicativo mostra os dados de teste A/B de maneiras interessantes para que você possa escolher se a versão A ou a versão B é mais eficaz para atingir seu objetivo de negócios: aumentar a assinatura do boletim informativo de alta qualidade.

Em tutoriais anteriores, você criou gráficos para visualizar seus dados e organizou esses gráficos para poder usá-los e compreendê-los. Você também criou um formulário em seu aplicativo para encerrar o teste quando estiver confiante na versão mais eficaz. Até agora, porém, você não pode avaliar qual versão é mais eficaz porque seus gráficos mostram dados simulados, como:

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

A propriedade data de um gráfico é útil para fornecer dados criados manualmente como este ou até mesmo dados reformatados de terceiros. Mas para muitos de seus gráficos, você deseja mostrar dados do New Relic em tempo real. Por exemplo, Newsletter subscriptions by version deve mostrar os dados da assinatura, que existem no banco de dados da New Relic, abreviadamente NRDB.

Para consultar o NRDB, primeiro você precisa saber quais dados está procurando. Lembra do seu serviço backend de demonstração? Bem, esse serviço relata um evento de assinatura do New Relic quando um usuário assina um boletim informativo do seu site. Você pode visualizar esses eventos de assinatura no New Relic enquanto seus serviços de demonstração estão em execução.

Veja o evento de assinatura no New Relic

Antes de consultar o NRDB em seus gráficos, experimente consultar dados na interface da web do New Relic.

Atualize NewsletterSignups com um NrqlQuery

Antes de começar a integrar os dados do New Relic em seu aplicativo NR1, consulte seu guia de design.

Seu aplicativo New Relic tem oito gráficos no total, incluindo gráficos de linhas, gráficos de pizza e gráficos de tabelas. Atualmente, cada um desses gráficos mostra dados simulados, mas eles precisam mostrar dados reais para serem úteis. Primeiro, concentre-se na consulta de dados do gráfico superior: Newsletter subscriptions per version.

Com a consulta criada no Data Explorer, você já tem os dados necessários para este gráfico.

A seguir, você aprende como passar sua consulta NRQL para o gráfico 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>
    }
}

Preencha seu PieChart com subscription

Agora que você já viu como passar os dados da New Relic para Newsletter subscriptions per version, é hora de passar para Total subscriptions per version. Esses dois gráficos são semelhantes na medida em que comparam dados de eventos de assinatura agrupados por versão. As principais diferenças entre Newsletter subscriptions per version e Total subscriptions per version são:

• Um é um gráfico de linhas e o outro é um gráfico de pizza
• Um mostra dados de séries temporais e outro mostra totais de todos os tempos

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

Bom trabalho! Você configurou alguns gráficos para consultar dados reais de assinatura do banco de dados da New Relic.

Preencher gráficos com pageView dados de eventos

Considere os gráficos restantes que ainda usam dados simulados:

• Total de cancelamentos por versão
• Versão A - Visualizações de página vs. assinatura
• Versão B - Visualizações de página vs. assinatura
• Versão A - Visualizações de página
• Versão B - Visualizações de página
• Testes anteriores

Alguns desses gráficos precisam mostrar dados de visualização de página. Felizmente, seu aplicativo de demonstração cria um evento personalizado para cada visualização de página, como acontece com a assinatura! Como Version A - Page views vs. subscriptions e Version B - Page views vs. subscriptions exigem dados de duas fontes, ignore-as por enquanto e concentre-se nas Version A - Page views e 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>
    }
}

Ufa, é muita consulta, mas seu aplicativo parece ótimo! Agora você está mostrando dados reais em quatro gráficos. Lembra dos dois gráficos que você ignorou porque exigem dados de duas fontes?

• Versão A - Visualizações de página vs. assinatura
• Versão B - Visualizações de página vs. assinatura

Você precisa lidar com isso de maneira diferente da que fez com os gráficos com os quais está lidando, porque o NRQL não possui método para consultar dados de várias fontes. Na próxima lição, você aprenderá como fornecer dados para esses dois gráficos.