prometheus

1
import React, { FC } from 'react';
2
import { Badge } from 'reactstrap';
3

4
export interface EndpointLinkProps {
5
  endpoint: string;
6
  globalUrl: string;
7
}
8

9
const EndpointLink: FC<EndpointLinkProps> = ({ endpoint, globalUrl }) => {
10
  let url: URL;
11
  let search = '';
12
  let invalidURL = false;
13
  try {
14
    url = new URL(endpoint);
15
  } catch (err: unknown) {
16
    // In cases of IPv6 addresses with a Zone ID, URL may not be parseable.
17
    // See https://github.com/prometheus/prometheus/issues/9760
18
    // In this case, we attempt to prepare a synthetic URL with the
19
    // same query parameters, for rendering purposes.
20
    invalidURL = true;
21
    if (endpoint.indexOf('?') > -1) {
22
      search = endpoint.substring(endpoint.indexOf('?'));
23
    }
24
    url = new URL('http://0.0.0.0' + search);
25
  }
26

27
  const { host, pathname, protocol, searchParams }: URL = url;
28
  const params = Array.from(searchParams.entries());
29
  const displayLink = invalidURL ? endpoint.replace(search, '') : `${protocol}//${host}${pathname}`;
30
  return (
31
    <>
32
      <a href={globalUrl}>{displayLink}</a>
33
      {params.length > 0 ? <br /> : null}
34
      {params.map(([labelName, labelValue]: [string, string]) => {
35
        return (
36
          <Badge color="primary" className="mr-1" key={`${labelName}/${labelValue}`}>
37
            {`${labelName}="${labelValue}"`}
38
          </Badge>
39
        );
40
      })}
41
    </>
42
  );
43
};
44

45
export default EndpointLink;
46