Ajoutez des tables à votre application New Relic

Clonez l'exemple d'application nr1-how-to depuis GitHub sur votre machine locale. Ensuite, accédez au répertoire de l’application.

L'exemple d'application vous permet d'expérimenter avec des tableaux.

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

Modifiez le fichier index.js et définissez this.accountId sur votre ID de compte comme indiqué dans l'exemple.

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

Exécutez l'application de démonstration

Remettez le répertoire sur nr1-how-to/create-a-table. Avant de pouvoir charger l'application de démonstration, vous devez mettre à jour son ID unique en appelant la CLI New Relic One.

Une fois que vous avez attribué un nouvel UUID à l'application, installez la dépendance et diffusez l'application de démonstration localement, afin de pouvoir tester tout changement en direct dans votre navigateur.

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

Ouvrez la page d’accueil locale de New Relic dans votre navigateur. Cliquez sur Appls, puis dans la section Your apps , vous devriez voir un lanceur Create a table . C'est l'application de démonstration sur laquelle vous allez travailler. Allez-y et sélectionnez-le.

Jetez un œil à l'application de démonstration. Il y a un TableChart sur le côté gauche nommé Transaction Overview, avec un AreaChart à côté. Vous utiliserez Table composants pour ajouter une nouvelle table dans la deuxième ligne.

Accédez au sous-répertoire nerdlets/create-a-table-nerdlet et ouvrez le fichier index.js .

Ajoutez les composants suivants à l’instruction d’importation en haut du fichier afin qu’il ressemble à l’exemple :

• Table

• TableHeader

• TableHeaderCell

• TableRow

• TableRowCell

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

  Copier

Ajouter un composant de table de base

Localisez le GridItem vide dans index.js: c'est ici que vous commencez à construire la table.

Ajoutez le composant <Table> initial. La propriété items collecte les données en appelant _getItems(), qui contient des exemples de valeurs.

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

Ajouter l'en-tête et les lignes

Étant donné que le composant Table restitue un nombre fixe de cellules et de lignes d’en-tête, votre étape suivante consiste à ajouter des composants d’en-tête, ainsi qu’une fonction qui renvoie les lignes de tableau requises.

À l'intérieur du composant Table , ajoutez l'enfant TableHeader puis un enfant TableHeaderCell pour chaque titre.

Comme vous ne savez pas combien de lignes vous aurez besoin, votre meilleure option est d'appeler une fonction pour créer autant de TableRows que d'éléments renvoyés par _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>
  );
}

Jetez un œil à l’application exécutée dans New Relic.

Remplacer les cellules de tableau standard par des cellules intelligentes

La bibliothèque New Relic One comprend des composants cellulaires qui peuvent formater automatiquement certains types de données, comme les noms d'utilisateurs, de métriques et d'entités.

Le tableau que vous venez de créer contient des colonnes qui peuvent bénéficier de ces composants : Application (un nom d'entité) et Size (une métrique).

Avant de pouvoir utiliser EntityTitleTableRowCell et MetricTableRowCell, vous devez d’abord les ajouter à l’instruction d’importation.

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

Mettez à jour les lignes de votre tableau en remplaçant les premier et deuxième TableRowCellpar des cellules d’entité et de métrique.

Notez que EntityTitleTableRowCell est une balise à fermeture automatique.

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

Il est temps de jeter un second coup d'œil à votre tableau : les composants de cellule que vous avez ajoutés se chargent de formater correctement les données.

Les tableaux sont formidables, mais les tableaux interactifs peuvent être meilleurs : en guise de dernière mise à jour, vous allez permettre à l'utilisateur d'agir sur chaque ligne de données.

Ajoutez la méthode _getActions() à votre fichier index.js , juste avant _getItems().

Comme vous l'avez peut-être deviné à partir du code, _getActions() génère une boîte d'alerte lorsque vous cliquez sur les cellules 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}`);
            },
        },
    ];
}

Recherchez le composant TableRow dans votre instruction return et pointez la propriété actions vers _getActions().

La propriété actions TableRow définit un ensemble d'actions qui apparaissent lorsque l'utilisateur survole une ligne de tableau. Les actions ont un texte obligatoire et un rappel onClick , mais peuvent également afficher une icône ou être désactivées si nécessaire.

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

Revenez à votre application et essayez de survoler l’une des lignes : remarquez comment les deux actions disponibles apparaissent. Lorsque vous cliquez dessus, une fonction se déclenche avec les données de la ligne sélectionnée comme argument et une alerte s'affiche dans votre navigateur.