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

improve Targets Management

Browse Source
This commit is contained in:
Sascha Nesterovic
2026-02-12 11:44:57 +01:00
parent 64b4c3dfa4
commit 2f5529a93a
2 changed files with 6 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -70,7 +70,6 @@ export function TargetsPage() {
<summary className="collapse-head"> <summary className="collapse-head">
<div> <div>
<h3>New Target</h3> <h3>New Target</h3>
<p>Connection settings for a PostgreSQL instance.</p>
</div> </div>
<span className="collapse-chevron" aria-hidden="true">v</span> <span className="collapse-chevron" aria-hidden="true">v</span>
</summary> </summary>
@@ -79,32 +78,26 @@ export function TargetsPage() {
<div className="field"> <div className="field">
<label>Name</label> <label>Name</label>
<input placeholder="e.g. Prod-DB" value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} required /> <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>
<div className="field"> <div className="field">
<label>Host</label> <label>Host</label>
<input placeholder="e.g. 172.16.0.106 or db.internal" value={form.host} onChange={(e) => setForm({ ...form, host: e.target.value })} required /> <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>
<div className="field"> <div className="field">
<label>Port</label> <label>Port</label>
<input placeholder="5432" value={form.port} onChange={(e) => setForm({ ...form, port: Number(e.target.value) })} type="number" required /> <input placeholder="5432" value={form.port} onChange={(e) => setForm({ ...form, port: Number(e.target.value) })} type="number" required />
<small>Default PostgreSQL port is 5432 (or your mapped host port).</small>
</div> </div>
<div className="field"> <div className="field">
<label>DB Name</label> <label>DB Name</label>
<input placeholder="e.g. postgres or appdb" value={form.dbname} onChange={(e) => setForm({ ...form, dbname: e.target.value })} required /> <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>
<div className="field"> <div className="field">
<label>Username</label> <label>Username</label>
<input placeholder="e.g. postgres" value={form.username} onChange={(e) => setForm({ ...form, username: e.target.value })} required /> <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>
<div className="field"> <div className="field">
<label>Password</label> <label>Password</label>
<input placeholder="Password" type="password" value={form.password} onChange={(e) => setForm({ ...form, password: e.target.value })} required /> <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>
<div className="field"> <div className="field">
<label>SSL Mode</label> <label>SSL Mode</label>
@@ -117,8 +110,7 @@ export function TargetsPage() {
If you see "rejected SSL upgrade", switch to <code>disable</code>. If you see "rejected SSL upgrade", switch to <code>disable</code>.
</small> </small>
</div> </div>
<div className="field"> <div className="field submit-field">
<label>&nbsp;</label>
<button className="primary-btn">Create target</button> <button className="primary-btn">Create target</button>
</div> </div>
</form> </form>

7
frontend/src/styles.css
View File

@@ -235,11 +235,11 @@ button {
.field { .field {
display: grid; display: grid;
gap: 6px; gap: 4px;
} }
.field label { .field label {
font-size: 13px; font-size: 12px;
color: #b9c6dc; color: #b9c6dc;
} }
@@ -260,6 +260,7 @@ button {
.target-form { .target-form {
margin-top: 12px; margin-top: 12px;
gap: 10px;
} }
.primary-btn { .primary-btn {
@@ -268,6 +269,8 @@ button {
border-color: #3384cb; border-color: #3384cb;
background: linear-gradient(180deg, #15528d, #114170); background: linear-gradient(180deg, #15528d, #114170);
box-shadow: inset 0 1px 0 #5f8de144; box-shadow: inset 0 1px 0 #5f8de144;
padding: 7px 12px;
min-height: 38px;
} }
.primary-btn:hover { .primary-btn:hover {