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

Standardize English language usage and improve environment configuration

Browse Source 
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.
This commit is contained in:
Sascha Nesterovic
2026-02-12 11:25:02 +01:00
parent 6c660239d0
commit 5b34c08851
9 changed files with 235 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -51,7 +51,7 @@ export function TargetsPage() {
};
const deleteTarget = async (id) => {
if (!confirm("Target loeschen?")) return;
if (!confirm("Delete target?")) return;
try {
await apiFetch(`/targets/${id}`, { method: "DELETE" }, tokens, refresh);
await load();
@@ -69,42 +69,42 @@ export function TargetsPage() {
<details className="card collapsible" open>
<summary className="collapse-head">
<div>
<h3>Neues Target</h3>
<p>Verbindungsdaten fuer eine PostgreSQL-Instanz.</p>
<h3>New Target</h3>
<p>Connection settings for a PostgreSQL instance.</p>
</div>
<span className="collapse-chevron" aria-hidden="true">?</span>
<span className="collapse-chevron" aria-hidden="true">v</span>
</summary>
<form className="target-form grid two" onSubmit={createTarget}>
<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>
<input placeholder="e.g. Prod-DB" value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} required />
<small>Unique display name in the 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>
<input placeholder="e.g. 172.16.0.106 or db.internal" value={form.host} onChange={(e) => setForm({ ...form, host: e.target.value })} required />
<small>Must be reachable from the backend container.</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>
<small>Default PostgreSQL port is 5432 (or your mapped 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 ueberwacht werden soll.</small>
<input placeholder="e.g. postgres or appdb" value={form.dbname} onChange={(e) => setForm({ ...form, dbname: e.target.value })} required />
<small>Database name to monitor.</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>
<input placeholder="e.g. postgres" value={form.username} onChange={(e) => setForm({ ...form, username: e.target.value })} required />
<small>DB user with read permissions on 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 verschluesselt in der Core-DB gespeichert.</small>
<input placeholder="Password" type="password" value={form.password} onChange={(e) => setForm({ ...form, password: e.target.value })} required />
<small>Stored encrypted in the core database.</small>
</div>
<div className="field">
<label>SSL Mode</label>
@@ -114,12 +114,12 @@ export function TargetsPage() {
<option value="require">require</option>
</select>
<small>
Bei Fehler "rejected SSL upgrade" auf <code>disable</code> stellen.
If you see "rejected SSL upgrade", switch to <code>disable</code>.
</small>
</div>
<div className="field">
<label>&nbsp;</label>
<button className="primary-btn">Target anlegen</button>
<button className="primary-btn">Create target</button>
</div>
</form>
</details>
@@ -130,25 +130,25 @@ export function TargetsPage() {
<summary className="collapse-head">
<div>
<h3>Troubleshooting</h3>
<p>Typische Verbindungsfehler schnell erkennen.</p>
<p>Quick checks for the most common connection issues.</p>
</div>
<span className="collapse-chevron" aria-hidden="true">?</span>
<span className="collapse-chevron" aria-hidden="true">v</span>
</summary>
<p>
<code>Connection refused</code>: Host/Port falsch oder DB nicht erreichbar.
<code>Connection refused</code>: host/port is wrong or database is unreachable.
</p>
<p>
<code>rejected SSL upgrade</code>: SSL Mode auf <code>disable</code> setzen.
<code>rejected SSL upgrade</code>: set SSL mode to <code>disable</code>.
</p>
<p>
<code>localhost</code> im Target zeigt aus Backend-Container-Sicht auf den Container selbst.
<code>localhost</code> points to the backend container itself, not your host machine.
</p>
</details>
)}
<div className="card targets-table">
{loading ? (
<p>Lade Targets...</p>
<p>Loading targets...</p>
) : (
<table>
<thead>
@@ -156,7 +156,7 @@ export function TargetsPage() {
<th>Name</th>
<th>Host</th>
<th>DB</th>
<th>Aktionen</th>
<th>Actions</th>
</tr>
</thead>
<tbody>