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

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

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

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

$
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 [크기] (메트릭) 구성 요소의 이점을 누릴 수 있는 열이 포함되어 있습니다.

EntityTitleTableRowCell 및 MetricTableRowCell 사용하려면 먼저 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()}>

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