この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
New Relic Oneでは独自のReact JavaScriptアプリケーションを構築出来るフレームワークが提供されています。
- 他のNew Relicダッシュボードやデータとともに、New Relic Oneプラットフォームに常駐
- 組織に合わせて特別に調整した機能の視覚化
- New Relicで監視されているエンティティからのデータでも、別のサービスやAPIからのデータでも、必要なソースからのデータを表示
このようなことが可能とドキュメントに書かれています。 確かに、様々な箇所に保存されているデータを使用して可視化したいといった時に便利やん？ と思い、提供されているクイックスタートで学習しようと思います。
準備
クイックスタート を進めていきますが、 New Relic Oneアプリを構築するには、
- 有料版またはDeveloper EditionのNew Relicアカウントが必要
- まだアカウントをお持ちでない場合はDeveloper Editionアカウントにサインアップから無料アカウントを作成を行います
やってみる
1. 簡単なサンプルアプリを生成
one.newrelic.comに遷移し、Build a New Relic One applicationを選択します。
Quick startの手順が表示されているので、指示通り行なっていきます。
- Get your API key
- 使用するアカウントのAPI keyの作成、もしくは選択
- Install the NR1 CLI
- CLIのダウンロードとインストールを行います
- 3~6
- 表示されているコマンドをターミナルソフトで実行します。
nr1 --version
nr1 profiles:add --name {account-slug} --api-key {api-key} --region {us|eu}
nr1 create --type nerdpack --name my-awesome-nerdpack
cd my-awesome-nerdpack && nr1 nerdpack:serveその後、 https://one.newrelic.com/?nerdpacks=localにアクセスするとサンプルアプリの確認ができるようになっています。
クリックすると以下の画面に。
2. 機能の追加(APMデータ)
クイックスタートのページに提供されていたサンプルコードを使います。
※ APMデータが無いとグラフが表示されません
vi nerdlets/my-awesome-nerdpack-nerdlet/index.jsでファイルを開き、以下のコードに置き換えてみます。
YOUR_ACCOUNT_IDは自身のNew RelicアカウントIDにします。
import React from 'react';
import { TableChart, LineChart, navigation, PlatformStateContext } from 'nr1';
export default class MyNerdlet extends React.Component {
constructor(props) {
super(props);
this.accountId = <YOUR_ACCOUNT_ID>; //My New Relic account ID
this.openEntity = this.openEntity.bind(this);
}
openEntity(entityGuid) {
navigation.openStackedEntity(entityGuid);
}
render(){
const style = {
height: '45vh',
margin: '20px'
};
const nrql = `SELECT count(*) as 'transactions', apdex(duration) as 'apdex', percentile(duration, 99, 90, 70) FROM Transaction facet appName, entityGuid limit 25`;
const trxOverT = `SELECT count(*) as 'transactions' FROM Transaction facet appName limit 25 TIMESERIES`;
//return the JSX we're rendering
return <PlatformStateContext.Consumer>
{(platformUrlState) => {
//console.debug here for learning purposes
console.debug(platformUrlState); //eslint-disable-line
const { duration } = platformUrlState.timeRange;
const since = ` SINCE ${duration/60/1000} MINUTES AGO`;
return <div style={{height: '100vh'}}>
<TableChart style={style} fullWidth={true} accountId={this.accountId}
query={nrql + since}
onClickTable={(dataEl, row, chart) => {
//for learning purposes, we'll write to the console.
console.debug("onClickTable", [dataEl, row, chart]) //eslint-disable-line
this.openEntity(row.entityGuid)
}}
/>
<LineChart style={style} fullWidth={true} accountId={this.accountId}
query={trxOverT + since}
onClickLine={(...args) => {
//for learning purposes, we'll write to the console.
console.debug("onClickLine", args) //eslint-disable-line
}}
/>
</div>;
}}
</PlatformStateContext.Consumer>;
}
}ファイル保存後、
nr1 nerdpack:serveで開発モード起動し、https://one.newrelic.com/?nerdpacks=local にアクセスします、
APMのデータがないと以下のような表示になります。
APMのデータがあると以下のような表示になります。
画面で表示されているグラフは、サンプルコードの21行目、22行目のNRQLで取得した2つのデータになっていますね
SELECT count(*) as 'transactions', apdex(duration) as 'apdex', percentile(duration, 99, 90, 70) FROM Transaction facet appName, entityGuid limit 25Webトランザクションにおける処理時間のApdex Score, パーセンタイル値（99％と90％と70％）をアプリごとに表示させています。
アプリごとにクリックすると、AMPの概要ダッシュボードが表示されるようになっていました。
SELECT count(*) as 'transactions' FROM Transaction facet appName limit 25 TIMESERIESWebトランザクションの数をアプリごとに表示させています。
クイックスタートの内容はここまでです。
せっかくなので少しカスタマイズしてみようと思います。
少しカスタマイズする
NRQLで別のデータを取得し表示させてみます。
My APPのWebトランザクション数のTOP5を取得します。
SELECT count(*) as 'transactions' from Transaction where appName='My APP' facet request.uri LIMIT 5nerdlets/my-awesome-nerdpack-nerdlet/index.jsを以下のように修正しました。
import React from 'react';
import { TableChart, LineChart, navigation, PlatformStateContext } from 'nr1';
export default class MyNerdlet extends React.Component {
constructor(props) {
super(props);
this.accountId = 2646337; //My New Relic account ID
this.openEntity = this.openEntity.bind(this);
}
openEntity(entityGuid) {
navigation.openStackedEntity(entityGuid);
}
render(){
const style = {
height: '45vh',
margin: '20px'
};
const nrql = `SELECT count(*) as 'transactions', apdex(duration) as 'apdex', percentile(duration, 99, 90, 70) FROM Transaction facet appName, entityGuid limit 25`;
const trxOverT = `SELECT count(*) as 'transactions' FROM Transaction facet appName limit 25 TIMESERIES`;
const top5 = `SELECT count(*) as 'transactions' from Transaction where appName='My APP' facet request.uri LIMIT 5`;
//return the JSX we're rendering
return <PlatformStateContext.Consumer>
{(platformUrlState) => {
//console.debug here for learning purposes
console.debug(platformUrlState); //eslint-disable-line
const { duration } = platformUrlState.timeRange;
const since = ` SINCE ${duration/60/1000} MINUTES AGO`;
return <div style={{height: '100vh'}}>
<TableChart style={style} fullWidth={true} accountId={this.accountId}
query={nrql + since}
onClickTable={(dataEl, row, chart) => {
//for learning purposes, we'll write to the console.
console.debug("onClickTable", [dataEl, row, chart]) //eslint-disable-line
this.openEntity(row.entityGuid)
}}
/>
<LineChart style={style} fullWidth={true} accountId={this.accountId}
query={trxOverT + since}
onClickLine={(...args) => {
//for learning purposes, we'll write to the console.
console.debug("onClickLine", args) //eslint-disable-line
}}
/>
<TableChart style={style} fullWidth={true} accountId={this.accountId}
query={top5 + since}
onClickTable={(dataEl, row, chart) => {
//for learning purposes, we'll write to the console.
console.debug("onClickTable", [dataEl, row, chart]) //eslint-disable-line
}}
/>
</div>;
}}
</PlatformStateContext.Consumer>;
}
}開発モードで起動してアクセスすると、以下のように追加したデータが増えていますね。
今回は簡単なサンプルとちょっとしたカスタマイズでしたが、React、GraphQL、NRQLで細かなカスタマイズができるので ダッシュボードだけでは表現できないような情報を可視化、共有するには強力なツールだと思います。
より詳しく学ぶために ワークショップ を行なったり、 New Relic Oneアプリのオープンソースを入れてみるのも良いと思います。
10
