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