Add navigation to your Nerdlet

Course

This lesson is part of a course that teaches you how to build a New Relic One application from the ground up. If you haven't already, check out the course introduction.

Each lesson in the course builds upon the last, so make sure you've completed the last lesson, Add PlatformStateContext to your nerdlet, before starting this one.

In the last lesson, you used PlatformStateContext from the New Relic One SDK to lookup the application user's account ID and the time range they selected from the app's time picker. Now, you'll learn about another component that interacts with the New Relic platform: navigation.

The navigation component lets you open entities, navigate to entities, and build Location objects for entities from your nerdlet. You can also use navigation for other nerdlets and launchers.

Step 1 of 10

Change to the add-navigation directory of the coursework repository:

bash
$
cd nru-programmability-course/add-navigation

This directory contains the code that we expect your application to have at this point in the course. By navigating to the correct directory at the start of each lesson, you leave your custom code behind, thereby protecting yourself from carrying incorrect code from one lesson to the next.

Step 2 of 10

In newsletter-signups.js, create a new method, called NewsletterSignups.openApmEntity():

import React from 'react';
import {
HeadingText,
LineChart,
NrqlQuery,
PlatformStateContext,
navigation,
} from 'nr1';
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
accountId={platformState.accountId}
query="SELECT count(*) FROM subscription FACET page_version TIMESERIES"
timeRange={platformState.timeRange}
pollInterval={60000}
>
{
({ data }) => {
return <LineChart data={data} fullWidth />;
}
}
</NrqlQuery>
}
}
</PlatformStateContext.Consumer>
</div>
}
}
nerdlets/ab-test-nerdlet/newsletter-signups.js

This method uses navigation.openStackedEntity() to display your demo application's APM entity in a stacked view. Notice openApmEntity() requires your ENTITY_GUID. You need to locate that ID and store it in a constant.

Step 3 of 10

Navigate to APM:

APM navigation

See metadata for your Newsletter service:

Entity options

Copy the entity's GUID:

Entity GUID

Create an ENTITY_GUID constant:

import React from 'react';
import {
HeadingText,
LineChart,
NrqlQuery,
PlatformStateContext,
navigation,
} from 'nr1';
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
accountId={platformState.accountId}
query="SELECT count(*) FROM subscription FACET page_version TIMESERIES"
timeRange={platformState.timeRange}
pollInterval={60000}
>
{
({ data }) => {
return <LineChart data={data} fullWidth />;
}
}
</NrqlQuery>
}
}
</PlatformStateContext.Consumer>
</div>
}
}
nerdlets/ab-test-nerdlet/newsletter-signups.js

Now openApmEntity() knows that entity to show. Next, you need to create a button to invoke this method.

Step 4 of 10

Create a button to show your APM entity:

import React from 'react';
import {
Button,
HeadingText,
LineChart,
NrqlQuery,
PlatformStateContext,
navigation,
} from 'nr1';
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
accountId={platformState.accountId}
query="SELECT count(*) FROM subscription FACET page_version TIMESERIES"
timeRange={platformState.timeRange}
pollInterval={60000}
>
{
({ data }) => {
return <LineChart data={data} fullWidth />;
}
}
</NrqlQuery>
}
}
</PlatformStateContext.Consumer>
</div>
}
}
nerdlets/ab-test-nerdlet/newsletter-signups.js

Here, you've created a button and configured it to call .openApmEntity() when it's clicked.

Step 5 of 10

Import Stack and StackItem:

import React from 'react';
import {
Button,
HeadingText,
LineChart,
NrqlQuery,
PlatformStateContext,
Stack,
StackItem,
navigation,
} from 'nr1';
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
accountId={platformState.accountId}
query="SELECT count(*) FROM subscription FACET page_version TIMESERIES"
timeRange={platformState.timeRange}
pollInterval={60000}
>
{
({ data }) => {
return <LineChart data={data} fullWidth />;
}
}
</NrqlQuery>
}
}
</PlatformStateContext.Consumer>
</div>
}
}
nerdlets/ab-test-nerdlet/newsletter-signups.js

You'll use Stack and StackItem to lay out the button on the far right side of the same row that the HeadingText is on.

Step 6 of 10

Lay out the Stack:

import React from 'react';
import {
Button,
HeadingText,
LineChart,
NrqlQuery,
PlatformStateContext,
Stack,
StackItem,
navigation,
} from 'nr1';
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
accountId={platformState.accountId}
query="SELECT count(*) FROM subscription FACET page_version TIMESERIES"
timeRange={platformState.timeRange}
pollInterval={60000}
>
{
({ data }) => {
return <LineChart data={data} fullWidth />;
}
}
</NrqlQuery>
}
}
</PlatformStateContext.Consumer>
</div>
}
}
nerdlets/ab-test-nerdlet/newsletter-signups.js

Here, you used a full-width Stack to set up the layout for the row. To make the HeadingText fill the entire row but the width of the button, you used the StackItem.grow prop.

Step 7 of 10

Navigate to the root of your Nerdpack at nru-programmability-course/add-navigation/ab-test.

Step 8 of 10

Generate a new UUID for your Nerdpack:

bash
$
nr1 nerdpack:uuid -gf

Because you cloned the coursework repository that contained an existing Nerdpack, you need to generate your own unique identifier. This UUID maps your Nerdpack to your New Relic account. It also allows your app to make Nerdgraph requests on behalf of your account.

Step 9 of 10

Serve your application locally:

bash
$
nr1 nerdpack:serve
Step 10 of 10

View your application:

Your New Relic One application with an App performance button

Click App performance:

APM stacked entity

Now you see the stacked entity!

Congratulations! You're finished writing all the code you'll write for you New Relic One A/B test application. Now, you have an application reporting New Relic data from your demo application that is running an A/B test. You've created several charts, buttons, and other UI elements. You've organized your components into a readable and usable view.

On top of the visuals, you've supplied data to your charts from multiple data sources in and out of New Relic. You've created some backend functionality which utilizes your New Relic One application's own data store. You've also utilized the platform APIs for interacting with platform UI and showing a stacked entity view.

You've really accomplished a lot throughout this course, so far. There are only a few things left to do! First, is to learn how to deploy and subscribe to your New Relic application so that it can run on our platform instead of your own local server. Second, is to learn how to deal with some common issues you might see in New Relic One application development.

Course

This lesson is part of a course that teaches you how to build a New Relic One application from the ground up. Continue on to the next lesson: Describe your app for the catalog.