MetricTableRowCell

Renders a row table cell showing a particular metric. The metric is formatted according to the unit passed. Units are 1:1 compatible with the ones supported by <NrqlQuery> format type CHART.

Unit and prefix formatting is automatically picked for you so that it is consistent with the rest of the platform. Metrics are automatically aligned to the left, and ellipsified from the right, which is the standard way for presenting them.

Usage

import { MetricTableRowCell } from 'nr1'

Examples

Basic

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

With additional value

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

Props

additionalValue

string

Additional information along the main data in the cell.Note: At the moment this content becomes visible only when the multivalue prop is passed to the parent Table component.

className

string

Appends class names to the component.Should be used only for positioning and spacing purposes.

onClick

function

Callback fired any time the user clicks on the table cell.

function (event: React.MouseEvent 
)

style

object

Inline style for custom styling.Should be used only for positioning and spacing purposes.

testId

string

Adds a data-test-id attribute. Use it to target the component in unit and E2E tests.For a test id to be valid, prefix it with your nerdpack id, followed up by a dot.For example, my-nerdpack.some-element.

Note: You might not see data-test-id attributes as they are removed from the DOM, to debug them pass a e2e-test query parameter to the URL.

to

shape|string

Location object or url string to link to.Linked TableRowCells are unstyled and will not show icons for external links. If the same styling as the Link component is what is desired, then use a Link instead as a child component within the cell.

shape

pathname

REQUIRED

string

search

string

hash

string

type

enum

Unit of the provided metric. Will be used for auto-formatting the numerical value.

<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

REQUIRED

number

Metric value, always in the shape of a number.

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

Examples

Basic

With additional value

Props

string

string

function

object

string

shape|string

shape

REQUIRED

string

string

string

enum

REQUIRED

number

Usage