240 أسطر
9.8 KiB
HTML
240 أسطر
9.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>go-web-service · Cloud Monitoring</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=IBM+Plex+Mono:wght@400;500;600;700&family=Outfit:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body>
|
|
|
|
<!-- Ambient Floating Cloud Atmosphere -->
|
|
<div class="cloud-bg" aria-hidden="true">
|
|
<div class="cloud-orb cloud-orb--1"></div>
|
|
<div class="cloud-orb cloud-orb--2"></div>
|
|
<div class="cloud-orb cloud-orb--3"></div>
|
|
</div>
|
|
|
|
<div class="app">
|
|
|
|
<!-- ===== Top bar ===== -->
|
|
<header class="topbar">
|
|
<div class="topbar__identity">
|
|
<div class="topbar__logo" title="Cloud Service">
|
|
<svg class="cloud-logo-icon" width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z"/>
|
|
</svg>
|
|
</div>
|
|
<span class="topbar__dot" id="topStatusDot" aria-hidden="true"></span>
|
|
<div class="topbar__text">
|
|
<h1 class="topbar__title">go-web-service</h1>
|
|
<p class="topbar__subtitle" id="topEndpoint">/health + /metrics · hosted.ghaymah.systems</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="topbar__actions">
|
|
<div class="topbar__updated">
|
|
<span class="label">last updated</span>
|
|
<span class="mono" id="lastUpdated">—</span>
|
|
</div>
|
|
<button class="btn btn--refresh" id="refreshBtn" type="button">
|
|
<svg class="btn__icon" id="refreshIcon" width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M13.65 2.35A7.5 7.5 0 1 0 15.5 8h-1.5a6 6 0 1 1-1.76-4.24L10 6h5V1l-1.35 1.35Z"/>
|
|
</svg>
|
|
<span>Refresh</span>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="content">
|
|
|
|
<!-- ===== KPI cards ===== -->
|
|
<section class="kpi-grid" aria-label="Key metrics">
|
|
|
|
<div class="card kpi kpi--status">
|
|
<div class="kpi__head">
|
|
<span class="kpi__label">Service Status</span>
|
|
<svg class="kpi__icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
|
|
</svg>
|
|
</div>
|
|
<div class="kpi__status-row">
|
|
<span class="status-indicator" id="statusIndicator"></span>
|
|
<span class="kpi__status-text" id="statusText">Checking…</span>
|
|
</div>
|
|
<div class="kpi__foot" id="statusFoot">awaiting first check</div>
|
|
</div>
|
|
|
|
<div class="card kpi">
|
|
<div class="kpi__head">
|
|
<span class="kpi__label">Response Time</span>
|
|
<svg class="kpi__icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>
|
|
</svg>
|
|
</div>
|
|
<div class="kpi__value mono" id="responseTimeValue">—</div>
|
|
<div class="kpi__foot" id="responseTimeFoot">current</div>
|
|
</div>
|
|
|
|
<div class="card kpi">
|
|
<div class="kpi__head">
|
|
<span class="kpi__label">Total Requests</span>
|
|
<svg class="kpi__icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M22 12h-4l-3 9L9 3l-3 9H2"/>
|
|
</svg>
|
|
</div>
|
|
<div class="kpi__value mono" id="totalRequestsValue">—</div>
|
|
<div class="kpi__foot" id="totalRequestsFoot">reported by /metrics</div>
|
|
</div>
|
|
|
|
</section>
|
|
|
|
<div class="banner banner--warn" id="networkWarning" hidden>
|
|
<strong>Network warning:</strong> Could not reach the service (CORS or connectivity). Metrics may be stale. Try the local fallback at <span class="mono">localhost:8080</span>.
|
|
</div>
|
|
|
|
<!-- ===== Charts ===== -->
|
|
<section class="charts-grid" aria-label="Live charts">
|
|
<div class="card panel">
|
|
<div class="panel__head">
|
|
<h2 class="panel__title">Response Time</h2>
|
|
<span class="panel__meta">last 30 live checks (ms)</span>
|
|
</div>
|
|
<div class="chart-wrap">
|
|
<canvas id="responseTimeChart" class="chart-canvas" aria-label="Response time line chart"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card panel">
|
|
<div class="panel__head">
|
|
<h2 class="panel__title">Check Results</h2>
|
|
<span class="panel__meta">each block = one live check</span>
|
|
</div>
|
|
<div class="status-timeline-wrap">
|
|
<div class="status-timeline-summary">
|
|
<span class="status-timeline-stat status-timeline-stat--ok">
|
|
<span class="status-timeline-stat__dot" aria-hidden="true"></span>
|
|
<span class="mono" id="statusPassCount">0</span> passed
|
|
</span>
|
|
<span class="status-timeline-stat status-timeline-stat--bad">
|
|
<span class="status-timeline-stat__dot" aria-hidden="true"></span>
|
|
<span class="mono" id="statusFailCount">0</span> failed
|
|
</span>
|
|
</div>
|
|
<div class="status-timeline" id="statusTimeline" role="img" aria-label="Health check results timeline"></div>
|
|
<div class="status-timeline-axis">
|
|
<span id="statusTickStart">no data yet</span>
|
|
<span>now</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ===== Uptime & success ratio ===== -->
|
|
<section class="stats-grid" aria-label="Uptime and success ratio">
|
|
<div class="card panel panel--uptime">
|
|
<div class="panel__head">
|
|
<h2 class="panel__title">Uptime Window</h2>
|
|
<span class="panel__meta" id="uptimeWindowMeta">0 live checks recorded</span>
|
|
</div>
|
|
<div class="uptime-summary">
|
|
<span class="uptime-pct mono" id="uptimePct">—</span>
|
|
<span class="uptime-label">availability</span>
|
|
</div>
|
|
<div class="uptime-strip" id="uptimeStrip" role="img" aria-label="Uptime history strip"></div>
|
|
<div class="uptime-axis">
|
|
<span id="uptimeTickStart">no data yet</span>
|
|
<span>now</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card panel panel--doughnut">
|
|
<div class="panel__head">
|
|
<h2 class="panel__title">Success Ratio</h2>
|
|
<span class="panel__meta">session checks</span>
|
|
</div>
|
|
<div class="doughnut-wrap">
|
|
<canvas id="statsDoughnut" class="chart-canvas doughnut-canvas" aria-label="Success ratio doughnut chart"></canvas>
|
|
<div class="doughnut-center">
|
|
<span class="doughnut-center__value mono" id="doughnutCenterValue">—</span>
|
|
<span class="doughnut-center__label">success</span>
|
|
</div>
|
|
</div>
|
|
<div class="check-stats">
|
|
<div class="check-stats__row">
|
|
<span class="check-stats__label">Passed</span>
|
|
<span class="check-stats__value mono" id="successValue">—</span>
|
|
<span class="check-stats__foot" id="successRateFoot"></span>
|
|
</div>
|
|
<div class="check-stats__row">
|
|
<span class="check-stats__label">Failed</span>
|
|
<span class="check-stats__value mono" id="failedValue">—</span>
|
|
<span class="check-stats__foot" id="failedRateFoot"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ===== Detail panels ===== -->
|
|
<section class="detail-grid" aria-label="Details">
|
|
<div class="card panel">
|
|
<div class="panel__head">
|
|
<h2 class="panel__title">Latest Health Check</h2>
|
|
</div>
|
|
<dl class="detail-list">
|
|
<div class="detail-list__row">
|
|
<dt>Endpoint</dt>
|
|
<dd id="lcEndpoint" class="mono">—</dd>
|
|
</div>
|
|
<div class="detail-list__row">
|
|
<dt>Status</dt>
|
|
<dd id="lcStatus">—</dd>
|
|
</div>
|
|
<div class="detail-list__row">
|
|
<dt>HTTP code</dt>
|
|
<dd id="lcCode" class="mono">—</dd>
|
|
</div>
|
|
<div class="detail-list__row">
|
|
<dt>Latency</dt>
|
|
<dd id="lcLatency" class="mono">—</dd>
|
|
</div>
|
|
<div class="detail-list__row">
|
|
<dt>Timestamp</dt>
|
|
<dd id="lcTime" class="mono">—</dd>
|
|
</div>
|
|
<div class="detail-list__row detail-list__row--full">
|
|
<dt>Raw response</dt>
|
|
<dd id="lcRaw" class="mono detail-list__raw">—</dd>
|
|
</div>
|
|
</dl>
|
|
</div>
|
|
|
|
<div class="card panel panel--events">
|
|
<div class="panel__head">
|
|
<h2 class="panel__title">Event Log</h2>
|
|
<span class="panel__meta" id="eventsMeta">0 checks logged</span>
|
|
</div>
|
|
<ul class="events-log" id="eventsLog"></ul>
|
|
</div>
|
|
</section>
|
|
|
|
</main>
|
|
|
|
<footer class="app-footer">
|
|
<span>
|
|
<svg class="footer-cloud-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z"/>
|
|
</svg>
|
|
Sources: <span class="mono">/health</span> (status & latency) + <span class="mono">/metrics</span> (total requests)
|
|
</span>
|
|
<span id="autoRefreshLabel">auto-refresh every 15s</span>
|
|
</footer>
|
|
|
|
</div>
|
|
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html> |