nessi
5b34c08851
Replaced German text with English across the frontend UI for consistency and accessibility. Enhanced clarity in `.env.example` and `README.md`, adding detailed comments for environment variables and prerequisites. Improved documentation for setup, security, and troubleshooting.
331 lines
13 KiB
JavaScript
331 lines
13 KiB
JavaScript
import React, { useEffect, useMemo, useState } from "react";
|
|
import { useParams } from "react-router-dom";
|
|
import { Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
|
|
import { apiFetch } from "../api";
|
|
import { useAuth } from "../state";
|
|
|
|
const ranges = {
|
|
"15m": 15 * 60 * 1000,
|
|
"1h": 60 * 60 * 1000,
|
|
"24h": 24 * 60 * 60 * 1000,
|
|
"7d": 7 * 24 * 60 * 60 * 1000,
|
|
};
|
|
|
|
function toQueryRange(range) {
|
|
const to = new Date();
|
|
const from = new Date(to.getTime() - ranges[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`;
|
|
}
|
|
|
|
function formatNumber(value, digits = 2) {
|
|
if (value === null || value === undefined || Number.isNaN(Number(value))) return "-";
|
|
return Number(value).toFixed(digits);
|
|
}
|
|
|
|
function MetricsTooltip({ active, payload, label }) {
|
|
if (!active || !payload || payload.length === 0) return null;
|
|
const row = payload[0]?.payload || {};
|
|
return (
|
|
<div className="chart-tooltip">
|
|
<div className="chart-tooltip-time">{label}</div>
|
|
<div className="chart-tooltip-item c1">connections: {formatNumber(row.connections, 0)}</div>
|
|
<div className="chart-tooltip-item c2">tps: {formatNumber(row.tps, 2)}</div>
|
|
<div className="chart-tooltip-item c3">cache: {formatNumber(row.cache, 2)}%</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
async function loadMetric(targetId, metric, range, tokens, refresh) {
|
|
const { from, to } = toQueryRange(range);
|
|
return apiFetch(
|
|
`/targets/${targetId}/metrics?metric=${encodeURIComponent(metric)}&from=${encodeURIComponent(from)}&to=${encodeURIComponent(to)}`,
|
|
{},
|
|
tokens,
|
|
refresh
|
|
);
|
|
}
|
|
|
|
export function TargetDetailPage() {
|
|
const { id } = useParams();
|
|
const { tokens, refresh } = useAuth();
|
|
const [range, setRange] = useState("1h");
|
|
const [series, setSeries] = useState({});
|
|
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);
|
|
|
|
useEffect(() => {
|
|
let active = true;
|
|
(async () => {
|
|
setLoading(true);
|
|
try {
|
|
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));
|
|
} finally {
|
|
if (active) setLoading(false);
|
|
}
|
|
})();
|
|
return () => {
|
|
active = false;
|
|
};
|
|
}, [id, range, tokens, refresh]);
|
|
|
|
const chartData = useMemo(
|
|
() => {
|
|
const con = series.connections || [];
|
|
const xacts = series.xacts || [];
|
|
const cache = series.cache || [];
|
|
return con.map((point, idx) => {
|
|
const prev = xacts[idx - 1];
|
|
const curr = xacts[idx];
|
|
let tps = 0;
|
|
if (prev && curr) {
|
|
const dt = (new Date(curr.ts).getTime() - new Date(prev.ts).getTime()) / 1000;
|
|
const dx = (curr.value || 0) - (prev.value || 0);
|
|
if (dt > 0 && dx >= 0) {
|
|
tps = dx / dt;
|
|
}
|
|
}
|
|
return {
|
|
ts: new Date(point.ts).toLocaleTimeString(),
|
|
connections: point.value,
|
|
tps,
|
|
cache: (cache[idx]?.value || 0) * 100,
|
|
};
|
|
});
|
|
},
|
|
[series]
|
|
);
|
|
|
|
if (loading) return <div className="card">Loading 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 {targetMeta?.name || `#${id}`}
|
|
{targetMeta?.dbname ? ` (${targetMeta.dbname})` : ""}
|
|
</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="Time since PostgreSQL postmaster start">
|
|
<span>Uptime</span><strong>{formatSeconds(overview.instance.uptime_seconds)}</strong>
|
|
</div>
|
|
<div><span>Database</span><strong>{overview.instance.current_database || "-"}</strong></div>
|
|
<div>
|
|
<span>Target Port</span>
|
|
<strong>{targetMeta?.port ?? "-"}</strong>
|
|
</div>
|
|
<div title="Current database total size">
|
|
<span>Current DB Size</span><strong>{formatBytes(overview.storage.current_database_size_bytes)}</strong>
|
|
</div>
|
|
<div title="Total WAL directory size (when available)">
|
|
<span>WAL Size</span><strong>{formatBytes(overview.storage.wal_directory_size_bytes)}</strong>
|
|
</div>
|
|
<div title="Optional metric via future Agent/SSH provider">
|
|
<span>Free Disk</span><strong>{formatBytes(overview.storage.disk_space.free_bytes)}</strong>
|
|
</div>
|
|
<div title="Replication replay delay on 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" : ""}>
|
|
{r}
|
|
</button>
|
|
))}
|
|
</div>
|
|
<div className="card" style={{ height: 320 }}>
|
|
<h3>Connections / TPS (approx) / Cache Hit Ratio</h3>
|
|
<ResponsiveContainer width="100%" height="85%">
|
|
<LineChart data={chartData}>
|
|
<XAxis dataKey="ts" hide />
|
|
<YAxis yAxisId="left" />
|
|
<YAxis yAxisId="right" orientation="right" domain={[0, 100]} />
|
|
<Tooltip content={<MetricsTooltip />} />
|
|
<Line yAxisId="left" type="monotone" dataKey="connections" stroke="#38bdf8" dot={false} strokeWidth={2} />
|
|
<Line yAxisId="left" type="monotone" dataKey="tps" stroke="#22c55e" dot={false} strokeWidth={2} />
|
|
<Line yAxisId="right" type="monotone" dataKey="cache" stroke="#f59e0b" dot={false} strokeWidth={2} />
|
|
</LineChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
<div className="grid two">
|
|
<div className="card">
|
|
<h3>Locks</h3>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Type</th>
|
|
<th>Mode</th>
|
|
<th>Granted</th>
|
|
<th>Relation</th>
|
|
<th>PID</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{locks.map((l, i) => (
|
|
<tr key={i}>
|
|
<td>{l.locktype}</td>
|
|
<td>{l.mode}</td>
|
|
<td>{String(l.granted)}</td>
|
|
<td>{l.relation || "-"}</td>
|
|
<td>{l.pid}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div className="card">
|
|
<h3>Activity</h3>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>PID</th>
|
|
<th>User</th>
|
|
<th>State</th>
|
|
<th>Wait</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{activity.map((a) => (
|
|
<tr key={a.pid}>
|
|
<td>{a.pid}</td>
|
|
<td>{a.usename}</td>
|
|
<td>{a.state}</td>
|
|
<td>{a.wait_event_type || "-"}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|