Add dynamic loading of standard alert references

Replaced hardcoded standard alert metadata with API-driven data. This change ensures the standard alert information is dynamically loaded from the backend, improving maintainability and scalability. Also adjusted the frontend to handle cases where no data is available.

frontend/src/pages/AlertsPage.jsx

@@ -14,86 +14,6 @@ const initialForm = {
   enabled: true,
 };
 
-const STANDARD_ALERT_INFO = [
-  {
-    name: "Target Reachability",
-    check: "Connection to target database can be established.",
-    comparison: "-",
-    warning: "-",
-    alert: "On connection failure",
-  },
-  {
-    name: "Connectivity Latency",
-    check: "Connection handshake duration (ms).",
-    comparison: "gte",
-    warning: "1000 ms",
-    alert: "2500 ms",
-  },
-  {
-    name: "Collector Freshness",
-    check: "Age of newest metric sample.",
-    comparison: "gte",
-    warning: "poll interval x2",
-    alert: "poll interval x4",
-  },
-  {
-    name: "Active Connection Ratio",
-    check: "active_connections / total_connections.",
-    comparison: "gte",
-    warning: "0.70",
-    alert: "0.90",
-  },
-  {
-    name: "Cache Hit Ratio",
-    check: "Buffer cache efficiency.",
-    comparison: "lte",
-    warning: "0.95",
-    alert: "0.90",
-  },
-  {
-    name: "Lock Pressure",
-    check: "Current number of locks.",
-    comparison: "gte",
-    warning: "50",
-    alert: "100",
-  },
-  {
-    name: "Checkpoint Pressure (15m)",
-    check: "Increase of requested checkpoints in last 15m.",
-    comparison: "gte",
-    warning: "5",
-    alert: "15",
-  },
-  {
-    name: "Rollback Ratio",
-    check: "rollback / (commit + rollback) within rolling window.",
-    comparison: "gte",
-    warning: "0.10",
-    alert: "0.25",
-  },
-  {
-    name: "Deadlocks (60m)",
-    check: "Increase in deadlocks in last 60 minutes.",
-    comparison: "gte",
-    warning: "1",
-    alert: "5",
-  },
-  {
-    name: "Slowest Query Mean Time",
-    check: "Highest query mean execution time in latest snapshot.",
-    comparison: "gte",
-    warning: "300 ms",
-    alert: "1000 ms",
-  },
-  {
-    name: "Slowest Query Total Time",
-    check: "Highest query total execution time in latest snapshot.",
-    comparison: "gte",
-    warning: "3000 ms",
-    alert: "10000 ms",
-  },
-];
-
 function formatAlertValue(value) {
   if (value === null || value === undefined) return "-";
   if (Number.isInteger(value)) return String(value);
@@ -164,6 +84,7 @@ export function AlertsPage() {
   const [expandedKey, setExpandedKey] = useState("");
   const [error, setError] = useState("");
   const [loading, setLoading] = useState(true);
+  const [standardReference, setStandardReference] = useState([]);
   const [testing, setTesting] = useState(false);
   const [testResult, setTestResult] = useState("");
   const [saving, setSaving] = useState(false);
@@ -173,8 +94,12 @@ export function AlertsPage() {
   const loadAll = async () => {
     try {
       setError("");
-      const targetRows = await apiFetch("/targets", {}, tokens, refresh);
+      const [targetRows, referenceRows] = await Promise.all([
+        apiFetch("/targets", {}, tokens, refresh),
+        apiFetch("/alerts/standard-reference", {}, tokens, refresh),
+      ]);
       setTargets(targetRows);
+      setStandardReference(Array.isArray(referenceRows) ? referenceRows : []);
 
       if (canManageAlerts) {
         const defs = await apiFetch("/alerts/definitions", {}, tokens, refresh);
@@ -446,15 +371,21 @@ export function AlertsPage() {
               </tr>
             </thead>
             <tbody>
-              {STANDARD_ALERT_INFO.map((row) => (
-                <tr key={row.name}>
-                  <td>{row.name}</td>
-                  <td>{row.check}</td>
-                  <td><code>{row.comparison}</code></td>
-                  <td>{row.warning}</td>
-                  <td>{row.alert}</td>
+              {standardReference.length > 0 ? (
+                standardReference.map((row) => (
+                  <tr key={row.key || row.name}>
+                    <td>{row.name}</td>
+                    <td>{row.checks}</td>
+                    <td><code>{row.comparison}</code></td>
+                    <td>{row.warning}</td>
+                    <td>{row.alert}</td>
+                  </tr>
+                ))
+              ) : (
+                <tr>
+                  <td colSpan={5} className="muted">No standard alert metadata available.</td>
                 </tr>
-              ))}
+              )}
             </tbody>
           </table>
         </div>