Add NrqlQuery components to your Nerdlet

From your New Relic homepage, go to to the Data explorer from the top navigation menu:

Data explorer lets you explore your telemetry data:

• metrics
• events
• logs
• traces

Since the backend submits newsletter subscriptions as events to New Relic, you can see them in this view.

Select subscription from the Custom events menu:

This queries NRDB for subscription event totals per minute over the last 30 minutes and shows that data in a chart:

Click Dimensions to see a list of the attributes associated with these subscription events:

You can filter and group subscription events using these dimensions. Notice the NRQL query above the chart. This shows the chart's underlying query, which is based on these dimensions.

Click the page-version dimension to see the query change to group by FACET page_version:

The Data explorer presents two options for filtering and sorting your data:

• User interface (UI) selections like the one you've just made
• New Relic Query Language (NRQL)

The UI is useful for quickly filtering data, and it doesn't require you to know NRQL. For your New Relic application, however, you need to use NRQL queries.

Click the NRQL query to navigate to the Query builder:

Here, you can view and manually edit the query to fetch the data you need.

Change to the add-nrql-components/ab-test directory of the coursework repository:

$
cd nru-programmability-course/add-nrql-components/ab-test

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.

In nerdlets/ab-test-nerdlet/newsletter-signups.js, update the LineChart in NewsletterSignups. Remove the mock data, and use the NRQL query you built in the Data explorer:

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

In NrqlQuery, you set two props:

• accountIds: The id for the account you query from
• query: The query to perform

With these, your NR1 app can query the data you want to show in your chart.

<LineChart
    accountIds={<YOUR NEW RELIC ACCOUNT ID>}
    query="SELECT count(*) FROM subscription FACET page_version SINCE 30 MINUTES AGO TIMESERIES"
/>

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

Generate a new UUID for your Nerdpack:

$
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.

Serve your application locally:

$
nr1 nerdpack:serve

Go to https://one.newrelic.com?nerdpacks=local, and view your application under Apps > Your apps:

Newsletter subscriptions by version now shows real data from New Relic's database rather than the mock data you defined before. Notice that your chart pulls data when your application loads, but does not continue pulling data while the application is open. You can fix this by adding another prop.

Add a pollInterval:

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

The pollInterval is the number of milliseconds between chart refreshes. Each time the chart refreshes, it queries fresh data from New Relic. In this case, you refresh every minute.

In nerdlets/ab-test-nerdlet/total-subscriptions.js, update the TestDistributions component, removing the mock data and populating the PieChart with the same NRQL query you used for Newsletter subscriptions per version but with different TIMESERIES and SINCE clauses:

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

You don't need the TIMESERIES clause because the pie chart only shows numerical data. You don't need the SINCE clause because Total subscriptions per version needs to show all-time subscription totals.

With your Nerdpack served locally, view your application to see your charts serving real data:

Total subscriptions per version now shows all-time subscription totals from both versions of your demo application.

In page-views.js, remove the mock data from VersionPageViews and use a NrqlQuery component to supply a query:

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

With your Nerdpack served locally, view your application to see your charts serving real data:

In these new queries, you fetch pageView custom events instead of subscription events. You also use a WHERE clause to filter to a particular page_version rather than a FACET to group by page_version.