nessi/NexaPG
1
0
Fork 0
Code Issues 19 Pull Requests Actions Packages Projects Releases 13 Activity

Add database overview feature with metrics and UI enhancements

Browse Source 
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:
Sascha Nesterovic
2026-02-12 10:00:13 +01:00
parent d1d8ae43a4
commit f12dd46c21
10 changed files with 643 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
frontend/src/pages/TargetsPage.jsx
View File

@@ -66,20 +66,67 @@ export function TargetsPage() {
{error && <div className="card error">{error}</div>}
{canManage && (
<form className="card grid two" onSubmit={createTarget}>
<input placeholder="Name" value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} required />
<input placeholder="Host" value={form.host} onChange={(e) => setForm({ ...form, host: e.target.value })} required />
<input placeholder="Port" value={form.port} onChange={(e) => setForm({ ...form, port: Number(e.target.value) })} type="number" />
<input placeholder="DB Name" value={form.dbname} onChange={(e) => setForm({ ...form, dbname: e.target.value })} required />
<input placeholder="Username" value={form.username} onChange={(e) => setForm({ ...form, username: e.target.value })} required />
<input placeholder="Passwort" type="password" value={form.password} onChange={(e) => setForm({ ...form, password: e.target.value })} required />
<select value={form.sslmode} onChange={(e) => setForm({ ...form, sslmode: e.target.value })}>
<option value="disable">disable</option>
<option value="prefer">prefer</option>
<option value="require">require</option>
</select>
<button>Target anlegen</button>
<div className="field">
<label>Name</label>
<input placeholder="z.B. Prod-DB" value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} required />
<small>Eindeutiger Anzeigename im Dashboard.</small>
</div>
<div className="field">
<label>Host</label>
<input placeholder="z.B. 172.16.0.106 oder db.internal" value={form.host} onChange={(e) => setForm({ ...form, host: e.target.value })} required />
<small>Wichtig: Muss vom Backend-Container aus erreichbar sein.</small>
</div>
<div className="field">
<label>Port</label>
<input placeholder="5432" value={form.port} onChange={(e) => setForm({ ...form, port: Number(e.target.value) })} type="number" required />
<small>Standard PostgreSQL Port ist 5432 (oder gemappter Host-Port).</small>
</div>
<div className="field">
<label>DB Name</label>
<input placeholder="z.B. postgres oder appdb" value={form.dbname} onChange={(e) => setForm({ ...form, dbname: e.target.value })} required />
<small>Name der Datenbank, die überwacht werden soll.</small>
</div>
<div className="field">
<label>Username</label>
<input placeholder="z.B. postgres" value={form.username} onChange={(e) => setForm({ ...form, username: e.target.value })} required />
<small>DB User mit Leserechten auf Stats-Views.</small>
</div>
<div className="field">
<label>Password</label>
<input placeholder="Passwort" type="password" value={form.password} onChange={(e) => setForm({ ...form, password: e.target.value })} required />
<small>Wird verschlüsselt in der Core-DB gespeichert.</small>
</div>
<div className="field">
<label>SSL Mode</label>
<select value={form.sslmode} onChange={(e) => setForm({ ...form, sslmode: e.target.value })}>
<option value="disable">disable</option>
<option value="prefer">prefer</option>
<option value="require">require</option>
</select>
<small>
Bei Fehler "rejected SSL upgrade" auf <code>disable</code> stellen.
</small>
</div>
<div className="field">
<label>&nbsp;</label>
<button>Target anlegen</button>
</div>
</form>
)}
{canManage && (
<div className="card tips">
<strong>Troubleshooting</strong>
<p>
<code>Connection refused</code>: Host/Port falsch oder DB nicht erreichbar.
</p>
<p>
<code>rejected SSL upgrade</code>: SSL Mode auf <code>disable</code> setzen.
</p>
<p>
<code>localhost</code> im Target zeigt aus Backend-Container-Sicht auf den Container selbst.
</p>
</div>
)}
<div className="card">
{loading ? (
<p>Lade Targets...</p>