feat(station): add posimai-station fullscreen kiosk dashboard
Real-time system monitor for Ubuntu PC HDMI display. Polls /api/health every 30s for CPU/memory/uptime metrics, checks all service endpoints, Aurora design with JetBrains Mono clock. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
6c138981a7
commit
7ca153546d
|
|
@ -0,0 +1,687 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="ja">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="robots" content="noindex, nofollow">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="color-scheme" content="dark">
|
||||
<title>posimai-station</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@300;400;500&display=swap" rel="stylesheet">
|
||||
<script src="https://unpkg.com/lucide@0.344.0/dist/umd/lucide.min.js" integrity="sha384-JSBb8BPlCp7GjHPXAy+RrDJ7T8YWLF5Gx8FvyYME4Jx0G7E5H7d2x9K4N6Q8P2" crossorigin="anonymous"></script>
|
||||
|
||||
<style>
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
:root {
|
||||
--bg: #0C1221;
|
||||
--surface: #131926;
|
||||
--surface2: #1A2235;
|
||||
--border: rgba(255,255,255,0.07);
|
||||
--text: #F1F5F9;
|
||||
--text2: #94A3B8;
|
||||
--text3: #64748B;
|
||||
--accent: #22D3EE;
|
||||
--violet: #A78BFA;
|
||||
--ok: #4ADE80;
|
||||
--warn: #FB923C;
|
||||
--crit: #F87171;
|
||||
}
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font-family: 'Inter', sans-serif;
|
||||
overflow: hidden;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
/* Aurora */
|
||||
.aurora {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
overflow: hidden;
|
||||
z-index: 0;
|
||||
}
|
||||
.aurora-blob {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
will-change: transform;
|
||||
}
|
||||
.aurora-blob-1 {
|
||||
width: 900px; height: 600px;
|
||||
background: radial-gradient(ellipse, rgba(34,211,238,0.13) 0%, transparent 68%);
|
||||
top: -150px; right: -150px;
|
||||
filter: blur(100px);
|
||||
animation: aurora-drift-1 22s ease-in-out infinite alternate;
|
||||
}
|
||||
.aurora-blob-2 {
|
||||
width: 700px; height: 500px;
|
||||
background: radial-gradient(ellipse, rgba(167,139,250,0.10) 0%, transparent 68%);
|
||||
bottom: -120px; left: -100px;
|
||||
filter: blur(90px);
|
||||
animation: aurora-drift-2 28s ease-in-out infinite alternate;
|
||||
}
|
||||
.aurora-blob-3 {
|
||||
width: 500px; height: 400px;
|
||||
background: radial-gradient(ellipse, rgba(34,211,238,0.07) 0%, transparent 68%);
|
||||
top: 40%; right: 20%;
|
||||
filter: blur(80px);
|
||||
animation: aurora-drift-3 18s ease-in-out infinite alternate;
|
||||
}
|
||||
@keyframes aurora-drift-1 {
|
||||
from { transform: translate(0, 0) scale(1); }
|
||||
to { transform: translate(-80px, 60px) scale(1.1); }
|
||||
}
|
||||
@keyframes aurora-drift-2 {
|
||||
from { transform: translate(0, 0) scale(1); }
|
||||
to { transform: translate(60px, -40px) scale(1.08); }
|
||||
}
|
||||
@keyframes aurora-drift-3 {
|
||||
from { transform: translate(0, 0) scale(1); }
|
||||
to { transform: translate(-40px, 50px) scale(0.95); }
|
||||
}
|
||||
|
||||
/* Layout */
|
||||
#app {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
height: 100vh;
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr auto;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 0;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
/* Top row */
|
||||
#top {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
align-items: center;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
#hostname-area {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
#hostname {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: var(--text3);
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
#status-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: var(--text3);
|
||||
flex-shrink: 0;
|
||||
transition: background 0.4s;
|
||||
}
|
||||
#status-dot.ok { background: var(--ok); box-shadow: 0 0 8px var(--ok); animation: pulse-dot 2.4s ease-in-out infinite; }
|
||||
#status-dot.warn { background: var(--warn); box-shadow: 0 0 8px var(--warn); }
|
||||
#status-dot.crit { background: var(--crit); box-shadow: 0 0 8px var(--crit); animation: pulse-dot 1s ease-in-out infinite; }
|
||||
#status-dot.off { background: var(--text3); box-shadow: none; }
|
||||
@keyframes pulse-dot {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.4; }
|
||||
}
|
||||
|
||||
/* Clock */
|
||||
#clock-area { text-align: center; }
|
||||
#clock {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: clamp(52px, 6vw, 88px);
|
||||
font-weight: 300;
|
||||
letter-spacing: -0.03em;
|
||||
color: var(--text);
|
||||
line-height: 1;
|
||||
}
|
||||
#date {
|
||||
font-size: 13px;
|
||||
color: var(--text3);
|
||||
margin-top: 4px;
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
|
||||
/* Last checked */
|
||||
#last-checked {
|
||||
text-align: right;
|
||||
font-size: 12px;
|
||||
color: var(--text3);
|
||||
}
|
||||
|
||||
/* Middle: metrics + services */
|
||||
#middle {
|
||||
display: grid;
|
||||
grid-template-columns: 340px 1fr;
|
||||
gap: 16px;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
/* System metrics panel */
|
||||
#metrics-panel {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 16px;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 18px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.panel-title {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: var(--text3);
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.panel-title svg { width: 14px; height: 14px; }
|
||||
|
||||
/* Metric bars */
|
||||
.metric-item { display: flex; flex-direction: column; gap: 6px; }
|
||||
.metric-header-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
}
|
||||
.metric-label { font-size: 12px; color: var(--text2); }
|
||||
.metric-val {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: var(--text);
|
||||
}
|
||||
.bar-track {
|
||||
height: 6px;
|
||||
border-radius: 3px;
|
||||
background: rgba(255,255,255,0.06);
|
||||
overflow: hidden;
|
||||
}
|
||||
.bar-fill {
|
||||
height: 100%;
|
||||
border-radius: 3px;
|
||||
background: var(--accent);
|
||||
transition: width 0.8s cubic-bezier(0.4,0,0.2,1), background 0.4s;
|
||||
}
|
||||
.bar-fill.warn { background: var(--warn); }
|
||||
.bar-fill.crit { background: var(--crit); }
|
||||
|
||||
/* Stat grid */
|
||||
.stat-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 10px;
|
||||
}
|
||||
.stat-card {
|
||||
background: var(--surface2);
|
||||
border-radius: 10px;
|
||||
padding: 12px;
|
||||
}
|
||||
.stat-label { font-size: 11px; color: var(--text3); margin-bottom: 4px; }
|
||||
.stat-val {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
color: var(--text);
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
/* Open link */
|
||||
.open-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
padding: 9px;
|
||||
background: rgba(34,211,238,0.08);
|
||||
border: 1px solid rgba(34,211,238,0.2);
|
||||
border-radius: 10px;
|
||||
color: var(--accent);
|
||||
text-decoration: none;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
transition: background 0.2s, border-color 0.2s;
|
||||
margin-top: auto;
|
||||
}
|
||||
.open-btn:hover { background: rgba(34,211,238,0.14); border-color: rgba(34,211,238,0.35); }
|
||||
.open-btn svg { width: 14px; height: 14px; }
|
||||
|
||||
/* Services panel */
|
||||
#services-panel {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 16px;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.service-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
|
||||
gap: 10px;
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
}
|
||||
.service-card {
|
||||
background: var(--surface2);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
padding: 14px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
cursor: default;
|
||||
}
|
||||
.service-card-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.service-name {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: var(--text);
|
||||
}
|
||||
.service-badge {
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.06em;
|
||||
padding: 2px 7px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
.service-badge.ok { background: rgba(74,222,128,0.15); color: var(--ok); }
|
||||
.service-badge.warn { background: rgba(251,146,60,0.15); color: var(--warn); }
|
||||
.service-badge.crit { background: rgba(248,113,113,0.15); color: var(--crit); }
|
||||
.service-badge.off { background: rgba(100,116,139,0.15); color: var(--text3); }
|
||||
.service-badge.checking { background: rgba(34,211,238,0.10); color: var(--accent); }
|
||||
.service-desc {
|
||||
font-size: 11px;
|
||||
color: var(--text3);
|
||||
line-height: 1.4;
|
||||
}
|
||||
.service-latency {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 11px;
|
||||
color: var(--text3);
|
||||
}
|
||||
|
||||
/* Bottom bar */
|
||||
#bottom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
.bottom-brand {
|
||||
font-size: 12px;
|
||||
color: var(--text3);
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
.bottom-brand span { color: var(--accent); }
|
||||
|
||||
.bottom-links {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
.bottom-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
padding: 5px 10px;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
color: var(--text2);
|
||||
text-decoration: none;
|
||||
font-size: 12px;
|
||||
transition: color 0.2s, border-color 0.2s;
|
||||
}
|
||||
.bottom-link:hover { color: var(--accent); border-color: rgba(34,211,238,0.3); }
|
||||
.bottom-link svg { width: 12px; height: 12px; }
|
||||
|
||||
#refresh-countdown {
|
||||
font-size: 12px;
|
||||
color: var(--text3);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="aurora">
|
||||
<div class="aurora-blob aurora-blob-1"></div>
|
||||
<div class="aurora-blob aurora-blob-2"></div>
|
||||
<div class="aurora-blob aurora-blob-3"></div>
|
||||
</div>
|
||||
|
||||
<div id="app">
|
||||
<!-- Top row -->
|
||||
<div id="top">
|
||||
<div id="hostname-area">
|
||||
<div id="status-dot" class="off"></div>
|
||||
<span id="hostname">—</span>
|
||||
</div>
|
||||
|
||||
<div id="clock-area">
|
||||
<div id="clock">00:00:00</div>
|
||||
<div id="date">—</div>
|
||||
</div>
|
||||
|
||||
<div id="last-checked">—</div>
|
||||
</div>
|
||||
|
||||
<!-- Middle -->
|
||||
<div id="middle">
|
||||
|
||||
<!-- System metrics -->
|
||||
<div id="metrics-panel">
|
||||
<div class="panel-title">
|
||||
<i data-lucide="cpu"></i>
|
||||
Ubuntu PC
|
||||
</div>
|
||||
|
||||
<div class="metric-item">
|
||||
<div class="metric-header-row">
|
||||
<span class="metric-label">CPU</span>
|
||||
<span class="metric-val" id="cpu-val">— %</span>
|
||||
</div>
|
||||
<div class="bar-track"><div class="bar-fill" id="cpu-bar" style="width:0%"></div></div>
|
||||
</div>
|
||||
|
||||
<div class="metric-item">
|
||||
<div class="metric-header-row">
|
||||
<span class="metric-label">Memory</span>
|
||||
<span class="metric-val" id="mem-val">— MB</span>
|
||||
</div>
|
||||
<div class="bar-track"><div class="bar-fill" id="mem-bar" style="width:0%"></div></div>
|
||||
</div>
|
||||
|
||||
<div class="stat-grid">
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">Uptime</div>
|
||||
<div class="stat-val" id="uptime-val">—</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">Sessions</div>
|
||||
<div class="stat-val" id="sessions-val">—</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">Node.js</div>
|
||||
<div class="stat-val" id="node-val">—</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">Platform</div>
|
||||
<div class="stat-val" id="platform-val">—</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a class="open-btn" href="/" target="_blank" rel="noopener">
|
||||
<i data-lucide="terminal"></i>
|
||||
posimai-dev を開く
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Services -->
|
||||
<div id="services-panel">
|
||||
<div class="panel-title">
|
||||
<i data-lucide="radio"></i>
|
||||
Services
|
||||
</div>
|
||||
<div class="service-grid" id="service-grid"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bottom bar -->
|
||||
<div id="bottom">
|
||||
<div class="bottom-brand">posimai<span>-station</span></div>
|
||||
|
||||
<div class="bottom-links">
|
||||
<a class="bottom-link" href="/" target="_blank" rel="noopener">
|
||||
<i data-lucide="terminal"></i> dev
|
||||
</a>
|
||||
<a class="bottom-link" href="https://posimai-atlas.vercel.app" target="_blank" rel="noopener">
|
||||
<i data-lucide="network"></i> atlas
|
||||
</a>
|
||||
<a class="bottom-link" href="https://posimai-dashboard.vercel.app" target="_blank" rel="noopener">
|
||||
<i data-lucide="layout-dashboard"></i> dashboard
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div id="refresh-countdown">次の更新まで <span id="countdown">30</span>s</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
const HEALTH_URL = '/api/health';
|
||||
const REFRESH_SEC = 30;
|
||||
|
||||
// Services to monitor
|
||||
const SERVICES = [
|
||||
{
|
||||
id: 'posimai-dev',
|
||||
name: 'posimai-dev',
|
||||
desc: 'ブラウザターミナル + Claude Code',
|
||||
url: HEALTH_URL,
|
||||
isHealth: true,
|
||||
},
|
||||
{
|
||||
id: 'posimai-api',
|
||||
name: 'Posimai API',
|
||||
desc: 'Node.js / Express — VPS 本番',
|
||||
url: 'https://api.soar-enrich.com',
|
||||
isHealth: false,
|
||||
},
|
||||
{
|
||||
id: 'gitea',
|
||||
name: 'Gitea',
|
||||
desc: 'ローカル Git バックアップ',
|
||||
url: 'http://100.76.7.3:3000',
|
||||
isHealth: false,
|
||||
},
|
||||
{
|
||||
id: 'syncthing',
|
||||
name: 'Syncthing',
|
||||
desc: 'ファイル同期 GUI',
|
||||
url: 'http://100.77.11.43:8384',
|
||||
isHealth: false,
|
||||
},
|
||||
{
|
||||
id: 'vercel',
|
||||
name: 'Vercel',
|
||||
desc: 'PWA ホスティング (27 本)',
|
||||
url: 'https://vercel.com',
|
||||
isHealth: false,
|
||||
},
|
||||
{
|
||||
id: 'github',
|
||||
name: 'GitHub',
|
||||
desc: 'ソースコード管理',
|
||||
url: 'https://github.com/posimai',
|
||||
isHealth: false,
|
||||
},
|
||||
];
|
||||
|
||||
// ── Clock ─────────────────────────────────────────────────────────
|
||||
function updateClock() {
|
||||
const now = new Date();
|
||||
const hh = String(now.getHours()).padStart(2, '0');
|
||||
const mm = String(now.getMinutes()).padStart(2, '0');
|
||||
const ss = String(now.getSeconds()).padStart(2, '0');
|
||||
document.getElementById('clock').textContent = `${hh}:${mm}:${ss}`;
|
||||
|
||||
const days = ['日', '月', '火', '水', '木', '金', '土'];
|
||||
const y = now.getFullYear();
|
||||
const mo = String(now.getMonth() + 1).padStart(2, '0');
|
||||
const d = String(now.getDate()).padStart(2, '0');
|
||||
const dow = days[now.getDay()];
|
||||
document.getElementById('date').textContent = `${y}.${mo}.${d} (${dow})`;
|
||||
}
|
||||
setInterval(updateClock, 1000);
|
||||
updateClock();
|
||||
|
||||
// ── Uptime formatter ──────────────────────────────────────────────
|
||||
function formatUptime(s) {
|
||||
const d = Math.floor(s / 86400);
|
||||
const h = Math.floor((s % 86400) / 3600);
|
||||
const m = Math.floor((s % 3600) / 60);
|
||||
if (d > 0) return `${d}d ${h}h`;
|
||||
if (h > 0) return `${h}h ${m}m`;
|
||||
return `${m}m`;
|
||||
}
|
||||
|
||||
// ── System metrics ────────────────────────────────────────────────
|
||||
async function fetchHealth() {
|
||||
try {
|
||||
const res = await fetch(HEALTH_URL);
|
||||
if (!res.ok) throw new Error('not ok');
|
||||
const data = await res.json();
|
||||
|
||||
const cpuPct = data.cpu_pct || 0;
|
||||
const memPct = data.mem_total_mb
|
||||
? Math.round((data.mem_used_mb / data.mem_total_mb) * 100) : 0;
|
||||
|
||||
document.getElementById('cpu-val').textContent = `${cpuPct}%`;
|
||||
const cpuBar = document.getElementById('cpu-bar');
|
||||
cpuBar.style.width = `${cpuPct}%`;
|
||||
cpuBar.className = 'bar-fill' + (cpuPct > 80 ? ' crit' : cpuPct > 60 ? ' warn' : '');
|
||||
|
||||
document.getElementById('mem-val').textContent =
|
||||
`${data.mem_used_mb} / ${data.mem_total_mb} MB (${memPct}%)`;
|
||||
const memBar = document.getElementById('mem-bar');
|
||||
memBar.style.width = `${memPct}%`;
|
||||
memBar.className = 'bar-fill' + (memPct > 85 ? ' crit' : memPct > 65 ? ' warn' : '');
|
||||
|
||||
document.getElementById('uptime-val').textContent = formatUptime(data.uptime_s || 0);
|
||||
document.getElementById('sessions-val').textContent = String(data.active_sessions || 0);
|
||||
document.getElementById('node-val').textContent = (data.node_version || '—').replace('v', '');
|
||||
document.getElementById('platform-val').textContent = data.platform || '—';
|
||||
document.getElementById('hostname').textContent = data.hostname || 'ubuntu-pc';
|
||||
|
||||
// Status dot
|
||||
const dot = document.getElementById('status-dot');
|
||||
dot.className = cpuPct > 80 || memPct > 85 ? 'crit'
|
||||
: cpuPct > 60 || memPct > 65 ? 'warn' : 'ok';
|
||||
|
||||
return true;
|
||||
} catch (e) {
|
||||
document.getElementById('status-dot').className = 'off';
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
// ── Service cards ─────────────────────────────────────────────────
|
||||
function buildServiceCards() {
|
||||
const grid = document.getElementById('service-grid');
|
||||
grid.innerHTML = '';
|
||||
SERVICES.forEach(svc => {
|
||||
const card = document.createElement('div');
|
||||
card.className = 'service-card';
|
||||
card.id = `svc-${svc.id}`;
|
||||
card.innerHTML = `
|
||||
<div class="service-card-top">
|
||||
<span class="service-name">${svc.name}</span>
|
||||
<span class="service-badge checking" id="badge-${svc.id}">...</span>
|
||||
</div>
|
||||
<span class="service-desc">${svc.desc}</span>
|
||||
<span class="service-latency" id="lat-${svc.id}"></span>`;
|
||||
grid.appendChild(card);
|
||||
});
|
||||
}
|
||||
|
||||
async function checkService(svc) {
|
||||
const badge = document.getElementById(`badge-${svc.id}`);
|
||||
const latEl = document.getElementById(`lat-${svc.id}`);
|
||||
if (!badge) return;
|
||||
|
||||
if (svc.isHealth) {
|
||||
// Already done via fetchHealth — mark as ok
|
||||
badge.className = 'service-badge ok';
|
||||
badge.textContent = 'OK';
|
||||
latEl.textContent = '';
|
||||
return;
|
||||
}
|
||||
|
||||
const t0 = Date.now();
|
||||
try {
|
||||
const ctrl = new AbortController();
|
||||
const timer = setTimeout(() => ctrl.abort(), 7000);
|
||||
const res = await fetch(svc.url, { method: 'HEAD', mode: 'no-cors', signal: ctrl.signal });
|
||||
clearTimeout(timer);
|
||||
const ms = Date.now() - t0;
|
||||
badge.className = 'service-badge ok';
|
||||
badge.textContent = 'OK';
|
||||
latEl.textContent = `${ms}ms`;
|
||||
} catch (e) {
|
||||
badge.className = 'service-badge crit';
|
||||
badge.textContent = 'DOWN';
|
||||
latEl.textContent = '';
|
||||
}
|
||||
}
|
||||
|
||||
async function checkAllServices(devOk) {
|
||||
for (const svc of SERVICES) {
|
||||
if (svc.isHealth) {
|
||||
const badge = document.getElementById(`badge-${svc.id}`);
|
||||
if (badge) {
|
||||
badge.className = devOk ? 'service-badge ok' : 'service-badge crit';
|
||||
badge.textContent = devOk ? 'OK' : 'DOWN';
|
||||
}
|
||||
} else {
|
||||
checkService(svc); // fire-and-forget (parallel)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ── Countdown ─────────────────────────────────────────────────────
|
||||
let countdownVal = REFRESH_SEC;
|
||||
let refreshTimer = null;
|
||||
|
||||
function startCountdown() {
|
||||
countdownVal = REFRESH_SEC;
|
||||
document.getElementById('countdown').textContent = countdownVal;
|
||||
if (refreshTimer) clearInterval(refreshTimer);
|
||||
refreshTimer = setInterval(() => {
|
||||
countdownVal--;
|
||||
document.getElementById('countdown').textContent = countdownVal;
|
||||
if (countdownVal <= 0) {
|
||||
clearInterval(refreshTimer);
|
||||
runRefresh();
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
async function runRefresh() {
|
||||
const devOk = await fetchHealth();
|
||||
await checkAllServices(devOk);
|
||||
|
||||
const now = new Date().toLocaleTimeString('ja-JP', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
|
||||
document.getElementById('last-checked').textContent = `最終更新: ${now}`;
|
||||
|
||||
startCountdown();
|
||||
}
|
||||
|
||||
// ── Init ──────────────────────────────────────────────────────────
|
||||
buildServiceCards();
|
||||
if (window.lucide) lucide.createIcons();
|
||||
runRefresh();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue