NerdletにPlatformStateContextを追加する

ヒント

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

コースの各レッスンは前回のレッスンに基づいて構築されるため、このレッスンを開始する前に、前回のレッスン「サードパーティのサービスからデータを取得する」を完了していることを確認してください。

このコースでは、New Relic アプリケーションを構築します。このアプリケーションは、A/B テストを実行しているデモサービスからのテレメトリーデータを表示し、そのデータをダッシュボードなどのグラフで表示できるようにします。ただし、New Relic アプリケーションは、New Relic データを表示する以上の機能を備えているため、ダッシュボードとは異なります。外部データを取得し、UI コンポーネントと機能を提供し、独自の小さなデータストアも備えています。このNew Relicアプリケーションの目的は、A/B テストの結果とその結果がビジネス目標にどのように結びつくかをよりよく理解できるようにコンテキストを提示することです。

これまで、すべてのグラフを作成し、使いやすさを向上させるために整理し、実際のデータを提供するなど、さまざまな作業を行ってきました。プラットフォーム API コンポーネントを使用して、いくつかの最終的な改善を行うことができます。このレッスンでは、New Relic プラットフォームの状態の値を使用する方法を学習します。

コースワークリポジトリの add-プラットフォーム-state-context/ab-test ディレクトリに移動します。

bash

$cd nru-programmability-course/add-platform-state-context/ab-test

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

nerdlets/ab-test-nerdlet/newsletter-signups.jsで、 NewsletterSignupsコンポーネントのrender()メソッドにPlatformStateContext.Consumerを追加します。

import React from 'react';
import {
    HeadingText,
    LineChart,
    NrqlQuery,
    PlatformStateContext,
} 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>
            <PlatformStateContext.Consumer>
                {
                    (platformState) => {
                        return <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>
                    }
                }
            </PlatformStateContext.Consumer>
        </div>
    }
}

重要

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

NrqlQueryはACCOUNT_IDという定数を使用していることに注意してください。 Nerdlet でアカウント識別子をハードコーディングする代わりに、プラットフォーム URL 状態からaccountIds使用できます。

PlatformStateContext.Consumer プラットフォームの URL 状態へのアクセスを提供します。このコンテキストには、アプリで使用するtimeRangeという重要な値が含まれています。

NrqlQueryでは、クエリでデータを取得する履歴期間を識別するSINCE句が使用されていることに注意してください。現在、 SINCE句は30 MINUTES AGOに設定されています。 timeRangeを使用すると、プラットフォームのタイムピッカーを使用してこの時間枠を調整できます。

プラットフォームの状態のtimeRangeを活用します:

import React from 'react';
import {
    HeadingText,
    LineChart,
    NrqlQuery,
    PlatformStateContext,
} 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>
            <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に置き換えてください。

現在、 NewsletterSignupsハードコードされたSINCE句の代わりにplatformState.timeRangeを使用します。

NrqlQueryコンポーネントは便利なtimeRangeプロパティを受け入れますが、すべてのコンポーネントが受け入れるわけではありません。 duration 、 begin_time 、またはend_timeにアクセスすることで、他のコンテキストでもtimeRangeを使用できます。

<PlatformStateContext.Consumer>
  {(platformState) => {
    console.log(platformState.timeRange.duration);
  }}
</PlatformStateContext.Consumer>;

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

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

bash

$nr1 nerdpack:uuid -gf

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

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

bash

$nr1 nerdpack:serve

アプリケーションを表示します。

NrqlQueryは現在プラットフォームの状態のtimeRangeを使用していますが、チャートにはおそらく最後の 30 分間が表示されます。なぜ？プラットフォーム状態のtimeRangeどこから来るのでしょうか?

タイムピッカーは、アプリケーションのナビゲーションバーの右側にあります。

この値を変更すると、チャートが更新されます。

ヒント

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

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

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

VersionPageViewsを更新：

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

const ACCOUNT_ID = 1234567  // <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>
            <PlatformStateContext.Consumer>
                {
                    (platformState) => {
                        return <NrqlQuery
                            accountIds={[ACCOUNT_ID]}
                            query={`SELECT count(*) FROM pageView WHERE page_version = '${this.props.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に置き換えてください。

New Relic アプリケーション内のすべてのチャートのうち、タイムピッカーで更新する必要があるのは、次の 3 つのチャートです。その他、Total subscriptions per version [バージョンごとの合計サブスクリプション数]、Total cancellations per version [バージョンごとの合計キャンセル数]、Version A - Page views vs. subscriptions[バージョン A - ページビューとサブスクリプション数]、Version B - Page views vs. subscriptions [バージョン B - ページビューとサブスクリプション数では]、時間の経過に伴う合計値が表示されます。したがって、このコースの目的上、これが妥当な期間であるため、 SINCE句を7 DAYS AGOにハードコーディングすることは理にかなっています。

Nerdpack をローカルで提供しながら、NR1 アプリを表示して、選択した時間範囲でチャートが更新されるのを確認します。

ヒント

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

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

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

完了したら、ローカルサーバーのターミナルウィンドウでCTRL+Cを押して、New Relic アプリケーションの提供を停止します。

プラットフォームの状態に基づいてクエリを実行するようになったため、一部のグラフの時間範囲は動的になります。これは大きな改善点です。グラフを調整して特定の時点のデータを表示できるようになり、データをビジネス成果に結び付けるのに役立ちます。

プラットフォーム API コンポーネントは、ユーザーを New Relic 内の別の場所に移動する機能など、さらに多くの機能を提供します。次のレッスンでその方法を学びます。

ヒント

このレッスンは、New Relic アプリケーションをゼロから構築する方法を学習するコースの一部です。次のレッスンに進みましょう: ナードレットにナビゲーションを追加します。

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

NerdletにPlatformStateContextを追加する

ヒント

重要

重要

ヒント

重要

ヒント

ヒント