nessi
ff7eff8242
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
172 lines
5.8 KiB
HTML
172 lines
5.8 KiB
HTML
<!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>
|