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