Adicione navegação 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, Adicionar PlatformStateContext ao seu nerdlet, antes de iniciar esta.

Na última lição, você usou PlatformStateContext do SDK do New Relic One para consultar o intervalo de tempo que o usuário selecionou no seletor de hora do aplicativo. Agora você aprenderá sobre outro componente que interage com a plataforma New Relic: navigation.

O componente navigation permite abrir entidade, navegar até entidade e criar objetos Location para entidade a partir do seu Nerdlet. Você também pode usar navigation para outros Nerdlets e launchers.

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

bash

$cd nru-programmability-course/add-navigation/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 newsletter-signups.js, crie um novo método, chamado NewsletterSignups.openApmEntity():

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

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

export default class NewsletterSignups extends React.Component {
    openAPMEntity() {
        navigation.openStackedEntity(ENTITY_GUID)
    }

    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.

Este método usa navigation.openStackedEntity() para exibir a entidade APM do seu aplicativo de demonstração em uma visualização empilhada. O aviso openApmEntity() requer seu ENTITY_GUID. Você precisa localizar esse ID e armazená-lo em uma constante.

Navegue até APM.

Veja os metadados do seu serviço de Newsletter.

Copie o GUID da entidade.

Crie uma constante ENTITY_GUID :

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

const ACCOUNT_ID = 1234567  // <YOUR NEW RELIC ACCOUNT ID>
const ENTITY_GUID = "<YOUR NEW RELIC ENTITY GUID>"

export default class NewsletterSignups extends React.Component {
    openAPMEntity() {
        navigation.openStackedEntity(ENTITY_GUID)
    }

    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> e <YOUR NEW RELIC ENTITY GUID> pelo ID real da sua conta New Relic e pelo GUID da entidade que você acabou de copiar, respectivamente.

Agora, openApmEntity() sabe qual entidade mostrar. A seguir, você precisa criar um botão para invocar este método.

Crie um botão para mostrar sua entidade APM:

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

const ACCOUNT_ID = 1234567  // <YOUR NEW RELIC ACCOUNT ID>
const ENTITY_GUID = "<YOUR NEW RELIC ENTITY GUID>"

export default class NewsletterSignups extends React.Component {
    openAPMEntity() {
        navigation.openStackedEntity(ENTITY_GUID)
    }

    render() {
        return <div>
            <HeadingText className="chartHeader">
                Newsletter subscriptions per version
            </HeadingText>
            <Button onClick={this.openAPMEntity}>
                App performance
            </Button>
            <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> e <YOUR NEW RELIC ENTITY GUID> pelo ID real da conta New Relic e pelo GUID da entidade, respectivamente.

Aqui você criou um botão e o configurou para chamar openApmEntity() quando for clicado.

Importe Stack e StackItem:

import React from 'react';
import {
    Button,
    HeadingText,
    LineChart,
    NrqlQuery,
    PlatformStateContext,
    Stack,
    StackItem,
    navigation,
} from 'nr1';

const ACCOUNT_ID = 1234567  // <YOUR NEW RELIC ACCOUNT ID>
const ENTITY_GUID = "<YOUR NEW RELIC ENTITY GUID>"

export default class NewsletterSignups extends React.Component {
    openAPMEntity() {
        navigation.openStackedEntity(ENTITY_GUID)
    }

    render() {
        return <div>
            <HeadingText className="chartHeader">
                Newsletter subscriptions per version
            </HeadingText>
            <Button onClick={this.openAPMEntity}>
                App performance
            </Button>
            <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> e <YOUR NEW RELIC ENTITY GUID> pelo ID real da conta New Relic e pelo GUID da entidade, respectivamente.

Você usará Stack e StackItem para organizar o botão no lado direito da mesma linha em que HeadingText está.

Esquematize o Stack:

import React from 'react';
import {
    Button,
    HeadingText,
    LineChart,
    NrqlQuery,
    PlatformStateContext,
    Stack,
    StackItem,
    navigation,
} from 'nr1';

const ACCOUNT_ID = 1234567  // <YOUR NEW RELIC ACCOUNT ID>
const ENTITY_GUID = "<YOUR NEW RELIC ENTITY GUID>"

export default class NewsletterSignups extends React.Component {
    openAPMEntity() {
        navigation.openStackedEntity(ENTITY_GUID)
    }

    render() {
        return <div>
            <Stack fullWidth>
                <StackItem grow={true}>
                    <HeadingText className="chartHeader">
                        Newsletter subscriptions per version
                    </HeadingText>
                </StackItem>
                <StackItem>
                    <Button onClick={this.openAPMEntity}>
                        App performance
                    </Button>
                </StackItem>
            </Stack>
            <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> e <YOUR NEW RELIC ENTITY GUID> pelo ID real da conta New Relic e pelo GUID da entidade, respectivamente.

Aqui, você usou um Stack de largura total para configurar o layout da linha. Para fazer o HeadingText preencher toda a linha, exceto a largura do botão, você usou a propriedade StackItem.grow.

Navegue até a raiz do seu Nerdpack em nru-programmability-course/add-navigation/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

Acesse https://one.newrelic.com?nerdpacks=local e visualize seu aplicativo em Apps > Your apps.

Clique em App performance.

Agora você vê a entidade empilhada.

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
Substituiu todas as instâncias de <YOUR NEW RELIC ACCOUNT ID> e <YOUR NEW RELIC ENTITY GUID> no seu projeto pelo seu New Relic ID de conta real e GUID de entidade, respectivamente

Parabéns! Você terminou de escrever todo o código que escreverá para seu aplicativo de teste A/B do New Relic. Agora, você tem um aplicativo que relata dados do New Relic do seu serviço de demonstração que está executando um teste A/B. Você criou vários gráficos, botões e outros elementos de interface. E você organizou seus componentes em uma visualização legível e utilizável.

Além dos recursos visuais, você forneceu dados para seus gráficos de várias fontes de dados dentro e fora da New Relic. Você criou algumas funcionalidades backend que utilizam o próprio armazenamento de dados do aplicativo New Relic. Você também utilizou a API da plataforma para interagir com a interface da plataforma e mostrar uma visualização de entidades empilhadas.

Você realmente conquistou muito ao longo deste curso até agora. Restam apenas algumas coisas a fazer! Primeiro, é aprender como publicar e assinar seu aplicativo New Relic para que ele possa ser executado em nossa plataforma, em vez de em seu próprio servidor local. Em segundo lugar, é aprender como lidar com alguns problemas comuns que você pode ver no desenvolvimento do aplicativo New Relic.

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: Descreva seu aplicativo para o catálogo.

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

Dica

Importante

Importante

Importante

Importante

Importante

Dica

Dica