Add target owners and alert notification management.

This commit implements the addition of `target_owners` and `alert_notification_events` tables, enabling management of responsible users for targets. Backend and frontend components are updated to allow viewing, assigning, and notifying target owners about critical alerts via email.

frontend/src/pages/TargetsPage.jsx

@@ -12,6 +12,7 @@ const emptyForm = {
   password: "",
   sslmode: "prefer",
   use_pg_stat_statements: true,
+  owner_user_ids: [],
   tags: {},
 };
 
@@ -25,6 +26,7 @@ const emptyEditForm = {
   password: "",
   sslmode: "prefer",
   use_pg_stat_statements: true,
+  owner_user_ids: [],
 };
 
 export function TargetsPage() {
@@ -37,13 +39,23 @@ export function TargetsPage() {
   const [loading, setLoading] = useState(true);
   const [testState, setTestState] = useState({ loading: false, message: "", ok: null });
   const [saveState, setSaveState] = useState({ loading: false, message: "" });
+  const [ownerCandidates, setOwnerCandidates] = useState([]);
 
   const canManage = me?.role === "admin" || me?.role === "operator";
 
   const load = async () => {
     setLoading(true);
     try {
-      setTargets(await apiFetch("/targets", {}, tokens, refresh));
+      if (canManage) {
+        const [targetRows, candidates] = await Promise.all([
+          apiFetch("/targets", {}, tokens, refresh),
+          apiFetch("/targets/owner-candidates", {}, tokens, refresh),
+        ]);
+        setTargets(targetRows);
+        setOwnerCandidates(candidates);
+      } else {
+        setTargets(await apiFetch("/targets", {}, tokens, refresh));
+      }
       setError("");
     } catch (e) {
       setError(String(e.message || e));
@@ -54,7 +66,7 @@ export function TargetsPage() {
 
   useEffect(() => {
     load();
-  }, []);
+  }, [canManage]);
 
   const createTarget = async (e) => {
     e.preventDefault();
@@ -115,6 +127,7 @@ export function TargetsPage() {
       password: "",
       sslmode: target.sslmode,
       use_pg_stat_statements: target.use_pg_stat_statements !== false,
+      owner_user_ids: Array.isArray(target.owner_user_ids) ? target.owner_user_ids : [],
     });
   };
 
@@ -137,6 +150,7 @@ export function TargetsPage() {
         username: editForm.username,
         sslmode: editForm.sslmode,
         use_pg_stat_statements: !!editForm.use_pg_stat_statements,
+        owner_user_ids: editForm.owner_user_ids || [],
       };
       if (editForm.password.trim()) payload.password = editForm.password;
 
@@ -215,6 +229,31 @@ export function TargetsPage() {
                 </span>
               </label>
             </div>
+            <div className="field field-full">
+              <label>Responsible Users (Target Owners)</label>
+              <div className="owner-grid">
+                {ownerCandidates.map((candidate) => {
+                  const checked = form.owner_user_ids.includes(candidate.user_id);
+                  return (
+                    <label key={candidate.user_id} className={`owner-chip ${checked ? "active" : ""}`}>
+                      <input
+                        type="checkbox"
+                        checked={checked}
+                        onChange={(e) => {
+                          const next = e.target.checked
+                            ? [...form.owner_user_ids, candidate.user_id]
+                            : form.owner_user_ids.filter((id) => id !== candidate.user_id);
+                          setForm({ ...form, owner_user_ids: next });
+                        }}
+                      />
+                      <span>{candidate.email}</span>
+                    </label>
+                  );
+                })}
+                {ownerCandidates.length === 0 && <small className="muted">No users available.</small>}
+              </div>
+              <small>Only selected users will receive email notifications for this target's alerts.</small>
+            </div>
             <div className="field submit-field field-full">
               <div className="form-actions">
                 <button type="button" className="secondary-btn" onClick={testConnection} disabled={testState.loading}>
@@ -281,6 +320,31 @@ export function TargetsPage() {
                 </span>
               </label>
             </div>
+            <div className="field field-full">
+              <label>Responsible Users (Target Owners)</label>
+              <div className="owner-grid">
+                {ownerCandidates.map((candidate) => {
+                  const checked = editForm.owner_user_ids.includes(candidate.user_id);
+                  return (
+                    <label key={candidate.user_id} className={`owner-chip ${checked ? "active" : ""}`}>
+                      <input
+                        type="checkbox"
+                        checked={checked}
+                        onChange={(e) => {
+                          const next = e.target.checked
+                            ? [...editForm.owner_user_ids, candidate.user_id]
+                            : editForm.owner_user_ids.filter((id) => id !== candidate.user_id);
+                          setEditForm({ ...editForm, owner_user_ids: next });
+                        }}
+                      />
+                      <span>{candidate.email}</span>
+                    </label>
+                  );
+                })}
+                {ownerCandidates.length === 0 && <small className="muted">No users available.</small>}
+              </div>
+              <small>Only selected users will receive email notifications for this target's alerts.</small>
+            </div>
             <div className="field submit-field field-full">
               <div className="form-actions">
                 <button type="button" className="secondary-btn" onClick={cancelEdit}>Cancel</button>
@@ -323,6 +387,7 @@ export function TargetsPage() {
                 <th>Name</th>
                 <th>Host</th>
                 <th>DB</th>
+                <th>Owners</th>
                 <th>Query Insights</th>
                 <th>Actions</th>
               </tr>
@@ -333,6 +398,7 @@ export function TargetsPage() {
                   <td>{t.name}</td>
                   <td>{t.host}:{t.port}</td>
                   <td>{t.dbname}</td>
+                  <td>{Array.isArray(t.owner_user_ids) ? t.owner_user_ids.length : 0}</td>
                   <td>
                     <span className={`status-chip ${t.use_pg_stat_statements ? "ok" : "warning"}`}>
                       {t.use_pg_stat_statements ? "Enabled" : "Disabled"}