Add a standard alert reference table to AlertsPage.

This commit introduces a collapsible "Standard Alert Reference" section in the AlertsPage, detailing built-in alerts, their checks, and thresholds. Relevant styling for the table and notes has also been added to improve readability and layout. This aims to enhance user understanding of default monitoring parameters.

frontend/src/pages/AlertsPage.jsx

@@ -14,6 +14,86 @@ 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);
@@ -343,6 +423,43 @@ export function AlertsPage() {
         </section>
       </div>
 
+      <details className="card collapsible">
+        <summary className="collapse-head">
+          <div>
+            <h3>Standard Alert Reference</h3>
+            <p>What each built-in alert checks and which default thresholds are used.</p>
+          </div>
+          <span className="collapse-chevron" aria-hidden="true">v</span>
+        </summary>
+        <div className="standard-alerts-note">
+          Some rules include traffic guards to reduce noise (for example rollback ratio needs enough transactions).
+        </div>
+        <div className="standard-alerts-table-wrap">
+          <table className="standard-alerts-table">
+            <thead>
+              <tr>
+                <th>Alert</th>
+                <th>Checks</th>
+                <th>Comparison</th>
+                <th>Warning</th>
+                <th>Alert</th>
+              </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>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </details>
+
       {canManageAlerts && (
         <>
           <details className="card collapsible">

frontend/src/styles.css

@@ -1314,6 +1314,30 @@ td {
   padding: 10px 3px 4px 0;
 }
 
+.standard-alerts-note {
+  margin-bottom: 10px;
+  color: #a7c0df;
+  font-size: 13px;
+}
+
+.standard-alerts-table-wrap {
+  overflow-x: auto;
+}
+
+.standard-alerts-table th,
+.standard-alerts-table td {
+  vertical-align: top;
+  font-size: 13px;
+}
+
+.standard-alerts-table td code {
+  color: #d7e8ff;
+  background: #112846;
+  border: 1px solid #355d91;
+  border-radius: 6px;
+  padding: 1px 6px;
+}
+
 .alert-item {
   border-radius: 12px;
   border: 1px solid #375d8f;