Nerdletにナビゲーションを追加する

ヒント

このレッスンは、New Relic アプリケーションをゼロから構築する方法を学習するコースの一部です。まだご覧になっていない方は、概要をご覧ください。

コースの各レッスンは前回のレッスンに基づいて構築されるため、このレッスンを開始する前に、前回のレッスン「Nerdlet に PlatformStateContext を追加する」を完了していることを確認してください。

前回のレッスンでは、 New Relic One SDK の PlatformStateContext を使用して、ユーザーがアプリのタイムピッカーから選択した時間範囲を調べました。ここでは、New Relic プラットフォームと対話する別のコンポーネントnavigationについて学習します。

navigationコンポーネントを使用すると、Nerdlet からエンティティを開いたり、エンティティに移動したり、エンティティの Location オブジェクトを構築したりできます。他の Nerdlet やランチャーにもnavigationを使用できます。

コースワークリポジトリのadd-navigation/ab-testディレクトリに変更します:

bash

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

このディレクトリには、コースのこの時点でアプリケーションに含まれることが予想されるコードが含まれています。各レッスンの開始時に正しいディレクトリに移動することで、カスタムコードが残され、間違ったコードがレッスン間で持ち越されることがなくなります。

newsletter-signups.jsで、 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>
    }
}

重要

<YOUR NEW RELIC ACCOUNT ID>を実際の New Relicアカウント IDに置き換えてください。

このメソッドは、 navigation.openStackedEntity()を使用して、デモアプリケーションの APM エンティティをスタックビューで表示します。通知openApmEntity()にはENTITY_GUIDが必要です。その ID を見つけて定数に保存する必要があります。

APMに移動します。

Newsletter [ニュースレター]サービスのメタデータを参照してください。

エンティティの GUID をコピーします。

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

重要

<YOUR NEW RELIC ACCOUNT ID>と<YOUR NEW RELIC ENTITY GUID>を、実際の New Relicアカウント IDと先ほどコピーしたエンティティ GUID にそれぞれ置き換えてください。

これで、 openApmEntity()どのエンティティを表示するかを認識します。次に、このメソッドを呼び出すボタンを作成する必要があります。

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

重要

<YOUR NEW RELIC ACCOUNT ID>と<YOUR NEW RELIC ENTITY GUID>をそれぞれ実際の New Relicアカウント IDとエンティティ GUID に置き換えてください。

ここでは、ボタンを作成し、クリックされたときにopenApmEntity()を呼び出すように構成しました。

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

重要

<YOUR NEW RELIC ACCOUNT ID>と<YOUR NEW RELIC ENTITY GUID>をそれぞれ実際の New Relicアカウント IDとエンティティ GUID に置き換えてください。

StackとStackItemを使用して、 HeadingTextと同じ行の右端にボタンを配置します。

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

重要

<YOUR NEW RELIC ACCOUNT ID>と<YOUR NEW RELIC ENTITY GUID>をそれぞれ実際の New Relicアカウント IDとエンティティ GUID に置き換えてください。

ここでは、全幅のStackを使用して行のレイアウトを設定しました。 HeadingTextボタンの幅を除く行全体を埋め尽くすようにするには、 StackItem.growプロパティを使用します。

nru-programmability-course/add-navigation/ab-testにある Nerdpack のルートに移動します。

Nerdpack の新しい UUID を生成します。

bash

$nr1 nerdpack:uuid -gf

既存の Nerdpack を含むコースワークリポジトリを複製したため、独自の一意の識別子を生成する必要があります。この UUID は Nerdpack を New Relic アカウントにマッピングします。また、アプリがアカウントに代わって Nerdgraph リクエストを行うことも可能になります。

アプリケーションをローカルで提供します。

bash

$nr1 nerdpack:serve

https://one.newrelic.com?nerdpacks=localにアクセスし、 Apps [アプリ] > Your apps [あなたのアプリ]でアプリケーションを表示します。

App performance [アプリのパフォーマンス]をクリックします。

積み重ねられたエンティティが表示されます。

ヒント

何かがうまくいかない場合は、 browserのデバッグツールを使用して問題を特定してください。

以下の点を確認してください:

レッスンからコードを正しくコピーしました
新しいUUIDを生成しました
プロジェクト内のすべての<YOUR NEW RELIC ACCOUNT ID>と<YOUR NEW RELIC ENTITY GUID>のインスタンスを、実際の New Relicアカウント IDとエンティティ GUID に置き換えました。

おめでとう！ New Relic A/B テストアプリケーション用に記述するすべてのコードの作成が完了しました。これで、A/B テストを実行しているデモサービスからNew Relicデータを報告するアプリケーションができました。いくつかのグラフ、ボタン、その他の UI 要素を作成しました。そして、コンポーネントを読みやすく使いやすいビューに整理しました。

ビジュアルに加えて、New Relic 内外の複数のデータソースからチャートにデータを提供しました。 New Relic アプリケーションの独自のデータストアを利用するバックエンド機能を作成しました。また、プラットフォーム UI と対話し、スタックされたエンティティビューを表示するために、プラットフォーム API も利用しました。

これまで、このコースを通じて本当に多くのことを達成してきました。やるべきことはあとわずかです。まず、New Relic アプリケーションを公開およびサブスクライブして、独自のローカルサーバーではなく当社のプラットフォームで実行できるようにする方法を学習します。 2 つ目は、New Relic アプリケーション開発で発生する可能性のある一般的な問題に対処する方法を学ぶことです。

ヒント

このレッスンは、New Relic アプリケーションをゼロから構築する方法を学習するコースの一部です。次のレッスンに進み、カタログ用のアプリについて説明します。

この機械翻訳は、参考として提供されています。

Nerdletにナビゲーションを追加する

ヒント

重要

重要

重要

重要

重要

ヒント

ヒント