1import React, { FC, Fragment, useState } from 'react';
2import { Tooltip } from 'reactstrap';
3import 'css.escape';
4import { humanizeDuration } from '../../utils';
5
6export interface TargetScrapeDurationProps {
7  duration: number;
8  interval: string;
9  timeout: string;
10  idx: number;
11  scrapePool: string;
12}
13
14const 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        style={{ maxWidth: 'none', textAlign: 'left' }}
28      >
29        <Fragment>
30          <span>Interval: {interval}</span>
31          <br />
32        </Fragment>
33        <Fragment>
34          <span>Timeout: {timeout}</span>
35        </Fragment>
36      </Tooltip>
37    </>
38  );
39};
40
41export default TargetScrapeDuration;
42