mirrors/prometheus
1
0
Fork 0
mirror of https://github.com/prometheus/prometheus.git synced 2025-08-06 14:17:12 +02:00
Code Issues Projects Releases Wiki Activity

UI: optimize pool searching in /target page

Browse Source 
Signed-off-by: Ryan Wu <rongjun0821@gmail.com>
This commit is contained in:
Ryan Wu 2025-05-07 21:15:04 +08:00
parent 2bf6f4c9dc
commit a810e59990
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, IconSearch,
} from "@tabler/icons-react"; } from "@tabler/icons-react";
import { StateMultiSelect } from "../../components/StateMultiSelect"; import { StateMultiSelect } from "../../components/StateMultiSelect";
import { Suspense } from "react"; import { Suspense, useState } from "react";
import badgeClasses from "../../Badge.module.css"; import badgeClasses from "../../Badge.module.css";
import { useAppDispatch, useAppSelector } from "../../state/hooks"; import { useAppDispatch, useAppSelector } from "../../state/hooks";
import { import {
@ -45,7 +45,11 @@ export default function TargetsPage() {
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const poolDefaultPlaceholder = "Select scrape pool";
const [scrapePool, setScrapePool] = useQueryParam("pool", StringParam); const [scrapePool, setScrapePool] = useQueryParam("pool", StringParam);
const [poolPlaceholder, setPoolPlaceholder] = useState<string>(poolDefaultPlaceholder);
const [poolSelecting, setPoolSelecting] = useState<boolean>(false);
const [healthFilter, setHealthFilter] = useQueryParam( const [healthFilter, setHealthFilter] = useQueryParam(
"health", "health",
withDefault(ArrayParam, []) withDefault(ArrayParam, [])
@ -78,15 +82,23 @@ export default function TargetsPage() {
<> <>
<Group mb="md" mt="xs"> <Group mb="md" mt="xs">
<Select <Select
placeholder="Select scrape pool" placeholder={poolPlaceholder}
data={[{ label: "All pools", value: "" }, ...scrapePools]} data={[{ label: "All pools", value: "" }, ...scrapePools]}
value={(limited && scrapePools[0]) || scrapePool || null} value={poolSelecting ? null : (limited && scrapePools[0]) || scrapePool || null}
onChange={(value) => { onChange={(value) => {
setScrapePool(value); setScrapePool(value);
if (showLimitAlert) { if (showLimitAlert) {
dispatch(setShowLimitAlert(false)); dispatch(setShowLimitAlert(false));
} }
}} }}
onDropdownOpen={() => {
setPoolPlaceholder(scrapePool || poolDefaultPlaceholder)
setPoolSelecting(true)
}}
onDropdownClose={() => {
setPoolPlaceholder(poolDefaultPlaceholder)
setPoolSelecting(false)
}}
searchable searchable
/> />
<StateMultiSelect <StateMultiSelect