github.com/thanos-io/thanos@v0.32.5/pkg/ui/react-app/src/pages/targets/EndpointLink.tsx (about)

     1  import React, { FC } from 'react';
     2  import { Badge, UncontrolledAlert } 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    try {
    12      url = new URL(endpoint);
    13    } catch (e) {
    14      return (
    15        <UncontrolledAlert color="danger">
    16          <strong>Error:</strong> {(e as Error).message}
    17        </UncontrolledAlert>
    18      );
    19    }
    20  
    21    const { host, pathname, protocol, searchParams }: URL = url;
    22    const params = Array.from(searchParams.entries());
    23  
    24    return (
    25      <>
    26        <a href={globalUrl}>{`${protocol}//${host}${pathname}`}</a>
    27        {params.length > 0 ? <br /> : null}
    28        {params.map(([labelName, labelValue]: [string, string]) => {
    29          return (
    30            <Badge color="primary" className={`mr-1 ${labelName}`} key={labelName}>
    31              {`${labelName}="${labelValue}"`}
    32            </Badge>
    33          );
    34        })}
    35      </>
    36    );
    37  };
    38  
    39  export default EndpointLink;