NerdletにNrqlQueryコンポーネントを追加する

ヒント

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

コースの各レッスンは前回のレッスンに基づいて構築されるため、このレッスンを開始する前に、前回のレッスン「テスト終了確認モーダルの表示」を完了していることを確認してください。

このシリーズでは、A/B テストを実行しているデモサービスからデータを取り込む本格的なNew Relicアプリケーションを構築します。アプリは A/B テストデータを興味深い方法で表示するため、最終的には、高品質のニュースレターの購読を増やすというビジネス目標を達成するためにバージョン A とバージョン B のどちらがより効果的かを選択できるようになります。

これまでのチュートリアルでは、データを視覚化するためのグラフを作成し、それらのグラフを使用および理解できるように整理しました。また、最も効果的なバージョンに自信が持てるようになったらテストを終了するためのフォームをアプリ内に作成しました。ただし、これまでのところ、チャートには次のような模擬データが表示されているため、どのバージョンがより効果的であるかを判断することはできません。

const versionASignups = {
    metadata: {
        id: 'version-a-newsletter-signups',
        name: 'Version A',
        viz: 'main',
        color: 'blue',
    },
    data: [
        { x: 0, y: 0 },
        { x: 10, y: 10 },
        { x: 20, y: 15 },
        { x: 30, y: 5 },
        { x: 40, y: 30 },
        { x: 50, y: 25 },
    ],
}

チャートのdataプロパティは、このような手動で作成されたデータや、フォーマットし直されたサードパーティのデータを提供するのに便利です。しかし、多くのチャートでは、リアルタイムの New Relic データを表示する必要があります。たとえば、Newsletter subscriptions by version [バージョン別のニュースレターサブスクリプションには]、New Relicのデータベース (略して NRDB) に存在するサブスクリプションデータが表示されます。

NRDB をクエリするには、まず、探しているデータが何であるかを知る必要があります。デモのバックエンドサービスを覚えていますか? このサービスは、ユーザーがサイトからニュースレターを購読すると、サブスクリプションイベントをNew Relicに報告します。デモサービスの実行中に、New Relic でこれらのサブスクリプションイベントを表示できます。

New Relicでサブスクリプションイベントを表示する

チャートから NRDB をクエリする前に、New Relic の Web インターフェースからデータをクエリしてみることを試してみてください。

New Relicホームページの上部のナビゲーションメニューからData explorer [データエクスプローラー]に移動します。

データエクスプローラーを使用すると、テレメトリーデータを探索できます。

メトリックス
イベント
ログ
トレース
バックエンドはニュースレターのサブスクリプションをイベントとして New Relic に送信するため、このビューで確認できます。

Subscription [カスタムイベント]メニューからCustom events [サブスクリプション]を選択します。

このクエリ NRDB は、過去 30 分間のサブスクリプションイベントの合計を 1 分あたりに計算し、そのデータをグラフで表示します。

Dimensions [ディメンション]をクリックすると、これらのサブスクリプションイベントに関連付けられている属性のリストが表示されます。

これらのディメンションを使用して、サブスクリプションイベントをフィルター処理およびグループ化できます。グラフの上にあるNRQLクエリに注目してください。これは、これらのディメンションに基づいたチャートの基になるクエリを示します。

page-version [ページバージョン]ディメンションをクリックすると、クエリがFACET page_versionでグループ化されるように変更されます。

データエクスプローラーには、データのフィルタリングと並べ替えのための 2 つのオプションがあります。

今選択したようなユーザーインタフェース ( UI ) の選択
New Relic クエリ言語 (NRQL)
UI はデータをすばやくフィルタリングするのに役立ち、NRQL を知る必要はありません。ただし、New Relic アプリケーションでは、NRQL クエリを使用する必要があります。
NRQLクエリをクリックして、クエリビルダーに移動します。
ここで、クエリを表示し、手動で編集して必要なデータを取得できます。

`NewsletterSignups`を更新 `NrqlQuery`

NR1 アプリに New Relic データを統合する前に、設計ガイドを参照してください。

New Relic アプリケーションには、折れ線グラフ、円グラフ、表グラフなど、合計 8 つのグラフがあります。これらの各グラフは現在模擬データを示していますが、有用であるためには実際のデータを表示する必要があります。まず、最上位のチャートNewsletter subscriptions per version [バージョンごとのニュースレターサブスクリプション]のデータのクエリに焦点を当てます。

データエクスプローラーで作成したクエリを使用すると、このグラフに必要なデータがすでに用意されています。

技術的詳細

クエリでは、サブスクリプションの合計 ( SELECT count(*) FROM subscriptions ) を取得し、ページバージョン ( FACET page_version ) ごとにグループ化し、時系列を過去 30 分間 ( SINCE 30 MINUTES AGO TIMESERIES ) にフォーカスします。

NRQL クエリの詳細については、ドキュメントをご覧ください。

次に、NRQL クエリをNewsletter subscriptions per version [バージョンごとのニュースレターのサブスクリプション]チャートに渡す方法を学習します。

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

bash

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

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

nerdlets/ab-test-nerdlet/newsletter-signups.jsで、 NewsletterSignupsのLineChartを更新します。モックデータを削除し、データエクスプローラーで作成した NRQL クエリを使用します。

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

重要

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

NrqlQueryでは、2 つのプロパティを設定します。

accountIds: クエリを実行するアカウントのID
query: 実行するクエリ

これらを使用すると、NR1 アプリはチャートに表示するデータを照会できます。

ヒント

NRQL を使用してチャートにデータを提供するための便利なプロパティqueryがあります。 NrqlQueryコンポーネントを使用したくない場合は、代わりにqueryプロパティを試してください。

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

accountIdsを指定する必要があることに注意してください。

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

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

bash

$nr1 nerdpack:uuid -gf

既存の Nerdpack を含むコースワークリポジトリを複製したため、独自の一意の識別子を生成する必要があります。この UUID は Nerdpack を New Relic アカウントにマッピングします。

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

bash

$nr1 nerdpack:serve

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

Newsletter subscriptions by version [バージョン別のニュースレターのサブスクリプションには]、以前に定義した模擬データではなく、New Relic のデータベースからの実際のデータが表示されるようになりました。アプリケーションが読み込まれるとチャートはデータを取得しますが、アプリケーションが開いている間はデータの取得を継続しないことに注意してください。別のプロップを追加することでこれを修正できます。

ヒント

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

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

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

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

重要

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

pollInterval 、グラフの更新間隔（ミリ秒）です。チャートが更新されるたびに、 New Relicから最新のデータが照会されます。この場合、1 分ごとに更新されます。

`PieChart`に `subscription`

ここまで、 New RelicデータをNewsletter subscriptions per version [バージョンごとのニュースレターサブスクリプション]に渡す方法を見てきました。次は、Total subscriptions per version [バージョンごとの合計サブスクリプション]に進みます。これら 2 つのグラフは、バージョン別にグループ化されたサブスクリプションイベントデータを比較するという点で似ています。 Newsletter subscriptions per version [バージョンごとのニュースレターサブスクリプション]とTotal subscriptions per version [バージョンごとの合計サブスクリプション]の主な違いは次のとおりです。

1つは折れ線グラフ、もう1つは円グラフです
1つは時系列データを表示し、もう1つは全期間の合計を表示します

nerdlets/ab-test-nerdlet/total-subscriptions.jsで、 TestDistributionsコンポーネントを更新し、モックデータを削除して、Newsletter subscriptions per version [バージョンごとのニュースレターのサブスクリプション]に使用したのと同じ NRQL クエリをPieChartに入力しますが、 TIMESERIESとSINCE句は異なります。

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

重要

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

円グラフには数値データのみが表示されるため、 TIMESERIES句は必要ありません。 Total subscriptions per version [バージョンごとの合計サブスクリプションには]、これまでのサブスクリプションの合計が表示される必要があるため、 SINCE句は必要ありません。

Nerdpack をローカルで提供して、アプリケーションを表示し、実際のデータを提供するチャートを確認します。

Total subscriptions per version [バージョンごとの合計]サブスクリプションには、デモアプリケーションの両方のバージョンのこれまでのサブスクリプションの合計が表示されるようになりました。

ヒント

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

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

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

よくやった！ New Relicのデータベースから実際のサブスクリプションデータをクエリするためのチャートをいくつか構成しました。

`pageView`イベントデータをグラフに入力します

まだ模擬データを使用している残りのグラフを検討してください。

バージョンごとの合計解約数
バージョン A - ページビューとサブスクリプション
バージョン B - ページビューとサブスクリプション
バージョン A - ページビュー
バージョン B - ページビュー
過去のテスト

これらのグラフの一部にはページビューデータを表示する必要があります。幸いなことに、デモアプリケーションでは、サブスクリプションの場合と同様に、ページビューごとにカスタムイベントが作成されます。 Version A - Page views vs. subscriptions [バージョン A - ページビューとサブスクリプション]とVersion B - Page views vs. subscriptions [バージョン B - ページビューとサブスクリプションには] つのソースからのデータが必要なので、今のところはこれらを無視し、Version A - Page views [バージョン A - ページビュー]とVersion B - Page views [バージョン B - ページビュー]に焦点を当てます。

page-views.jsでは、 VersionPageViewsからモックデータを削除し、 NrqlQueryコンポーネントを使用してクエリを指定します。

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

重要

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

Nerdpack をローカルで提供して、アプリケーションを表示し、実際のデータを提供するチャートを確認します。

これらの新しいクエリでは、 subscriptionイベントではなくpageViewカスタムイベントを取得します。また、 page_versionでグループ化するFACETではなく、特定のpage_versionにフィルター処理するWHERE句も使用します。

ヒント

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

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

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

ふう、クエリはたくさんありますが、アプリケーションは素晴らしいですね! 実際のデータが 4 つのグラフに表示されます。 2 つのソースからのデータが必要であるために無視した 2 つのグラフを覚えていますか?

バージョン A - ページビューとサブスクリプション
バージョン B - ページビューとサブスクリプション

NRQL には複数のソースからデータをクエリする方法がないため、これまで扱っていたチャートとは異なる方法でこれらを処理する必要があります。次のレッスンでは、これら 2 つのグラフにデータを提供する方法を学習します。

コース

このレッスンは、New Relic アプリケーションをゼロから構築する方法を学習するコースの一部です。次のレッスン「NRQL データのカスタマイズ」に進みます。

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

NerdletにNrqlQueryコンポーネントを追加する

ヒント

New Relicでサブスクリプションイベントを表示する .css-21sua1{background:none;border:none;width:0;padding:0;}

NewsletterSignupsを更新 NrqlQuery

技術的詳細

重要

ヒント

ヒント

重要

PieChartに subscription

重要

ヒント

pageViewイベントデータをグラフに入力します

重要

ヒント

コース

New Relicでサブスクリプションイベントを表示する

`NewsletterSignups`を更新 `NrqlQuery`

`PieChart`に `subscription`

`pageView`イベントデータをグラフに入力します