dip Engineer Blog

Engineer Blog
ディップ株式会社のエンジニアによる技術ブログです。
弊社はバイトル・はたらこねっとなど様々なサービスを運営しています。
トップ > Advent Calendar > New Relicの独自Appで入力を受け付けるインタラクティブなダッシュボードを作ってみた

New Relicの独自Appで入力を受け付けるインタラクティブなダッシュボードを作ってみた

Advent Calendar

本記事はNew Relic Advent Calendar 2022の14日目の記事となります。

qiita.com

はじめに

こんにちは！

はたらこねっとのユーザー向けサイトのバックエンドエンジニアをしている大塚です。

はたらこねっとではサービスのモニタリングなどにNew Relicを活用しています。 APMやダッシュボードなどを作成してモニタリングをしているのですが、入力に応じてNRQLを変更してグラフを描写したいケースが出てきたので、New Relicの独自アプリケーションを作成して対応しました。

New RelicではReactを使用して独自のアプリケーションを構築する機能があるので、独自のダッシュボードを作成したり、より複雑なクエリの操作などが可能です。 https://docs.newrelic.com/jp/docs/new-relic-solutions/new-relic-one/build-custom-new-relic-one-application/

詳しくはこちらのページに用途に応じたチュートリアルが用意してあるので、色々と試してみると面白いと思います。

作ったもの

ダッシュボード上に入力欄を設けて、入力に応じてNRQLの内容を書き換えてグラフを表示するアプリケーションを作成しました。

既存のダッシュボードでもNRQLを書き換えて表示することは出来ますが、ダッシュボード上のNRQLを一つ一つ変更していくのは手間なので、入力欄を設置し入力に応じてNRQLを書き換えてダッシュボードを表示しています。

※2022年11月30日にNew Relicからダッシュボードで変数が使用できる機能がリリースされたので、そちらを使っても似たようなことが可能になりました。 https://newrelic.com/blog/how-to-relic/dashboard-template-variables

こんな感じの入力に応じたダッシュボードを表示するアプリケーションを作成してみました。 （プロダクト情報保護のため全体的に解像度は荒め）

やったこと

開発環境の作成

https://developer.newrelic.com/build-apps/set-up-dev-env を参考に開発環境をセットアップを行いました。

アプリケーションの構築

Reactを使用してコーディングしていきます。

※当方Reactについては全くの未経験なので、コードの内容については多めに見て頂きたいです。。。

入力欄の作成

<label>
    セレクトボックス
    <select name="select" value={this.state.value} onChange={this.handleInputChange}>
        <option value="value1">1</option>
        <option value="value2">2</option>
    </select>
</label>

<label>
    テキストボックス
    <input
    name="text"
    type="text"
    value={this.state.text}
    onChange={this.handleInputChange} />
</label>

onChangeで下記の関数を実行し、stateに値をセットするようにしています。

handleInputChange(event) {
    const target = event.target;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const name = target.name;

    this.setState({
        [name]: value
    });
}

ダッシュボードを作成ボタンの作成

<Button onClick={this.createDashboard}>
    Create Dashboard
</Button>

 createDashboard() {
    const { select, text } = this.state;

    /*
      ダッシュボードに表示するグラフ用のNRQL
      「select」や「text」にセレクトボックスで選択した値やテキストボックスで入力した値が入っているので、NRQLのWHERE句などに挿入することが出来ます。
    */
    const countQuery=`{カウントのNRQL}`;
    const averageQuery=`{平均値のNRQL}`;
    const countLineQuery=`カウントのラインチャート用のNRQL`;
    const countAllLineQuery=`全件カウントのラインチャート用のNRQL`;

    // 各NRQLからグラフタグを生成し変数に格納
    const countTableChart = <TableChart
            accountId={accountId}
            query={countQuery}
            fullWidth
          />;

    const averageBillboardChart = <BillboardChart
            accountId={accountId}
            query={averageQuery}
            fullWidth
          />;

    const countLineChart = <LineChart
            accountId={accountId}
            query={countLineQuery}
            fullWidth
          />;

    const countAllLineChart = <LineChart
            accountId={accountId}
            query={countAllLineQuery}
            fullWidth
          />;

    // stateにセット
    this.setState({
      countTableChart: countTableChart,
      averageBillboardChart: averageBillboardChart,
      countLineChart: countLineChart,
      countAllLineChart : countAllLineChart
    });
  }

結果をレンダリング

render() {
    const { countTableChart, averageBillboardChart, countLineChart, countAllLineChart } = this.state;

    return (
      <div className="container">
        <div className="row">
          <div className="row">
            <label>
                セレクトボックス
                <select name="select" value={this.state.value} onChange={this.handleInputChange}>
                    <option value="value1">1</option>
                    <option value="value2">2</option>
                </select>
            </label>
          </div>
          <div className="row">
            <label>
                テキストフィールド
                <input
                name="text"
                type="text"
                value={this.state.text}
                onChange={this.handleInputChange} />
            </label>
          </div>
          <div className="row">
            <Button onClick={this.createDashboard}>
              Create Dashboard
            </Button>
          </div>
        </div>
        <div className="row">
          <HeadingText className="chartHeader">
            検索数
          </HeadingText>
        </div>
        <div className="row">
          {countTableChart}
        </div>
        <div className="row">
          <HeadingText className="chartHeader">
            検索率
          </HeadingText>
        </div>
        <div className="row">
          {averageBillboardChart}
        </div>
        <div className="row">
          <HeadingText className="chartHeader">
            検索数推移
          </HeadingText>
        </div>
        <div className="row">
          <ChartGroup>
            {countLineChart}
            {countAllLineChart}
          </ChartGroup>
        </div>
      </div>
    );
  }

最後に

New Relicでは既存のダッシュボードの機能もどんどん追加されており、日々使いやすくなっていると思います。 ただ自身のサービスに沿った分析などをする際にはカスタムしたダッシュボードが必要になる場合もあると思うので、そういった際に独自のAppが作成できるのはとても良いと思いました。 独自Appでは他にも色々なことができるので、試してみると面白いと思います。

© dip Corporation.