Adicione tabelas ao seu aplicativo New Relic

Clone o aplicativo de exemplo nr1-how-to do GitHub para sua máquina local. Em seguida, navegue até o diretório do aplicativo.

O aplicativo de exemplo permite experimentar tabelas.

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

Edite o arquivo index.js e defina this.accountId como sua ID de conta, conforme mostrado no exemplo.

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

Execute o aplicativo de demonstração

Mude o diretório de volta para nr1-how-to/create-a-table. Antes de carregar o aplicativo de demonstração, você precisa atualizar seu ID único invocando a CLI do New Relic One.

Depois de atribuir um novo UUID ao aplicativo, instale a dependência e sirva o aplicativo de demonstração localmente, para que você possa testar qualquer alteração ao vivo em seu browser.

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

Abra a página inicial local da New Relic em seu navegador. Clique em Apps e, na seção Your apps , você verá um iniciador Create a table . Esse é o aplicativo de demonstração no qual você trabalhará. Vá em frente e selecione-o.

Dê uma boa olhada no aplicativo de demonstração. Há um TableChart no lado esquerdo chamado Transaction Overview, com um AreaChart próximo a ele. Você usará componentes Table para adicionar uma nova tabela na segunda linha.

Navegue até o subdiretório nerdlets/create-a-table-nerdlet e abra o arquivo index.js .

Adicione os seguintes componentes à instrução import na parte superior do arquivo para que fique semelhante ao exemplo:

• Table

• TableHeader

• TableHeaderCell

• TableRow

• TableRowCell

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

  Copiar

Adicione um componente de tabela básico

Localize o GridItem vazio em index.js: é aqui que você começa a construir a tabela.

Adicione o componente <Table> inicial. A propriedade items coleta os dados chamando _getItems(), que contém valores de amostra.

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

Adicione o cabeçalho e as linhas

Como o componente Table renderiza um número fixo de células e linhas de cabeçalho, a próxima etapa é adicionar componentes de cabeçalho, bem como uma função que retorne as linhas necessárias da tabela.

Dentro do componente Table , adicione o TableHeader e depois um filho TableHeaderCell para cada título.

Como você não sabe de quantas linhas precisará, sua melhor aposta é chamar uma função para criar tantos TableRows quantos itens retornados por _getItems().

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

Dê uma olhada no aplicativo em execução no New Relic.

Substitua células de tabela padrão por células inteligentes

A biblioteca New Relic One inclui componentes de células que podem formatar automaticamente determinados tipos de dados, como nomes de usuário, métrica e entidade.

A tabela que você acabou de criar contém colunas que podem se beneficiar desses componentes: Application (um nome de entidade) e Size (uma métrica).

Antes de poder usar EntityTitleTableRowCell e MetricTableRowCell, você deve primeiro adicioná-los à instrução de importação.

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

Atualize as linhas da sua tabela substituindo o primeiro e o segundo TableRowCells por células de entidade e métrica.

Observe que EntityTitleTableRowCell são tags de fechamento automático.

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

É hora de dar uma segunda olhada em sua tabela: os componentes da célula que você adicionou cuidam da formatação adequada dos dados.

As tabelas são ótimas, mas as tabelas interativas podem ser melhores: como última atualização, você permitirá que o usuário atue em cada linha de dados.

Adicione o método _getActions() ao seu arquivo index.js , logo antes de _getItems().

Como você deve ter adivinhado pelo código, _getActions() gera uma caixa de alerta quando você clica nas células Team ou 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}`);
            },
        },
    ];
}

Encontre o componente TableRow em sua instrução return e aponte a propriedade actions para _getActions().

A propriedade TableRow actions define um conjunto de ações que aparecem quando o usuário passa o mouse sobre uma linha da tabela. As ações possuem um texto obrigatório e um retorno de chamada onClick , mas também podem exibir um ícone ou ser desativadas, se necessário.

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

Volte para seu aplicativo e tente passar o mouse sobre qualquer uma das linhas: Observe como as duas ações disponíveis aparecem. Quando você clica neles, uma função é acionada com os dados da linha selecionada como argumento e um alerta é exibido em seu browser.