feat: add public status page with component health monitoring and system metrics visualization
Add statuspage package with service, handler, and types for exposing platform health. Implement GET /api/v1/status endpoint returning operational status, component health (API, database, gateway runtime), and control plane summary counts. Add Service.Snapshot method querying database connectivity, user/device/gateway/service/policy counts, connected device count via handshake timestamps, and gateway runtime tel
This commit is contained in:
171
public-web/status.html
Normal file
171
public-web/status.html
Normal file
@@ -0,0 +1,171 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>NexaVPN Status</title>
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<link rel="stylesheet" href="/styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<main class="shell status-shell">
|
||||
<section class="hero status-hero">
|
||||
<img class="logo" src="/NexaVPN_Logo.png" alt="NexaVPN" />
|
||||
<p class="eyebrow">Public status</p>
|
||||
<div class="status-hero-head">
|
||||
<div>
|
||||
<h1>Platform status</h1>
|
||||
<p class="copy">Live health for the public API, database connectivity, and gateway runtime telemetry.</p>
|
||||
</div>
|
||||
<div id="status-pill" class="status-pill is-loading">Checking</div>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<a class="button secondary" href="/">Back to landing page</a>
|
||||
<a class="button secondary" href="/api/v1/status">Open raw JSON</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="status-grid">
|
||||
<section class="card">
|
||||
<div class="section-head">
|
||||
<div>
|
||||
<p class="eyebrow">Components</p>
|
||||
<h2>Service health</h2>
|
||||
</div>
|
||||
<p id="generated-at" class="meta">Waiting for first update</p>
|
||||
</div>
|
||||
<div id="component-list" class="component-list"></div>
|
||||
</section>
|
||||
|
||||
<section class="card">
|
||||
<div class="section-head">
|
||||
<div>
|
||||
<p class="eyebrow">Estate</p>
|
||||
<h2>Control plane snapshot</h2>
|
||||
</div>
|
||||
<p class="meta">Counts from the live NexaVPN backend.</p>
|
||||
</div>
|
||||
<div id="summary-grid" class="summary-grid"></div>
|
||||
</section>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
const componentList = document.getElementById("component-list");
|
||||
const summaryGrid = document.getElementById("summary-grid");
|
||||
const generatedAt = document.getElementById("generated-at");
|
||||
const statusPill = document.getElementById("status-pill");
|
||||
|
||||
const componentLabels = {
|
||||
api: "Public API",
|
||||
database: "Database",
|
||||
gateway: "Gateway runtime",
|
||||
};
|
||||
|
||||
const summaryLabels = {
|
||||
users: "Users",
|
||||
devices: "Devices",
|
||||
connected_devices: "Connected devices",
|
||||
gateways: "Gateways",
|
||||
active_gateways: "Active gateways",
|
||||
services: "Published services",
|
||||
policies: "Active policies",
|
||||
};
|
||||
|
||||
function titleForComponent(key) {
|
||||
return componentLabels[key] || key;
|
||||
}
|
||||
|
||||
function titleForSummary(key) {
|
||||
return summaryLabels[key] || key;
|
||||
}
|
||||
|
||||
function setOverallStatus(status) {
|
||||
statusPill.className = "status-pill";
|
||||
if (status === "operational") {
|
||||
statusPill.classList.add("is-operational");
|
||||
statusPill.textContent = "Operational";
|
||||
return;
|
||||
}
|
||||
statusPill.classList.add("is-degraded");
|
||||
statusPill.textContent = "Degraded";
|
||||
}
|
||||
|
||||
function renderComponents(components) {
|
||||
componentList.innerHTML = "";
|
||||
Object.entries(components || {}).forEach(([key, component]) => {
|
||||
const item = document.createElement("article");
|
||||
item.className = "component-item";
|
||||
|
||||
const badge = document.createElement("span");
|
||||
badge.className = `component-badge is-${component.status || "degraded"}`;
|
||||
badge.textContent = component.status || "unknown";
|
||||
|
||||
const body = document.createElement("div");
|
||||
body.className = "component-body";
|
||||
|
||||
const heading = document.createElement("div");
|
||||
heading.className = "component-heading";
|
||||
heading.textContent = titleForComponent(key);
|
||||
|
||||
const message = document.createElement("p");
|
||||
message.className = "component-message";
|
||||
message.textContent = component.message || "No additional details.";
|
||||
|
||||
body.appendChild(heading);
|
||||
body.appendChild(message);
|
||||
item.appendChild(body);
|
||||
item.appendChild(badge);
|
||||
componentList.appendChild(item);
|
||||
});
|
||||
}
|
||||
|
||||
function renderSummary(summary) {
|
||||
summaryGrid.innerHTML = "";
|
||||
Object.entries(summary || {}).forEach(([key, value]) => {
|
||||
const tile = document.createElement("article");
|
||||
tile.className = "summary-tile";
|
||||
|
||||
const label = document.createElement("p");
|
||||
label.className = "summary-label";
|
||||
label.textContent = titleForSummary(key);
|
||||
|
||||
const metric = document.createElement("strong");
|
||||
metric.className = "summary-value";
|
||||
metric.textContent = value;
|
||||
|
||||
tile.appendChild(label);
|
||||
tile.appendChild(metric);
|
||||
summaryGrid.appendChild(tile);
|
||||
});
|
||||
}
|
||||
|
||||
async function refreshStatus() {
|
||||
try {
|
||||
const response = await fetch("/api/v1/status", { cache: "no-store" });
|
||||
const payload = await response.json();
|
||||
setOverallStatus(payload.status);
|
||||
renderComponents(payload.components);
|
||||
renderSummary(payload.summary);
|
||||
generatedAt.textContent = `Updated ${new Date(payload.generated_at).toLocaleString()}`;
|
||||
} catch (_error) {
|
||||
setOverallStatus("degraded");
|
||||
componentList.innerHTML = `
|
||||
<article class="component-item">
|
||||
<div class="component-body">
|
||||
<div class="component-heading">Status page</div>
|
||||
<p class="component-message">The public status endpoint could not be reached.</p>
|
||||
</div>
|
||||
<span class="component-badge is-degraded">degraded</span>
|
||||
</article>
|
||||
`;
|
||||
summaryGrid.innerHTML = "";
|
||||
generatedAt.textContent = "Update failed";
|
||||
}
|
||||
}
|
||||
|
||||
refreshStatus();
|
||||
window.setInterval(refreshStatus, 15000);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user