From adf1a4f6fdb404c28b971121407bd8c9ccfee18f Mon Sep 17 00:00:00 2001
From: nessi <sascha@nesterovic.cc>
Date: Thu, 12 Feb 2026 10:36:18 +0100
Subject: [PATCH] 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.
---
 frontend/src/pages/TargetDetailPage.jsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

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