first commit

q1-deploy-monitor/public/dashboard.js

@@ -0,0 +1,54 @@
+const STATUS_ENDPOINT = '/health';
+const POLL_INTERVAL = 2000;
+
+const statusCard = document.getElementById('statusCard');
+const responseCard = document.getElementById('responseCard');
+const requestsCard = document.getElementById('requestsCard');
+const appStatus = document.getElementById('appStatus');
+const responseTime = document.getElementById('responseTime');
+const requestCount = document.getElementById('requestCount');
+const updateTime = document.getElementById('updateTime');
+const pulse = document.querySelector('.pulse');
+
+function setStatusCard(status) {
+  statusCard.classList.remove('status-up', 'status-down');
+  statusCard.classList.add(status === 'UP' ? 'status-up' : 'status-down');
+  appStatus.textContent = status;
+}
+
+function formatTimestamp(date) {
+  const y = date.getFullYear();
+  const m = String(date.getMonth() + 1).padStart(2, '0');
+  const d = String(date.getDate()).padStart(2, '0');
+  const h = String(date.getHours()).padStart(2, '0');
+  const min = String(date.getMinutes()).padStart(2, '0');
+  const s = String(date.getSeconds()).padStart(2, '0');
+  return `${y}-${m}-${d} ${h}:${min}:${s}`;
+}
+
+async function poll() {
+  try {
+    const start = performance.now();
+    const res = await fetch(STATUS_ENDPOINT);
+    const elapsed = Math.round(performance.now() - start);
+
+    if (!res.ok) throw new Error(`HTTP ${res.status}`);
+
+    const data = await res.json();
+
+    setStatusCard(data.status || 'UP');
+    responseTime.textContent = `${elapsed} ms`;
+    requestCount.textContent = data.requestCount ?? '--';
+    pulse.classList.remove('offline');
+  } catch {
+    setStatusCard('DOWN');
+    responseTime.textContent = '-- ms';
+    requestCount.textContent = '--';
+    pulse.classList.add('offline');
+  }
+
+  updateTime.textContent = `Last update: ${formatTimestamp(new Date())}`;
+}
+
+poll();
+setInterval(poll, POLL_INTERVAL);