prometheus

1
import React, { FC, Fragment, useState } from 'react';
2
import { Tooltip } from 'reactstrap';
3
import 'css.escape';
4
import { humanizeDuration } from '../../utils';
5

6
export interface TargetScrapeDurationProps {
7
  duration: number;
8
  interval: string;
9
  timeout: string;
10
  idx: number;
11
  scrapePool: string;
12
}
13

14
const TargetScrapeDuration: FC<TargetScrapeDurationProps> = ({ duration, interval, timeout, idx, scrapePool }) => {
15
  const [scrapeTooltipOpen, setScrapeTooltipOpen] = useState<boolean>(false);
16
  const id = `scrape-duration-${scrapePool}-${idx}`;
17

18
  return (
19
    <>
20
      <div id={id} className="scrape-duration-container">
21
        {humanizeDuration(duration * 1000)}
22
      </div>
23
      <Tooltip
24
        isOpen={scrapeTooltipOpen}
25
        toggle={() => setScrapeTooltipOpen(!scrapeTooltipOpen)}
26
        target={CSS.escape(id)}
27
        placement={'right-end'}
28
        style={{ maxWidth: 'none', textAlign: 'left' }}
29
      >
30
        <Fragment>
31
          <span>Interval: {interval}</span>
32
          <br />
33
        </Fragment>
34
        <Fragment>
35
          <span>Timeout: {timeout}</span>
36
        </Fragment>
37
      </Tooltip>
38
    </>
39
  );
40
};
41

42
export default TargetScrapeDuration;
43