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