System Status Monitor

A public status page with color-coded health indicators, latency metrics, and 5-second polling.

import random
from datetime import datetime
from abstra.pages import register_function

SERVICES = ["API Gateway", "Database", "Queue Worker", "Email Service", "Payment Processor"]

@register_function
def get_status():
    return {
        "services": [{
            "name": s,
            "status": random.choice(["healthy","healthy","healthy","degraded","down"]),
            "latency_ms": random.randint(5, 500),
            "uptime": round(random.uniform(99.0, 100.0), 2),
        } for s in SERVICES],
        "timestamp": datetime.now().strftime("%Y-%m-%d %H:%M:%S"),
    }

@register_function
def __render__():
    return """
<script src="https://cdn.tailwindcss.com"></script>
<style>
  body { margin:0; font-family:'Inter',system-ui,sans-serif; background:#f8fafc; }
  .fade { animation: fadeIn .3s ease-in } @keyframes fadeIn { from{opacity:.5} to{opacity:1} }
</style>
<div class="min-h-screen p-8 max-w-3xl mx-auto">
  <div class="flex items-center justify-between mb-8">
    <div class="flex items-center gap-3">
      <div id="global-dot" class="w-3 h-3 rounded-full bg-slate-300 animate-pulse"></div>
      <h1 class="text-2xl font-bold text-slate-800">System Status</h1>
    </div>
    <span id="ts" class="text-sm text-slate-400 font-mono"></span>
  </div>
  <div id="services" class="space-y-3"></div>
</div>
<script>
const cfg = {
  healthy: { color:'emerald', label:'Operational', icon:'&#10003;' },
  degraded: { color:'amber', label:'Degraded', icon:'&#9888;' },
  down: { color:'red', label:'Down', icon:'&#10007;' },
};
async function poll() {
  const data = await get_status();
  document.getElementById('ts').textContent = data.timestamp;

  const allHealthy = data.services.every(s => s.status === 'healthy');
  const dot = document.getElementById('global-dot');
  dot.className = 'w-3 h-3 rounded-full ' + (allHealthy ? 'bg-emerald-500' : 'bg-amber-500 animate-pulse');

  document.getElementById('services').innerHTML = data.services.map(s => {
    const c = cfg[s.status];
    const latencyColor = s.latency_ms < 100 ? 'text-emerald-600' : s.latency_ms < 300 ? 'text-amber-600' : 'text-rose-600';
    return `<div class="bg-white rounded-xl p-5 border border-slate-100 shadow-sm hover:shadow-md transition-all fade">
      <div class="flex items-center justify-between">
        <div class="flex items-center gap-4">
          <div class="w-10 h-10 rounded-xl bg-${c.color}-50 flex items-center justify-center text-${c.color}-600 font-bold">
            ${c.icon}
          </div>
          <div>
            <p class="font-medium text-slate-800">${s.name}</p>
            <p class="text-xs text-${c.color}-600 font-medium mt-0.5">${c.label}</p>
          </div>
        </div>
        <div class="flex items-center gap-6 text-sm">
          <div class="text-right">
            <p class="font-mono font-semibold tabular-nums ${latencyColor}">${s.latency_ms}ms</p>
            <p class="text-xs text-slate-400">latency</p>
          </div>
          <div class="text-right">
            <p class="font-mono font-semibold tabular-nums text-slate-700">${s.uptime}%</p>
            <p class="text-xs text-slate-400">uptime</p>
          </div>
        </div>
      </div>
    </div>`;
  }).join('');
}
poll();
setInterval(poll, 5000);
</script>
"""

Key patterns: Global health indicator, per-service status icons, latency color coding, 5-second polling, no auth required.