Add multi-database discovery and grouping features

This update introduces optional automatic discovery and onboarding of all databases on a PostgreSQL instance. It also enhances the frontend UI with grouped target display and navigation, making it easier to view and manage related databases. Additionally, new backend endpoints and logic ensure seamless integration of these features.

frontend/src/pages/DashboardPage.jsx

@@ -3,10 +3,20 @@ import { Link } from "react-router-dom";
 import { apiFetch } from "../api";
 import { useAuth } from "../state";
 
+function getTargetGroupMeta(target) {
+  const tags = target?.tags || {};
+  if (tags.monitor_mode !== "all_databases" || !tags.monitor_group_id) return null;
+  return {
+    id: tags.monitor_group_id,
+    name: tags.monitor_group_name || target.name || "All databases",
+  };
+}
+
 export function DashboardPage() {
   const { tokens, refresh, alertStatus } = useAuth();
   const [targets, setTargets] = useState([]);
   const [search, setSearch] = useState("");
+  const [openGroups, setOpenGroups] = useState({});
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState("");
 
@@ -51,6 +61,21 @@ export function DashboardPage() {
       (t.dbname || "").toLowerCase().includes(q)
     );
   });
+  const groupedRows = [];
+  const groupedMap = new Map();
+  for (const t of filteredTargets) {
+    const meta = getTargetGroupMeta(t);
+    if (!meta) {
+      groupedRows.push({ type: "single", target: t });
+      continue;
+    }
+    if (!groupedMap.has(meta.id)) {
+      const groupRow = { type: "group", groupId: meta.id, groupName: meta.name, targets: [] };
+      groupedMap.set(meta.id, groupRow);
+      groupedRows.push(groupRow);
+    }
+    groupedMap.get(meta.id).targets.push(t);
+  }
 
   return (
     <div className="dashboard-page">
@@ -95,30 +120,84 @@ export function DashboardPage() {
         </div>
 
         <div className="dashboard-target-list">
-          {filteredTargets.map((t) => {
-            const severity = targetSeverities.get(t.id) || "ok";
+          {groupedRows.map((row) => {
+            if (row.type === "single") {
+              const t = row.target;
+              const severity = targetSeverities.get(t.id) || "ok";
+              return (
+                <article className="dashboard-target-card" key={`single-${t.id}`}>
+                  <div className="target-main">
+                    <div className="target-title-row">
+                      <h4>{t.name}</h4>
+                      <span className={`status-chip ${severity}`}>
+                        {severity === "alert" ? "Alert" : severity === "warning" ? "Warning" : "OK"}
+                      </span>
+                    </div>
+                    <p><strong>Host:</strong> {t.host}:{t.port}</p>
+                    <p><strong>DB:</strong> {t.dbname}</p>
+                  </div>
+                  <div className="target-actions">
+                    <Link className="table-action-btn details" to={`/targets/${t.id}`}>
+                      <span aria-hidden="true">
+                        <svg viewBox="0 0 24 24" width="13" height="13">
+                          <path d="M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6-10-6-10-6zm10 3a3 3 0 1 0 0-6 3 3 0 0 0 0 6z" fill="currentColor" />
+                        </svg>
+                      </span>
+                      Details
+                    </Link>
+                  </div>
+                </article>
+              );
+            }
+
+            const highestSeverity = row.targets.some((t) => targetSeverities.get(t.id) === "alert")
+              ? "alert"
+              : row.targets.some((t) => targetSeverities.get(t.id) === "warning")
+                ? "warning"
+                : "ok";
+            const first = row.targets[0];
+            const isOpen = !!openGroups[row.groupId];
             return (
-              <article className="dashboard-target-card" key={t.id}>
+              <article className="dashboard-target-card dashboard-target-group" key={`group-${row.groupId}`}>
                 <div className="target-main">
                   <div className="target-title-row">
-                    <h4>{t.name}</h4>
-                    <span className={`status-chip ${severity}`}>
-                      {severity === "alert" ? "Alert" : severity === "warning" ? "Warning" : "OK"}
+                    <h4>{row.groupName}</h4>
+                    <span className={`status-chip ${highestSeverity}`}>
+                      {highestSeverity === "alert" ? "Alert" : highestSeverity === "warning" ? "Warning" : "OK"}
                     </span>
                   </div>
-                  <p><strong>Host:</strong> {t.host}:{t.port}</p>
-                  <p><strong>DB:</strong> {t.dbname}</p>
+                  <p><strong>Host:</strong> {first.host}:{first.port}</p>
+                  <p><strong>DB:</strong> All databases ({row.targets.length})</p>
                 </div>
                 <div className="target-actions">
-                  <Link className="table-action-btn details" to={`/targets/${t.id}`}>
-                    <span aria-hidden="true">
-                      <svg viewBox="0 0 24 24" width="13" height="13">
-                        <path d="M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6-10-6-10-6zm10 3a3 3 0 1 0 0-6 3 3 0 0 0 0 6z" fill="currentColor" />
-                      </svg>
-                    </span>
-                    Details
-                  </Link>
+                  <button
+                    type="button"
+                    className="table-action-btn edit"
+                    onClick={() => setOpenGroups((prev) => ({ ...prev, [row.groupId]: !prev[row.groupId] }))}
+                  >
+                    {isOpen ? "Hide DBs" : "Show DBs"}
+                  </button>
                 </div>
+                {isOpen && (
+                  <div className="dashboard-group-list">
+                    {row.targets.map((t) => {
+                      const severity = targetSeverities.get(t.id) || "ok";
+                      return (
+                        <div key={`child-${t.id}`} className="dashboard-group-item">
+                          <div>
+                            <strong>{t.dbname}</strong>
+                            <span className={`status-chip ${severity}`}>
+                              {severity === "alert" ? "Alert" : severity === "warning" ? "Warning" : "OK"}
+                            </span>
+                          </div>
+                          <Link className="table-action-btn details small-btn" to={`/targets/${t.id}`}>
+                            Details
+                          </Link>
+                        </div>
+                      );
+                    })}
+                  </div>
+                )}
               </article>
             );
           })}