5e08d06784
Drei zusammenhaengende Verbesserungen am Quellen-Health-Bereich:
1. shared/services/source_suggester.py:
- sync mit Monitor commit 49c5572.
- Neue Funktion generate_strategy_escalation_suggestions: erzeugt
deactivate-Vorschlaege fuer Quellen mit fetch_strategy=googlebot|
paywall, deren Reachability-Check trotzdem error meldet.
2. source-health.js: Loesung-suchen-Button erweitert.
Bisher nur bei status=error AND check_type=reachability. Jetzt auch
bei status=warning AND check_type=feed_validity (z.B. "Feed
erreichbar aber leer"). Backend-Endpoint /api/sources/health/
search-fix wird in beiden Faellen aufgerufen, Claude sucht eine
bessere URL fuer die Quelle.
3. source-health.js: Trend-Delta im Counter.
Liest healthHistoryCache[1] (vorletzter Run) und vergleicht mit
aktuellen errors/warnings/ok. Zeigt z.B. "3 Fehler (+2)" rot oder
"143 Warnungen (-15)" gruen. Bei steigenden ok-Counts ist Plus
gruen, bei steigenden Fehlern ist Plus rot. Wenn der vorletzte
Run nicht verfuegbar (Initial-Lauf): kein Delta.
Cache-Buster source-health.js auf 20260509l gebumpt.
589 Zeilen
27 KiB
JavaScript
589 Zeilen
27 KiB
JavaScript
/* Quellen-Health & Vorschläge */
|
|
"use strict";
|
|
|
|
let healthData = null;
|
|
let suggestionsCache = [];
|
|
// Default-Filter zeigt nur Probleme (errors + warnings); OK ist meistens Rauschen.
|
|
// "issues" ist ein virtueller Status-Wert, den nur das Frontend versteht (siehe applyHealthFilter).
|
|
let healthFilters = { status: "issues", check_type: "", org: "all" };
|
|
let healthHistoryCache = [];
|
|
|
|
// 60-Sekunden-Cache, damit Tab-Wechsel nicht jedes Mal die volle Antwort neu lädt.
|
|
// Bei Mutationen (Vorschlag annehmen/ablehnen, run-stream, search-fix) wird mit force=true neu geladen.
|
|
// Cache-Key beinhaltet das aktuelle Limit, damit "Mehr laden" nicht aus altem Cache bedient wird.
|
|
let healthDataCache = { health: null, suggestions: null, history: null, ts: 0, limit: 0 };
|
|
const HEALTH_CACHE_TTL_MS = 60000;
|
|
|
|
// Default-Pagination: 100 Items reichen meistens (errors+warnings stehen vorne, ok-Status hinten).
|
|
// Wird durch loadMoreHealth() / loadAllHealth() hochgesetzt.
|
|
let healthLoadLimit = 100;
|
|
|
|
|
|
const CHECK_TYPE_LABELS = {
|
|
reachability: "Erreichbarkeit",
|
|
feed_validity: "Feed-Validität",
|
|
stale: "Aktualität",
|
|
duplicate: "Duplikat",
|
|
};
|
|
|
|
const SUGGESTION_TYPE_LABELS = {
|
|
add_source: "Neue Quelle",
|
|
deactivate_source: "Deaktivieren",
|
|
remove_source: "Entfernen",
|
|
fix_url: "URL korrigieren",
|
|
};
|
|
|
|
const PRIORITY_LABELS = {
|
|
high: "Hoch",
|
|
medium: "Mittel",
|
|
low: "Niedrig",
|
|
};
|
|
|
|
// Lucide-Icons als Inline-SVG-Konstanten (statt CDN-Abhängigkeit oder Emojis).
|
|
// 14x14, currentColor erbt vom Button-Style.
|
|
const LUCIDE_ICONS = {
|
|
check: '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-2px;"><polyline points="20 6 9 17 4 12"/></svg>',
|
|
x: '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-2px;"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>',
|
|
search:'<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-2px;"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>',
|
|
refresh:'<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-2px;"><polyline points="23 4 23 10 17 10"/><polyline points="1 20 1 14 7 14"/><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/></svg>',
|
|
};
|
|
|
|
// --- Init ---
|
|
function setupHealthTab() {
|
|
const tab = document.querySelector('#sourceSubTabs .nav-tab[data-subtab="source-health"]');
|
|
if (tab) {
|
|
tab.addEventListener("click", () => loadHealthData());
|
|
}
|
|
}
|
|
|
|
// Sub-Sub-Tabs innerhalb von Quellen-Health: Vorschläge / Health-Status / Verlauf.
|
|
function setupHealthSubTabs() {
|
|
document.querySelectorAll("#healthSubTabs .nav-tab").forEach((tab) => {
|
|
tab.addEventListener("click", () => {
|
|
const which = tab.dataset.healthtab;
|
|
document.querySelectorAll("#healthSubTabs .nav-tab").forEach(t => t.classList.remove("active"));
|
|
tab.classList.add("active");
|
|
["suggestions", "checks", "verlauf"].forEach(name => {
|
|
const pane = document.getElementById("ht-" + name);
|
|
if (pane) pane.style.display = name === which ? "block" : "none";
|
|
});
|
|
});
|
|
});
|
|
}
|
|
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
setupHealthTab();
|
|
setupHealthSubTabs();
|
|
});
|
|
|
|
// --- Health-Daten laden ---
|
|
async function loadHealthData(force = false) {
|
|
const now = Date.now();
|
|
if (!force
|
|
&& healthDataCache.health
|
|
&& healthDataCache.limit === healthLoadLimit
|
|
&& (now - healthDataCache.ts) < HEALTH_CACHE_TTL_MS) {
|
|
healthData = healthDataCache.health;
|
|
suggestionsCache = healthDataCache.suggestions;
|
|
healthHistoryCache = healthDataCache.history;
|
|
renderHealthDashboard();
|
|
return;
|
|
}
|
|
try {
|
|
const [health, suggestions, history] = await Promise.all([
|
|
API.get("/api/sources/health?limit=" + healthLoadLimit),
|
|
API.get("/api/sources/suggestions"),
|
|
API.get("/api/sources/health/history?limit=10").catch(() => []),
|
|
]);
|
|
healthData = health;
|
|
suggestionsCache = suggestions;
|
|
healthHistoryCache = history || [];
|
|
healthDataCache = { health, suggestions, history: history || [], ts: Date.now(), limit: healthLoadLimit };
|
|
renderHealthDashboard();
|
|
} catch (err) {
|
|
console.error("Health-Daten laden fehlgeschlagen:", err);
|
|
document.getElementById("healthContent").innerHTML =
|
|
'<div class="text-muted" style="padding:20px;">Fehler beim Laden der Health-Daten.</div>';
|
|
}
|
|
}
|
|
|
|
// Pagination-Steuerung: hochsetzen + neu laden
|
|
function loadMoreHealth() {
|
|
healthLoadLimit += 200;
|
|
loadHealthData(true);
|
|
}
|
|
|
|
function loadAllHealth() {
|
|
healthLoadLimit = 100000;
|
|
loadHealthData(true);
|
|
}
|
|
|
|
function applyHealthFilter(checks) {
|
|
return checks.filter(c => {
|
|
// "issues" = Sammelfilter für errors + warnings (Default)
|
|
if (healthFilters.status === "issues" && c.status === "ok") return false;
|
|
if (healthFilters.status && healthFilters.status !== "issues" && c.status !== healthFilters.status) return false;
|
|
if (healthFilters.check_type && c.check_type !== healthFilters.check_type) return false;
|
|
if (healthFilters.org === "global" && c.tenant_id !== null) return false;
|
|
if (healthFilters.org !== "all" && healthFilters.org !== "global"
|
|
&& healthFilters.org && String(c.tenant_id) !== healthFilters.org) return false;
|
|
return true;
|
|
});
|
|
}
|
|
|
|
function setHealthFilter(field, value) {
|
|
healthFilters[field] = value;
|
|
renderHealthDashboard();
|
|
}
|
|
|
|
function renderHealthDashboard() {
|
|
// Drei Sub-Panes (statt einer monolithischen Health-Section).
|
|
const paneSuggestions = document.getElementById("ht-suggestions");
|
|
const paneChecks = document.getElementById("ht-checks");
|
|
const paneVerlauf = document.getElementById("ht-verlauf");
|
|
if (!paneSuggestions || !paneChecks || !paneVerlauf) return;
|
|
|
|
// Vorschläge rendern
|
|
const pendingSuggestions = suggestionsCache.filter((s) => s.status === "pending");
|
|
const recentSuggestions = suggestionsCache.filter((s) => s.status !== "pending");
|
|
|
|
let suggestionsHtml = "";
|
|
if (pendingSuggestions.length > 0) {
|
|
suggestionsHtml = `
|
|
<div class="card" style="margin-bottom:16px;">
|
|
<div class="card-header">
|
|
<h2>Vorschläge (${pendingSuggestions.length} offen)</h2>
|
|
</div>
|
|
<div class="table-wrap">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Typ</th>
|
|
<th>Titel</th>
|
|
<th>Beschreibung</th>
|
|
<th>Priorität</th>
|
|
<th>Erstellt</th>
|
|
<th>Aktionen</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
${pendingSuggestions
|
|
.map(
|
|
(s) => `
|
|
<tr>
|
|
<td><span class="badge badge-suggestion-${s.suggestion_type}">${SUGGESTION_TYPE_LABELS[s.suggestion_type] || s.suggestion_type}</span></td>
|
|
<td>${esc(s.title)}</td>
|
|
<td class="text-secondary" style="max-width:300px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;" title="${esc(s.description || "")}">${esc(s.description || "")}</td>
|
|
<td><span class="badge badge-priority-${s.priority}">${PRIORITY_LABELS[s.priority] || s.priority}</span></td>
|
|
<td class="text-secondary">${formatDateTime(s.created_at)}</td>
|
|
<td style="white-space:nowrap;">
|
|
${s.suggestion_type === "deactivate_source" && s.source_id ? `<button class="btn btn-secondary btn-small" data-source-id="${s.source_id}" data-source-name="${esc(s.title.split(':')[0] || s.title)}" onclick="searchFix(this)" title="Lösung suchen">${LUCIDE_ICONS.search}</button> ` : ""}
|
|
<button class="btn btn-success btn-small" onclick="handleSuggestion(${s.id}, true)" title="Annehmen">${LUCIDE_ICONS.check}</button>
|
|
<button class="btn btn-danger btn-small" onclick="handleSuggestion(${s.id}, false)" title="Ablehnen">${LUCIDE_ICONS.x}</button>
|
|
</td>
|
|
</tr>`,
|
|
)
|
|
.join("")}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>`;
|
|
} else {
|
|
suggestionsHtml = `
|
|
<div class="card" style="margin-bottom:16px;">
|
|
<div class="card-header"><h2>Vorschläge</h2></div>
|
|
<div class="card-body text-muted">Keine offenen Vorschläge vorhanden.</div>
|
|
</div>`;
|
|
}
|
|
|
|
// Vergangene Vorschläge - eingeklappt by default, weil rein historisch.
|
|
let historyHtml = "";
|
|
if (recentSuggestions.length > 0) {
|
|
const shown = recentSuggestions.slice(0, 20);
|
|
historyHtml = `
|
|
<details class="card" style="margin-bottom:16px;">
|
|
<summary style="cursor:pointer; padding:14px 18px; list-style:none;">
|
|
<span style="color:var(--accent, #C8A851); font-weight:600; font-size:1.02rem;">Verlauf</span>
|
|
<span class="text-secondary" style="font-size:13px; margin-left:8px;">(${recentSuggestions.length} erledigte Vorschläge - klick zum Aufklappen)</span>
|
|
</summary>
|
|
<div class="table-wrap" style="border-top:1px solid var(--border, rgba(255,255,255,0.08));">
|
|
<table>
|
|
<thead>
|
|
<tr><th>Typ</th><th>Titel</th><th>Status</th><th>Bearbeitet</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
${shown
|
|
.map(
|
|
(s) => `
|
|
<tr>
|
|
<td><span class="badge badge-suggestion-${s.suggestion_type}">${SUGGESTION_TYPE_LABELS[s.suggestion_type] || s.suggestion_type}</span></td>
|
|
<td>${esc(s.title)}</td>
|
|
<td><span class="badge badge-${s.status === "accepted" ? "active" : "inactive"}">${s.status === "accepted" ? "Angenommen" : "Abgelehnt"}</span></td>
|
|
<td class="text-secondary">${formatDateTime(s.reviewed_at)}</td>
|
|
</tr>`,
|
|
)
|
|
.join("")}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</details>`;
|
|
}
|
|
|
|
// Health-Check Ergebnisse
|
|
let healthHtml = "";
|
|
if (healthData && healthData.checks && healthData.checks.length > 0) {
|
|
// Filter anwenden
|
|
const allChecks = healthData.checks;
|
|
const filtered = applyHealthFilter(allChecks);
|
|
// Counters aus Backend-Aggregat (über Gesamt-Bestand, nicht nur Page)
|
|
const okCount = healthData.ok != null ? healthData.ok : healthData.checks.filter((c) => c.status === "ok").length;
|
|
const totalAll = healthData.total_checks != null ? healthData.total_checks : allChecks.length;
|
|
const hasMore = !!healthData.has_more;
|
|
|
|
// Org-Liste aus Backend-Liste (volle Liste, auch wenn Page kleiner ist)
|
|
const orgs = (healthData.all_orgs || []).map(o => ({ id: String(o.id), name: o.name || ("Org " + o.id) }));
|
|
|
|
const checkTypes = Array.from(new Set(allChecks.map(c => c.check_type)));
|
|
|
|
// Counter-Aufgliederung aus Backend-Breakdown (pro check_type x status).
|
|
// Beispiel: { reachability: {ok: 281, error: 3, warning: 1}, feed_validity: {...}, stale: {...}, duplicate: {...} }
|
|
const breakdown = healthData.breakdown || {};
|
|
function breakdownLine(statusKey, cssClass) {
|
|
const entries = Object.entries(breakdown)
|
|
.map(([ct, byStatus]) => [ct, byStatus[statusKey] || 0])
|
|
.filter(([_, n]) => n > 0)
|
|
.sort((a, b) => b[1] - a[1]);
|
|
if (entries.length === 0) return "";
|
|
const total = entries.reduce((s, [, n]) => s + n, 0);
|
|
const detail = entries.map(([ct, n]) => `${n} ${CHECK_TYPE_LABELS[ct] || ct}`).join(", ");
|
|
const label = statusKey === "error" ? "Fehler" : (statusKey === "warning" ? "Warnungen" : "OK");
|
|
return `<span class="${cssClass}" title="${esc(detail)}">${total} ${label}</span> <span class="text-secondary" style="font-size:11px;">(${esc(detail)})</span>`;
|
|
}
|
|
|
|
// Trend-Delta zum vorletzten Run (healthHistoryCache[1]). Index 0 ist
|
|
// typischerweise der aktuelle Stand, Index 1 der davor archivierte Run.
|
|
// Wenn weniger als 2 Runs in der History: kein Delta anzeigen.
|
|
const prevRun = (healthHistoryCache && healthHistoryCache.length > 1) ? healthHistoryCache[1] : null;
|
|
function deltaBadge(currentValue, prevValue, badIsUp) {
|
|
if (prevValue == null) return "";
|
|
const d = currentValue - prevValue;
|
|
if (d === 0) return ` <span class="text-secondary" style="font-size:11px;" title="unverändert seit letztem Run">(±0)</span>`;
|
|
const sign = d > 0 ? "+" : "";
|
|
// badIsUp=true: Anstieg = schlecht (rot), Abnahme = gut (grün). Umgekehrt für OK.
|
|
const cls = (badIsUp ? (d > 0) : (d < 0)) ? "text-danger" : "text-success";
|
|
return ` <span class="${cls}" style="font-size:11px;" title="seit letztem Run">(${sign}${d})</span>`;
|
|
}
|
|
const dErr = prevRun ? deltaBadge(healthData.errors, prevRun.errors, true) : "";
|
|
const dWarn = prevRun ? deltaBadge(healthData.warnings, prevRun.warnings, true) : "";
|
|
const dOk = prevRun ? deltaBadge(okCount, prevRun.ok, false) : "";
|
|
|
|
healthHtml = `
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h2>Health-Check Ergebnisse</h2>
|
|
<span class="text-secondary" style="font-size:13px;">
|
|
Letzter Check: ${healthData.last_check ? formatDateTime(healthData.last_check) : "Noch nie"}
|
|
|
|
|
${breakdownLine("error", "text-danger") || `<span class="text-danger">0 Fehler</span>`}${dErr}
|
|
${breakdownLine("warning", "text-warning") || `<span class="text-warning">0 Warnungen</span>`}${dWarn}
|
|
<span class="text-success">${okCount} OK</span>${dOk}
|
|
</span>
|
|
</div>
|
|
<div class="action-bar" style="border-bottom:1px solid var(--border, rgba(255,255,255,0.08));">
|
|
<div style="display:flex;gap:10px;flex-wrap:wrap;align-items:center;">
|
|
<select class="filter-select" onchange="setHealthFilter('status', this.value)">
|
|
<option value="issues" ${healthFilters.status === "issues" ? "selected" : ""}>Nur Probleme (Default)</option>
|
|
<option value="" ${healthFilters.status === "" ? "selected" : ""}>Alle Status</option>
|
|
<option value="error" ${healthFilters.status === "error" ? "selected" : ""}>Nur Fehler</option>
|
|
<option value="warning" ${healthFilters.status === "warning" ? "selected" : ""}>Nur Warnungen</option>
|
|
<option value="ok" ${healthFilters.status === "ok" ? "selected" : ""}>Nur OK</option>
|
|
</select>
|
|
<select class="filter-select" onchange="setHealthFilter('check_type', this.value)">
|
|
<option value="" ${healthFilters.check_type === "" ? "selected" : ""}>Alle Typen</option>
|
|
${checkTypes.map(ct => `<option value="${esc(ct)}" ${healthFilters.check_type === ct ? "selected" : ""}>${esc(CHECK_TYPE_LABELS[ct] || ct)}</option>`).join("")}
|
|
</select>
|
|
<select class="filter-select" onchange="setHealthFilter('org', this.value)">
|
|
<option value="all" ${healthFilters.org === "all" ? "selected" : ""}>Alle Quellen</option>
|
|
<option value="global" ${healthFilters.org === "global" ? "selected" : ""}>Nur Grundquellen</option>
|
|
${orgs.map(o => `<option value="${esc(o.id)}" ${healthFilters.org === o.id ? "selected" : ""}>Org: ${esc(o.name)}</option>`).join("")}
|
|
</select>
|
|
<span class="text-secondary" style="font-size:13px;">
|
|
${filtered.length} / ${allChecks.length} angezeigt${totalAll > allChecks.length ? ` (von ${totalAll} insgesamt)` : ''}
|
|
</span>
|
|
</div>
|
|
</div>`;
|
|
|
|
if (filtered.length > 0) {
|
|
healthHtml += `
|
|
<div class="table-wrap">
|
|
<table>
|
|
<thead>
|
|
<tr><th>Quelle</th><th>Typ</th><th>Org</th><th>Status</th><th>Details</th><th>Aktion</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
${filtered
|
|
.map(
|
|
(c) => {
|
|
// Domain + Sprache in Tooltip vom Quellnamen, statt eigene Spalten.
|
|
const tipParts = [];
|
|
if (c.domain) tipParts.push(c.domain);
|
|
if (c.language) tipParts.push(c.language);
|
|
const nameTip = tipParts.length ? ` title="${esc(tipParts.join(" · "))}"` : "";
|
|
return `
|
|
<tr>
|
|
<td${nameTip}>${esc(c.name)}</td>
|
|
<td>${CHECK_TYPE_LABELS[c.check_type] || c.check_type}</td>
|
|
<td class="text-secondary">${c.tenant_id == null ? '<span style="color:#94a3b8;">global</span>' : esc(c.org_name || ("Org " + c.tenant_id))}</td>
|
|
<td><span class="badge badge-health-${c.status}">${c.status === "error" ? "Fehler" : (c.status === "warning" ? "Warnung" : "OK")}</span></td>
|
|
<td class="text-secondary" style="max-width:300px;" title="${esc(c.message || "")}">${esc(c.message || "")}</td>
|
|
<td>${(
|
|
(c.status === "error" && c.check_type === "reachability") ||
|
|
(c.status === "warning" && c.check_type === "feed_validity")
|
|
) ? `<button class="btn btn-secondary btn-small" data-source-id="${c.source_id}" data-source-name="${esc(c.name)}" onclick="searchFix(this)" title="Lösung suchen">${LUCIDE_ICONS.search}</button>` : ""}</td>
|
|
</tr>`;
|
|
}
|
|
)
|
|
.join("")}
|
|
</tbody>
|
|
</table>
|
|
</div>`;
|
|
} else if (hasMore) {
|
|
// 0 Treffer in der Page, aber es gibt noch ungeladene Items.
|
|
// Hinweis, dass der Filter erst über die volle Liste sicher ist.
|
|
healthHtml += `
|
|
<div class="card-body text-muted">
|
|
Keine Treffer in den geladenen ${allChecks.length} von ${totalAll} Items mit dem aktuellen Filter.
|
|
<a href="#" onclick="event.preventDefault(); loadAllHealth()" style="text-decoration:underline;">
|
|
Alle ${totalAll} Health-Checks laden
|
|
</a> und Filter erneut anwenden.
|
|
</div>`;
|
|
} else {
|
|
healthHtml += '<div class="card-body text-muted">Keine Ergebnisse mit diesen Filtern.</div>';
|
|
}
|
|
|
|
// Footer mit Mehr-laden-Buttons, falls Backend has_more meldet
|
|
if (hasMore) {
|
|
const remaining = Math.max(0, totalAll - allChecks.length);
|
|
healthHtml += `
|
|
<div class="card-body" style="display:flex;justify-content:center;gap:10px;align-items:center;border-top:1px solid var(--border, rgba(255,255,255,0.08));">
|
|
<span class="text-secondary" style="font-size:13px;">${allChecks.length} von ${totalAll} geladen</span>
|
|
<button class="btn btn-secondary btn-small" onclick="loadMoreHealth()">+200 laden</button>
|
|
<button class="btn btn-secondary btn-small" onclick="loadAllHealth()">Alle ${remaining} weiteren laden</button>
|
|
</div>`;
|
|
}
|
|
|
|
healthHtml += "</div>";
|
|
} else {
|
|
healthHtml = `
|
|
<div class="card">
|
|
<div class="card-header"><h2>Health-Check Ergebnisse</h2></div>
|
|
<div class="card-body text-muted">Noch kein Health-Check durchgeführt.</div>
|
|
</div>`;
|
|
}
|
|
|
|
// History-View: letzte Runs. Kompakt: Total raus (= errors+warnings+ok),
|
|
// Spalten-Widths explizit, Zahlen zentriert, Run-ID gekürzt + leiser.
|
|
let runsHtml = "";
|
|
if (healthHistoryCache.length > 0) {
|
|
runsHtml = `
|
|
<div class="card" style="margin-bottom:16px;">
|
|
<div class="card-header"><h2>Verlauf der Health-Check-Runs</h2></div>
|
|
<div class="table-wrap">
|
|
<table style="table-layout:fixed; width:100%;">
|
|
<colgroup>
|
|
<col style="width:200px;">
|
|
<col style="width:160px;">
|
|
<col style="width:110px;">
|
|
<col style="width:130px;">
|
|
<col style="width:110px;">
|
|
</colgroup>
|
|
<thead>
|
|
<tr>
|
|
<th>Zeitpunkt</th>
|
|
<th>Run-ID</th>
|
|
<th style="text-align:center;">Fehler</th>
|
|
<th style="text-align:center;">Warnungen</th>
|
|
<th style="text-align:center;">OK</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
${healthHistoryCache.map(r => `
|
|
<tr>
|
|
<td>${formatDateTime(r.archived_at)}</td>
|
|
<td class="text-secondary" style="font-size:12px;" title="${esc(r.run_id)}"><code>${esc(String(r.run_id || "").slice(0, 12))}</code></td>
|
|
<td class="text-danger" style="text-align:center;">${r.errors || 0}</td>
|
|
<td class="text-warning" style="text-align:center;">${r.warnings || 0}</td>
|
|
<td class="text-success" style="text-align:center;">${r.ok || 0}</td>
|
|
</tr>`).join("")}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>`;
|
|
}
|
|
|
|
// Statt einer monolithischen Render: drei Sub-Panes, einer pro Sub-Tab.
|
|
paneSuggestions.innerHTML = suggestionsHtml;
|
|
paneChecks.innerHTML = healthHtml;
|
|
paneVerlauf.innerHTML = historyHtml + runsHtml;
|
|
|
|
// Tab-Label "Vorschläge" mit Counter der offenen Vorschläge anreichern.
|
|
const tabBtnSugg = document.querySelector('#healthSubTabs .nav-tab[data-healthtab="suggestions"]');
|
|
if (tabBtnSugg) {
|
|
const open = pendingSuggestions.length;
|
|
tabBtnSugg.textContent = open > 0 ? `Vorschläge (${open} offen)` : "Vorschläge";
|
|
}
|
|
}
|
|
|
|
// --- Vorschlag annehmen/ablehnen ---
|
|
async function handleSuggestion(id, accept) {
|
|
const action = accept ? "annehmen" : "ablehnen";
|
|
const suggestion = suggestionsCache.find((s) => s.id === id);
|
|
if (!suggestion) return;
|
|
|
|
const ok = await showConfirm("Vorschlag " + (action === "annehmen" ? "annehmen" : "ablehnen"), `Soll "${suggestion.title}" ${action}?`);
|
|
if (!ok) return;
|
|
|
|
try {
|
|
const result = await API.put("/api/sources/suggestions/" + id, { accept });
|
|
if (result.action) {
|
|
showToast("Ergebnis: " + result.action, "success");
|
|
}
|
|
loadHealthData(true);
|
|
// Grundquellen-Liste auch aktualisieren
|
|
if (typeof loadGlobalSources === "function") loadGlobalSources();
|
|
} catch (err) {
|
|
showToast("Fehler: " + err.message, "error");
|
|
}
|
|
}
|
|
|
|
// --- Health-Check manuell starten ---
|
|
async function runHealthCheck() {
|
|
const btn = document.getElementById("runHealthCheckBtn");
|
|
if (!btn) return;
|
|
btn.disabled = true;
|
|
|
|
// Fortschrittsanzeige erstellen
|
|
let progressEl = document.getElementById("healthProgress");
|
|
if (!progressEl) {
|
|
progressEl = document.createElement("div");
|
|
progressEl.id = "healthProgress";
|
|
progressEl.style.cssText = "display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:16px;font-size:13px;";
|
|
btn.parentElement.after(progressEl);
|
|
}
|
|
progressEl.style.display = "flex";
|
|
|
|
function updateProgress(data) {
|
|
if (data.phase === "check") {
|
|
const pct = data.total > 0 ? Math.round((data.checked / data.total) * 100) : 0;
|
|
const statusIcon = data.status === "error" ? "\u2717" : data.status === "warning" ? "\u26A0" : "\u2713";
|
|
btn.textContent = data.checked + "/" + data.total;
|
|
progressEl.innerHTML =
|
|
'<div style="flex:1;">' +
|
|
'<div style="display:flex;justify-content:space-between;margin-bottom:4px;">' +
|
|
'<span>' + (data.current ? statusIcon + " " + esc(data.current) : "Starte...") + '</span>' +
|
|
'<span class="text-secondary">' + pct + '%</span>' +
|
|
'</div>' +
|
|
'<div style="height:4px;background:var(--bg-tertiary);border-radius:2px;overflow:hidden;">' +
|
|
'<div style="height:100%;width:' + pct + '%;background:var(--accent);transition:width 0.3s;"></div>' +
|
|
'</div>' +
|
|
'</div>';
|
|
} else if (data.phase === "suggestions") {
|
|
progressEl.innerHTML = '<span class="text-secondary">Generiere Vorschl\u00e4ge...</span>';
|
|
} else if (data.phase === "done") {
|
|
progressEl.innerHTML = '<span class="text-success">' + data.checked + ' gepr\u00fcft, ' + data.issues + ' Probleme, ' + data.suggestions + ' Vorschl\u00e4ge</span>';
|
|
setTimeout(function() { progressEl.style.display = "none"; }, 5000);
|
|
}
|
|
}
|
|
|
|
try {
|
|
const headers = { "Content-Type": "application/json" };
|
|
if (API.token) headers["Authorization"] = "Bearer " + API.token;
|
|
|
|
const response = await fetch("/api/sources/health/run-stream", {
|
|
method: "POST",
|
|
headers: headers,
|
|
});
|
|
|
|
if (!response.ok) {
|
|
throw new Error("HTTP " + response.status);
|
|
}
|
|
|
|
const reader = response.body.getReader();
|
|
const decoder = new TextDecoder();
|
|
let buffer = "";
|
|
|
|
while (true) {
|
|
const { done, value } = await reader.read();
|
|
if (done) break;
|
|
buffer += decoder.decode(value, { stream: true });
|
|
|
|
const lines = buffer.split("\n");
|
|
buffer = lines.pop() || "";
|
|
|
|
for (const line of lines) {
|
|
if (line.startsWith("data: ")) {
|
|
try {
|
|
const data = JSON.parse(line.slice(6));
|
|
updateProgress(data);
|
|
} catch (_) {}
|
|
}
|
|
}
|
|
}
|
|
|
|
loadHealthData(true);
|
|
} catch (err) {
|
|
progressEl.innerHTML = '<span class="text-danger">Fehler: ' + esc(err.message) + '</span>';
|
|
} finally {
|
|
btn.disabled = false;
|
|
btn.textContent = "Jetzt pr\u00fcfen";
|
|
}
|
|
}
|
|
|
|
// --- Hilfsfunktionen ---
|
|
function formatDateTime(dateStr) {
|
|
if (!dateStr) return "-";
|
|
try {
|
|
const d = new Date(dateStr);
|
|
return d.toLocaleDateString("de-DE", {
|
|
day: "2-digit",
|
|
month: "2-digit",
|
|
year: "numeric",
|
|
hour: "2-digit",
|
|
minute: "2-digit",
|
|
});
|
|
} catch (_) {
|
|
return dateStr;
|
|
}
|
|
}
|
|
|
|
|
|
// --- Sonnet-Recherche für kaputte Quelle ---
|
|
async function searchFix(btn) {
|
|
const sourceId = btn.dataset.sourceId;
|
|
const sourceName = btn.dataset.sourceName;
|
|
const ok = await showConfirm("Lösung suchen", `Sonnet mit WebSearch nach einer Lösung für "${sourceName}" suchen lassen? Das kann einige Minuten dauern.`);
|
|
if (!ok) return;
|
|
|
|
btn.disabled = true;
|
|
btn.textContent = "Sucht...";
|
|
|
|
try {
|
|
const result = await API.post("/api/sources/health/search-fix/" + sourceId);
|
|
|
|
let msg = result.summary || "Keine Zusammenfassung";
|
|
if (result.solutions && result.solutions.length > 0) {
|
|
msg += "\n\nGefundene Lösungen als Vorschläge gespeichert.";
|
|
}
|
|
if (result.cost_usd) {
|
|
msg += `\n\nKosten: $${result.cost_usd.toFixed(2)}`;
|
|
}
|
|
showToast(msg, "info");
|
|
loadHealthData(true);
|
|
} catch (err) {
|
|
showToast("Fehler: " + err.message, "error");
|
|
} finally {
|
|
btn.disabled = false;
|
|
btn.textContent = "Lösung suchen";
|
|
}
|
|
}
|