feat(admin): apix-admin UI at admin.api-index.org
Deploy to Production / deploy (push) Failing after 47s
Deploy to Production / deploy (push) Failing after 47s
Internal maintainer dashboard: global stats, sandbox list with
tier-filter and pagination, sandbox drill-down with D3 world map,
tier-promotion form. API-key auth via HttpOnly cookie. Port 8084,
rolling a/b deploy alongside the existing service pairs.
- apix-common: AdminSandboxSummary, AdminSandboxListResponse, AdminStatsResponse DTOs
- apix-registry: AdminResource (4 endpoints), SandboxService.listAllSandboxes + getGlobalStats
- apix-registry: SandboxResource GET /{uuid}/dashboard endpoint (was missing — fixes portal 500)
- apix-portal: RegistryClient path corrected to /dashboard
- apix-admin: new Quarkus module — auth filter, registry REST client, 3 resources, 6 Qute templates, admin.js
- infra: Dockerfile.admin, docker-compose admin-a/b services, Caddyfile admin.api-index.org block
- scripts: deploy-bluegreen.sh extended for admin-a/b
Co-Authored-By: Mira Rehfeld <noreply@anthropic.com>
This commit is contained in:
Carsten Rehfeld
@@ -0,0 +1,22 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>APIX Admin — Error</title>
|
||||
<style>
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body { background: #0d1117; color: #c9d1d9; font-family: 'SF Mono','Consolas',monospace; display: flex; align-items: center; justify-content: center; min-height: 100vh; }
|
||||
.card { text-align: center; }
|
||||
.label { font-size: 0.75rem; color: #f85149; letter-spacing: 0.1em; margin-bottom: 0.5rem; }
|
||||
.msg { color: #8b949e; font-size: 0.9rem; margin-bottom: 1.5rem; }
|
||||
a { color: #58a6ff; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="card">
|
||||
<div class="label">ERROR</div>
|
||||
<div class="msg">{message}</div>
|
||||
<a href="/">← Back to dashboard</a>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,111 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>APIX Admin — Dashboard</title>
|
||||
<style>
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body { background: #0d1117; color: #c9d1d9; font-family: 'SF Mono','Consolas','Fira Code',monospace; font-size: 14px; }
|
||||
a { color: #58a6ff; text-decoration: none; }
|
||||
a:hover { text-decoration: underline; }
|
||||
nav {
|
||||
display: flex; align-items: center; gap: 1.5rem;
|
||||
padding: 0.75rem 1.5rem; border-bottom: 1px solid #21262d;
|
||||
background: #161b22;
|
||||
}
|
||||
.nav-logo { color: #8b949e; font-size: 0.75rem; }
|
||||
.nav-logo span { color: #e6edf3; font-weight: 600; font-size: 0.9rem; }
|
||||
.nav-link { font-size: 0.8rem; color: #8b949e; }
|
||||
.nav-link.active, .nav-link:hover { color: #e6edf3; }
|
||||
.nav-right { margin-left: auto; }
|
||||
|
||||
.stats-grid {
|
||||
display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
||||
gap: 1px; background: #21262d; border-bottom: 1px solid #21262d;
|
||||
}
|
||||
.stat { background: #0d1117; padding: 1.2rem 1.5rem; }
|
||||
.stat-label { font-size: 0.65rem; color: #484f58; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.3rem; }
|
||||
.stat-value { font-size: 1.8rem; color: #e6edf3; font-weight: 700; }
|
||||
.stat-sub { font-size: 0.7rem; color: #484f58; margin-top: 0.2rem; }
|
||||
|
||||
.layout { display: grid; grid-template-columns: 1fr 320px; gap: 1px; background: #21262d; }
|
||||
.panel { background: #0d1117; padding: 1.5rem; }
|
||||
.panel-title { font-size: 0.7rem; color: #484f58; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 1rem; }
|
||||
|
||||
#map-wrap { background: #060d18; border-bottom: 1px solid #21262d; }
|
||||
#world-map { display: block; width: 100%; }
|
||||
|
||||
.donut-wrap { display: flex; align-items: center; gap: 1.5rem; }
|
||||
#donut { width: 120px; height: 120px; flex-shrink: 0; }
|
||||
.tier-list { list-style: none; }
|
||||
.tier-list li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; margin-bottom: 0.4rem; }
|
||||
.tier-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
|
||||
|
||||
.footer { padding: 0.75rem 1.5rem; border-top: 1px solid #21262d; font-size: 0.7rem; color: #484f58; display: flex; justify-content: space-between; }
|
||||
|
||||
@keyframes star-glow {
|
||||
0%,100% { filter: drop-shadow(0 0 3px #ffd700) drop-shadow(0 0 6px #ffd70066); }
|
||||
50% { filter: drop-shadow(0 0 8px #ffd700) drop-shadow(0 0 18px #ffd700aa); }
|
||||
}
|
||||
.registrar-star { font-size: 12px; fill: #ffd700; dominant-baseline: central; text-anchor: middle; animation: star-glow 2.4s ease-in-out infinite; cursor: default; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<nav>
|
||||
<div class="nav-logo">APIX · <span>Admin</span></div>
|
||||
<a class="nav-link active" href="/">Dashboard</a>
|
||||
<a class="nav-link" href="/sandboxes">Sandboxes</a>
|
||||
<div class="nav-right"><a class="nav-link" href="/login/logout">Sign out</a></div>
|
||||
</nav>
|
||||
|
||||
<div class="stats-grid">
|
||||
<div class="stat">
|
||||
<div class="stat-label">Total Sandboxes</div>
|
||||
<div class="stat-value">{stats.totalSandboxes}</div>
|
||||
<div class="stat-sub">{stats.activeSandboxes} active · {stats.expiredSandboxes} expired</div>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<div class="stat-label">Services registered</div>
|
||||
<div class="stat-value">{stats.totalServices}</div>
|
||||
<div class="stat-sub">across all sandboxes</div>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<div class="stat-label">Total Requests</div>
|
||||
<div class="stat-value" id="req-fmt">—</div>
|
||||
<div class="stat-sub">cumulative</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="map-wrap"><svg id="world-map"></svg></div>
|
||||
|
||||
<div class="layout">
|
||||
<div class="panel">
|
||||
<div class="panel-title">Tier distribution</div>
|
||||
<div class="donut-wrap">
|
||||
<svg id="donut" viewBox="0 0 120 120"></svg>
|
||||
<ul class="tier-list" id="tier-legend"></ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<div class="panel-title">Quick links</div>
|
||||
<p style="font-size:0.8rem;color:#8b949e;line-height:1.8">
|
||||
<a href="/sandboxes">All sandboxes →</a><br>
|
||||
<a href="/sandboxes?tier=COMMUNITY">COMMUNITY tier →</a><br>
|
||||
<a href="/sandboxes?tier=FREE">FREE tier →</a><br>
|
||||
<a href="/sandboxes?tier=FOUNDER">FOUNDER tier →</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<span>APIX Admin · internal</span>
|
||||
<span id="refresh-ts"></span>
|
||||
</div>
|
||||
|
||||
<script>var __D = {statsJson.raw};</script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/topojson-client@3/dist/topojson-client.min.js"></script>
|
||||
<script src="/admin.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,136 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>{dashboard.name} · APIX Admin</title>
|
||||
<style>
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body { background: #0d1117; color: #c9d1d9; font-family: 'SF Mono','Consolas','Fira Code',monospace; font-size: 14px; }
|
||||
a { color: #58a6ff; text-decoration: none; }
|
||||
a:hover { text-decoration: underline; }
|
||||
nav {
|
||||
display: flex; align-items: center; gap: 1.5rem;
|
||||
padding: 0.75rem 1.5rem; border-bottom: 1px solid #21262d; background: #161b22;
|
||||
}
|
||||
.nav-logo { color: #8b949e; font-size: 0.75rem; }
|
||||
.nav-logo span { color: #e6edf3; font-weight: 600; font-size: 0.9rem; }
|
||||
.nav-link { font-size: 0.8rem; color: #8b949e; }
|
||||
.nav-link:hover { color: #e6edf3; }
|
||||
.nav-right { margin-left: auto; }
|
||||
|
||||
.header { padding: 1rem 1.5rem; border-bottom: 1px solid #21262d; display: flex; align-items: center; gap: 1rem; }
|
||||
.sb-name { font-size: 1rem; color: #e6edf3; font-weight: 600; }
|
||||
.tier-badge {
|
||||
background: #161b22; border: 1px solid #30363d;
|
||||
color: #8b949e; padding: 0.1rem 0.5rem; border-radius: 12px;
|
||||
font-size: 0.7rem; letter-spacing: 0.05em;
|
||||
}
|
||||
.sb-id { font-size: 0.75rem; color: #484f58; }
|
||||
|
||||
.stats-grid {
|
||||
display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
|
||||
gap: 1px; background: #21262d; border-bottom: 1px solid #21262d;
|
||||
}
|
||||
.stat { background: #0d1117; padding: 1rem 1.5rem; }
|
||||
.stat-label { font-size: 0.65rem; color: #484f58; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.3rem; }
|
||||
.stat-value { font-size: 1.4rem; color: #e6edf3; font-weight: 600; }
|
||||
.stat-sub { font-size: 0.7rem; color: #484f58; margin-top: 0.2rem; }
|
||||
|
||||
#map-wrap { background: #060d18; }
|
||||
#world-map { display: block; width: 100%; }
|
||||
|
||||
.actions { padding: 1.5rem; border-top: 1px solid #21262d; display: flex; gap: 1rem; flex-wrap: wrap; }
|
||||
.actions-title { width: 100%; font-size: 0.7rem; color: #484f58; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.5rem; }
|
||||
form { display: flex; gap: 0.5rem; align-items: center; }
|
||||
select, button {
|
||||
background: #161b22; border: 1px solid #30363d; color: #c9d1d9;
|
||||
font-family: inherit; font-size: 0.8rem;
|
||||
border-radius: 4px; padding: 0.4rem 0.7rem; cursor: pointer;
|
||||
}
|
||||
select:focus, button:focus { outline: none; border-color: #58a6ff; }
|
||||
button.promote { background: #238636; border-color: #238636; color: #fff; font-weight: 600; }
|
||||
button.promote:hover { background: #2ea043; }
|
||||
|
||||
.footer { padding: 0.75rem 1.5rem; border-top: 1px solid #21262d; font-size: 0.7rem; color: #484f58; }
|
||||
|
||||
@keyframes star-glow {
|
||||
0%,100% { filter: drop-shadow(0 0 3px #ffd700) drop-shadow(0 0 6px #ffd70066); }
|
||||
50% { filter: drop-shadow(0 0 8px #ffd700) drop-shadow(0 0 18px #ffd700aa); }
|
||||
}
|
||||
.registrar-star { font-size: 14px; fill: #ffd700; dominant-baseline: central; text-anchor: middle; animation: star-glow 2.4s ease-in-out infinite; }
|
||||
@keyframes blink-pulse {
|
||||
0% { opacity:0; r:2; } 25% { opacity:0.9; r:5; } 65% { opacity:0.4; r:4; } 100% { opacity:0; r:2; }
|
||||
}
|
||||
.agent-blink { fill: #3d8bfd; opacity:0; animation: blink-pulse 2.8s ease-in-out infinite; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<nav>
|
||||
<div class="nav-logo">APIX · <span>Admin</span></div>
|
||||
<a class="nav-link" href="/">Dashboard</a>
|
||||
<a class="nav-link" href="/sandboxes">Sandboxes</a>
|
||||
<div class="nav-right"><a class="nav-link" href="/login/logout">Sign out</a></div>
|
||||
</nav>
|
||||
|
||||
<div class="header">
|
||||
<span class="sb-name">{dashboard.name}</span>
|
||||
<span class="tier-badge">{dashboard.tier}</span>
|
||||
<span class="sb-id">{dashboard.sandboxId}</span>
|
||||
</div>
|
||||
|
||||
<div class="stats-grid">
|
||||
<div class="stat">
|
||||
<div class="stat-label">Services</div>
|
||||
<div class="stat-value">{#if dashboard.usage.get('SERVICE_REGISTERED') != null}{dashboard.usage.get('SERVICE_REGISTERED')}{#else}0{/if}</div>
|
||||
<div class="stat-sub">of {#if dashboard.maxServices != null}{dashboard.maxServices}{#else}∞{/if} allowed</div>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<div class="stat-label">Searches</div>
|
||||
<div class="stat-value">{#if dashboard.usage.get('SERVICE_SEARCHED') != null}{dashboard.usage.get('SERVICE_SEARCHED')}{#else}0{/if}</div>
|
||||
<div class="stat-sub">capability discovery calls</div>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<div class="stat-label">Rate limit</div>
|
||||
<div class="stat-value">{dashboard.ratePerMinute}</div>
|
||||
<div class="stat-sub">req / min</div>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<div class="stat-label">Expires</div>
|
||||
<div class="stat-value" id="expires-val">—</div>
|
||||
<div class="stat-sub" id="expires-raw">{dashboard.expiresAt}</div>
|
||||
</div>
|
||||
{#if dashboard.registrarLocation != null}
|
||||
<div class="stat">
|
||||
<div class="stat-label">Location</div>
|
||||
<div class="stat-value" style="font-size:1rem">{dashboard.registrarLocation}</div>
|
||||
<div class="stat-sub">owner-declared</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div id="map-wrap"><svg id="world-map"></svg></div>
|
||||
|
||||
<div class="actions">
|
||||
<div class="actions-title">Admin actions</div>
|
||||
<form method="POST" action="/sandboxes/{dashboard.sandboxId}/promote">
|
||||
<select name="tier">
|
||||
<option value="FREE">FREE</option>
|
||||
<option value="STANDARD">STANDARD</option>
|
||||
<option value="PROFESSIONAL">PROFESSIONAL</option>
|
||||
<option value="COMMUNITY">COMMUNITY</option>
|
||||
<option value="FOUNDER">FOUNDER</option>
|
||||
<option value="DEMO">DEMO</option>
|
||||
</select>
|
||||
<button type="submit" class="promote">Promote tier</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="footer">sandbox id: {dashboard.sandboxId} · created {dashboard.createdAt}</div>
|
||||
|
||||
<script>var __D = {dataJson.raw};</script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/topojson-client@3/dist/topojson-client.min.js"></script>
|
||||
<script src="/admin.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,60 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>APIX Admin — Login</title>
|
||||
<style>
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body {
|
||||
background: #0d1117; color: #c9d1d9;
|
||||
font-family: 'SF Mono', 'Consolas', 'Fira Code', monospace;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
min-height: 100vh;
|
||||
}
|
||||
.card {
|
||||
width: 380px;
|
||||
background: #161b22;
|
||||
border: 1px solid #30363d;
|
||||
border-radius: 6px;
|
||||
padding: 2rem;
|
||||
}
|
||||
.logo { color: #8b949e; font-size: 0.75rem; letter-spacing: 0.1em; margin-bottom: 1.5rem; }
|
||||
.logo span { color: #e6edf3; font-size: 1rem; font-weight: 600; }
|
||||
label { display: block; font-size: 0.75rem; color: #8b949e; margin-bottom: 0.4rem; letter-spacing: 0.04em; }
|
||||
input[type=password] {
|
||||
width: 100%; padding: 0.6rem 0.8rem;
|
||||
background: #0d1117; border: 1px solid #30363d;
|
||||
border-radius: 4px; color: #e6edf3;
|
||||
font-family: inherit; font-size: 0.9rem;
|
||||
outline: none; margin-bottom: 1rem;
|
||||
}
|
||||
input[type=password]:focus { border-color: #58a6ff; }
|
||||
button {
|
||||
width: 100%; padding: 0.65rem;
|
||||
background: #238636; border: none;
|
||||
border-radius: 4px; color: #fff;
|
||||
font-family: inherit; font-size: 0.9rem;
|
||||
cursor: pointer; font-weight: 600;
|
||||
}
|
||||
button:hover { background: #2ea043; }
|
||||
.error {
|
||||
background: #2d1b1b; border: 1px solid #f85149;
|
||||
color: #f85149; border-radius: 4px;
|
||||
padding: 0.5rem 0.8rem; font-size: 0.8rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="card">
|
||||
<div class="logo">APIX · <span>Admin</span></div>
|
||||
{#if invalid}<div class="error">Invalid admin key. Try again.</div>{/if}
|
||||
<form method="POST" action="/login">
|
||||
<label>Admin API Key</label>
|
||||
<input type="password" name="key" autofocus autocomplete="current-password" placeholder="apix_...">
|
||||
<button type="submit">Sign in</button>
|
||||
</form>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,7 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head><meta charset="UTF-8"><title>Error · APIX Admin</title>
|
||||
<style>* { box-sizing:border-box;margin:0;padding:0; } body { background:#0d1117;color:#c9d1d9;font-family:monospace;display:flex;align-items:center;justify-content:center;min-height:100vh; } .card { text-align:center; } .label { color:#f85149;font-size:.75rem;margin-bottom:.5rem; } .msg { color:#8b949e;margin-bottom:1.5rem; } a { color:#58a6ff; }</style>
|
||||
</head>
|
||||
<body><div class="card"><div class="label">ERROR</div><div class="msg">{message}</div><a href="/sandboxes">← Back to list</a></div></body>
|
||||
</html>
|
||||
@@ -0,0 +1,124 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Sandboxes · APIX Admin</title>
|
||||
<style>
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body { background: #0d1117; color: #c9d1d9; font-family: 'SF Mono','Consolas','Fira Code',monospace; font-size: 13px; }
|
||||
a { color: #58a6ff; text-decoration: none; }
|
||||
a:hover { text-decoration: underline; }
|
||||
nav {
|
||||
display: flex; align-items: center; gap: 1.5rem;
|
||||
padding: 0.75rem 1.5rem; border-bottom: 1px solid #21262d; background: #161b22;
|
||||
}
|
||||
.nav-logo { color: #8b949e; font-size: 0.75rem; }
|
||||
.nav-logo span { color: #e6edf3; font-weight: 600; font-size: 0.9rem; }
|
||||
.nav-link { font-size: 0.8rem; color: #8b949e; }
|
||||
.nav-link.active, .nav-link:hover { color: #e6edf3; }
|
||||
.nav-right { margin-left: auto; }
|
||||
|
||||
.toolbar {
|
||||
padding: 0.75rem 1.5rem; border-bottom: 1px solid #21262d;
|
||||
display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap;
|
||||
}
|
||||
.toolbar-label { font-size: 0.7rem; color: #484f58; }
|
||||
.filter-link {
|
||||
font-size: 0.75rem; color: #8b949e;
|
||||
padding: 0.2rem 0.6rem; border: 1px solid #30363d; border-radius: 12px;
|
||||
}
|
||||
.filter-link:hover, .filter-link.active { color: #e6edf3; border-color: #58a6ff; }
|
||||
.count { margin-left: auto; font-size: 0.75rem; color: #484f58; }
|
||||
|
||||
table { width: 100%; border-collapse: collapse; }
|
||||
th {
|
||||
text-align: left; padding: 0.6rem 1.5rem;
|
||||
font-size: 0.65rem; color: #484f58; text-transform: uppercase; letter-spacing: 0.06em;
|
||||
border-bottom: 1px solid #21262d; background: #161b22;
|
||||
}
|
||||
td { padding: 0.55rem 1.5rem; border-bottom: 1px solid #161b22; vertical-align: middle; }
|
||||
tr:hover td { background: #161b22; }
|
||||
|
||||
.tier-badge {
|
||||
background: #0d1117; border: 1px solid #30363d;
|
||||
color: #8b949e; padding: 0.1rem 0.4rem; border-radius: 10px;
|
||||
font-size: 0.65rem; letter-spacing: 0.04em;
|
||||
}
|
||||
.tier-COMMUNITY { border-color: #1f6feb; color: #58a6ff; }
|
||||
.tier-FOUNDER { border-color: #9e6a03; color: #e3b341; }
|
||||
.tier-DEMO { border-color: #388bfd; color: #79c0ff; }
|
||||
|
||||
.expired { color: #f85149; }
|
||||
.ok { color: #3fb950; }
|
||||
|
||||
.pagination { padding: 1rem 1.5rem; display: flex; gap: 1rem; align-items: center; border-top: 1px solid #21262d; }
|
||||
.page-link { font-size: 0.8rem; color: #58a6ff; }
|
||||
.page-info { font-size: 0.75rem; color: #484f58; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<nav>
|
||||
<div class="nav-logo">APIX · <span>Admin</span></div>
|
||||
<a class="nav-link" href="/">Dashboard</a>
|
||||
<a class="nav-link active" href="/sandboxes">Sandboxes</a>
|
||||
<div class="nav-right"><a class="nav-link" href="/login/logout">Sign out</a></div>
|
||||
</nav>
|
||||
|
||||
<div class="toolbar">
|
||||
<span class="toolbar-label">Filter:</span>
|
||||
<a class="filter-link {#if tier == ''}active{/if}" href="/sandboxes">All</a>
|
||||
<a class="filter-link {#if tier == 'FREE'}active{/if}" href="/sandboxes?tier=FREE">FREE</a>
|
||||
<a class="filter-link {#if tier == 'COMMUNITY'}active{/if}" href="/sandboxes?tier=COMMUNITY">COMMUNITY</a>
|
||||
<a class="filter-link {#if tier == 'FOUNDER'}active{/if}" href="/sandboxes?tier=FOUNDER">FOUNDER</a>
|
||||
<a class="filter-link {#if tier == 'DEMO'}active{/if}" href="/sandboxes?tier=DEMO">DEMO</a>
|
||||
<span class="count">{result.total} total</span>
|
||||
</div>
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Tier</th>
|
||||
<th>Services</th>
|
||||
<th>Requests</th>
|
||||
<th>Location</th>
|
||||
<th>Expires</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#for sb in result.sandboxes}
|
||||
<tr>
|
||||
<td><a href="/sandbox/{sb.sandboxId}">{sb.name}</a>
|
||||
<div style="font-size:0.65rem;color:#484f58;margin-top:2px">{sb.sandboxId}</div>
|
||||
</td>
|
||||
<td><span class="tier-badge tier-{sb.tier}">{sb.tier}</span></td>
|
||||
<td>{sb.serviceCount}</td>
|
||||
<td>{sb.totalRequests}</td>
|
||||
<td>{#if sb.location != null}{sb.location}{#else}<span style="color:#484f58">—</span>{/if}</td>
|
||||
<td class="{#if sb.expired}expired{#else}ok{/if}" data-expires="{sb.expiresAt}">{sb.expiresAt}</td>
|
||||
</tr>
|
||||
{/for}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="pagination">
|
||||
{#if page > 0}
|
||||
<a class="page-link" href="/sandboxes?page={page - 1}&size={size}&tier={tier}">← Previous</a>
|
||||
{/if}
|
||||
<span class="page-info">Page {page + 1} · {result.sandboxes.size} of {result.total}</span>
|
||||
{#if (page + 1) * size < result.total}
|
||||
<a class="page-link" href="/sandboxes?page={page + 1}&size={size}&tier={tier}">Next →</a>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.querySelectorAll('[data-expires]').forEach(td => {
|
||||
const d = new Date(td.dataset.expires);
|
||||
const now = new Date();
|
||||
const days = Math.round((d - now) / 86400000);
|
||||
td.textContent = days < 0 ? `expired ${-days}d ago` : `in ${days}d`;
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user