prometheus

1
import React, { FC, useContext } from 'react';
2
import { useToastContext } from '../../contexts/ToastContext';
3
import { metricToSeriesName } from '../../utils';
4

5
interface SeriesNameProps {
6
  labels: { [key: string]: string } | null;
7
  format: boolean;
8
}
9

10
const SeriesName: FC<SeriesNameProps> = ({ labels, format }) => {
11
  const setClipboardMsg = useToastContext();
12

13
  const toClipboard = (e: React.MouseEvent<HTMLSpanElement>) => {
14
    const copyText = e.currentTarget.innerText || '';
15
    navigator.clipboard
16
      .writeText(copyText.trim())
17
      .then(() => {
18
        setClipboardMsg(copyText);
19
      })
20
      .catch((reason) => {
21
        console.error(`unable to copy text: ${reason}`);
22
      });
23
  };
24

25
  const renderFormatted = (): React.ReactElement => {
26
    const labelNodes: React.ReactElement[] = [];
27
    let first = true;
28
    for (const label in labels) {
29
      if (label === '__name__') {
30
        continue;
31
      }
32

33
      labelNodes.push(
34
        <span key={label}>
35
          {!first && ', '}
36
          <span className="legend-label-container" onClick={toClipboard} title="Click to copy label matcher">
37
            <span className="legend-label-name">{label}</span>=<span className="legend-label-value">"{labels[label]}"</span>
38
          </span>
39
        </span>
40
      );
41

42
      if (first) {
43
        first = false;
44
      }
45
    }
46

47
    return (
48
      <div>
49
        <span className="legend-metric-name">{labels ? labels.__name__ : ''}</span>
50
        <span className="legend-label-brace">{'{'}</span>
51
        {labelNodes}
52
        <span className="legend-label-brace">{'}'}</span>
53
      </div>
54
    );
55
  };
56

57
  if (labels === null) {
58
    return <>scalar</>;
59
  }
60

61
  if (format) {
62
    return renderFormatted();
63
  }
64
  // Return a simple text node. This is much faster to scroll through
65
  // for longer lists (hundreds of items).
66
  return <>{metricToSeriesName(labels)}</>;
67
};
68

69
export default SeriesName;
70