• EnglishEspañol日本語한국어Português
  • ログイン今すぐ開始

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

英語版と翻訳版に矛盾がある場合は、英語版が優先されます。詳細については、このページを参照してください。

問題を作成する

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

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

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

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

あなたが始める前に

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

重要

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';

platformStatetimeRangeToNrqlヘルパーに渡し、その出力を後で使用するために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データ オブジェクトにアクセスすることで、アプリケーションにタイムピッカーが正常に実装されます。

Copyright © 2024 New Relic株式会社。

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.