Merge pull request #17158 from ADITYATIWARI342005/feature-scrape_duration
	
		
			
	
		
	
	
		
			
				
	
				buf.build / lint and publish (push) Waiting to run
				
					Details
				
			
		
			
				
	
				CI / Go tests (push) Waiting to run
				
					Details
				
			
		
			
				
	
				CI / More Go tests (push) Waiting to run
				
					Details
				
			
		
			
				
	
				CI / Go tests with previous Go version (push) Waiting to run
				
					Details
				
			
		
			
				
	
				CI / UI tests (push) Waiting to run
				
					Details
				
			
		
			
				
	
				CI / Go tests on Windows (push) Waiting to run
				
					Details
				
			
		
			
				
	
				CI / Mixins tests (push) Waiting to run
				
					Details
				
			
		
			
				
	
				CI / Build Prometheus for common architectures (0) (push) Waiting to run
				
					Details
				
			
		
			
				
	
				CI / Build Prometheus for common architectures (1) (push) Waiting to run
				
					Details
				
			
		
			
				
	
				CI / Build Prometheus for common architectures (2) (push) Waiting to run
				
					Details
				
			
		
			
				
	
				CI / Build Prometheus for all architectures (0) (push) Waiting to run
				
					Details
				
			
		
			
				
	
				CI / Build Prometheus for all architectures (1) (push) Waiting to run
				
					Details
				
			
		
			
				
	
				CI / Build Prometheus for all architectures (10) (push) Waiting to run
				
					Details
				
			
		
			
				
	
				CI / Build Prometheus for all architectures (11) (push) Waiting to run
				
					Details
				
			
		
			
				
	
				CI / Build Prometheus for all architectures (2) (push) Waiting to run
				
					Details
				
			
		
			
				
	
				CI / Build Prometheus for all architectures (3) (push) Waiting to run
				
					Details
				
			
		
			
				
	
				CI / Build Prometheus for all architectures (4) (push) Waiting to run
				
					Details
				
			
		
			
				
	
				CI / Build Prometheus for all architectures (5) (push) Waiting to run
				
					Details
				
			
		
			
				
	
				CI / Build Prometheus for all architectures (6) (push) Waiting to run
				
					Details
				
			
		
			
				
	
				CI / Build Prometheus for all architectures (7) (push) Waiting to run
				
					Details
				
			
		
			
				
	
				CI / Build Prometheus for all architectures (8) (push) Waiting to run
				
					Details
				
			
		
			
				
	
				CI / Build Prometheus for all architectures (9) (push) Waiting to run
				
					Details
				
			
		
			
				
	
				CI / Report status of build Prometheus for all architectures (push) Blocked by required conditions
				
					Details
				
			
		
			
				
	
				CI / Check generated parser (push) Waiting to run
				
					Details
				
			
		
			
				
	
				CI / golangci-lint (push) Waiting to run
				
					Details
				
			
		
			
				
	
				CI / fuzzing (push) Waiting to run
				
					Details
				
			
		
			
				
	
				CI / codeql (push) Waiting to run
				
					Details
				
			
		
			
				
	
				CI / Publish main branch artifacts (push) Blocked by required conditions
				
					Details
				
			
		
			
				
	
				CI / Publish release artefacts (push) Blocked by required conditions
				
					Details
				
			
		
			
				
	
				CI / Publish UI on npm Registry (push) Blocked by required conditions
				
					Details
				
			
		
			
				
	
				Scorecards supply-chain security / Scorecards analysis (push) Waiting to run
				
					Details
				
			
		
	
				
					
				
			
				
	
				buf.build / lint and publish (push) Waiting to run
				
					Details
				
			
		
			
				
	
				CI / Go tests (push) Waiting to run
				
					Details
				
			
		
			
				
	
				CI / More Go tests (push) Waiting to run
				
					Details
				
			
		
			
				
	
				CI / Go tests with previous Go version (push) Waiting to run
				
					Details
				
			
		
			
				
	
				CI / UI tests (push) Waiting to run
				
					Details
				
			
		
			
				
	
				CI / Go tests on Windows (push) Waiting to run
				
					Details
				
			
		
			
				
	
				CI / Mixins tests (push) Waiting to run
				
					Details
				
			
		
			
				
	
				CI / Build Prometheus for common architectures (0) (push) Waiting to run
				
					Details
				
			
		
			
				
	
				CI / Build Prometheus for common architectures (1) (push) Waiting to run
				
					Details
				
			
		
			
				
	
				CI / Build Prometheus for common architectures (2) (push) Waiting to run
				
					Details
				
			
		
			
				
	
				CI / Build Prometheus for all architectures (0) (push) Waiting to run
				
					Details
				
			
		
			
				
	
				CI / Build Prometheus for all architectures (1) (push) Waiting to run
				
					Details
				
			
		
			
				
	
				CI / Build Prometheus for all architectures (10) (push) Waiting to run
				
					Details
				
			
		
			
				
	
				CI / Build Prometheus for all architectures (11) (push) Waiting to run
				
					Details
				
			
		
			
				
	
				CI / Build Prometheus for all architectures (2) (push) Waiting to run
				
					Details
				
			
		
			
				
	
				CI / Build Prometheus for all architectures (3) (push) Waiting to run
				
					Details
				
			
		
			
				
	
				CI / Build Prometheus for all architectures (4) (push) Waiting to run
				
					Details
				
			
		
			
				
	
				CI / Build Prometheus for all architectures (5) (push) Waiting to run
				
					Details
				
			
		
			
				
	
				CI / Build Prometheus for all architectures (6) (push) Waiting to run
				
					Details
				
			
		
			
				
	
				CI / Build Prometheus for all architectures (7) (push) Waiting to run
				
					Details
				
			
		
			
				
	
				CI / Build Prometheus for all architectures (8) (push) Waiting to run
				
					Details
				
			
		
			
				
	
				CI / Build Prometheus for all architectures (9) (push) Waiting to run
				
					Details
				
			
		
			
				
	
				CI / Report status of build Prometheus for all architectures (push) Blocked by required conditions
				
					Details
				
			
		
			
				
	
				CI / Check generated parser (push) Waiting to run
				
					Details
				
			
		
			
				
	
				CI / golangci-lint (push) Waiting to run
				
					Details
				
			
		
			
				
	
				CI / fuzzing (push) Waiting to run
				
					Details
				
			
		
			
				
	
				CI / codeql (push) Waiting to run
				
					Details
				
			
		
			
				
	
				CI / Publish main branch artifacts (push) Blocked by required conditions
				
					Details
				
			
		
			
				
	
				CI / Publish release artefacts (push) Blocked by required conditions
				
					Details
				
			
		
			
				
	
				CI / Publish UI on npm Registry (push) Blocked by required conditions
				
					Details
				
			
		
			
				
	
				Scorecards supply-chain security / Scorecards analysis (push) Waiting to run
				
					Details
				
			
		
	[FEATURE] : Add {scrape interval + timeout} to targets page
			
			
This commit is contained in:
		
						commit
						536a2b1fd2
					
				|  | @ -8,23 +8,15 @@ import { | |||
|   Stack, | ||||
|   Table, | ||||
|   Text, | ||||
|   Tooltip, | ||||
| } from "@mantine/core"; | ||||
| import { KVSearch } from "@nexucis/kvsearch"; | ||||
| import { | ||||
|   IconAlertTriangle, | ||||
|   IconHourglass, | ||||
|   IconInfoCircle, | ||||
|   IconRefresh, | ||||
| } from "@tabler/icons-react"; | ||||
| import { useSuspenseAPIQuery } from "../../api/api"; | ||||
| import { Target, TargetsResult } from "../../api/responseTypes/targets"; | ||||
| import React, { FC, memo, useMemo } from "react"; | ||||
| import { | ||||
|   humanizeDurationRelative, | ||||
|   humanizeDuration, | ||||
|   now, | ||||
| } from "../../lib/formatTime"; | ||||
| import { useLocalStorage } from "@mantine/hooks"; | ||||
| import { useAppDispatch, useAppSelector } from "../../state/hooks"; | ||||
| import { | ||||
|  | @ -37,8 +29,8 @@ import CustomInfiniteScroll from "../../components/CustomInfiniteScroll"; | |||
| import badgeClasses from "../../Badge.module.css"; | ||||
| import panelClasses from "../../Panel.module.css"; | ||||
| import TargetLabels from "./TargetLabels"; | ||||
| import ScrapeTimingDetails from "./ScrapeTimingDetails"; | ||||
| import { targetPoolDisplayLimit } from "./TargetsPage"; | ||||
| import { badgeIconStyle } from "../../styles"; | ||||
| 
 | ||||
| type ScrapePool = { | ||||
|   targets: Target[]; | ||||
|  | @ -332,52 +324,7 @@ const ScrapePoolList: FC<ScrapePoolListProp> = memo( | |||
|                                     /> | ||||
|                                   </Table.Td> | ||||
|                                   <Table.Td valign="top"> | ||||
|                                     <Group gap="xs" wrap="wrap"> | ||||
|                                       <Tooltip | ||||
|                                         label="Last target scrape" | ||||
|                                         withArrow | ||||
|                                       > | ||||
|                                         <Badge | ||||
|                                           variant="light" | ||||
|                                           className={badgeClasses.statsBadge} | ||||
|                                           styles={{ | ||||
|                                             label: { textTransform: "none" }, | ||||
|                                           }} | ||||
|                                           leftSection={ | ||||
|                                             <IconRefresh | ||||
|                                               style={badgeIconStyle} | ||||
|                                             /> | ||||
|                                           } | ||||
|                                         > | ||||
|                                           {humanizeDurationRelative( | ||||
|                                             target.lastScrape, | ||||
|                                             now() | ||||
|                                           )} | ||||
|                                         </Badge> | ||||
|                                       </Tooltip> | ||||
| 
 | ||||
|                                       <Tooltip | ||||
|                                         label="Duration of last target scrape" | ||||
|                                         withArrow | ||||
|                                       > | ||||
|                                         <Badge | ||||
|                                           variant="light" | ||||
|                                           className={badgeClasses.statsBadge} | ||||
|                                           styles={{ | ||||
|                                             label: { textTransform: "none" }, | ||||
|                                           }} | ||||
|                                           leftSection={ | ||||
|                                             <IconHourglass | ||||
|                                               style={badgeIconStyle} | ||||
|                                             /> | ||||
|                                           } | ||||
|                                         > | ||||
|                                           {humanizeDuration( | ||||
|                                             target.lastScrapeDuration * 1000 | ||||
|                                           )} | ||||
|                                         </Badge> | ||||
|                                       </Tooltip> | ||||
|                                     </Group> | ||||
|                                     <ScrapeTimingDetails target={target} /> | ||||
|                                   </Table.Td> | ||||
|                                   <Table.Td valign="top"> | ||||
|                                     <Badge | ||||
|  |  | |||
|  | @ -0,0 +1,101 @@ | |||
| import { FC } from "react"; | ||||
| import { ActionIcon, Badge, Collapse, Group, Stack, Tooltip } from "@mantine/core"; | ||||
| import { useDisclosure } from "@mantine/hooks"; | ||||
| import { | ||||
|   IconChevronDown, | ||||
|   IconChevronUp, | ||||
|   IconHourglass, | ||||
|   IconPlugConnectedX, | ||||
|   IconRefresh, | ||||
|   IconRepeat, | ||||
| } from "@tabler/icons-react"; | ||||
| import { humanizeDuration, humanizeDurationRelative, now } from "../../lib/formatTime"; | ||||
| import { Target } from "../../api/responseTypes/targets"; | ||||
| import badgeClasses from "../../Badge.module.css"; | ||||
| import { actionIconStyle, badgeIconStyle } from "../../styles"; | ||||
| 
 | ||||
| type ScrapeTimingDetailsProps = { | ||||
|   target: Target; | ||||
| }; | ||||
| 
 | ||||
| const ScrapeTimingDetails: FC<ScrapeTimingDetailsProps> = ({ target }) => { | ||||
|   const [showDetails, { toggle: toggleDetails }] = useDisclosure(false); | ||||
| 
 | ||||
|   return ( | ||||
|     <Stack gap="xs"> | ||||
|       <Group wrap="nowrap" align="flex-start"> | ||||
|         <Group gap="xs" wrap="wrap"> | ||||
|           <Tooltip label="Last target scrape" withArrow> | ||||
|             <Badge | ||||
|               variant="light" | ||||
|               className={badgeClasses.statsBadge} | ||||
|               styles={{ | ||||
|                 label: { textTransform: "none" }, | ||||
|               }} | ||||
|               leftSection={<IconRefresh style={badgeIconStyle} />} | ||||
|             > | ||||
|               {humanizeDurationRelative(target.lastScrape, now())} | ||||
|             </Badge> | ||||
|           </Tooltip> | ||||
| 
 | ||||
|           <Tooltip label="Duration of last target scrape" withArrow> | ||||
|             <Badge | ||||
|               variant="light" | ||||
|               className={badgeClasses.statsBadge} | ||||
|               styles={{ | ||||
|                 label: { textTransform: "none" }, | ||||
|               }} | ||||
|               leftSection={<IconHourglass style={badgeIconStyle} />} | ||||
|             > | ||||
|               {humanizeDuration(target.lastScrapeDuration * 1000)} | ||||
|             </Badge> | ||||
|           </Tooltip> | ||||
|         </Group> | ||||
| 
 | ||||
|         <ActionIcon | ||||
|           size="xs" | ||||
|           color="gray" | ||||
|           variant="light" | ||||
|           onClick={toggleDetails} | ||||
|           title={`${showDetails ? "Hide" : "Show"} additional timing info`} | ||||
|         > | ||||
|           {showDetails ? ( | ||||
|             <IconChevronUp style={actionIconStyle} /> | ||||
|           ) : ( | ||||
|             <IconChevronDown style={actionIconStyle} /> | ||||
|           )} | ||||
|         </ActionIcon> | ||||
|       </Group> | ||||
| 
 | ||||
|       <Collapse in={showDetails}> | ||||
|         {/* Additionally remove DOM elements when not expanded (helps performance) */} | ||||
|         {showDetails && ( | ||||
|           <Group gap="xs" wrap="wrap"> | ||||
|             <Tooltip label="Scrape interval" withArrow> | ||||
|               <Badge | ||||
|                 variant="light" | ||||
|                 className={badgeClasses.statsBadge} | ||||
|                 styles={{ label: { textTransform: "none" } }} | ||||
|                 leftSection={<IconRepeat style={badgeIconStyle} />} | ||||
|               > | ||||
|                 every {target.scrapeInterval} | ||||
|               </Badge> | ||||
|             </Tooltip> | ||||
|             <Tooltip label="Scrape timeout" withArrow> | ||||
|               <Badge | ||||
|                 variant="light" | ||||
|                 className={badgeClasses.statsBadge} | ||||
|                 styles={{ label: { textTransform: "none" } }} | ||||
|                 leftSection={<IconPlugConnectedX style={badgeIconStyle} />} | ||||
|               > | ||||
|                 after {target.scrapeTimeout} | ||||
|               </Badge> | ||||
|             </Tooltip> | ||||
|           </Group> | ||||
|         )} | ||||
|       </Collapse> | ||||
|     </Stack> | ||||
|   ); | ||||
| }; | ||||
| 
 | ||||
| export default ScrapeTimingDetails; | ||||
		Loading…
	
		Reference in New Issue