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

     1  import React, { FC, Fragment, useState } from 'react';
     2  import { Badge, Tooltip } from 'reactstrap';
     3  import 'css.escape';
     4  import styles from './TargetLabels.module.css';
     5  
     6  interface Labels {
     7    [key: string]: string;
     8  }
     9  
    10  export interface TargetLabelsProps {
    11    discoveredLabels: Labels;
    12    labels: Labels;
    13    idx: number;
    14    scrapePool: string;
    15  }
    16  
    17  const formatLabels = (labels: Labels): string[] => Object.keys(labels).map((key) => `${key}="${labels[key]}"`);
    18  
    19  const TargetLabels: FC<TargetLabelsProps> = ({ discoveredLabels, labels, idx, scrapePool }) => {
    20    const [tooltipOpen, setTooltipOpen] = useState(false);
    21  
    22    const toggle = (): void => setTooltipOpen(!tooltipOpen);
    23    const id = `series-labels-${scrapePool}-${idx}`;
    24  
    25    return (
    26      <>
    27        <div id={id} className="series-labels-container">
    28          {Object.keys(labels).map((labelName) => {
    29            return (
    30              <Badge color="primary" className="mr-1" key={labelName}>
    31                {`${labelName}="${labels[labelName]}"`}
    32              </Badge>
    33            );
    34          })}
    35        </div>
    36        <Tooltip
    37          isOpen={tooltipOpen}
    38          placement={'right-end'}
    39          target={CSS.escape(id)}
    40          toggle={toggle}
    41          style={{ maxWidth: 'none', textAlign: 'left' }}
    42        >
    43          <b>Before relabeling:</b>
    44          {formatLabels(discoveredLabels).map((s: string, labelIndex: number) => (
    45            <Fragment key={labelIndex}>
    46              <br />
    47              <span className={styles.discovered}>{s}</span>
    48            </Fragment>
    49          ))}
    50        </Tooltip>
    51      </>
    52    );
    53  };
    54  
    55  export default TargetLabels;