mirrors/prometheus
1
0
Fork 0
mirror of https://github.com/prometheus/prometheus.git synced 2025-08-05 13:47:10 +02:00
Code Issues Projects Releases Wiki Activity

Merge pull request #16567 from ryanwuer/optimize-target-pool-search-experience

Browse Source 
UI: optimize pool searching in /targets page
This commit is contained in:
Julius Volz 2025-05-31 16:53:58 +02:00 committed by GitHub
commit ef430074f3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 15 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
web/ui/mantine-ui/src/pages/targets/TargetsPage.tsx
View File

@ -12,7 +12,7 @@ import {
IconSearch,
} from "@tabler/icons-react";
import { StateMultiSelect } from "../../components/StateMultiSelect";
import { Suspense } from "react";
import { Suspense, useState } from "react";
import badgeClasses from "../../Badge.module.css";
import { useAppDispatch, useAppSelector } from "../../state/hooks";
import {
@ -52,7 +52,11 @@ export default function TargetsPage() {
const dispatch = useAppDispatch();
const poolDefaultPlaceholder = "Select scrape pool";
const [scrapePool, setScrapePool] = useQueryParam("pool", StringParam);
const [poolPlaceholder, setPoolPlaceholder] = useState<string>(poolDefaultPlaceholder);
const [poolSelecting, setPoolSelecting] = useState<boolean>(false);
const [healthFilter, setHealthFilter] = useQueryParam(
"health",
withDefault(ArrayParam, emptyHealthFilter)
@ -86,15 +90,23 @@ export default function TargetsPage() {
<>
<Group mb="md" mt="xs">
<Select
placeholder="Select scrape pool"
placeholder={poolPlaceholder}
data={[{ label: "All pools", value: "" }, ...scrapePools]}
value={(limited && scrapePools[0]) || scrapePool || null}
value={poolSelecting ? null : (limited && scrapePools[0]) || scrapePool || null}
onChange={(value) => {
setScrapePool(value);
if (showLimitAlert) {
dispatch(setShowLimitAlert(false));
}
}}
onDropdownOpen={() => {
setPoolPlaceholder(scrapePool || poolDefaultPlaceholder)
setPoolSelecting(true)
}}
onDropdownClose={() => {
setPoolPlaceholder(poolDefaultPlaceholder)
setPoolSelecting(false)
}}
searchable
/>
<StateMultiSelect