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

     1  import React, { FC } from 'react';
     2  import { metricToSeriesName } from '../../utils';
     3  
     4  interface SeriesNameProps {
     5    labels: { [key: string]: string } | null;
     6    format: boolean;
     7  }
     8  
     9  const SeriesName: FC<SeriesNameProps> = ({ labels, format }) => {
    10    const renderFormatted = (): React.ReactElement => {
    11      const labelNodes: React.ReactElement[] = [];
    12      let first = true;
    13      for (const label in labels) {
    14        if (label === '__name__') {
    15          continue;
    16        }
    17  
    18        labelNodes.push(
    19          <span key={label}>
    20            {!first && ', '}
    21            <span className="legend-label-name">{label}</span>=<span className="legend-label-value">"{labels[label]}"</span>
    22          </span>
    23        );
    24  
    25        if (first) {
    26          first = false;
    27        }
    28      }
    29  
    30      return (
    31        <div>
    32          <span className="legend-metric-name">{labels!.__name__ || ''}</span>
    33          <span className="legend-label-brace">{'{'}</span>
    34          {labelNodes}
    35          <span className="legend-label-brace">{'}'}</span>
    36        </div>
    37      );
    38    };
    39  
    40    if (labels === null) {
    41      return <>scalar</>;
    42    }
    43  
    44    if (format) {
    45      return renderFormatted();
    46    }
    47    // Return a simple text node. This is much faster to scroll through
    48    // for longer lists (hundreds of items).
    49    return <>{metricToSeriesName(labels!)}</>;
    50  };
    51  
    52  export default SeriesName;