New Relicアプリケーションにテーブルを追加する

GitHub からnr1-how-toサンプル アプリケーションをローカル マシンにクローンします。 次に、アプリ ディレクトリに移動します。

サンプル アプリではテーブルを試すことができます。

$
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に戻します。 デモ アプリケーションをロードする前に、 New RelicOne CLI を呼び出して UNIQUEID を更新する 必要があります。

アプリに新しい UUID を割り当てたら、 デプロイメント をインストールし、デモ アプリをローカルで提供して、 browserで変更をライブでテストできるようにします。

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

で ローカルのNew Relic ホームページ browserを開きます。Apps をクリックすると、 Your appsセクションにCreate a table [テーブルの作成]ランチャーが表示されます。 これが、これから作業するデモ アプリケーションです。 さあ、選択してください。

デモアプリをよく見てください。 左側にTransaction Overview [トランザクションの概要]という名前のTableChartがあり、その横にAreaChartがあります。 2 行目に新しいテーブルを追加するには、 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>
  );
}

New Relic で実行されているアプリケーションを見てみましょう。

標準の表セルをスマートセルに置き換える

New Relic One ライブラリには、ユーザー、メトリックス、テンプレート名などの特定のデータ型を自動的にフォーマットできるセル コンポーネントが含まれています。

作成したテーブルには、これらのコンポーネント: Application [アプリケーション](エンティティ名) とSize [サイズ] (メトリック)) のメリットを活用できる列が含まれています。

EntityTitleTableRowCellとMetricTableRowCellを使用する前に、まずそれらを import ステートメントに追加する必要があります。

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

最初の TableRowCell と 2 番目のをテンプレート セルとメトリック セルに置き換えて、テーブル行を更新します。

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>
  );
}

テーブルをもう一度見てみましょう。追加したセル コンポーネントによって、データが適切にフォーマットされます。

テーブルは素晴らしいですが、インタラクティブなテーブルはさらに優れたものになります。最後の更新として、ユーザーが各データ行に対して操作できるようにします。

_getActions()メソッドをindex.jsファイルの_getItems()の直前に追加します。

コードから推測できるように、 _getActions() 、Team [チーム セル]またはCommit [コミット]セルをクリックすると集計ボックスを生成します。

_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()}>

アプリケーションに戻り、いずれかの行にマウスを移動してみてください。利用可能な 2 つのアクションが表示されることに注意してください。 クリックすると、選択した行データを引数として関数がトリガーされ、 browserに集計が表示されます。