EndpointLink

Scrape endpoint URL display with query parameter badges.

Description

Scrape endpoint URL display with query parameter badges. Parses the URL and renders query parameters as small gray pill badges alongside the clickable link.

✓ Do

Scrape target endpoint display
Any URL that benefits from parsed query param badges
Consistent endpoint formatting across all pages

✗ Don’t

Generic links without query parameter parsing
Navigation links (use NavButton)
Manually parsing URLs and rendering query param badges

Design

EndpointLink Example

http://localhost:9090/metrics

http://localhost:9090/api/v1/query query=up time=1234567

Where this component exists in the Prometheus UI

View in Prometheus UI → /targets

EndpointLink on the Targets page — clickable scrape endpoint URLs

Implementation

From components/EndpointLink.tsx in the Prometheus codebase:

const EndpointLink: FC<EndpointLinkProps> = ({ endpoint, globalUrl }) => {
  let url: URL;
  try {
    url = new URL(endpoint);
  } catch {
    url = new URL("http://0.0.0.0" + endpoint.substring(endpoint.indexOf("?")));
  }
  const { host, pathname, protocol, searchParams } = url;
  return (
    <Stack gap={0}>
      <Anchor size="sm" href={globalUrl} target="_blank">
        {protocol}//{host}{pathname}
      </Anchor>
      {Array.from(searchParams.entries()).map(([k, v]) => (
        <Badge size="sm" variant="light" color="gray" key={k}>
          {k}="{v}"
        </Badge>
      ))}
    </Stack>
  );
};

Layout Specs

Property	Value
Font Size	13px
Gap	6px (0.375rem)
Badge Height	18px
Badge Padding	0 6px
Badge Border Radius	999px (pill)
Badge Font Size	10px

Accessibility

Link is a standard <a> element
Query parameter badges are purely visual — not interactive