Agregue tablas a su aplicación New Relic

Clone la aplicación de ejemplo nr1-how-to de GitHub a su máquina local. Luego, navegue hasta el directorio de la aplicación.

La aplicación de ejemplo te permite experimentar con tablas.

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

Edite el archivo index.js y establezca this.accountId en su ID de cuenta como se muestra en el ejemplo.

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

Ejecute la aplicación de demostración

Vuelva a cambiar el directorio a nr1-how-to/create-a-table. Antes de poder cargar la aplicación de demostración, debe actualizar su ID única invocando la CLI New Relic One.

Una vez que asignó un nuevo UUID a la aplicación, instale la dependencia y proporcione la aplicación de demostración localmente, para que pueda probar cualquier cambio en tiempo real en su 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 la página de inicio local New Relic en su browser. Haga clic en Apps y luego, en la sección Your apps , debería ver un iniciador Create a table . Esa es la aplicación de demostración en la que vas a trabajar. Continúe y selecciónelo.

Eche un buen vistazo a la aplicación de demostración. Hay un TableChart en el lado izquierdo llamado Transaction Overview, con un AreaChart al lado. Empleará Table componentes para agregar una nueva tabla en la segunda fila.

Navegue hasta el subdirectorio nerdlets/create-a-table-nerdlet y abra el archivo index.js .

Agregue los siguientes componentes a la declaración de importación en la parte superior del archivo para que se parezca al ejemplo:

• Table

• TableHeader

• TableHeaderCell

• TableRow

• TableRowCell

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

  Copia

Agregar un componente de tabla básico

Localice el GridItem vacío en index.js: aquí es donde comienza a construir la tabla.

Agregue el componente <Table> inicial. La propiedad items recopila los datos llamando a _getItems(), que contiene valores de muestra.

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

Agrega el encabezado y las filas.

Como el componente Table representa una cantidad fija de celdas y filas de encabezado, el siguiente paso es agregar componentes de encabezado, así como una función que devuelva las filas de la tabla requeridas.

Dentro del componente Table , agregue el elemento secundario TableHeader y luego un TableHeaderCell para cada encabezado.

Como no sabe cuántas filas necesitará, lo mejor que puede hacer es llamar a una función para crear tantos TableRows como elementos devuelva _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>
  );
}

Eche un vistazo a la aplicación que se ejecuta en New Relic.

Reemplazar celdas de tabla estándar con celdas inteligentes

La biblioteca New Relic One incluye componentes celulares que pueden formatear automáticamente ciertos tipos de datos, como nombres de usuario, métrica y entidad.

La tabla que acaba de crear contiene columnas que pueden beneficiarse de esos componentes: Application (un nombre de entidad) y Size (una métrica).

Antes de poder usar EntityTitleTableRowCell y MetricTableRowCell, primero debe agregarlos a la declaración de importación.

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

Actualice las filas de su tabla reemplazando el primer y segundo TableRowCell con celdas de entidad y métrica.

Observe que EntityTitleTableRowCell es una etiqueta de cierre 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>
  );
}

Es hora de darle una segunda mirada a su tabla: los componentes de celda que agregó se encargan de formatear correctamente los datos.

Las tablas son geniales, pero las tablas interactivas pueden ser mejores: como última actualización, permitirá que el usuario actúe en cada fila de datos.

Agregue el método _getActions() a su archivo index.js , justo antes de _getItems().

Como adivinaste por el código, _getActions() genera un cuadro de alerta cuando haces clic en Team o Commit celdas.

_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}`);
            },
        },
    ];
}

Busque el componente TableRow en su declaración return y apunte la propiedad actions a _getActions().

La propiedad de acciones TableRow define un conjunto de acciones que aparecen cuando el usuario pasa el cursor sobre una fila de la tabla. Las acciones tienen un texto obligatorio y una devolución de llamada onClick , pero también pueden mostrar un icono o desactivar si es necesario.

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

Vuelve a tu aplicación e intenta pasar el cursor sobre cualquiera de las filas: observa cómo aparecen las dos acciones disponibles. Cuando hace clic en ellos, se activa una función con los datos de la fila seleccionada como argumento y se muestra una alerta en su browser.