NRQLデータをカスタマイズする

ヒント

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

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

このシリーズでは、さまざまなグラフで A/B テストデータを表示するNew Relicアプリケーション (略して NR1 アプリ) を作成します。ほとんどのグラフには、このシリーズの冒頭で起動したデモサービスから取得したデータを表示する必要があります。

前回のレッスンでは、New Relic のデータベースから取得した実際のデータを次のチャートに提供しました。

ニュースレターサブスクリプションバージョン
バージョン A - ページビュー
バージョン B - ページビュー
バージョンごとの合計サブスクリプション数

サブスクリプションとページビューのデータをクエリした経験があるため、さらに多くのグラフにデータを提供する準備ができていると感じるかもしれません。

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

ただし、これらのグラフは、 subscriptionイベントとpageViewイベントという 2 つの異なるソースからのデータを比較するため、データを提供したグラフとは異なります。

このレッスンでは、複数のソースからのデータを同じグラフに表示するようにフォーマットする方法を学習します。

データエクスプローラーでデータを試してみる

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

ここでは、 subscriptionイベントクエリとpageViewイベントクエリを試して、アプリで適切なデータを取得できることを確認できます。

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

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

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

これらのディメンションを使用して、サブスクリプションイベントをフィルター処理およびグループ化できます。 Version A - Page views vs. subscriptions [バージョン A - ページビューとサブスクリプション]、Version B - Page views vs. subscriptions [およびバージョン B - ページビューとサブスクリプションの場合]、サブスクリプションの合計をpage_versionでフィルターします。

NRQLクエリをクリックして、クエリビルダーに移動します。

ここで、クエリを表示し、手動で編集して必要なデータを取得できます。

WHERE句を追加して、サブスクリプションの合計をpage_versionでフィルターします。

SELECT count(*) FROM subscription WHERE page_version = 'a' SINCE 30 MINUTES AGO TIMESERIES

カウントを取得するには、 TIMESERIES句を削除します。

SELECT count(*) FROM subscription WHERE page_version = 'a' SINCE 30 MINUTES AGO

過去 1 週間の合計を表示するには、 SINCE句を変更します。

SELECT count(*) FROM subscription WHERE page_version = 'a' SINCE 7 DAYS AGO

Run [実行]をクリックすると、折れ線グラフではなくビルボードグラフで視覚化されたデータが表示されます。

Version A - Page views vs. subscriptions [バージョン A - ページビューとサブスクリプション]、およびVersion B - Page views vs. subscriptions [バージョン B - ページビューとサブスクリプションには]、合計 4 つのデータ値が必要です。

バージョン A のこれまでのサブスクリプション合計
バージョン A の全ページビュー合計
バージョン B のこれまでのサブスクリプション合計
バージョン B の全ページビュー合計
クエリビルダーを試して、適切なデータを取得する 4 つのクエリを見つけます。最終的には、次の 4 つのクエリが作成されます。
```
SELECT count(*) FROM subscription WHERE page_version = 'a' SINCE 7 DAYS AGO
SELECT count(*) FROM pageView WHERE page_version = 'a' SINCE 7 DAYS AGO
SELECT count(*) FROM subscription WHERE page_version = 'b' SINCE 7 DAYS AGO
SELECT count(*) FROM pageView WHERE page_version = 'b' SINCE 7 DAYS AGO
```
技術的な詳細
他の構造化クエリ言語とは異なり、NRQL はソース間でデータを結合するメカニズムを提供しません。このため、 subscriptionイベントの合計とpageViewイベントの合計を取得するには、2 つのクエリを実行する必要があります。
これまで、すべてのチャートに単一のクエリを提供してきました。ここでは、チャートごとに 2 つのクエリを提供する必要があります。残りの手順では、 NrqlQuery結果をカスタマイズして複数のソースからのデータをマージする方法を学習します。

複数のソースからNRQLをマージする

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

bash

$cd nru-programmability-course/customize-nrql-data/ab-test

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

Nerdlet のtotals.jsファイルで、 constructor()と React ライフサイクルメソッドcomponentDidMount()をVersionTotalsに実装します。

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

export default class VersionTotals extends React.Component {
    constructor() {
        super(...arguments);

        this.state = {
            tableData: {
                metadata: {
                    id: `totals-${this.props.version}`,
                    name: `Version ${this.props.version}`,
                    columns: ['name', 'count'],
                },
                data: [
                    {
                        name: 'Subscriptions',
                        count: 0
                    },
                    {
                        name: 'Page views',
                        count: 0
                    },
                ],
            }
        }
    }

    componentDidMount() {
        NrqlQuery.query({
            accountIds: this.props.accountIds,
            query: `SELECT count(*) FROM subscription WHERE page_version = '${this.props.version}' SINCE 7 DAYS AGO`,
            formatType: NrqlQuery.FORMAT_TYPE.RAW
        }).then(({ data }) => {
            if (data.raw) {
                let tableData = {...this.state.tableData}
                tableData.data[0].count = data.raw.results[0].count
                this.setState({tableData})
            }
        })

        NrqlQuery.query({
            accountIds: this.props.accountIds,
            query: `SELECT count(*) FROM pageView WHERE page_version = '${this.props.version}' SINCE 7 DAYS AGO`,
            formatType: NrqlQuery.FORMAT_TYPE.RAW
        }).then(({ data }) => {
            if (data.raw) {
                let tableData = {...this.state.tableData}
                tableData.data[1].count = data.raw.results[0].count
                this.setState({tableData})
            }

        })
    }

    render() {
        return <div>
            <HeadingText className="chartHeader">
                Version {this.props.version.toUpperCase()} - Page views vs. subscriptions
            </HeadingText>
            <TableChart data={[this.state.tableData]} fullWidth />
        </div>
    }
}

重要

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

ここでは、コンポーネントのコンストラクターで状態を初期化します。状態には単一の値tableDataがあり、これはTableChartのシリーズデータとメタデータを保持します。 componentDidMount()では、この状態のデータを入力するデータをクエリします。

componentDidMount() コンポーネントがコンポーネントツリーにマウントされたときに呼び出される React ライフサイクルメソッドです。データをクエリするには、コンストラクターではなくこのメソッドを使用します。これは、 New Relicからデータを要求するロジックによって副作用が発生し、状態値が設定されるためです。これらはいずれもコンストラクターでは実行すべきではありません。

componentDidMount()では、 NrqlQuery新しい方法で使用します。まず、データを直接チャートに提供するのではなく、データを変更するため、 formatTypeをNrqlQuery.FORMAT_TYPE.RAWに指定しました。以前は、チャートのrender()メソッドで JSX 形式を使用していました。次に、 query()メソッドを呼び出して、結果をthen()コールバックで処理し、コンソールにログを記録します。

Nerdlet のindex.jsファイルで、 ACCOUNT_IDという定数を作成し、それをVersionTotalsに渡します。

import React from 'react';
import { ChartGroup, Grid, GridItem } from 'nr1';
import EndTestSection from './end-test';
import NewsletterSignups from './newsletter-signups';
import PastTests from './past-tests';
import TotalCancellations from './total-cancellations';
import TotalSubscriptions from './total-subscriptions';
import VersionDescription from './description';
import VersionPageViews from './page-views';
import VersionTotals from './totals';

const ACCOUNT_ID = 123456  // <YOUR-ACCOUNT-ID>
const VERSION_A_DESCRIPTION = 'The newsletter signup message says, "Sign up for our newsletter"'
const VERSION_B_DESCRIPTION = 'The newsletter signup message says, "Sign up for our newsletter and get a free shirt!"'

export default class AbTestNerdletNerdlet extends React.Component {
    render() {
        return <div>
            <Grid className="wrapper">
                <GridItem columnSpan={6}>
                    <VersionDescription
                        description={VERSION_A_DESCRIPTION}
                        version="A"
                    />
                </GridItem>
                <GridItem columnSpan={6}>
                    <VersionDescription
                        description={VERSION_B_DESCRIPTION}
                        version="B"
                    />
                </GridItem>
                <GridItem columnSpan={12}><hr /></GridItem>
                <GridItem columnSpan={12}><NewsletterSignups /></GridItem>
                <GridItem columnSpan={6}><TotalSubscriptions /></GridItem>
                <GridItem columnSpan={6}><TotalCancellations /></GridItem>
                <GridItem columnSpan={6}>
                    <VersionTotals version='a' accountId={ACCOUNT_ID} />
                </GridItem>
                <GridItem columnSpan={6}>
                    <VersionTotals version='b' accountId={ACCOUNT_ID} />
                </GridItem>
                <ChartGroup>
                    <GridItem columnSpan={6}>
                        <VersionPageViews version='a' />
                    </GridItem>
                    <GridItem columnSpan={6}>
                        <VersionPageViews version='b' />
                    </GridItem>
                </ChartGroup>
                <GridItem columnSpan={12}><EndTestSection /></GridItem>
                <GridItem columnSpan={12}><PastTests /></GridItem>
            </Grid>
        </div>
    }
}

重要

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

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

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

bash

$nr1 nerdpack:uuid -gf

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

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

bash

$nr1 nerdpack:serve

New Relicでアプリに移動します。

アプリケーションのエラーを発見するのに役立つログを表示するには、お気に入りのbrowserで開発者ツールをオンにして、Console [コンソール]に移動します。

FireFoxの手順
Safariの手順
Chrome の説明
アプリが画面に表示されたら、コンソールの NRQL データを確認します。
このコンソールログは、探しているデータ、つまりsubscriptionまたはpageViewカウントがdata.raw.results[0].countにあることを示しています。次のステップは、そのカウントをstate.tableDataに保存することです。
ヒント
何かがうまくいかない場合は、これらのデバッグツールを使用して問題を特定してください。
以下の点を確認してください:
- レッスンからコードを正しくコピーしました
- 新しいUUIDを生成しました
- プロジェクト内の<YOUR NEW RELIC ACCOUNT ID>のすべてのインスタンスを実際の New Relicアカウント IDに置き換えました

totals.jsで、クエリデータを次の状態に保存します。

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

export default class VersionTotals extends React.Component {
    constructor() {
        super(...arguments);

        this.state = {
            tableData: {
                metadata: {
                    id: `totals-${this.props.version}`,
                    name: `Version ${this.props.version}`,
                    columns: ['name', 'count'],
                },
                data: [
                    {
                        name: 'Subscriptions',
                        count: 0
                    },
                    {
                        name: 'Page views',
                        count: 0
                    },
                ],
            }
        }
    }

    componentDidMount() {
        NrqlQuery.query({
            accountIds: this.props.accountIds,
            query: `SELECT count(*) FROM subscription WHERE page_version = '${this.props.version}' SINCE 7 DAYS AGO`,
            formatType: NrqlQuery.FORMAT_TYPE.RAW
        }).then(({ data }) => {
            if (data.raw) {
                let tableData = {...this.state.tableData}
                tableData.data[0].count = data.raw.results[0].count
                this.setState({tableData})
            }
        })

        NrqlQuery.query({
            accountIds: this.props.accountIds,
            query: `SELECT count(*) FROM pageView WHERE page_version = '${this.props.version}' SINCE 7 DAYS AGO`,
            formatType: NrqlQuery.FORMAT_TYPE.RAW
        }).then(({ data }) => {
            if (data.raw) {
                let tableData = {...this.state.tableData}
                tableData.data[1].count = data.raw.results[0].count
                this.setState({tableData})
            }

        })
    }

    render() {
        return <div>
            <HeadingText className="chartHeader">
                Version {this.props.version.toUpperCase()} - Page views vs. subscriptions
            </HeadingText>
            <TableChart data={[this.state.tableData]} fullWidth />
        </div>
    }
}

アクセスするデータには細心の注意を払ってください。配列インデックスを正しく設定することが特に重要です。サブスクリプションデータは、 tableDataではデータ配列の最初の要素であるため、 state.tableData.data[0].countに移動する必要があります。

data: [
    {
        name: 'Subscriptions',
        count: 0
    },
    {
        name: 'Page views',
        count: 0
    },
],

同様のロジックにより、ページビューデータはstate.tableData.data[1].countに送信されるはずです。

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

ヒント

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

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

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

このレッスンでは、 NrqlQuery.query()使用して複数のソースからデータを取得し、それらをつなぎ合わせてチャートで使用できるデータを作成する方法を学習しました。 NR1 アプリケーションには、モックデータを使用するグラフがまだ 2 つあることに注意してください。

バージョンごとの合計解約数
過去のテスト

残念ながら、デモアプリケーションでは、ユーザーがニュースレターの登録を解除したときや A/B テストを終了したときに、カスタムNew Relicイベントが作成されません。次のレッスンでは、NerdGraph と NerdStorage を使用してPast tests [過去のテスト]を入力する方法を学習します。

コース

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

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

NRQLデータをカスタマイズする

ヒント

データエクスプローラーでデータを試してみる .css-21sua1{background:none;border:none;width:0;padding:0;}

技術的な詳細

複数のソースからNRQLをマージする

重要

重要

ヒント

ヒント

コース

データエクスプローラーでデータを試してみる