prometheus

1
import React, { FC } from 'react';
2
import { getColor, Target } from './target';
3
import { Badge, Table } from 'reactstrap';
4
import TargetLabels from './TargetLabels';
5
import styles from './ScrapePoolPanel.module.css';
6
import { formatRelative } from '../../utils';
7
import { now } from 'moment';
8
import TargetScrapeDuration from './TargetScrapeDuration';
9
import EndpointLink from './EndpointLink';
10
import CustomInfiniteScroll, { InfiniteScrollItemsProps } from '../../components/CustomInfiniteScroll';
11

12
const columns = ['Endpoint', 'State', 'Labels', 'Last Scrape', 'Scrape Duration', 'Error'];
13

14
interface ScrapePoolContentProps {
15
  targets: Target[];
16
}
17

18
const ScrapePoolContentTable: FC<InfiniteScrollItemsProps<Target>> = ({ items }) => {
19
  return (
20
    <Table className={styles.table} size="sm" bordered hover striped>
21
      <thead>
22
        <tr key="header">
23
          {columns.map((column) => (
24
            <th key={column}>{column}</th>
25
          ))}
26
        </tr>
27
      </thead>
28
      <tbody>
29
        {items.map((target, index) => (
30
          <tr key={index}>
31
            <td className={styles.endpoint}>
32
              <EndpointLink endpoint={target.scrapeUrl} globalUrl={target.globalUrl} />
33
            </td>
34
            <td className={styles.state}>
35
              <Badge color={getColor(target.health)}>{target.health.toUpperCase()}</Badge>
36
            </td>
37
            <td className={styles.labels}>
38
              <TargetLabels discoveredLabels={target.discoveredLabels} labels={target.labels} />
39
            </td>
40
            <td className={styles['last-scrape']}>{formatRelative(target.lastScrape, now())}</td>
41
            <td className={styles['scrape-duration']}>
42
              <TargetScrapeDuration
43
                duration={target.lastScrapeDuration}
44
                scrapePool={target.scrapePool}
45
                idx={index}
46
                interval={target.scrapeInterval}
47
                timeout={target.scrapeTimeout}
48
              />
49
            </td>
50
            <td className={styles.errors}>
51
              {target.lastError ? <span className="text-danger">{target.lastError}</span> : null}
52
            </td>
53
          </tr>
54
        ))}
55
      </tbody>
56
    </Table>
57
  );
58
};
59

60
export const ScrapePoolContent: FC<ScrapePoolContentProps> = ({ targets }) => {
61
  return <CustomInfiniteScroll allItems={targets} child={ScrapePoolContentTable} />;
62
};
63