119 lines
4.9 KiB
HTML
119 lines
4.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Fleet Health Dashboard — Lazarus Pit</title>
|
|
<style>
|
|
body { font-family: system-ui, sans-serif; background: #0b0c10; color: #c5c6c7; margin: 0; padding: 2rem; }
|
|
h1 { color: #66fcf1; margin-bottom: 0.5rem; }
|
|
.subtitle { color: #45a29e; margin-bottom: 2rem; }
|
|
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
|
|
.card { background: #1f2833; border-radius: 8px; padding: 1rem; border-left: 4px solid #66fcf1; }
|
|
.card.dead { border-left-color: #ff4444; }
|
|
.card.warning { border-left-color: #ffaa00; }
|
|
.card.unknown { border-left-color: #888; }
|
|
.name { font-size: 1.2rem; font-weight: bold; color: #fff; }
|
|
.status { font-size: 0.9rem; margin-top: 0.5rem; }
|
|
.metric { display: flex; justify-content: space-between; margin-top: 0.3rem; font-size: 0.85rem; }
|
|
.timestamp { color: #888; font-size: 0.75rem; margin-top: 0.8rem; }
|
|
#alerts { margin-top: 2rem; background: #1f2833; padding: 1rem; border-radius: 8px; }
|
|
.alert { color: #ff4444; font-size: 0.9rem; margin: 0.3rem 0; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>⚡ Fleet Health Dashboard</h1>
|
|
<div class="subtitle">Powered by the Lazarus Pit — Live Registry</div>
|
|
<div class="grid" id="fleetGrid"></div>
|
|
<div id="alerts"></div>
|
|
|
|
<script>
|
|
const REGISTRY_URL = "https://forge.alexanderwhitestone.com/Timmy_Foundation/the-nexus/raw/branch/main/lazarus-registry.yaml";
|
|
|
|
async function fetchRegistry() {
|
|
try {
|
|
const res = await fetch(REGISTRY_URL);
|
|
const text = await res.text();
|
|
// Very lightweight YAML parser for the subset we need
|
|
const data = parseSimpleYaml(text);
|
|
render(data);
|
|
} catch (e) {
|
|
document.getElementById("fleetGrid").innerHTML = `<div class="card dead">Failed to load registry: ${e.message}</div>`;
|
|
}
|
|
}
|
|
|
|
function parseSimpleYaml(text) {
|
|
// Enough to extract fleet blocks and provider matrix
|
|
const lines = text.split("\n");
|
|
const obj = { fleet: {}, provider_health_matrix: {} };
|
|
let section = null;
|
|
let agent = null;
|
|
let depth = 0;
|
|
lines.forEach(line => {
|
|
const trimmed = line.trim();
|
|
if (trimmed === "fleet:") { section = "fleet"; return; }
|
|
if (trimmed === "provider_health_matrix:") { section = "providers"; return; }
|
|
if (section === "fleet" && !trimmed.startsWith("-") && trimmed.endsWith(":") && !trimmed.includes(":")) {
|
|
agent = trimmed.replace(":", "");
|
|
obj.fleet[agent] = {};
|
|
return;
|
|
}
|
|
if (section === "fleet" && agent && trimmed.includes(": ")) {
|
|
const [k, ...v] = trimmed.split(": ");
|
|
obj.fleet[agent][k.trim()] = v.join(": ").trim();
|
|
}
|
|
if (section === "providers" && trimmed.includes(": ")) {
|
|
const [k, ...v] = trimmed.split(": ");
|
|
if (!obj.provider_health_matrix[k.trim()]) obj.provider_health_matrix[k.trim()] = {};
|
|
obj.provider_health_matrix[k.trim()]["status"] = v.join(": ").trim();
|
|
}
|
|
});
|
|
return obj;
|
|
}
|
|
|
|
function render(data) {
|
|
const grid = document.getElementById("fleetGrid");
|
|
const alerts = document.getElementById("alerts");
|
|
grid.innerHTML = "";
|
|
alerts.innerHTML = "";
|
|
|
|
const fleet = data.fleet || {};
|
|
const providers = data.provider_health_matrix || {};
|
|
let alertHtml = "";
|
|
|
|
Object.entries(fleet).forEach(([name, spec]) => {
|
|
const provider = spec.primary ? JSON.parse(JSON.stringify(spec.primary).replace(/'/g, '"')) : {};
|
|
const provName = provider.provider || "unknown";
|
|
const provStatus = (providers[provName] || {}).status || "unknown";
|
|
const host = spec.host || "unknown";
|
|
const autoRestart = spec.auto_restart === "true" || spec.auto_restart === true;
|
|
|
|
let cardClass = "card";
|
|
if (provStatus === "dead" || provStatus === "degraded") cardClass += " warning";
|
|
if (host === "UNKNOWN") cardClass += " unknown";
|
|
|
|
const html = `
|
|
<div class="${cardClass}">
|
|
<div class="name">${name}</div>
|
|
<div class="status">Role: ${spec.role || "—"}</div>
|
|
<div class="metric"><span>Host</span><span>${host}</span></div>
|
|
<div class="metric"><span>Provider</span><span>${provName}</span></div>
|
|
<div class="metric"><span>Provider Health</span><span style="color:${provStatus==='healthy'?'#66fcf1':provStatus==='degraded'?'#ffaa00':'#ff4444'}">${provStatus}</span></div>
|
|
<div class="metric"><span>Auto-Restart</span><span>${autoRestart ? "ON" : "OFF"}</span></div>
|
|
<div class="timestamp">Registry updated: ${data.meta ? data.meta.updated_at : "—"}</div>
|
|
</div>
|
|
`;
|
|
grid.innerHTML += html;
|
|
|
|
if (provStatus === "dead") alertHtml += `<div class="alert">🚨 ${name}: primary provider ${provName} is DEAD</div>`;
|
|
if (host === "UNKNOWN") alertHtml += `<div class="alert">⚠️ ${name}: host unknown — cannot monitor or resurrect</div>`;
|
|
});
|
|
|
|
alerts.innerHTML = alertHtml || `<div style="color:#66fcf1">All agents within known parameters.</div>`;
|
|
}
|
|
|
|
fetchRegistry();
|
|
setInterval(fetchRegistry, 60000);
|
|
</script>
|
|
</body>
|
|
</html>
|