Build an "Operations Dashboard"

[Login attempts (last 24h): 12,345]
[Login success rate: 99.2%]
[Registration: 234]
[Recovery: 12]

[Active sessions: 1,234]
[Active in last 5 min: 234]
[New today: 45]

⚠ 2 services degraded
⚠ Disk 78% full
✓ All other checks green

[Last incident: 3 days ago, 30 min outage]
[Resolved: 2026-05-10 ✓]

[Login p50: 45 ms]
[Login p99: 180 ms]
[Token introspect p99: 12 ms]

import { getMetric } from "@/lib/prom";

export default async function Dashboard() {
  const [loginRate, errorRate, latency, activeSessions, diskUsage] = await Promise.all([
    getMetric("sum(rate(kratos_login_total[24h]))"),
    getMetric("sum(rate(kratos_login_total{outcome='failure'}[1h])) / sum(rate(kratos_login_total[1h]))"),
    getMetric("histogram_quantile(0.99, sum(rate(http_request_duration_seconds_bucket{path='/login'}[5m])) by (le))"),
    getMetric("kratos_active_sessions"),
    getMetric("node_filesystem_avail_bytes / node_filesystem_size_bytes"),
  ]);
  
  return (
    <Grid>
      <Metric label="24h logins" value={formatNumber(loginRate * 86400)} />
      <Metric label="Error rate" value={(errorRate * 100).toFixed(2) + "%"} trend={errorRate < 0.01 ? "good" : "bad"} />
      <Metric label="Login p99" value={`${(latency * 1000).toFixed(0)}ms`} />
      <Metric label="Active sessions" value={formatNumber(activeSessions)} />
      <Metric label="Disk free" value={`${(diskUsage * 100).toFixed(0)}%`} trend={diskUsage > 0.2 ? "good" : "bad"} />
    </Grid>
  );
}

function Metric({ label, value, trend }) {
  const color = trend === "good" ? "green" : trend === "warn" ? "yellow" : "red";
  return (
    <Card className={`metric metric-${color}`}>
      <CardLabel>{label}</CardLabel>
      <CardValue>{value}</CardValue>
    </Card>
  );
}

<Card>
  <CardLabel>Logins (last hour)</CardLabel>
  <CardValue>{currentLoginRate}/s</CardValue>
  <Sparkline data={historicalRate} />
</Card>

useEffect(() => {
  const interval = setInterval(() => {
    router.refresh();
  }, 30_000);  // 30 sec
  return () => clearInterval(interval);
}, []);

<Metric 
  label="Error rate" 
  value="0.12%"
  href="/admin/audit?q=event:login_failed"
/>

{services.map(s => (
  <ServiceStatus key={s.name}>
    {s.name}: <StatusBadge status={s.status} />
  </ServiceStatus>
))}

const services = await Promise.all([
  checkService("kratos", `${KRATOS_URL}/health/ready`),
  checkService("hydra", `${HYDRA_URL}/health/ready`),
  checkService("postgres", "...", checkPostgres),
  checkService("redis", "...", checkRedis),
]);

async function checkService(name, url, method = "http") {
  try {
    const start = Date.now();
    const res = await fetch(url, { signal: AbortSignal.timeout(5000) });
    const latency = Date.now() - start;
    return { name, status: res.ok ? "up" : "down", latency };
  } catch (err) {
    return { name, status: "down", error: err.message };
  }
}

const recent = await db`
  SELECT created_at, event_type, identity_id 
  FROM security_audit 
  ORDER BY created_at DESC 
  LIMIT 20
`;

<ActivityFeed>
  {recent.map(e => (
    <ActivityItem key={e.id} time={e.created_at} event={e.event_type} user={e.identity_id} />
  ))}
</ActivityFeed>

{loginRate < expected * 0.5 && (
  <Alert>
    Login rate is 50% below typical. Investigate.
  </Alert>
)}

if (!session.identity.traits.role?.includes("admin")) {
  return redirect("/forbidden");
}

<Grid columns={{ base: 1, md: 2, lg: 3 }}>
  <Metric ... />
</Grid>