New Relic Oneでアプリを構築するクイックスタートをやってみた

New Relic Oneでアプリを構築するクイックスタートをやってみた

Clock Icon2020.03.27

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

New Relic Oneでは独自のReact JavaScriptアプリケーションを構築出来るフレームワークが提供されています。

ドキュメント

  • 他のNew Relicダッシュボードやデータとともに、New Relic Oneプラットフォームに常駐
  • 組織に合わせて特別に調整した機能の視覚化
  • New Relicで監視されているエンティティからのデータでも、別のサービスやAPIからのデータでも、必要なソースからのデータを表示

このようなことが可能とドキュメントに書かれています。 確かに、様々な箇所に保存されているデータを使用して可視化したいといった時に便利やん? と思い、提供されているクイックスタートで学習しようと思います。

準備

クイックスタート を進めていきますが、 New Relic Oneアプリを構築するには、

やってみる

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 25

Webトランザクションにおける処理時間のApdex Score, パーセンタイル値(99%と90%と70%)をアプリごとに表示させています。

アプリごとにクリックすると、AMPの概要ダッシュボードが表示されるようになっていました。

SELECT count(*) as 'transactions' FROM Transaction facet appName limit 25 TIMESERIES

Webトランザクションの数をアプリごとに表示させています。

クイックスタートの内容はここまでです。

せっかくなので少しカスタマイズしてみようと思います。

少しカスタマイズする

NRQLで別のデータを取得し表示させてみます。

My APPのWebトランザクション数のTOP5を取得します。

SELECT count(*) as 'transactions' from Transaction where appName='My APP' facet request.uri LIMIT 5

nerdlets/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アプリのオープンソースを入れてみるのも良いと思います。

Share this article

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.