Agrega navegación a tu Nerdlet

Sugerencia

Esta lección es parte de un curso que le muestra cómo crear una aplicación New Relic desde cero. Si aún no lo hiciste, consulta la descripción general.

Cada lección del curso se basa en la anterior, así que cerciorar de completar la última lección, Agregar PlatformStateContext a su nerdlet, antes de comenzar esta.

En la última lección, empleó PlatformStateContext del SDK de New Relic One para buscar el rango de tiempo que el usuario seleccionó en el selector de tiempo de la aplicación. Ahora conocerá otro componente que interactúa con la plataforma New Relic: navigation.

El componente navigation te permite abrir entidad, navegar a entidad y crear objetos de ubicación para entidad desde tu Nerdlet. También puedes usar navigation para otros Nerdlets y launchers.

Cambie al directorio add-navigation/ab-test del repositorio de trabajos del curso:

bash

$cd nru-programmability-course/add-navigation/ab-test

Este directorio contiene el código que esperamos que tenga su aplicación en este punto del curso. Al navegar al directorio correcto al comienzo de cada lección, deja atrás su código personalizado, proteger así de llevar código incorrecto de una lección a la siguiente.

En newsletter-signups.js, cree un nuevo método, llamado 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

Cerciorar de reemplazar <YOUR NEW RELIC ACCOUNT ID> con su ID de cuenta real de New Relic.

Este método emplea navigation.openStackedEntity() para mostrar la entidad APM de su aplicación de demostración en una vista apilada. El aviso openApmEntity() requiere su ENTITY_GUID. Debe localizar esa identificación y almacenarla en una constante.

Navegue hasta APM.

Consulte los metadatos de su servicio de Newsletter.

Copie el GUID de la entidad.

Cree una 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

Cerciorar de reemplazar <YOUR NEW RELIC ACCOUNT ID> y <YOUR NEW RELIC ENTITY GUID> con su ID de cuenta de New Relic real y el GUID de entidad que acaba de copiar, respectivamente.

Ahora, openApmEntity() sabe qué entidad mostrar. A continuación, debe crear un botón para invocar este método.

Cree un botón para mostrar su entidad 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

Cerciorar de reemplazar <YOUR NEW RELIC ACCOUNT ID> y <YOUR NEW RELIC ENTITY GUID> con su ID de cuenta de New Relic y GUID de entidad reales, respectivamente.

Aquí, creó un botón y lo configuró para llamar a openApmEntity() cuando se hace clic en él.

Importar Stack y 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

Cerciorar de reemplazar <YOUR NEW RELIC ACCOUNT ID> y <YOUR NEW RELIC ENTITY GUID> con su ID de cuenta de New Relic y GUID de entidad reales, respectivamente.

Empleará Stack y StackItem para diseñar el botón en el extremo derecho de la misma fila en la que está HeadingText.

Diseñe el 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

Cerciorar de reemplazar <YOUR NEW RELIC ACCOUNT ID> y <YOUR NEW RELIC ENTITY GUID> con su ID de cuenta de New Relic y GUID de entidad reales, respectivamente.

Aquí, empleó un Stack de ancho completo para configurar el diseño de la fila. Para hacer que HeadingText llene toda la fila excepto el ancho del botón, usaste el accesorio StackItem.grow.

Navega hasta la raíz de tu Nerdpack en nru-programmability-course/add-navigation/ab-test.

Genera un nuevo UUID para tu Nerdpack:

bash

$nr1 nerdpack:uuid -gf

Debido a que clonaste el repositorio de trabajos del curso que contenía un Nerdpack existente, necesitas generar tu propio identificador único. Este UUID asigna su Nerdpack a su cuenta New Relic. También permite que su aplicación realice solicitudes de Nerdgraph en nombre de su cuenta.

Entregue su aplicación localmente:

bash

$nr1 nerdpack:serve

Vaya a https://one.newrelic.com?nerdpacks=local y vea su aplicación en Apps > Your apps.

Haz clic en App performance.

Ahora ves la entidad apilada.

Sugerencia

Si algo no funciona, emplee las herramientas de depuración de su browser para intentar identificar el problema.

Cerciorar:

Copié el código correctamente de la lección.
Generó un nuevo UUID
Reemplazó todas las instancias de <YOUR NEW RELIC ACCOUNT ID> y <YOUR NEW RELIC ENTITY GUID> en su proyecto con su New Relic ID de cuenta y GUID de entidad reales, respectivamente

¡Felicidades! Ya terminaste de escribir todo el código que escribirás para tu aplicación New Relic Prueba A/B. Ahora tiene una aplicación que informa datos de New Relic de su servicio de demostración que está ejecutando una Prueba A/B. Creó varios gráficos, botones y otros elementos UI. Y organizó sus componentes en una vista legible y utilizable.

Además de los elementos visuales, proporcionó datos a sus gráficos desde múltiples fuentes de datos dentro y fuera de New Relic. Creó algunas funciones de backend que emplean el propio almacén de datos de su aplicación New Relic. También empleó la API de la plataforma para interactuar con UI de la plataforma y mostrar una vista de entidades apiladas.

Realmente lograste mucho a lo largo de este curso hasta ahora. ¡Solo quedan unas pocas cosas por hacer! Primero, aprender cómo publicar y suscribir a su aplicación New Relic para que pueda ejecutar en nuestra plataforma en lugar de en su propio servidor local. En segundo lugar, aprender a solucionar algunos problemas comunes que puede observar en el desarrollo de la aplicación New Relic.

Sugerencia

Esta lección es parte de un curso que le muestra cómo crear una aplicación New Relic desde cero. Continúe con la siguiente lección: Describa su aplicación para el catálogo.

Te ofrecemos esta traducción automática para facilitar la lectura.

Sugerencia

Importante

Importante

Importante

Importante

Importante

Sugerencia

Sugerencia