Add database overview feature with metrics and UI enhancements
This commit introduces a detailed database overview endpoint and service, providing key metrics such as replication status, database sizes, and performance indicators. On the frontend, a new UI section displays these metrics along with improved forms and troubleshooting tips. Enhancements improve user experience by adding informative tooltips and formatting for byte and time values.
This commit is contained in:
@@ -17,6 +17,25 @@ function toQueryRange(range) {
|
||||
return { from: from.toISOString(), to: to.toISOString() };
|
||||
}
|
||||
|
||||
function formatBytes(value) {
|
||||
if (value === null || value === undefined) return "-";
|
||||
const units = ["B", "KB", "MB", "GB", "TB"];
|
||||
let n = Number(value);
|
||||
let i = 0;
|
||||
while (n >= 1024 && i < units.length - 1) {
|
||||
n /= 1024;
|
||||
i += 1;
|
||||
}
|
||||
return `${n.toFixed(i >= 2 ? 2 : 0)} ${units[i]}`;
|
||||
}
|
||||
|
||||
function formatSeconds(value) {
|
||||
if (value === null || value === undefined) return "-";
|
||||
if (value < 60) return `${value.toFixed(1)}s`;
|
||||
if (value < 3600) return `${(value / 60).toFixed(1)}m`;
|
||||
return `${(value / 3600).toFixed(1)}h`;
|
||||
}
|
||||
|
||||
async function loadMetric(targetId, metric, range, tokens, refresh) {
|
||||
const { from, to } = toQueryRange(range);
|
||||
return apiFetch(
|
||||
@@ -34,6 +53,7 @@ export function TargetDetailPage() {
|
||||
const [series, setSeries] = useState({});
|
||||
const [locks, setLocks] = useState([]);
|
||||
const [activity, setActivity] = useState([]);
|
||||
const [overview, setOverview] = useState(null);
|
||||
const [error, setError] = useState("");
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
@@ -42,17 +62,19 @@ export function TargetDetailPage() {
|
||||
(async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const [connections, xacts, cache, locksTable, activityTable] = await Promise.all([
|
||||
const [connections, xacts, cache, locksTable, activityTable, overviewData] = 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),
|
||||
]);
|
||||
if (!active) return;
|
||||
setSeries({ connections, xacts, cache });
|
||||
setLocks(locksTable);
|
||||
setActivity(activityTable);
|
||||
setOverview(overviewData);
|
||||
setError("");
|
||||
} catch (e) {
|
||||
if (active) setError(String(e.message || e));
|
||||
@@ -79,9 +101,116 @@ export function TargetDetailPage() {
|
||||
if (loading) return <div className="card">Lade Target Detail...</div>;
|
||||
if (error) return <div className="card error">{error}</div>;
|
||||
|
||||
const role = overview?.instance?.role || "-";
|
||||
const isPrimary = role === "primary";
|
||||
const isStandby = role === "standby";
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h2>Target Detail #{id}</h2>
|
||||
{overview && (
|
||||
<div className="card">
|
||||
<h3>Database Overview</h3>
|
||||
<div className="grid three overview-kv">
|
||||
<div><span>PostgreSQL Version</span><strong>{overview.instance.server_version || "-"}</strong></div>
|
||||
<div>
|
||||
<span>Role</span>
|
||||
<strong className={isPrimary ? "pill primary" : isStandby ? "pill standby" : "pill"}>{role}</strong>
|
||||
</div>
|
||||
<div title="Zeit seit Start des Postgres-Prozesses">
|
||||
<span>Uptime</span><strong>{formatSeconds(overview.instance.uptime_seconds)}</strong>
|
||||
</div>
|
||||
<div><span>Database</span><strong>{overview.instance.current_database || "-"}</strong></div>
|
||||
<div><span>Port</span><strong>{overview.instance.port ?? "-"}</strong></div>
|
||||
<div title="Groesse der aktuell verbundenen Datenbank">
|
||||
<span>Current DB Size</span><strong>{formatBytes(overview.storage.current_database_size_bytes)}</strong>
|
||||
</div>
|
||||
<div title="Gesamtgroesse der WAL-Dateien (falls verfuegbar)">
|
||||
<span>WAL Size</span><strong>{formatBytes(overview.storage.wal_directory_size_bytes)}</strong>
|
||||
</div>
|
||||
<div title="Optional ueber Agent/SSH ermittelbar">
|
||||
<span>Free Disk</span><strong>{formatBytes(overview.storage.disk_space.free_bytes)}</strong>
|
||||
</div>
|
||||
<div title="Zeitliche Replikationsverzoegerung auf Standby">
|
||||
<span>Replay Lag</span>
|
||||
<strong className={overview.replication.replay_lag_seconds > 5 ? "lag-bad" : ""}>
|
||||
{formatSeconds(overview.replication.replay_lag_seconds)}
|
||||
</strong>
|
||||
</div>
|
||||
<div><span>Replication Slots</span><strong>{overview.replication.replication_slots_count ?? "-"}</strong></div>
|
||||
<div><span>Repl Clients</span><strong>{overview.replication.active_replication_clients ?? "-"}</strong></div>
|
||||
<div><span>Autovacuum Workers</span><strong>{overview.performance.autovacuum_workers ?? "-"}</strong></div>
|
||||
</div>
|
||||
|
||||
<div className="grid two">
|
||||
<div>
|
||||
<h4>Size all databases</h4>
|
||||
<table>
|
||||
<thead><tr><th>Database</th><th>Size</th></tr></thead>
|
||||
<tbody>
|
||||
{(overview.storage.all_databases || []).map((d) => (
|
||||
<tr key={d.name}><td>{d.name}</td><td>{formatBytes(d.size_bytes)}</td></tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div>
|
||||
<h4>Largest Tables (Top 5)</h4>
|
||||
<table>
|
||||
<thead><tr><th>Table</th><th>Size</th></tr></thead>
|
||||
<tbody>
|
||||
{(overview.storage.largest_tables || []).map((t, i) => (
|
||||
<tr key={`${t.schema}.${t.table}.${i}`}><td>{t.schema}.{t.table}</td><td>{formatBytes(t.size_bytes)}</td></tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid two">
|
||||
<div>
|
||||
<h4>Replication Clients</h4>
|
||||
<table>
|
||||
<thead><tr><th>Client</th><th>State</th><th>Lag</th></tr></thead>
|
||||
<tbody>
|
||||
{(overview.replication.clients || []).map((c, i) => (
|
||||
<tr key={`${c.client_addr || "n/a"}-${i}`}>
|
||||
<td>{c.client_addr || c.application_name || "-"}</td>
|
||||
<td>{c.state || "-"}</td>
|
||||
<td className={(c.replay_lag_seconds || 0) > 5 ? "lag-bad" : ""}>
|
||||
{c.replay_lag_seconds != null ? formatSeconds(c.replay_lag_seconds) : formatBytes(c.replay_lag_bytes)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div>
|
||||
<h4>Performance Core Metrics</h4>
|
||||
<div className="overview-metrics">
|
||||
<div><span>xact_commit</span><strong>{overview.performance.xact_commit ?? "-"}</strong></div>
|
||||
<div><span>xact_rollback</span><strong>{overview.performance.xact_rollback ?? "-"}</strong></div>
|
||||
<div><span>deadlocks</span><strong>{overview.performance.deadlocks ?? "-"}</strong></div>
|
||||
<div><span>temp_files</span><strong>{overview.performance.temp_files ?? "-"}</strong></div>
|
||||
<div><span>temp_bytes</span><strong>{formatBytes(overview.performance.temp_bytes)}</strong></div>
|
||||
<div><span>blk_read_time</span><strong>{overview.performance.blk_read_time ?? "-"} ms</strong></div>
|
||||
<div><span>blk_write_time</span><strong>{overview.performance.blk_write_time ?? "-"} ms</strong></div>
|
||||
<div><span>checkpoints_timed</span><strong>{overview.performance.checkpoints_timed ?? "-"}</strong></div>
|
||||
<div><span>checkpoints_req</span><strong>{overview.performance.checkpoints_req ?? "-"}</strong></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{overview.partial_failures?.length > 0 && (
|
||||
<div className="partial-warning">
|
||||
<strong>Partial data warnings:</strong>
|
||||
<ul>
|
||||
{overview.partial_failures.map((w, i) => <li key={i}>{w}</li>)}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<div className="range-picker">
|
||||
{Object.keys(ranges).map((r) => (
|
||||
<button key={r} onClick={() => setRange(r)} className={r === range ? "active" : ""}>
|
||||
|
||||
Reference in New Issue
Block a user