첫 번째 사용자 정의 시각화

모든 소스에서 데이터를 쿼리하고 사용자 정의 시각화를 통해 뉴렐릭 대시보드에 표시합니다.

이 가이드에서는 다음 방법을 알아봅니다.

기본 시각화를 생성하려면 nr1 CLI를 사용하세요.
빠르게 테스트하고 반복할 수 있는 로컬에서 시각화를 실행하세요.
뉴렐릭 앱 카탈로그에 시각화를 게시하세요.
대시보드에 시각화를 추가합니다.

시작하기 전에

아직 하지 않은 경우:

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

뉴렐릭 One CLI의 최신 버전으로 작업하고 있는지 확인하세요.

bash

$nr1 update

my-awesome-nerdpack 이라는 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에 표시될 prop-input 필드를 정의합니다. configuration 키에서 사용할 수 있는 옵션에 대해 자세히 알아보려면 사용자 정의 시각화 구성을 확인하세요.
index.js nr1.json 에 정의된 prop을 수신하고 시각화를 렌더링하는 React 구성요소를 정의합니다. 유용하다고 생각되는 JavaScript 라이브러리를 설치하고 가져올 수 있습니다. 예제 구성 요소는 쉽게 구성할 수 있는 시각화를 위해 D3 하위 모듈을 래핑하는 라이브러리 인 Recharts 를 가져옵니다.
styles.scss 시각화를 위한 Sass 스타일을 정의합니다.

로컬에서 시각화 제공

시각화를 로컬로 제공하고 Apps > Custom Visualizations 에서 봅니다. 여기에서 코드 변경 사항을 빠르게 테스트할 수 있습니다.

Nerdpack의 루트 디렉터리에서 로컬 노드 서버를 시작합니다.

bash

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

실행되는 동안 로컬 서버는 index.js 과 같은 특정 파일의 변경 사항을 인식하고 자동으로 시각화를 새로 고칩니다. 그러나 nr1.json 또는 styles.scss 에 대한 변경 사항은 인식하지 못합니다. 따라서 nr1.json 의 configuration 필드 정의와 같은 일부 변경 사항은 서버를 다시 시작할 때까지 시각화에 반영되지 않습니다. 해당 파일의 변경 사항을 보려면 CTRL+C 사용하여 서버를 중지하고 nr1 nerdpack:serve 사용하여 백업을 시작하세요.

노드 서버가 시작될 때 터미널에 표시되는 시각화에 대한 링크를 엽니다.

bash

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

Configure visualization properties [시각화 속성 구성] 아래의 필드를 업데이트하고 시각화 업데이트를 자동으로 확인하세요.

이러한 속성을 더 추가하려면 nr1.json 에서 configuration 필드를 업데이트하고 로컬 서버를 다시 시작하세요.

이러한 속성을 구성하는 것은 시각화를 업데이트하는 한 가지 방법입니다. 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

변경 사항을 확인하려면 뉴렐릭 플랫폼의 시각화를 살펴보세요.

이제 다음 방법을 살펴보았습니다.

로컬에서 시각화 제공
뉴렐릭 플랫폼에서 보기
구성 가능한 속성 및 코드 변경으로 시각화 업데이트

데이터를 효과적인 방식으로 표시하기 위해 차트를 개발하고 구성한 후에는 설정 및 데이터 또는 쿼리가 포함된 차트의 해당 내용을 대시보드에 저장할 수 있습니다. 그러나 로컬로 제공되는 시각화로는 이 작업을 수행할 수 없습니다. 먼저 시각화를 게시해야 합니다.

시각화 게시 및 사용

대시보드에 시각화 인스턴스를 추가하려면 먼저 Nerdpack을 게시 해야 합니다.

루트 디렉터리에서 Nerdpack을 게시합니다.

bash

$nr1 nerdpack:publish

출력에서 성공 메시지를 찾으세요.

bash

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

이는 귀하의 Nerdpack이 Apps 아래에서 찾을 수 있는 뉴렐릭 앱 카탈로그에 게시되었음을 의미합니다.

Nerdpack을 구독하세요:

bash

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

이제 Nerdpack을 구독하고 뉴렐릭에서 시각화 결과를 작성할 수 있습니다.

다시 한 번 뉴렐릭 에서 Apps [앱] 페이지를 엽니다.

여기서는 로컬에서 제공되는 시각화가 아닌 게시하고 구독한 시각화를 찾고 있으므로 ?nerdpacks=local 쿼리 문자열을 사용할 필요가 없습니다.

Custom Visualizations [사용자 정의 시각화] 로 이동합니다.
게시된 시각화를 찾아 클릭합니다.
시각화를 찾을 수 없는 경우 브라우저 페이지를 새로 고쳐야 할 수도 있습니다. 이 새 타일에는 더 이상 '/' Local 레이블이 없습니다. 이는 이전 단계에서 게시하고 구독한 시각화를 보고 있기 때문입니다. 여전히 Nerdpack을 로컬로 제공하고 있다면 여기에 두 개의 타일이 표시될 수 있습니다. 하나는 라벨이 있고 다른 하나는 라벨이 없습니다.
로컬로 제공될 때와 동일한 방식으로 시각화를 구성합니다.
Add to dashboard [대시보드에 추가 를] 클릭합니다. 프롬프트에 따라 대시보드에 시각화를 추가합니다.
홈페이지에서 Dashboards 로 이동하여 시각화를 추가한 대시보드를 선택하고 그 대시보드에서 시각화를 확인하세요.

요약

첫 번째 시각화를 구축한 것을 축하합니다! 이 가이드에서는 다음 방법을 배웠습니다.

시각화 만들기
로컬에서 시각화 제공
Custom Visualizations [사용자 정의 시각화]에서 시각화 코드 변경 및 사용자 정의 반복
시각화 게시
시각화 구독
대시보드에 시각화 추가

추가 리소스

뉴렐릭 빠른 팁 동영상: 대시보드 및 사용자 정의 시각화 (6분)
뉴렐릭 NerdBytes 동영상: 대시보드용 사용자 정의 시각화 구성 (7분)
뉴렐릭 변경 로그 라이브 스트림: 뉴렐릭의 사용자 정의 데이터 시각화 (30분)

사용자의 편의를 위해 제공되는 기계 번역입니다.

시작하기 전에 .css-21sua1{background:none;border:none;width:0;padding:0;}

새 시각화 만들기

팁

로컬에서 시각화 제공

시각화 게시 및 사용

요약

추가 리소스

시작하기 전에