タイムピッカーを追加する

このガイドでは、サンプルのトランザクション概要アプリケーションでタイムピッカーへのアクセスを追加するプロセスを段階的に説明します。

サンプルアプリケーションでは、アプリケーションごとのトランザクション、平均応答時間、HTTP 応答コード、トランザクションエラーなど、テレメトリーデータの概要が提供されます。タイムピッカーを有効にすると、ユーザーは表示するデータの時間範囲を指定できます。

以下の手順を説明する 12 分間のビデオも用意されています。

あなたが始める前に

プロジェクトを開発するには、New Relic One CLI (コマンドラインインターフェース) が必要です。まだインストールしていない場合は、次の操作を行ってください。

Node.js をインストールします。
CLI クイックスタートの手順 1 ～ 4 を完了します。ステップ 1 では、アカウント名の前の番号を必ずコピーしてください。これはあなたのアカウント ID です。後で必要になります。

重要

New Relic One CLI をすでにインストールしているが、アカウント ID を思い出せない場合は、 CLI クイックスタートを再度起動し、 Get your API keyの下矢印をクリックします。アカウント ID は、アカウント名の前の番号です。

詳細については、「開発環境のセットアップ」を参照してください。

タイムピッカーのサンプルコードを準備する

開始するには、次の手順を実行してアプリケーションの UUID (ユニークID) を更新し、サンプルアプリケーションをローカルで実行します。

まだ行っていない場合は、ハウツー GitHub リポジトリからサンプルアプリケーションをクローンしてください。

bash

$git clone https://github.com/newrelic/nr1-how-to.git

ディレクトリnr1-howto-add-time-picker-nerdletに変更します:

bash

$cd nr1-how-to/add-time-picker/nerdlets/nr1-howto-add-time-picker-nerdlet

好みのテキストエディターでindex.jsを開きます。

YOUR_ACCOUNT_IDをアカウント ID に置き換えます:

重要

アカウント ID は CLI クイックスタートで確認できます ( 始める前にを参照)。

this.accountId = <ADD YOUR ACCOUNT ID>;

add-time-pickerディレクトリに変更します:

bash

$cd /nr1-how-to/add-time-picker

次のコマンドを実行して UUID を更新し、サンプルアプリケーションを提供します。

bash

$nr1 update
$nr1 nerdpack:uuid -gf
$nr1 nerdpack:serve

サンプルアプリケーションが正常に提供されたら、 New Relicのローカルバージョン ( https://one.newrelic.com/?nerdpacks=local ) に移動し、 Apps [アプリ]をクリックして、 Add Time Picker [タイムピッカーの追加]をクリックします。

Add Time Pickerアプリケーションを起動すると、 New Relicアカウントのトランザクションの概要を示すダッシュボードが表示されます。

デフォルトでは、アプリケーションは過去 60 分以内のデータを表示します。タイムピッカーを切り替えても、トランザクション概要アプリケーションがNew Relic Platform に接続されていないため、チャートは更新されません。タイムピッカーからのデータにはアクセスできません。

次のセクションでは、タイムピッカーをサンプルアプリケーションに追加し、クエリに時間を追加します。

`PlatformStateContext`コンポーネントをインポートします

タイムピッカーを追加する最初の手順は、 PlatformStateContextコンポーネントをインポートすることです。

重要

次のPlatformStateContextの例についてさらに詳しく知りたい場合は、 API とコンポーネントのページを参照してください。

PlatformStateContextコンポーネントの機能は次のとおりです。

すべてのコードをレンダリングメソッドの return ステートメント内にラップします。
New Relic プラットフォームの状態を渡して関数呼び出しを行います。
現在の return ステートメント内のすべてのコードを返します。

次の手順を実行します。

テキストエディターで/add-time-picker/nerdlets/nr1-howto-add-time-picker-nerdlet/index.jsを開きます。

次のように、 PlatformStateContextコンポーネントをインポートステートメントの末尾に追加します。

import {
  Grid,
  GridItem,
  HeadingText,
  AreaChart,
  TableChart,
  PieChart,
  PlatformStateContext,
} from 'nr1';

現在のreturnのすぐ下に、 PlatformStateContextコンポーネントの次のコードを挿入します。

<PlatformStateContext.Consumer>
    {(platformState) => {
return (
// ADD THE CURRENT RETURN CODE HERE
)
}}
</PlatformStateContext.Consumer>

現在のアプリケーションコードを、 platformState関数呼び出しのreturnの下に移動します。 returnステートメントは次のようになります。

return (
  <PlatformStateContext.Consumer>
    {(platformState) => {
      return (
        <>
          <Grid
            className="primary-grid"
            spacingType={[Grid.SPACING_TYPE.NONE, Grid.SPACING_TYPE.NONE]}
          >
            <GridItem className="primary-content-container" columnSpan={6}>
              <main className="primary-content full-height">
                <HeadingText
                  spacingType={[HeadingText.SPACING_TYPE.MEDIUM]}
                  type={HeadingText.TYPE.HEADING_4}
                >
                  Transaction Overview
                </HeadingText>
                <TableChart
                  fullWidth
                  accountId={this.accountId}
                  query={trxOverview}
                />
              </main>
            </GridItem>
            <GridItem className="primary-content-container" columnSpan={6}>
              <main className="primary-content full-height">
                <HeadingText
                  spacingType={[HeadingText.SPACING_TYPE.MEDIUM]}
                  type={HeadingText.TYPE.HEADING_4}
                >
                  Average Response Time
                </HeadingText>
                <AreaChart
                  fullWidth
                  accountId={this.accountId}
                  query={avgResTime}
                />
              </main>
            </GridItem>
            <GridItem className="primary-content-container" columnSpan={6}>
              <main className="primary-content full-height">
                <HeadingText
                  spacingType={[HeadingText.SPACING_TYPE.MEDIUM]}
                  type={HeadingText.TYPE.HEADING_4}
                >
                  Response Code
                </HeadingText>
                <PieChart
                  fullWidth
                  accountId={this.accountId}
                  query={responseCodes}
                />
              </main>
            </GridItem>
            <GridItem className="primary-content-container" columnSpan={6}>
              <main className="primary-content full-height">
                <HeadingText
                  spacingType={[HeadingText.SPACING_TYPE.MEDIUM]}
                  type={HeadingText.TYPE.HEADING_4}
                >
                  Transaction Errors
                </HeadingText>
                <PieChart
                  fullWidth
                  accountId={this.accountId}
                  query={errCount}
                />
              </main>
            </GridItem>
          </Grid>
        </>
      );
    }}
  </PlatformStateContext.Consumer>
);

適切なデータが表示されていることを確認するには、 console.logステートメントを追加します。 <Grid>コンポーネントの開始タグの直前のPlatformState return ステートメント内に次のコードを挿入します。

/* Taking a peek at the PlatformState */
console.log(platformState);

これらの手順を完了すると、 browserコンソールにログが表示されます。

クエリに時間を追加する

コンソールに、New Relic プラットフォームの状態のデータが表示されます。これで、 timeRangeデータを追加して、トランザクション概要アプリケーションのグラフを更新する準備が整いました。

この手順では、New Relic アプリコミュニティライブラリからtimeRangeToNrqlユーティリティメソッドをインポートする必要があります。

重要

New Relic アプリコミュニティライブラリの詳細については、 GitHub リポジトリをご覧ください。

このヘルパーメソッドは、 PlatformState.timeRange期間データを受け取り、それをミリ秒からフォーマットし、フォーマットされたSINCEステートメントを返して、 NRQLに追加します。

他のimportセクションの下に次のコード行を挿入して、 timeRangeToNrqlメソッドをインポートします。

重要

コミュニティのインポート例からAccountDropdownを含める必要はありません。

import { timeRangeToNrql } from '@newrelic/nr1-community';

platformStateをtimeRangeToNrqlヘルパーに渡し、その出力を後で使用するためにsinceステートメントとして保存します。

const since = timeRangeToNrql(platformState);

since変数を作成した後、 PlatformStateContext return ステートメントのコードを確認し、既存の各チャートコンポーネントクエリでsince変数を連結します。 TableChartの例を次に示します。

<TableChart fullWidth accountId={this.accountId} query={trxOverview + since} />;

すべてのチャートコンポーネントを更新した後、最終的なindex.jsファイルが次のようになっていることを確認します。

重要

この完成したサンプルコードはnerdlet final.jsにあります。

import React from 'react';
import {
  PlatformStateContext,
  Grid,
  GridItem,
  HeadingText,
  AreaChart,
  TableChart,
  PieChart,
} from 'nr1';
import { timeRangeToNrql } from '@newrelic/nr1-community';

export default class Nr1HowtoAddTimePicker extends React.Component {
  constructor(props) {
    super(props);
    this.accountId = 1;
  }
  render() {
    const avgResTime = `SELECT average(duration) FROM Transaction FACET appName TIMESERIES AUTO `;
    const trxOverview = `FROM Transaction SELECT count(*) as 'Transactions', apdex(duration) as 'apdex', percentile(duration, 99, 95) FACET appName `;
    const errCount = `FROM TransactionError SELECT count(*) as 'Transaction Errors' FACET error.message `;
    const responseCodes = `SELECT count(*) as 'Response Code' FROM Transaction FACET httpResponseCode `;

    return (
      <PlatformStateContext.Consumer>
        {(platformState) => {
          /* Taking a peek at the platformState */
          console.log(platformState);

          const since = timeRangeToNrql(platformState);
          console.log(since);

          return (
            <>
              <Grid
                className="primary-grid"
                spacingType={[Grid.SPACING_TYPE.NONE, Grid.SPACING_TYPE.NONE]}
              >
                <GridItem className="primary-content-container" columnSpan={6}>
                  <main className="primary-content full-height">
                    <HeadingText
                      spacingType={[HeadingText.SPACING_TYPE.MEDIUM]}
                      type={HeadingText.TYPE.HEADING_4}
                    >
                      Transaction Overview
                    </HeadingText>
                    <TableChart
                      fullWidth
                      accountId={this.accountId}
                      query={trxOverview + since}
                    />
                  </main>
                </GridItem>
                <GridItem className="primary-content-container" columnSpan={6}>
                  <main className="primary-content full-height">
                    <HeadingText
                      spacingType={[HeadingText.SPACING_TYPE.MEDIUM]}
                      type={HeadingText.TYPE.HEADING_4}
                    >
                      Average Response Time
                    </HeadingText>
                    <AreaChart
                      fullWidth
                      accountId={this.accountId}
                      query={avgResTime + since}
                    />
                  </main>
                </GridItem>
                <GridItem className="primary-content-container" columnSpan={6}>
                  <main className="primary-content full-height">
                    <HeadingText
                      spacingType={[HeadingText.SPACING_TYPE.MEDIUM]}
                      type={HeadingText.TYPE.HEADING_4}
                    >
                      Response Code
                    </HeadingText>
                    <PieChart
                      fullWidth
                      accountId={this.accountId}
                      query={responseCodes + since}
                    />
                  </main>
                </GridItem>
                <GridItem className="primary-content-container" columnSpan={6}>
                  <main className="primary-content full-height">
                    <HeadingText
                      spacingType={[HeadingText.SPACING_TYPE.MEDIUM]}
                      type={HeadingText.TYPE.HEADING_4}
                    >
                      Transaction Errors
                    </HeadingText>
                    <PieChart
                      fullWidth
                      accountId={this.accountId}
                      query={errCount + since}
                    />
                  </main>
                </GridItem>
              </Grid>
            </>
          );
        }}
      </PlatformStateContext.Consumer>
    );
  }
}

概要

この例のすべての手順を完了すると、 PlatformStateContextコンポーネントをインポートし、そのtimePickerデータオブジェクトにアクセスすることで、アプリケーションにタイムピッカーが正常に実装されます。

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

あなたが始める前に .css-21sua1{background:none;border:none;width:0;padding:0;}

重要

タイムピッカーのサンプルコードを準備する

重要

PlatformStateContextコンポーネントをインポートします

重要

クエリに時間を追加する

重要

重要

重要

概要

あなたが始める前に

`PlatformStateContext`コンポーネントをインポートします