最初のカスタム視覚化

あらゆるソースからデータをクエリし、カスタム視覚化を使用して New Relic ダッシュボードに表示します。

このガイドでは、次の方法を学習します。

デフォルトの視覚化を生成するには、 nr1 CLI を使用します。
視覚化をローカルで実行し、すばやくテストして反復することができます。
視覚化を New Relic アプリカタログに公開します。
視覚化をダッシュボードに追加します。

あなたが始める前に

まだ行っていない場合:

New Relicアカウントを作成します。
Node.js をインストールします。
CLI をインストールして構成するには、 nr1クイックスタートの手順を完了します。

新しい視覚化を作成する

nr1を使用して、新しい視覚化の定型句を生成します。

import React from 'react';
import PropTypes from 'prop-types';
import {
  Radar,
  RadarChart,
  PolarGrid,
  PolarAngleAxis,
  PolarRadiusAxis,
} from 'recharts';
import {Card, CardBody, HeadingText, NrqlQuery, Spinner, AutoSizer} from 'nr1';

export default class MyAwesomeVisualizationVisualization extends React.Component {
  // Custom props you wish to be configurable in the UI must also be defined in
  // the nr1.json file for the visualization. See docs for more details.
  static propTypes = {
    /**
     * A fill color to override the default fill color. This is an example of
     * a custom chart configuration.
     */
    fill: PropTypes.string,

    /**
     * A stroke color to override the default stroke color. This is an example of
     * a custom chart configuration.
     */
    stroke: PropTypes.string,
    /**
     * An array of objects consisting of a nrql `query` and `accountId`.
     * This should be a standard prop for any NRQL based visualizations.
     */
    nrqlQueries: PropTypes.arrayOf(
      PropTypes.shape({
        accountId: PropTypes.number,
        query: PropTypes.string,
      })
    ),
  };

  /**
   * Restructure the data for a non-time-series, facet-based NRQL query into a
   * form accepted by the Recharts library's RadarChart.
   * (https://recharts.org/api/RadarChart).
   */
  transformData = (rawData) => {
    return rawData.map((entry) => ({
      name: entry.metadata.name,
      // Only grabbing the first data value because this is not time-series data.
      value: entry.data[0].y,
    }));
  };

  /**
   * Format the given axis tick's numeric value into a string for display.
   */
  formatTick = (value) => {
    return value.toLocaleString();
  };

  render() {
    const {nrqlQueries, stroke, fill} = this.props;

    const nrqlQueryPropsAvailable =
      nrqlQueries &&
      nrqlQueries[0] &&
      nrqlQueries[0].accountId &&
      nrqlQueries[0].query;

    if (!nrqlQueryPropsAvailable) {
      return <EmptyState />;
    }

    return (
      <AutoSizer>
        {({width, height}) => (
          <NrqlQuery
            query={nrqlQueries[0].query}
            accountId={parseInt(nrqlQueries[0].accountId)}
            pollInterval={NrqlQuery.AUTO_POLL_INTERVAL}
          >
            {({data, loading, error}) => {
              if (loading) {
                return <Spinner />;
              }

              if (error) {
                return <ErrorState />;
              }

              const transformedData = this.transformData(data);

              return (
                <RadarChart
                  width={width}
                  height={height}
                  data={transformedData}
                >
                  <PolarGrid />
                  <PolarAngleAxis dataKey="name" />
                  <PolarRadiusAxis tickFormatter={this.formatTick} />
                  <Radar
                    dataKey="value"
                    stroke={stroke || '#51C9B7'}
                    fill={fill || '#51C9B7'}
                    fillOpacity={0.6}
                  />
                </RadarChart>
              );
            }}
          </NrqlQuery>
        )}
      </AutoSizer>
    );
  }
}

const EmptyState = () => (
  <Card className="EmptyState">
    <CardBody className="EmptyState-cardBody">
      <HeadingText
        spacingType={[HeadingText.SPACING_TYPE.LARGE]}
        type={HeadingText.TYPE.HEADING_3}
      >
        Please provide at least one NRQL query & account ID pair
      </HeadingText>
      <HeadingText
        spacingType={[HeadingText.SPACING_TYPE.MEDIUM]}
        type={HeadingText.TYPE.HEADING_4}
      >
        An example NRQL query you can try is:
      </HeadingText>
      <code>FROM NrUsage SELECT sum(usage) FACET metric SINCE 1 week ago</code>
    </CardBody>
  </Card>
);

const ErrorState = () => (
  <Card className="ErrorState">
    <CardBody className="ErrorState-cardBody">
      <HeadingText
        className="ErrorState-headingText"
        spacingType={[HeadingText.SPACING_TYPE.LARGE]}
        type={HeadingText.TYPE.HEADING_3}
      >
        Oops! Something went wrong.
      </HeadingText>
    </CardBody>
  </Card>
);

visualizations/my-awesome-visualization/index.js

New Relic One CLI の最新バージョンを使用していることを確認してください。

bash

$nr1 update

Nerdpack のmy-awesome-nerdpackに、 my-awesome-visualizationという視覚化を作成します。

bash

$nr1 create --type visualization --name my-awesome-visualization
✔  You are attempting to create a nerdlet outside of a nerdpack. We will create a nerdpack for you. What would you like to name it? ... my-awesome-nerdpack
✔  nerdpack created successfully!
   nerdpack my-awesome-nerdpack is available at "./my-awesome-nerdpack"
✔  visualization created successfully!
   visualization my-awesome-visualization is available at "./my-awesome-nerdpack/visualizations/my-awesome-visualization"

ヒント

nr1 create実行したときに自己署名証明書のRequestErrorを受け取った場合は、Node の証明書チェーンに証明書を追加する必要がある可能性があります。この設定とその他の高度な設定の詳細については、「Nerdpack の高度な設定を有効にする」を参照してください。

その結果、 my-awesome-nerdpackに新しいvisualizations/my-awesome-visualizationディレクトリが作成されます。

bash

$ls my-awesome-nerdpack/visualizations/my-awesome-visualization
index.js    nr1.json    styles.scss

最上位のvisualizationsディレクトリには、Nerdpack のすべての視覚化が保存されます。作成した視覚化の名前はmy-awesome-visualizationで、独自のディレクトリがあります。このディレクトリ内のファイルは、基本的なRadarChart NRQL クエリによって生成されたという視覚化の例を提供します。

ファイル

nr1.json 視覚化のためのメタデータを提供します。このメタデータのconfigurationキーは、UI に表示されるプロパティ入力フィールドを定義します。 configurationキーで使用できるオプションの詳細については、「カスタム視覚化を構成する」を参照してください。
index.js nr1.jsonで定義されたプロパティを受け取って視覚化をレンダリングする React コンポーネントを定義します。役に立つと思われる JavaScript ライブラリをインストールしてインポートできます。サンプルコンポーネントは、簡単に視覚化を作成できるように D3 サブモジュールをラップするライブラリである Recharts をインポートします。
styles.scss 視覚化のSassスタイルを定義します。

視覚化をローカルで提供する

視覚化をローカルで提供し、 Apps > Custom Visualizationsで表示します。そこで、コードの変更をすばやくテストできます。

Nerdpack のルートディレクトリから、ローカル Node サーバーを起動します。

bash

$cd my-awesome-nerdpack
$nr1 nerdpack:serve

実行中、ローカルサーバーはindex.jsなどの特定のファイルへの変更を認識し、視覚化を自動的に更新します。ただし、 nr1.jsonまたはstyles.scssへの変更は認識されません。したがって、 nr1.jsonのconfigurationフィールドの定義など、一部の変更は、サーバーを再起動するまで視覚化に反映されません。これらのファイルの変更を確認するには、 CTRL+Cでサーバーを停止し、 nr1 nerdpack:serveで再起動します。

Node サーバーの起動時にターミナルに表示される視覚化へのリンクを開きます。

bash

Visualizations:
⁎  my-awesome-visualization https://one.nr/012ab3cd4Ef

Configure visualization properties [視覚化プロパティの構成]の下のフィールドを更新し、視覚化が自動的に更新されることを確認します。

これらのプロパティをさらに追加するには、 nr1.jsonのconfigurationフィールドを更新し、ローカルサーバーを再起動します。

これらのプロパティを構成することは、視覚化を更新する 1 つの方法です。 React コードを変更するのも別の方法です。

index.jsで、コンポーネントのRadar.fillOpacityを変更します。

import React from 'react';
import PropTypes from 'prop-types';
import {
  Radar,
  RadarChart,
  PolarGrid,
  PolarAngleAxis,
  PolarRadiusAxis,
} from 'recharts';
import {Card, CardBody, HeadingText, NrqlQuery, Spinner, AutoSizer} from 'nr1';

export default class MyAwesomeVisualizationVisualization extends React.Component {
  // Custom props you wish to be configurable in the UI must also be defined in
  // the nr1.json file for the visualization. See docs for more details.
  static propTypes = {
    /**
     * A fill color to override the default fill color. This is an example of
     * a custom chart configuration.
     */
    fill: PropTypes.string,

    /**
     * A stroke color to override the default stroke color. This is an example of
     * a custom chart configuration.
     */
    stroke: PropTypes.string,
    /**
     * An array of objects consisting of a nrql `query` and `accountId`.
     * This should be a standard prop for any NRQL based visualizations.
     */
    nrqlQueries: PropTypes.arrayOf(
      PropTypes.shape({
        accountId: PropTypes.number,
        query: PropTypes.string,
      })
    ),
  };

  /**
   * Restructure the data for a non-time-series, facet-based NRQL query into a
   * form accepted by the Recharts library's RadarChart.
   * (https://recharts.org/api/RadarChart).
   */
  transformData = (rawData) => {
    return rawData.map((entry) => ({
      name: entry.metadata.name,
      // Only grabbing the first data value because this is not time-series data.
      value: entry.data[0].y,
    }));
  };

  /**
   * Format the given axis tick's numeric value into a string for display.
   */
  formatTick = (value) => {
    return value.toLocaleString();
  };

  render() {
    const {nrqlQueries, stroke, fill} = this.props;

    const nrqlQueryPropsAvailable =
      nrqlQueries &&
      nrqlQueries[0] &&
      nrqlQueries[0].accountId &&
      nrqlQueries[0].query;

    if (!nrqlQueryPropsAvailable) {
      return <EmptyState />;
    }

    return (
      <AutoSizer>
        {({width, height}) => (
          <NrqlQuery
            query={nrqlQueries[0].query}
            accountId={parseInt(nrqlQueries[0].accountId)}
            pollInterval={NrqlQuery.AUTO_POLL_INTERVAL}
          >
            {({data, loading, error}) => {
              if (loading) {
                return <Spinner />;
              }

              if (error) {
                return <ErrorState />;
              }

              const transformedData = this.transformData(data);

              return (
                <RadarChart
                  width={width}
                  height={height}
                  data={transformedData}
                >
                  <PolarGrid />
                  <PolarAngleAxis dataKey="name" />
                  <PolarRadiusAxis tickFormatter={this.formatTick} />
                  <Radar
                    dataKey="value"
                    stroke={stroke || '#51C9B7'}
                    fill={fill || '#51C9B7'}
                    fillOpacity={1.0}
                  />
                </RadarChart>
              );
            }}
          </NrqlQuery>
        )}
      </AutoSizer>
    );
  }
}

const EmptyState = () => (
  <Card className="EmptyState">
    <CardBody className="EmptyState-cardBody">
      <HeadingText
        spacingType={[HeadingText.SPACING_TYPE.LARGE]}
        type={HeadingText.TYPE.HEADING_3}
      >
        Please provide at least one NRQL query & account ID pair
      </HeadingText>
      <HeadingText
        spacingType={[HeadingText.SPACING_TYPE.MEDIUM]}
        type={HeadingText.TYPE.HEADING_4}
      >
        An example NRQL query you can try is:
      </HeadingText>
      <code>FROM NrUsage SELECT sum(usage) FACET metric SINCE 1 week ago</code>
    </CardBody>
  </Card>
);

const ErrorState = () => (
  <Card className="ErrorState">
    <CardBody className="ErrorState-cardBody">
      <HeadingText
        className="ErrorState-headingText"
        spacingType={[HeadingText.SPACING_TYPE.LARGE]}
        type={HeadingText.TYPE.HEADING_3}
      >
        Oops! Something went wrong.
      </HeadingText>
    </CardBody>
  </Card>
);

visualizations/my-awesome-visualization/index.js

New Relic プラットフォームで視覚化を確認して、変更を確認します。

これで、次の方法を説明しました。

視覚化をローカルで提供する
New Relicプラットフォームで見る
設定可能なプロパティとコードの変更で視覚化を更新する

データを効果的に表示するためのチャートを開発して構成したら、設定とデータまたはクエリが揃ったチャートのインスタンスをダッシュボードに保存できます。ただし、ローカルで提供される視覚化ではこれを実行できません。まず、視覚化を公開する必要があります。

視覚化を公開して使用する

視覚化のインスタンスをダッシュボードに追加するには、まずNerdpack を公開する必要があります。

ルートディレクトリから Nerdpack を公開します。

bash

$nr1 nerdpack:publish

出力で成功メッセージを探します:

bash

✔  Nerdpack published successfully!
✔  Tagged 5f4c2af8-3b27-40b5-954c-356d1ef88dd0 version 1.0.0 as STABLE.

これは、Nerdpack がAppsの下にある New Relic アプリカタログに公開されたことを意味します。

Nerdpack を購読する:

bash

$nr1 nerdpack:subscribe
Subscribed account 3014918 to the nerdpack 5f4c2af8-3b27-40b5-954c-356d1ef88dd0 on the STABLE channel.

これで、Nerdpack にサブスクライブし、New Relic で視覚化のインスタンスを構築できるようになりました。

もう一度、 New Relic の アプリ ページを開きます。

ここでは、ローカルで提供されている視覚化ではなく、公開してサブスクライブした視覚化を探しているため、 ?nerdpacks=localクエリ文字列を使用する必要はありません。

Custom Visualizations [カスタム視覚化]に移動します。
公開された視覚化を見つけてクリックします。
視覚化が見つからない場合は、 browserページを更新する必要があります。この新しいタイルに'/' Local [/ ローカル]ラベルが付いていないことに注意してください。これは、前の手順で公開およびサブスクライブした視覚化を表示しているためです。 Nerdpack をまだローカルで提供している場合は、ラベル付きのタイルとラベルなしのタイルの 2 つがここに表示されることがあります。
ローカルで提供されていたときと同じ方法で視覚化を構成します。
Add to dashboard [ダッシュボードに追加] をクリックします。プロンプトに従って、視覚化をダッシュボードに追加します。
ホームページからDashboardsに移動し、視覚化を追加したダッシュボードを選択して、視覚化を確認します。

概要

最初の視覚化を構築できて、ありがとうございます! このガイドでは、次の方法を学習しました。

視覚化を作成する
視覚化をローカルで提供する
Custom Visualizations [カスタム視覚化]での視覚化コードの変更とカスタマイズを反復する
視覚化を公開する
視覚化を購読する
ダッシュボードに視覚化を追加する

追加リソース

New Relic クイックヒントビデオ:ダッシュボードとカスタム視覚化(6 分)
New Relic NerdBytes ビデオ:ダッシュボードのカスタム視覚化の構成(7 分)
New Relic Changelog ライブストリーム: New Relic でのカスタムデータ視覚化(30 分)

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

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

新しい視覚化を作成する

ヒント

視覚化をローカルで提供する

視覚化を公開して使用する

概要

追加リソース

あなたが始める前に