MetricTableRowCell

Affiche une cellule de tableau de lignes affichant une métrique particulière. La métrique est formatée en fonction de l'unité transmise. Les unités sont compatibles 1:1 avec celles prises en charge par le type de format <NrqlQuery> CHART.

Le formatage des unités et des préfixes est automatiquement sélectionné pour vous afin qu'il soit cohérent avec le reste de la plateforme. Les métriques sont automatiquement alignées à gauche et ellipsifiées à partir de la droite, ce qui est la manière standard de les présenter.

Usage

import { MetricTableRowCell } from 'nr1'

Exemples

Basique

function render() {
  const items = [
    {
      value: 123456789,
    },
  ];


  return (
    <Table items={items}>
      <TableHeader>
        <TableHeaderCell alignmentType={TableHeaderCell.ALIGNMENT_TYPE.RIGHT}>
          Memory usage
        </TableHeaderCell>
      </TableHeader>


      {({ item }) => (
        <TableRow>
          <MetricTableRowCell
            type={MetricTableRowCell.TYPE.BITS}
            value={item.value}
          />
        </TableRow>
      )}
    </Table>
  );
}

Avec une valeur ajoutée

function render() {
  const items = [
    {
      value: 123456789,
      lastUpdated: new Date().toLocaleTimeString(),
    },
  ];


  return (
    <Table items={items} multivalue>
      <TableHeader>
        <TableHeaderCell alignmentType={TableHeaderCell.ALIGNMENT_TYPE.RIGHT}>
          Memory usage
        </TableHeaderCell>
      </TableHeader>


      {({ item }) => (
        <TableRow>
          <MetricTableRowCell
            type={MetricTableRowCell.TYPE.BITS}
            value={item.value}
            additionalValue={`Last updated at ${item.lastUpdated}`}
          />
        </TableRow>
      )}
    </Table>
  );
}

Accessoires

additionalValue

chaîne

Informations complémentaires sur les données principales de la cellule.Remarque : Pour le moment, ce contenu n'est visible que lorsque la propriété multivalue est transmise au composant parent Table .

className

chaîne

Ajoute les noms de classe au composant. Doit être utilisé uniquement à des fins de positionnement et d'espacement.

onClick

fonction

Rappel déclenché à chaque fois que l'utilisateur clique sur la cellule du tableau.

function (event: React.MouseEvent 
)

style

objet

Style en ligne pour un style personnalisé. Doit être utilisé uniquement à des fins de positionnement et d'espacement.

testId

chaîne

Ajoute un attribut data-test-id. Utilisez-le pour cibler le composant dans les tests unitaires et E2E. Pour qu'un identifiant de test soit valide, préfixez-le avec votre identifiant nerdpack, suivi d'un point. Par exemple, my-nerdpack.some-element.

Remarque : vous ne verrez peut-être pas l'attribut data-test-id car ils sont supprimés du DOM. Pour les déboguer, transmettez un paramètre de requête e2e-test à l'URL.

to

forme|chaîne

Objet d'emplacement ou chaîne d'URL vers laquelle créer un lien. Les TableRowCellliés ne sont pas stylisés et n'afficheront pas d'icônes pour les liens externes. Si le même style que le composant Link est souhaité, utilisez plutôt un Link comme composant enfant dans la

cellule

pathname

OBLIGATOIRE

chaîne

search

chaîne

hash

chaîne

type

énum.

Unité de la métrique fournie. Sera utilisé pour le formatage automatique de la valeur numérique.

<One ofMetricTableRowCell.TYPE.APDEX, MetricTableRowCell.TYPE.BITS, MetricTableRowCell.TYPE.BITS_PER_MS, MetricTableRowCell.TYPE.BITS_PER_SECOND, MetricTableRowCell.TYPE.BYTES, MetricTableRowCell.TYPE.BYTES_PER_MS, MetricTableRowCell.TYPE.BYTES_PER_SECOND, MetricTableRowCell.TYPE.CELSIUS, MetricTableRowCell.TYPE.COUNT, MetricTableRowCell.TYPE.HERTZ, MetricTableRowCell.TYPE.MS, MetricTableRowCell.TYPE.PAGES_PER_SECOND, MetricTableRowCell.TYPE.PERCENTAGE, MetricTableRowCell.TYPE.REQUESTS_PER_SECOND, MetricTableRowCell.TYPE.SECONDS, MetricTableRowCell.TYPE.TIMESTAMP, MetricTableRowCell.TYPE.UNKNOWN,
>

value

OBLIGATOIRE

nombre

Valeur métrique, toujours sous la forme d'un nombre.

Cette traduction automatique est fournie pour votre commodité.

Usage.css-21sua1{background:none;border:none;width:0;padding:0;}

Exemples

Basique

Avec une valeur ajoutée

Accessoires

chaîne

chaîne

fonction

objet

chaîne

forme|chaîne

cellule

OBLIGATOIRE

chaîne

chaîne

chaîne

énum.

OBLIGATOIRE

nombre

Usage