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:
@@ -17,7 +17,8 @@
|
||||
Use the desktop client to sign in, provision this device, and connect to your private network.
|
||||
</p>
|
||||
<div class="actions">
|
||||
<a class="button primary" href="/api/v1/healthz">API health</a>
|
||||
<a class="button primary" href="/status">System status</a>
|
||||
<a class="button secondary" href="/api/v1/status">Raw API status</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
@@ -12,6 +12,10 @@ server {
|
||||
proxy_set_header X-Forwarded-Proto $scheme;
|
||||
}
|
||||
|
||||
location = /status {
|
||||
try_files /status.html =404;
|
||||
}
|
||||
|
||||
location / {
|
||||
try_files $uri /index.html;
|
||||
}
|
||||
|
||||
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>
|
||||
@@ -118,9 +118,165 @@ h1 {
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.status-shell {
|
||||
width: min(1120px, 100%);
|
||||
}
|
||||
|
||||
.status-hero {
|
||||
gap: 22px;
|
||||
}
|
||||
|
||||
.status-hero-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.status-pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 144px;
|
||||
padding: 14px 20px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid var(--line);
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
color: var(--text);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.status-pill.is-loading {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.status-pill.is-operational {
|
||||
background: linear-gradient(135deg, rgba(116, 224, 184, 0.2), rgba(31, 182, 122, 0.18));
|
||||
border-color: rgba(116, 224, 184, 0.28);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.status-pill.is-degraded {
|
||||
background: linear-gradient(135deg, rgba(255, 164, 121, 0.18), rgba(255, 96, 96, 0.12));
|
||||
border-color: rgba(255, 140, 140, 0.24);
|
||||
color: #ffc0c0;
|
||||
}
|
||||
|
||||
.status-grid {
|
||||
display: grid;
|
||||
gap: 24px;
|
||||
grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
|
||||
}
|
||||
|
||||
.section-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: 16px;
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
|
||||
.section-head h2 {
|
||||
font-size: 1.45rem;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.meta {
|
||||
color: var(--muted);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.component-list,
|
||||
.summary-grid {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.component-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: 16px;
|
||||
padding: 18px 20px;
|
||||
border-radius: 20px;
|
||||
border: 1px solid var(--line);
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
}
|
||||
|
||||
.component-body {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.component-heading {
|
||||
font-size: 1.05rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.component-message {
|
||||
color: var(--muted);
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.component-badge {
|
||||
flex-shrink: 0;
|
||||
padding: 8px 12px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid var(--line);
|
||||
font-size: 0.82rem;
|
||||
font-weight: 800;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
|
||||
.component-badge.is-operational {
|
||||
color: var(--accent);
|
||||
border-color: rgba(116, 224, 184, 0.22);
|
||||
background: rgba(116, 224, 184, 0.08);
|
||||
}
|
||||
|
||||
.component-badge.is-degraded {
|
||||
color: #ffc0c0;
|
||||
border-color: rgba(255, 140, 140, 0.22);
|
||||
background: rgba(255, 128, 128, 0.08);
|
||||
}
|
||||
|
||||
.summary-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.summary-tile {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
padding: 18px 20px;
|
||||
border-radius: 20px;
|
||||
border: 1px solid var(--line);
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
}
|
||||
|
||||
.summary-label {
|
||||
color: var(--muted);
|
||||
font-size: 0.92rem;
|
||||
}
|
||||
|
||||
.summary-value {
|
||||
font-size: 2rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.hero,
|
||||
.card {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.status-hero-head,
|
||||
.section-head {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.status-grid,
|
||||
.summary-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user