Update TargetDetailPage to display target metadata

Added a new state variable `targetMeta` to store target metadata and updated the title to include the target's name and database name if available. This retrieves additional details about the target from the API and enhances user visibility.
This commit is contained in:
2026-02-12 10:36:18 +01:00
parent 2cea3ef1c2
commit adf1a4f6fd

View File

@@ -54,6 +54,7 @@ export function TargetDetailPage() {
const [locks, setLocks] = useState([]); const [locks, setLocks] = useState([]);
const [activity, setActivity] = useState([]); const [activity, setActivity] = useState([]);
const [overview, setOverview] = useState(null); const [overview, setOverview] = useState(null);
const [targetMeta, setTargetMeta] = useState(null);
const [error, setError] = useState(""); const [error, setError] = useState("");
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
@@ -62,19 +63,21 @@ export function TargetDetailPage() {
(async () => { (async () => {
setLoading(true); setLoading(true);
try { try {
const [connections, xacts, cache, locksTable, activityTable, overviewData] = await Promise.all([ const [connections, xacts, cache, locksTable, activityTable, overviewData, targetInfo] = await Promise.all([
loadMetric(id, "connections_total", range, tokens, refresh), loadMetric(id, "connections_total", range, tokens, refresh),
loadMetric(id, "xacts_total", range, tokens, refresh), loadMetric(id, "xacts_total", range, tokens, refresh),
loadMetric(id, "cache_hit_ratio", range, tokens, refresh), loadMetric(id, "cache_hit_ratio", range, tokens, refresh),
apiFetch(`/targets/${id}/locks`, {}, tokens, refresh), apiFetch(`/targets/${id}/locks`, {}, tokens, refresh),
apiFetch(`/targets/${id}/activity`, {}, tokens, refresh), apiFetch(`/targets/${id}/activity`, {}, tokens, refresh),
apiFetch(`/targets/${id}/overview`, {}, tokens, refresh), apiFetch(`/targets/${id}/overview`, {}, tokens, refresh),
apiFetch(`/targets/${id}`, {}, tokens, refresh),
]); ]);
if (!active) return; if (!active) return;
setSeries({ connections, xacts, cache }); setSeries({ connections, xacts, cache });
setLocks(locksTable); setLocks(locksTable);
setActivity(activityTable); setActivity(activityTable);
setOverview(overviewData); setOverview(overviewData);
setTargetMeta(targetInfo);
setError(""); setError("");
} catch (e) { } catch (e) {
if (active) setError(String(e.message || e)); if (active) setError(String(e.message || e));
@@ -107,7 +110,10 @@ export function TargetDetailPage() {
return ( return (
<div> <div>
<h2>Target Detail #{id}</h2> <h2>
Target Detail {targetMeta?.name || `#${id}`}
{targetMeta?.dbname ? ` (${targetMeta.dbname})` : ""}
</h2>
{overview && ( {overview && (
<div className="card"> <div className="card">
<h3>Database Overview</h3> <h3>Database Overview</h3>