• EnglishEspañol日本語한국어Português
  • 로그인지금 시작하기

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

In the event of any inconsistency between the English version and the translated version, the English versionwill take priority. Please visit this page for more information.

문제 신고

뉴쿨릭 계약에 테이블을 추가하세요

테이블은 뉴렐릭에서 데이터를 표시하는 널리 사용되는 방법입니다. 예를 들어 쿼리 빌더를 사용하면 NRQL 쿼리 에서 테이블을 만들 수 있습니다.

테이블에 대한 더 많은 제어가 필요하거나 제3자 데이터를 가져오는 경우 뉴렐릭 제작에 자신만의 테이블을 만들 수 있습니다.

이 가이드에서는 다양한 뉴렐릭 구성요소를 사용하여 샘플 테이블을 작성해 보겠습니다.

시작하기 전에

뉴렐릭 One CLI를 아직 설치하지 않았다면 뉴렐릭의 빠른 시작 단계를 따르세요. 이 프로세스를 통해 API 키도 얻을 수 있습니다.

또한 이 가이드의 단계를 완료하려면 컴퓨터에 GitHub 계정과 Node.js가 설치되어 있어야 합니다.

예제 애플리케이션 복제 및 설정

nr1-how-to 예제 애플리케이션을 GitHub에서 로컬 머신으로 복제합니다. 그런 다음 앱 디렉터리로 이동합니다.

예제 앱을 사용하면 테이블을 실험해 볼 수 있습니다.

bash
$
git clone https://github.com/newrelic/nr1-how-to.git
$
cd nr1-how-to/create-a-table/nerdlets/create-a-table-nerdlet

예에 표시된 대로 index.js 파일을 편집하고 this.accountId 계정 ID 로 설정합니다.

export default class Nr1HowtoAddTimePicker extends React.Component {
constructor(props){
super(props)
this.accountId = YOUR_ACCOUNT_ID;
}
...
}

데모 애플리케이션 실행

디렉토리를 다시 nr1-how-to/create-a-table 으로 변경하십시오. 데모를 로드하기 전에 뉴렐릭 One CLI를 호출하여 고유 ID를 업데이트 해야 합니다.

앱에 새 UUID를 할당한 후에는 의존성/종속성을 설치하고 데모 앱을 로컬로 제공하여 브라우저에서 실시간으로 변경 사항을 테스트할 수 있습니다.

bash
$
nr1 update
$
nr1 nerdpack:uuid -gf # Update the app unique ID
$
npm install # Install dependencies
$
nr1 nerdpack:serve # Serve the demo app locally

브라우저에서 로컬 뉴렐릭 홈페이지를 엽니다. Your apps [앱 을] 클릭한 다음 Apps 섹션에 Create a table [테이블 생성] 실행 프로그램이 표시되어야 합니다. 이것이 바로 여러분이 작업할 데모 애플리케이션입니다. 계속해서 선택하세요.

데모 앱을 잘 살펴보세요. 왼쪽에는 Transaction Overview [칩셋 개요] 라는 이름의 TableChart 가 있고 그 옆에는 AreaChart 이 있습니다. 두 번째 행에 새 테이블을 추가하려면 Table 구성요소를 사용합니다.

테이블 구성 요소 작업

nerdlets/create-a-table-nerdlet 하위 디렉토리로 이동하여 index.js 파일을 엽니다.

예제와 같이 보이도록 파일 상단의 import 문에 다음 구성 요소를 추가합니다.

  • Table

  • TableHeader

  • TableHeaderCell

  • TableRow

  • TableRowCell

    import {
    Table,
    TableHeader,
    TableHeaderCell,
    TableRow,
    TableRowCell,
    PlatformStateContext,
    Grid,
    GridItem,
    HeadingText,
    AreaChart,
    TableChart,
    } from 'nr1';

기본 테이블 구성 요소 추가

index.js 에서 빈 GridItem 찾으세요. 여기에서 테이블 작성을 시작합니다.

초기 <Table> 구성요소를 추가합니다. items 속성은 샘플 값이 포함된 _getItems() 를 호출하여 데이터를 수집합니다.

<GridItem className="primary-content-container" columnSpan={12}>
<Table items={this._getItems()}></Table>
</GridItem>;

머리글과 행 추가

Table 구성요소가 고정된 수의 헤더 셀과 행을 렌더링하므로 다음 단계는 헤더 구성요소와 필수 테이블 행을 반환하는 함수를 추가하는 것입니다.

Table 구성요소 내에서 각 제목에 대해 TableHeader 을 추가한 다음 TableHeaderCell 하위 항목을 추가합니다.

필요한 행 수를 모르기 때문에 가장 좋은 방법은 함수를 호출하여 _getItems() 에서 반환된 항목 수만큼 TableRows 빌드하는 것입니다.

<TableHeader>
<TableHeaderCell>Application</TableHeaderCell>
<TableHeaderCell>Size</TableHeaderCell>
<TableHeaderCell>Company</TableHeaderCell>
<TableHeaderCell>Team</TableHeaderCell>
<TableHeaderCell>Commit</TableHeaderCell>
</TableHeader>;
{
({ item }) => (
<TableRow>
<TableRowCell>{item.name}</TableRowCell>
<TableRowCell>{item.value}</TableRowCell>
<TableRowCell>{item.company}</TableRowCell>
<TableRowCell>{item.team}</TableRowCell>
<TableRowCell>{item.commit}</TableRowCell>
</TableRow>
);
}

뉴렐릭에서 실행되는 기능을 살펴보세요.

표준 테이블 셀을 스마트 셀로 교체

뉴렐릭 One 라이브러리에는 사용자, 지수, 엔터티 이름과 같은 특정 데이터 유형의 형식을 자동으로 지정할 수 있는 셀 구성 요소가 포함되어 있습니다.

방금 생성한 테이블에는 Application [애플리케이션] (엔터티 이름) 및 Size [크기] (메트릭) 구성 요소의 이점을 누릴 수 있는 열이 포함되어 있습니다.

EntityTitleTableRowCellMetricTableRowCell 사용하려면 먼저 import 문에 추가해야 합니다.

import {
EntityTitleTableRowCell,
MetricTableRowCell,
... /* All previous components */
} from 'nr1';

첫 번째와 두 번째 TableRowCell를 엔터티 및 지표 셀로 바꿔 테이블 행을 업데이트합니다.

EntityTitleTableRowCell 은 자체 닫는 태그입니다.

{
({ item }) => (
<TableRow>
<EntityTitleTableRowCell value={item} />
<MetricTableRowCell
type={MetricTableRowCell.TYPE.APDEX}
value={item.value}
/>
<TableRowCell>{item.company}</TableRowCell>
<TableRowCell>{item.team}</TableRowCell>
<TableRowCell>{item.commit}</TableRowCell>
</TableRow>
);
}

테이블을 다시 살펴볼 시간입니다. 추가한 셀 구성 요소는 데이터 형식을 올바르게 지정합니다.

테이블도 훌륭하지만 대화형 테이블이 더 좋을 수 있습니다. 마지막 업데이트로 사용자가 각 데이터 행에 대해 작업을 수행할 수 있도록 허용할 것입니다.

_getItems() 바로 앞에 있는 index.js 파일에 _getActions() 메서드를 추가합니다.

코드에서 짐작할 수 있듯이 또는 커밋 셀을 클릭하면 _getActions() 공지 상자를 생성합니다.

_getActions() {
return [
{
label: 'Alert Team',
iconType: TableRow.ACTIONS_ICON_TYPE.INTERFACE__OPERATIONS__ALERT,
onClick: (evt, { item, index }) => {
alert(`Alert Team: ${item.team}`);
},
},
{
label: 'Rollback Version',
iconType: TableRow.ACTIONS_ICON_TYPE.INTERFACE__OPERATIONS__UNDO,
onClick: (evt, { item, index }) => {
alert(`Rollback from: ${item.commit}`);
},
},
];
}

return 문에서 TableRow 구성요소를 찾고 actions 속성이 _getActions() 을 가리키도록 합니다.

TableRow 작업 속성은 사용자가 테이블 행 위로 마우스를 가져갈 때 나타나는 작업 집합을 정의합니다. 작업에는 필수 텍스트와 onClick 콜백이 있지만 필요한 경우 아이콘을 표시하거나 비활성화할 수도 있습니다.

<TableRow actions={this._getActions()}>

애플리케이션으로 돌아가서 행 중 하나 위로 마우스를 가져가 보십시오. 사용 가능한 두 가지 작업이 어떻게 나타나는지 확인하십시오. 이를 클릭하면 선택한 행 데이터를 인수로 사용하여 함수가 트리거되고 공지가 브라우저에 표시됩니다.

다음 단계

데이터 형식을 자동으로 지정하고 상황에 맞는 작업을 제공하는 구성 요소를 사용하여 뉴킹릭 피규어에 테이블을 구축했습니다. 잘하셨어요!

SDK 문서에서 Table 구성요소, 해당 속성, 사용 방법을 계속 살펴보세요.

Copyright © 2024 New Relic Inc.

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.