ui: rename ScrapeDetails→ScrapeTimingDetails; refine labels per review

Rename component for clarity (timing-only focus)
Chevron title: “Show/Hide additional timing info”
Duration pill tooltip: “Duration of last target scrape”
Update imports/usages; keep DOM-conditional expanded content

Signed-off-by: ADITYATIWARI342005 <142050150+ADITYATIWARI342005@users.noreply.github.com>
This commit is contained in:
ADITYATIWARI342005 2025-09-29 20:45:52 +05:30
parent 8eb8758925
commit 3ef9f4e18a
2 changed files with 7 additions and 15 deletions

View File

@ -29,7 +29,7 @@ import CustomInfiniteScroll from "../../components/CustomInfiniteScroll";
import badgeClasses from "../../Badge.module.css"; import badgeClasses from "../../Badge.module.css";
import panelClasses from "../../Panel.module.css"; import panelClasses from "../../Panel.module.css";
import TargetLabels from "./TargetLabels"; import TargetLabels from "./TargetLabels";
import ScrapeDetails from "./ScrapeDetails"; import ScrapeTimingDetails from "./ScrapeTimingDetails";
import { targetPoolDisplayLimit } from "./TargetsPage"; import { targetPoolDisplayLimit } from "./TargetsPage";
type ScrapePool = { type ScrapePool = {
@ -324,7 +324,7 @@ const ScrapePoolList: FC<ScrapePoolListProp> = memo(
/> />
</Table.Td> </Table.Td>
<Table.Td valign="top"> <Table.Td valign="top">
<ScrapeDetails target={target} /> <ScrapeTimingDetails target={target} />
</Table.Td> </Table.Td>
<Table.Td valign="top"> <Table.Td valign="top">
<Badge <Badge

View File

@ -14,11 +14,11 @@ import { Target } from "../../api/responseTypes/targets";
import badgeClasses from "../../Badge.module.css"; import badgeClasses from "../../Badge.module.css";
import { actionIconStyle, badgeIconStyle } from "../../styles"; import { actionIconStyle, badgeIconStyle } from "../../styles";
type ScrapeDetailsProps = { type ScrapeTimingDetailsProps = {
target: Target; target: Target;
}; };
const ScrapeDetails: FC<ScrapeDetailsProps> = ({ target }) => { const ScrapeTimingDetails: FC<ScrapeTimingDetailsProps> = ({ target }) => {
const [showDetails, { toggle: toggleDetails }] = useDisclosure(false); const [showDetails, { toggle: toggleDetails }] = useDisclosure(false);
return ( return (
@ -38,15 +38,7 @@ const ScrapeDetails: FC<ScrapeDetailsProps> = ({ target }) => {
</Badge> </Badge>
</Tooltip> </Tooltip>
<Tooltip <Tooltip label="Duration of last target scrape" withArrow>
label={
<div style={{ lineHeight: 1.2 }}>
<div>Interval: {target.scrapeInterval}</div>
<div>Timeout: {target.scrapeTimeout}</div>
</div>
}
withArrow
>
<Badge <Badge
variant="light" variant="light"
className={badgeClasses.statsBadge} className={badgeClasses.statsBadge}
@ -65,7 +57,7 @@ const ScrapeDetails: FC<ScrapeDetailsProps> = ({ target }) => {
color="gray" color="gray"
variant="light" variant="light"
onClick={toggleDetails} onClick={toggleDetails}
title={`${showDetails ? "Hide" : "Show"} scrape configuration details`} title={`${showDetails ? "Hide" : "Show"} additional timing info`}
> >
{showDetails ? ( {showDetails ? (
<IconChevronUp style={actionIconStyle} /> <IconChevronUp style={actionIconStyle} />
@ -106,4 +98,4 @@ const ScrapeDetails: FC<ScrapeDetailsProps> = ({ target }) => {
); );
}; };
export default ScrapeDetails; export default ScrapeTimingDetails;