prometheus

1
import React, { FC, useState } from 'react';
2
import { Badge, Table } from 'reactstrap';
3
import { TargetLabels } from './Services';
4
import { ToggleMoreLess } from '../../components/ToggleMoreLess';
5
import CustomInfiniteScroll, { InfiniteScrollItemsProps } from '../../components/CustomInfiniteScroll';
6

7
interface LabelProps {
8
  value: TargetLabels[];
9
  name: string;
10
}
11

12
const formatLabels = (labels: Record<string, string> | string) => {
13
  return Object.entries(labels).map(([key, value]) => {
14
    return (
15
      <div key={key}>
16
        <Badge color="primary" className="mr-1">
17
          {`${key}="${value}"`}
18
        </Badge>
19
      </div>
20
    );
21
  });
22
};
23

24
const LabelsTableContent: FC<InfiniteScrollItemsProps<TargetLabels>> = ({ items }) => {
25
  return (
26
    <Table size="sm" bordered hover striped>
27
      <thead>
28
        <tr>
29
          <th>Discovered Labels</th>
30
          <th>Target Labels</th>
31
        </tr>
32
      </thead>
33
      <tbody>
34
        {items.map((_, i) => {
35
          return (
36
            <tr key={i}>
37
              <td>{formatLabels(items[i].discoveredLabels)}</td>
38
              {items[i].isDropped ? (
39
                <td style={{ fontWeight: 'bold' }}>Dropped</td>
40
              ) : (
41
                <td>{formatLabels(items[i].labels)}</td>
42
              )}
43
            </tr>
44
          );
45
        })}
46
      </tbody>
47
    </Table>
48
  );
49
};
50

51
export const LabelsTable: FC<LabelProps> = ({ value, name }) => {
52
  const [showMore, setShowMore] = useState(false);
53

54
  return (
55
    <>
56
      <div>
57
        <ToggleMoreLess
58
          event={(): void => {
59
            setShowMore(!showMore);
60
          }}
61
          showMore={showMore}
62
        >
63
          <span className="target-head">{name}</span>
64
        </ToggleMoreLess>
65
      </div>
66
      {showMore ? <CustomInfiniteScroll allItems={value} child={LabelsTableContent} /> : null}
67
    </>
68
  );
69
};
70