Adicione PlatformStateContext ao seu Nerdlet

Dica

Esta lição faz parte de um curso que ensina como construir um aplicativo New Relic do zero. Se ainda não o fez, confira a Visão Geral.

Cada lição do curso se baseia na anterior, portanto, certifique-se de ter concluído a última lição, Buscar dados de um serviço de terceiros, antes de iniciar esta.

Neste curso, você está construindo um aplicativo New Relic. Este aplicativo mostra dados de telemetria de um serviço de demonstração que está executando um teste A/B para que possa revelar esses dados em gráficos, como um dashboard. No entanto, seu aplicativo New Relic é diferente de um dashboard porque faz mais do que mostrar dados New Relic. Ele extrai dados externos, fornece componentes e funcionalidades de interface e ainda possui seus próprios pequenos armazenamentos de dados. O objetivo deste aplicativo New Relic é apresentar o contexto para que você possa entender melhor os resultados do teste A/B e como esses resultados se relacionam com seus objetivos de negócios.

Até agora, você construiu todos os seus gráficos, organizou-os para melhorar a usabilidade, forneceu-lhes dados reais e muito mais. Existem algumas melhorias finais que você pode fazer usando componentes da API da plataforma. Nesta lição, você aprenderá como usar valores no estado da plataforma New Relic.

Mude para o diretório add-plataforma-state-context/ab-test do repositório de cursos:

bash

$cd nru-programmability-course/add-platform-state-context/ab-test

Este diretório contém o código que esperamos que seu aplicativo tenha neste ponto do curso. Ao navegar para o diretório correto no início de cada lição, você deixa seu código personalizado para trás, protegendo-se assim de carregar código incorreto de uma lição para outra.

Em nerdlets/ab-test-nerdlet/newsletter-signups.js, adicione um PlatformStateContext.Consumer ao método render() do seu componente NewsletterSignups :

import React from 'react';
import {
    HeadingText,
    LineChart,
    NrqlQuery,
    PlatformStateContext,
} 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>
            <PlatformStateContext.Consumer>
                {
                    (platformState) => {
                        return <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>
                    }
                }
            </PlatformStateContext.Consumer>
        </div>
    }
}

Importante

Certifique-se de substituir <YOUR NEW RELIC ACCOUNT ID> pelo ID real da sua conta New Relic.

Observe que NrqlQuery usa uma constante chamada ACCOUNT_ID. Em vez de codificar um identificador de conta em seu Nerdlet, você pode usar accountIds do estado do URL da plataforma.

PlatformStateContext.Consumer fornece acesso ao estado da URL da plataforma. Este contexto contém um valor importante que você usará em seu aplicativo, chamado timeRange.

Observe que seu NrqlQuery usa uma cláusula SINCE que identifica o período histórico do qual sua consulta deve buscar dados. No momento, essa cláusula SINCE está definida como 30 MINUTES AGO. Com timeRange, você pode usar o seletor de hora da plataforma para ajustar esse intervalo de tempo.

Utilize o estado da plataforma timeRange:

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

Importante

Certifique-se de substituir <YOUR NEW RELIC ACCOUNT ID> pelo ID real da sua conta New Relic.

Agora, NewsletterSignups usa platformState.timeRange em vez de uma cláusula SINCE codificada.

Embora os componentes NrqlQuery aceitem uma propriedade timeRange conveniente, nem todos os componentes aceitam. Você ainda pode usar timeRange em outros contextos acessando duration, begin_time ou end_time:

<PlatformStateContext.Consumer>
  {(platformState) => {
    console.log(platformState.timeRange.duration);
  }}
</PlatformStateContext.Consumer>;

Navegue até a raiz do seu Nerdpack em nru-programmability-course/add-platform-state-context/ab-test.

Gere um novo UUID para o seu Nerdpack:

bash

$nr1 nerdpack:uuid -gf

Como você clonou o repositório de cursos que continha um Nerdpack existente, você precisa gerar seu próprio identificador exclusivo. Este UUID mapeia seu Nerdpack para sua conta New Relic. Também permite que seu aplicativo faça solicitações Nerdgraph em nome de sua conta.

Sirva seu aplicativo localmente:

bash

$nr1 nerdpack:serve

Veja seu aplicativo.

Seu NrqlQuery agora usa o estado da plataforma timeRange, mas seu gráfico provavelmente ainda mostra os últimos 30 minutos. Por que? De onde vem o timeRange no estado da plataforma?

O seletor de hora fica no lado direito da barra de navegação do seu aplicativo.

Altere este valor e veja a atualização do seu gráfico.

Dica

Se algo não funcionar, use as ferramentas de depuração do seu navegador para tentar identificar o problema.

Assegure-se de que você:

Copiou o código corretamente da lição
Gerou um novo UUID
Todas as instâncias de <YOUR NEW RELIC ACCOUNT ID> no seu projeto foram substituídas pelo New Relic ID real da sua conta

Atualizar VersionPageViews:

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

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

Importante

Certifique-se de substituir <YOUR NEW RELIC ACCOUNT ID> pelo ID real da sua conta New Relic.

De todos os gráficos do seu aplicativo New Relic , esses três gráficos são os que devem ser atualizados com o seletor de hora. Os demais, Total subscriptions per version, Total cancellations per version, Version A - Page views vs. subscriptions, Version B - Page views vs. subscriptions, apresentam valores totais ao longo do tempo. Portanto, codificar suas cláusulas SINCE em 7 DAYS AGO faz sentido, pois esse é um período de tempo razoável para os propósitos deste curso.

Enquanto ainda atende seu Nerdpack localmente, visualize seu aplicativo NR1 para ver seus gráficos sendo atualizados com o intervalo de tempo que você escolher.

Dica

Se algo não funcionar, use as ferramentas de depuração do seu navegador para tentar identificar o problema.

Assegure-se de que você:

Copiou o código corretamente da lição
Gerou um novo UUID
Todas as instâncias de <YOUR NEW RELIC ACCOUNT ID> no seu projeto foram substituídas pelo New Relic ID real da sua conta

Quando terminar, pare de servir seu aplicativo New Relic pressionando CTRL+C na janela do terminal do seu servidor local.

Agora que você está baseando sua consulta no estado da plataforma, alguns de seus gráficos são dinâmicos em seus intervalos de tempo. Esta é uma grande melhoria porque permite ajustar seus gráficos para mostrar dados de qualquer momento específico, o que é útil para vincular dados aos resultados de negócios.

Os componentes da API da plataforma também oferecem muito mais funcionalidades, incluindo a capacidade de navegar o usuário para outro local no New Relic. Você aprenderá como fazer isso na próxima lição.

Dica

Esta lição faz parte de um curso que ensina como construir um aplicativo New Relic do zero. Continue para a próxima lição: Adicione navegação ao seu nerdlet.

Esta tradução de máquina é fornecida para sua comodidade.

Adicione PlatformStateContext ao seu Nerdlet

Dica

Importante

Importante

Dica

Importante

Dica

Dica