NerdGraphQuery 구성요소를 애플리케이션에 추가

이 가이드에서는 샘플 프로세서 개요에 NerdGraphQuery 구성 요소를 추가하는 과정을 단계별로 안내합니다. 이를 통해 뉴렐릭 계정의 데이터를 조회하고 드롭다운 메뉴 메뉴에 추가할 수 있습니다.

NerdGraph는 GraphQL 구현입니다. GraphQL은 REST와 비교할 때 몇 가지 주요 차이점이 있습니다.

서버가 아닌 클라이언트가 반환되는 데이터를 결정합니다.
여러 소스에서 데이터를 쉽게 수집할 수 있습니다. 예를 들어 단일 쿼리로 계정 정보, 인프라 데이터를 가져오고 NRQL 요청을 실행할 수 있습니다.

중요

이 연습을 완료하기 전에 NerdGraph API 탐색기 에서 GraphQL 쿼리를 실험해 볼 수 있습니다.

아래 단계를 다루는 14분짜리 비디오도 있습니다.

시작하기 전에

프로젝트를 개발하려면 New RelicCLI(명령줄 인터페이스)가 필요합니다. 아직 설치하지 않았다면 다음을 수행하세요.

Node.js를 설치합니다.
CLI 빠른 시작 의 1-4단계를 완료하고 나중에 필요하므로 1단계의 계정 ID를 복사해 두십시오.

중요

이미 뉴렐릭 CLI를 설치했지만 계정 ID가 기억나지 않는 경우 CLI 빠른 시작을 다시 시작한 다음 Get your API key [API 가져오기 키] 아래쪽 화살표를 클릭하세요. 계정 ID는 계정 이름 앞에 붙는 숫자입니다.

자세한 내용은 개발 환경 설정을 참조하십시오.

샘플 코드 준비

시작하려면 다음 단계를 완료하여 애플리케이션 UUID(고유 ID)를 업데이트하고 샘플 애플리케이션을 로컬에서 실행하세요.

아직 복제하지 않았다면 GitHub 리포지터리 사용법 에서 예제를 복제하세요. 다음은 HTTPS를 사용하는 예입니다.

bash

$git clone https://github.com/newrelic/nr1-how-to.git

use-nerdgraph-nerdlet 디렉터리로 변경합니다.

bash

$cd nr1-how-to/use-nerdgraph/nerdlets/use-nerdgraph-nerdlet

원하는 텍스트 편집기에서 index.js 엽니다.

<ADD YOUR ACCOUNT ID> 계정 ID로 바꿉니다.

중요

귀하의 계정 ID는 CLI 빠른 시작에서 확인할 수 있습니다( Before you begin [시작하기 전에] 참조).

this.accountId = <ADD YOUR ACCOUNT ID>;

/nr1-howto/use-nerdgraph 디렉터리로 변경합니다.

bash

$cd ../..

이 코드를 처음 실행하는 경우 아래 명령을 실행하여 필요한 모든 모듈을 설치하십시오.

bash

$npm install

다음 명령을 실행하여 UUID를 업데이트하고 샘플 애플리케이션을 제공합니다.

bash

$nr1 update
$nr1 nerdpack:uuid -gf
$nr1 nerdpack:serve

샘플이 성공적으로 제공되면 로컬 뉴렐릭 홈페이지 로 이동하여 Apps를 클릭한 다음 Use NerdGraph 클릭합니다.

NerdGraph 전용 사용 을 실행하면 계정에 소니에 대한 개요를 제공하는 대시보드가 표시됩니다.

`NerdGraphQuery` 구성요소 추가

이제 애플리케이션이 보고 있는 계정을 변경하기 위한 드롭다운 메뉴를 만들 수 있습니다. 첫 번째 단계는 NerdGraphQuery 구성요소를 애플리케이션의 index.js 파일로 가져오는 것입니다.

index.js 파일의 return 내부에 있는 첫 번째 StackItem 에 NerdGraphQuery 구성요소를 추가합니다.

<NerdGraphQuery query={query} variables={variables}>
  {({ loading, error, data }) => {
    console.log({ loading, error, data });
    if (loading) {
      return <Spinner />;
    }
    if (error) {
      return 'Error!';
    }
    return null;
  }}
</NerdGraphQuery>;

NerdGraphQuery 구성요소는 액세스하려는 소스와 반환하려는 데이터를 나타내는 쿼리 객체를 사용합니다.

render 메서드의 index.js 파일에 다음 코드를 추가합니다.

중요

브라우저 콘솔에서는 초기 쿼리의 개체와 동일한 구조를 따르는 개체에 반환된 쿼리의 데이터를 볼 수 있습니다.

const query = `
    query($id: Int!) {
        actor {
            account(id: $id) {
                name
            }
        }
    }
`;

NerdGraph 쿼리에서 반환된 데이터를 가져와 애플리케이션에 표시하려면 현재 NerdGraphQuery 구성요소의 return null 이 return 문으로 바꾸세요.

return <HeadingText>{data.actor.account.name} Apps:</HeadingText>;

브라우저로 돌아가서 애플리케이션을 보면 NerdGraph에서 반환된 계정 이름을 표시하는 새로운 헤드라인이 표시됩니다.

사용하는 방법 `NerdGraphQuery.query`

이 시점에서 군인의 render 메서드를 사용하여 NerdGraphQuery 구성 요소를 구현하고 프로세서 개요 내에 반환 데이터를 표시했습니다.

다음에 수행해야 할 작업은 다음과 같습니다.

componentDidMount 수명 주기 메서드 내에서 NerdGraph를 쿼리합니다.
나중에 애플리케이션에서 사용할 수 있도록 반환된 데이터를 저장합니다.

이 코드는 NerdGraph의 응답을 받아 결과가 처리되고, 특수한 상태로 저장되고, 보기 위해 브라우저 콘솔에 로그인되는지 확인합니다.

constructor 바로 아래의 index.js 파일에 이 코드를 추가합니다.

componentDidMount() {
    const accountId = this.state;
    const gql = `{ actor { accounts { id name } } }`;

    const accounts = NerdGraphQuery.query({query: gql}) //The NerdGraphQuery.query method called with the query object to get your account data is stored in the accounts variable.
    accounts.then(results => {
        console.log('Nerdgraph Response:', results);
        const accounts = results.data.actor.accounts.map(account => {
            return account;
        });
        const account = accounts.length > 0 && accounts[0];
        this.setState({ selectedAccount: account, accounts });
    }).catch((error) => { console.log('Nerdgraph Error:', error); })
}

데이터가 상태에 저장되면 사용자가 계정을 변경하고 애플리케이션을 업데이트할 수 있도록 선택 항목을 표시합니다.

이렇게 하려면 return 문의 두 번째 StackItem 에 대해 index.js 에 이 코드를 추가하세요.

{
  accounts && (
    <StackItem>
      <Select
        value={selectedAccount}
        onChange={(evt, value) => this.selectAccount(value)}
      >
        {accounts.map((a) => {
          return (
            <SelectItem key={a.id} value={a}>
              {a.name}
            </SelectItem>
          );
        })}
      </Select>
    </StackItem>
  );
}

NerdGraph 쿼리 결과 검토

이 단계를 완료한 후 브라우저에서 애플리케이션을 확인하고 다음 사항에 유의하세요.

이제 드롭다운 메뉴에 NerdGraphQuery.query 에서 반환된 데이터가 표시되고 계정을 선택할 수 있습니다.
새 계정을 선택하면 애플리케이션에 새 선택 항목의 데이터가 표시됩니다.

최종 index.js 파일에는 아래 코드와 유사한 코드가 있어야 합니다. 완성된 샘플은 nerdlet final.js 에 있습니다.

import React from 'react';
import { PlatformStateContext, NerdGraphQuery, Spinner, HeadingText, Grid, GridItem, Stack, StackItem, Select, SelectItem, AreaChart, TableChart, PieChart } from 'nr1'
import { timeRangeToNrql } from '@newrelic/nr1-community';

// https://docs.newrelic.com/docs/new-relic-programmable-platform-introduction

export default class UseNerdgraphNerdletNerdlet extends React.Component {
    constructor(props){
        super(props)
        this.state = {
            accountId: <YOUR ACCOUNT ID>,
            accounts: null,
            selectedAccount: null,
        }
    }

    componentDidMount() {
        const accountId = this.state;
        const gql = `{ actor { accounts { id name } } }`;

        const accounts =  NerdGraphQuery.query({ query: gql })
        accounts.then(results => {
            console.log('Nerdgraph Response:', results);
            const accounts = results.data.actor.accounts.map(account => {
                return account;
            });
            const account = accounts.length > 0 && accounts[0];
            this.setState({ selectedAccount: account, accounts });
        }).catch((error) => { console.log('Nerdgraph Error:', error); })
    }

    selectAccount(option) {
        this.setState({ accountId: option.id, selectedAccount: option });
    }


    render() {
        const { accountId, accounts, selectedAccount  } = this.state;
        console.log({ accountId, accounts, selectedAccount });

        const query = `
            query($id: Int!) {
                actor {
                    account(id: $id) {
                        name
                    }
                }
            }
        `;

        const variables = {
          id: accountId,
        };

        const avgResTime = `SELECT average(duration) FROM Transaction FACET appName TIMESERIES AUTO `;
        const trxOverview = `FROM Transaction SELECT count(*) AS 'Transactions', apdex(duration) AS 'apdex', percentile(duration, 99, 95) FACET appName `;
        const errCount = `FROM TransactionError SELECT count(*) AS 'Transaction Errors' FACET error.message `;
        const responseCodes = `SELECT count(*) AS 'Response Code' FROM Transaction FACET httpResponseCode `;

        return (
            <Stack
                fullWidth
                horizontalType={Stack.HORIZONTAL_TYPE.FILL}
                gapType={Stack.GAP_TYPE.EXTRA_LOOSE}
                spacingType={[Stack.SPACING_TYPE.MEDIUM]}
                directionType={Stack.DIRECTION_TYPE.VERTICAL}>
                <StackItem>
                    <NerdGraphQuery query={query} variables={variables}>
                        {({loading, error, data}) => {
                            if (loading) {
                                return <Spinner />;
                            }

                            if (error) {
                                return 'Error!';
                            }

                            return <HeadingText>{data.actor.account.name} Apps:</HeadingText>;
                        }}
                    </NerdGraphQuery>
                </StackItem>
                {accounts &&
                    <StackItem>
                        <Select value={selectedAccount} onChange={(evt, value) => this.selectAccount(value)}>
                        {accounts.map(a => {
                            return (
                              <SelectItem key={a.id} value={a}>
                                {a.name}
                              </SelectItem>
                            )
                        })}
                        </Select>
                    </StackItem>
                }
                <StackItem>
                <hr />
                    <PlatformStateContext.Consumer>
                    {(platformState) => {
                        /* Taking a peek at the platformState */
                        const since = timeRangeToNrql(platformState);
                        return (
                          <Grid
                          className="primary-grid"
                          spacingType={[Grid.SPACING_TYPE.NONE, Grid.SPACING_TYPE.NONE]}
                          >
                              <GridItem className="primary-content-container" columnSpan={6}>
                                  <main className="primary-content full-height">
                                  <HeadingText spacingType={[HeadingText.SPACING_TYPE.MEDIUM]} type={HeadingText.TYPE.HEADING_4}>
                                      Transaction Overview
                                  </HeadingText>
                                  <TableChart fullWidth accountId={accountId} query={trxOverview+since} />
                                  </main>
                              </GridItem>
                              <GridItem className="primary-content-container" columnSpan={6}>
                                  <main className="primary-content full-height">
                                  <HeadingText spacingType={[HeadingText.SPACING_TYPE.MEDIUM]} type={HeadingText.TYPE.HEADING_4}>
                                      Average Response Time
                                  </HeadingText>
                                  <AreaChart fullWidth accountId={accountId} query={avgResTime+since} />
                                  </main>
                              </GridItem>
                              <GridItem className="primary-content-container" columnSpan={6}>
                                  <main className="primary-content full-height">
                                  <HeadingText spacingType={[HeadingText.SPACING_TYPE.MEDIUM]} type={HeadingText.TYPE.HEADING_4}>
                                      Response Code
                                  </HeadingText>
                                  <PieChart fullWidth accountId={accountId} query={responseCodes+since} />
                                  </main>
                              </GridItem>
                              <GridItem className="primary-content-container" columnSpan={6}>
                                  <main className="primary-content full-height">
                                  <HeadingText spacingType={[HeadingText.SPACING_TYPE.MEDIUM]} type={HeadingText.TYPE.HEADING_4}>
                                      Transaction Errors
                                  </HeadingText>
                                  <PieChart fullWidth accountId={accountId} query={errCount+since} />
                                  </main>
                              </GridItem>
                          </Grid>
                        );
                    }}
                    </PlatformStateContext.Consumer>
                </StackItem>
            </Stack>
        )
    }
}

요약

이제 이 예의 모든 단계를 완료했으므로 다음 두 가지 방법으로 NerdGraphQuery 구성요소를 사용하여 계정에서 데이터를 성공적으로 쿼리했습니다.

애플리케이션의 렌더링 메서드 내에서 NerdGraphQuery 구성요소를 사용한 다음 반환된 데이터를 하위 구성요소에 전달합니다.
애플리케이션이 렌더링되기 전에 NerdGraphQuery.query 메서드를 사용하여 데이터를 쿼리합니다.

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

NerdGraphQuery 구성요소를 애플리케이션에 추가

중요

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

중요

샘플 코드 준비

중요

NerdGraphQuery 구성요소 추가

중요

사용하는 방법 NerdGraphQuery.query

NerdGraph 쿼리 결과 검토

요약

시작하기 전에

`NerdGraphQuery` 구성요소 추가

사용하는 방법 `NerdGraphQuery.query`