prometheus

1
import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';
2
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
3
import React, { FC, useState } from 'react';
4
import { Badge, Button } from 'reactstrap';
5

6
interface Labels {
7
  [key: string]: string;
8
}
9

10
export interface TargetLabelsProps {
11
  discoveredLabels: Labels;
12
  labels: Labels;
13
}
14

15
const TargetLabels: FC<TargetLabelsProps> = ({ discoveredLabels, labels }) => {
16
  const [showDiscovered, setShowDiscovered] = useState(false);
17

18
  return (
19
    <>
20
      <div className="series-labels-container">
21
        {Object.keys(labels).map((labelName) => {
22
          return (
23
            <Badge color="primary" className="mr-1" key={labelName}>
24
              {`${labelName}="${labels[labelName]}"`}
25
            </Badge>
26
          );
27
        })}
28
        <Button
29
          size="sm"
30
          color="link"
31
          title={`${showDiscovered ? 'Hide' : 'Show'} discovered (pre-relabeling) labels`}
32
          onClick={() => setShowDiscovered(!showDiscovered)}
33
          style={{ fontSize: '0.8rem' }}
34
        >
35
          <FontAwesomeIcon icon={showDiscovered ? faChevronUp : faChevronDown} />
36
        </Button>
37
      </div>
38
      {showDiscovered && (
39
        <>
40
          <div className="mt-3 font-weight-bold">Discovered labels:</div>
41
          {Object.keys(discoveredLabels).map((labelName) => (
42
            <div key={labelName}>
43
              <Badge color="info" className="mr-1">
44
                {`${labelName}="${discoveredLabels[labelName]}"`}
45
              </Badge>
46
            </div>
47
          ))}
48
        </>
49
      )}
50
    </>
51
  );
52
};
53

54
export default TargetLabels;
55