SeriesName

Renders a metric label set in Prometheus format: metric_name{label="value",label2="value2"}.

Description

Renders a metric label set in Prometheus format: metric_name{label="value",label2="value2"}. In formatted mode, double-clicking a label pair copies the PromQL matcher to clipboard.

✓ Do

Metric series display in query results
Table cells showing series identifiers
Use formatted for interactive, plain for large sets

✗ Don’t

Single label display (use LabelBadge)
Editable label display
Formatted mode for >1000 series (performance overhead)

Design

Plain Mode

http_requests_total{job="prometheus", instance="localhost:9090"}

Formatted Mode (clickable labels)

up{job="prometheus", instance="localhost:9090"}

Empty Labels

{}

Where this component exists in the Prometheus UI

View in Prometheus UI → /query

SeriesName in the Query page — metric name with clickable labels

Implementation

From pages/query/SeriesName.tsx in the Prometheus codebase:

const SeriesName: FC<SeriesNameProps> = ({ labels, format }) => {
  const renderFormatted = (): React.ReactElement => {
    const labelNodes: React.ReactElement[] = [];
    let first = true;
    for (const label in labels) {
      if (label === "__name__") continue;
      labelNodes.push(
        <span key={label}>
          {!first && ", "}
          <span className={classes.labelPair}
            title="Double click to copy label matcher">
            <span className={classes.labelName}>{maybeQuoteLabelName(label)}</span>
            ="<span className={classes.labelValue}>{escapeString(labels[label])}</span>"
          </span>
        </span>
      );
      if (first) first = false;
    }
    return (
      <span>
        <span className={classes.metricName}>{labels?.__name__ || ""}</span>
        {"{"}{labelNodes}{"}"}
      </span>
    );
  };
};

Layout Specs

Property	Value
Font Family	DejaVu Sans Mono
Font Size	13px
Line Height	1.5
Metric Name Weight	500 (medium)
Label Name Color	light-dark(#800000, #ff8585)
Label Value Color	light-dark(#a31515, #fca5a5)

Accessibility

In formatted mode, label pairs have role="button" and tabIndex={0}
Each label pair has descriptive aria-label explaining the double-click action
Uses title attribute for tooltip hint
Audit fix: Hover background now uses light-dark() for dark mode support