nessi
55f5652572
Introduced a new design and layout for action buttons on AlertsPage, DashboardPage, and TargetsPage with consistent styles and added SVG icons. Updated styles.css to support these changes with reusable button classes for better maintainability and UI consistency.
382 lines
14 KiB
JavaScript
382 lines
14 KiB
JavaScript
import React, { useEffect, useState } from "react";
|
|
import { Link } from "react-router-dom";
|
|
import { apiFetch } from "../api";
|
|
import { useAuth } from "../state";
|
|
|
|
const emptyForm = {
|
|
name: "",
|
|
host: "",
|
|
port: 5432,
|
|
dbname: "",
|
|
username: "",
|
|
password: "",
|
|
sslmode: "prefer",
|
|
use_pg_stat_statements: true,
|
|
tags: {},
|
|
};
|
|
|
|
const emptyEditForm = {
|
|
id: null,
|
|
name: "",
|
|
host: "",
|
|
port: 5432,
|
|
dbname: "",
|
|
username: "",
|
|
password: "",
|
|
sslmode: "prefer",
|
|
use_pg_stat_statements: true,
|
|
};
|
|
|
|
export function TargetsPage() {
|
|
const { tokens, refresh, me } = useAuth();
|
|
const [targets, setTargets] = useState([]);
|
|
const [form, setForm] = useState(emptyForm);
|
|
const [editForm, setEditForm] = useState(emptyEditForm);
|
|
const [editing, setEditing] = useState(false);
|
|
const [error, setError] = useState("");
|
|
const [loading, setLoading] = useState(true);
|
|
const [testState, setTestState] = useState({ loading: false, message: "", ok: null });
|
|
const [saveState, setSaveState] = useState({ loading: false, message: "" });
|
|
|
|
const canManage = me?.role === "admin" || me?.role === "operator";
|
|
|
|
const load = async () => {
|
|
setLoading(true);
|
|
try {
|
|
setTargets(await apiFetch("/targets", {}, tokens, refresh));
|
|
setError("");
|
|
} catch (e) {
|
|
setError(String(e.message || e));
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
load();
|
|
}, []);
|
|
|
|
const createTarget = async (e) => {
|
|
e.preventDefault();
|
|
try {
|
|
await apiFetch("/targets", { method: "POST", body: JSON.stringify(form) }, tokens, refresh);
|
|
setForm(emptyForm);
|
|
await load();
|
|
} catch (e) {
|
|
setError(String(e.message || e));
|
|
}
|
|
};
|
|
|
|
const testConnection = async () => {
|
|
setTestState({ loading: true, message: "", ok: null });
|
|
try {
|
|
const result = await apiFetch(
|
|
"/targets/test-connection",
|
|
{
|
|
method: "POST",
|
|
body: JSON.stringify({
|
|
host: form.host,
|
|
port: form.port,
|
|
dbname: form.dbname,
|
|
username: form.username,
|
|
password: form.password,
|
|
sslmode: form.sslmode,
|
|
}),
|
|
},
|
|
tokens,
|
|
refresh
|
|
);
|
|
setTestState({ loading: false, message: `${result.message} (PostgreSQL ${result.server_version})`, ok: true });
|
|
} catch (e) {
|
|
setTestState({ loading: false, message: String(e.message || e), ok: false });
|
|
}
|
|
};
|
|
|
|
const deleteTarget = async (id) => {
|
|
if (!confirm("Delete target?")) return;
|
|
try {
|
|
await apiFetch(`/targets/${id}`, { method: "DELETE" }, tokens, refresh);
|
|
await load();
|
|
} catch (e) {
|
|
setError(String(e.message || e));
|
|
}
|
|
};
|
|
|
|
const startEdit = (target) => {
|
|
setEditing(true);
|
|
setSaveState({ loading: false, message: "" });
|
|
setEditForm({
|
|
id: target.id,
|
|
name: target.name,
|
|
host: target.host,
|
|
port: target.port,
|
|
dbname: target.dbname,
|
|
username: target.username,
|
|
password: "",
|
|
sslmode: target.sslmode,
|
|
use_pg_stat_statements: target.use_pg_stat_statements !== false,
|
|
});
|
|
};
|
|
|
|
const cancelEdit = () => {
|
|
setEditing(false);
|
|
setEditForm(emptyEditForm);
|
|
setSaveState({ loading: false, message: "" });
|
|
};
|
|
|
|
const saveEdit = async (e) => {
|
|
e.preventDefault();
|
|
if (!editForm.id) return;
|
|
setSaveState({ loading: true, message: "" });
|
|
try {
|
|
const payload = {
|
|
name: editForm.name,
|
|
host: editForm.host,
|
|
port: Number(editForm.port),
|
|
dbname: editForm.dbname,
|
|
username: editForm.username,
|
|
sslmode: editForm.sslmode,
|
|
use_pg_stat_statements: !!editForm.use_pg_stat_statements,
|
|
};
|
|
if (editForm.password.trim()) payload.password = editForm.password;
|
|
|
|
await apiFetch(`/targets/${editForm.id}`, { method: "PUT", body: JSON.stringify(payload) }, tokens, refresh);
|
|
setSaveState({ loading: false, message: "Target updated." });
|
|
setEditing(false);
|
|
setEditForm(emptyEditForm);
|
|
await load();
|
|
} catch (e) {
|
|
setSaveState({ loading: false, message: String(e.message || e) });
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="targets-page">
|
|
<h2>Targets Management</h2>
|
|
{error && <div className="card error">{error}</div>}
|
|
|
|
{canManage && (
|
|
<details className="card collapsible">
|
|
<summary className="collapse-head">
|
|
<div>
|
|
<h3>New Target</h3>
|
|
</div>
|
|
<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="e.g. Prod-DB" value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} required />
|
|
</div>
|
|
<div className="field">
|
|
<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 />
|
|
</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 />
|
|
</div>
|
|
<div className="field">
|
|
<label>DB Name</label>
|
|
<input placeholder="e.g. postgres or appdb" value={form.dbname} onChange={(e) => setForm({ ...form, dbname: e.target.value })} required />
|
|
</div>
|
|
<div className="field">
|
|
<label>Username</label>
|
|
<input placeholder="e.g. postgres" value={form.username} onChange={(e) => setForm({ ...form, username: e.target.value })} required />
|
|
</div>
|
|
<div className="field">
|
|
<label>Password</label>
|
|
<input placeholder="Password" type="password" value={form.password} onChange={(e) => setForm({ ...form, password: e.target.value })} required />
|
|
</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>
|
|
If you see "rejected SSL upgrade", switch to <code>disable</code>.
|
|
</small>
|
|
</div>
|
|
<div className="field toggle-field">
|
|
<label>Query Insights Source</label>
|
|
<label className="toggle-check">
|
|
<input
|
|
type="checkbox"
|
|
checked={!!form.use_pg_stat_statements}
|
|
onChange={(e) => setForm({ ...form, use_pg_stat_statements: e.target.checked })}
|
|
/>
|
|
<span className="toggle-ui" aria-hidden="true" />
|
|
<span className="toggle-copy">
|
|
<strong>Use pg_stat_statements for this target</strong>
|
|
<small>Disable this if the extension is unavailable on the target.</small>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
<div className="field submit-field field-full">
|
|
<div className="form-actions">
|
|
<button type="button" className="secondary-btn" onClick={testConnection} disabled={testState.loading}>
|
|
{testState.loading ? "Testing..." : "Test connection"}
|
|
</button>
|
|
<button className="primary-btn">Create target</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
{testState.message && (
|
|
<div className={`test-connection-result ${testState.ok ? "ok" : "fail"}`}>{testState.message}</div>
|
|
)}
|
|
</details>
|
|
)}
|
|
|
|
{canManage && editing && (
|
|
<section className="card">
|
|
<h3>Edit Target</h3>
|
|
<form className="target-form grid two" onSubmit={saveEdit}>
|
|
<div className="field">
|
|
<label>Name</label>
|
|
<input value={editForm.name} onChange={(e) => setEditForm({ ...editForm, name: e.target.value })} required />
|
|
</div>
|
|
<div className="field">
|
|
<label>Host</label>
|
|
<input value={editForm.host} onChange={(e) => setEditForm({ ...editForm, host: e.target.value })} required />
|
|
</div>
|
|
<div className="field">
|
|
<label>Port</label>
|
|
<input type="number" value={editForm.port} onChange={(e) => setEditForm({ ...editForm, port: Number(e.target.value) })} required />
|
|
</div>
|
|
<div className="field">
|
|
<label>DB Name</label>
|
|
<input value={editForm.dbname} onChange={(e) => setEditForm({ ...editForm, dbname: e.target.value })} required />
|
|
</div>
|
|
<div className="field">
|
|
<label>Username</label>
|
|
<input value={editForm.username} onChange={(e) => setEditForm({ ...editForm, username: e.target.value })} required />
|
|
</div>
|
|
<div className="field">
|
|
<label>New Password (optional)</label>
|
|
<input type="password" placeholder="Leave empty to keep current" value={editForm.password} onChange={(e) => setEditForm({ ...editForm, password: e.target.value })} />
|
|
</div>
|
|
<div className="field">
|
|
<label>SSL Mode</label>
|
|
<select value={editForm.sslmode} onChange={(e) => setEditForm({ ...editForm, sslmode: e.target.value })}>
|
|
<option value="disable">disable</option>
|
|
<option value="prefer">prefer</option>
|
|
<option value="require">require</option>
|
|
</select>
|
|
</div>
|
|
<div className="field toggle-field">
|
|
<label>Query Insights Source</label>
|
|
<label className="toggle-check">
|
|
<input
|
|
type="checkbox"
|
|
checked={!!editForm.use_pg_stat_statements}
|
|
onChange={(e) => setEditForm({ ...editForm, use_pg_stat_statements: e.target.checked })}
|
|
/>
|
|
<span className="toggle-ui" aria-hidden="true" />
|
|
<span className="toggle-copy">
|
|
<strong>Use pg_stat_statements for this target</strong>
|
|
<small>Disable this if the extension is unavailable on the target.</small>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
<div className="field submit-field field-full">
|
|
<div className="form-actions">
|
|
<button type="button" className="secondary-btn" onClick={cancelEdit}>Cancel</button>
|
|
<button className="primary-btn" disabled={saveState.loading}>{saveState.loading ? "Saving..." : "Save changes"}</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
{saveState.message && <div className="test-connection-result">{saveState.message}</div>}
|
|
</section>
|
|
)}
|
|
|
|
{canManage && (
|
|
<details className="card collapsible tips">
|
|
<summary className="collapse-head">
|
|
<div>
|
|
<h3>Troubleshooting</h3>
|
|
<p>Quick checks for the most common connection issues.</p>
|
|
</div>
|
|
<span className="collapse-chevron" aria-hidden="true">v</span>
|
|
</summary>
|
|
<p>
|
|
<code>Connection refused</code>: host/port is wrong or database is unreachable.
|
|
</p>
|
|
<p>
|
|
<code>rejected SSL upgrade</code>: set SSL mode to <code>disable</code>.
|
|
</p>
|
|
<p>
|
|
<code>localhost</code> points to the backend container itself, not your host machine.
|
|
</p>
|
|
</details>
|
|
)}
|
|
|
|
<div className="card targets-table">
|
|
{loading ? (
|
|
<p>Loading targets...</p>
|
|
) : (
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Host</th>
|
|
<th>DB</th>
|
|
<th>Query Insights</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{targets.map((t) => (
|
|
<tr key={t.id}>
|
|
<td>{t.name}</td>
|
|
<td>{t.host}:{t.port}</td>
|
|
<td>{t.dbname}</td>
|
|
<td>
|
|
<span className={`status-chip ${t.use_pg_stat_statements ? "ok" : "warning"}`}>
|
|
{t.use_pg_stat_statements ? "Enabled" : "Disabled"}
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<div className="row-actions">
|
|
<Link className="table-action-btn details" to={`/targets/${t.id}`}>
|
|
<span aria-hidden="true">
|
|
<svg viewBox="0 0 24 24" width="13" height="13">
|
|
<path d="M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6-10-6-10-6zm10 3a3 3 0 1 0 0-6 3 3 0 0 0 0 6z" fill="currentColor" />
|
|
</svg>
|
|
</span>
|
|
Details
|
|
</Link>
|
|
{canManage && (
|
|
<button className="table-action-btn edit" onClick={() => startEdit(t)}>
|
|
<span aria-hidden="true">
|
|
<svg viewBox="0 0 24 24" width="13" height="13">
|
|
<path d="M3 17.25V21h3.75L19.81 7.94l-3.75-3.75L3 17.25zm2.92 2.33H5v-.92l10.06-10.06.92.92L5.92 19.58zM20.71 6.04a1 1 0 0 0 0-1.41L19.37 3.3a1 1 0 0 0-1.41 0l-1.13 1.12 3.75 3.75 1.13-1.13z" fill="currentColor" />
|
|
</svg>
|
|
</span>
|
|
Edit
|
|
</button>
|
|
)}
|
|
{canManage && (
|
|
<button className="table-action-btn delete" onClick={() => deleteTarget(t.id)}>
|
|
<span aria-hidden="true">
|
|
<svg viewBox="0 0 24 24" width="13" height="13">
|
|
<path d="M6 7h12l-1 13H7L6 7zm3-3h6l1 2H8l1-2z" fill="currentColor" />
|
|
</svg>
|
|
</span>
|
|
Delete
|
|
</button>
|
|
)}
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|