Cloudflare Admin Dashboard
Admin page for real-time Cloudflare metrics — zone analytics, Workers, KV, Pages deployments, DNS records, and tunnel health
Cloudflare Admin Dashboard
The Cloudflare admin page (/admin/cloudflare) is a single-page dashboard that pulls live metrics from the Cloudflare API and displays them in a compact, scannable layout. It covers zone traffic, Workers usage, KV namespaces, Pages deployments, DNS record breakdown, and tunnel health — everything you need to know about the Cloudflare Free Plan without leaving Arcturus-Prime.
Data Source
All data comes from a single SSR API endpoint:
GET /api/admin/cloudflare-status
GET /api/admin/cloudflare-status?force=true (bypass cache)The endpoint (src/pages/api/admin/cloudflare-status.ts) makes parallel requests to the Cloudflare API:
| Cloudflare API | Data Returned |
|---|---|
| GraphQL Analytics (zone) | HTTP requests, bandwidth, visitors, page views, threats |
| GraphQL Analytics (workers) | Worker requests, errors, subrequests |
REST: /workers/scripts | Script list with modification dates |
REST: /storage/kv/namespaces | KV namespace names and IDs |
REST: /pages/projects/Arcturus-Prime/deployments | Deployment history with build times |
REST: /zones/{id}/dns_records | Record count by type |
REST: /cfd_tunnel | Tunnel status and connection locations |
Responses are cached in KV (cf-status:v2 key) with a 5-minute TTL. The ?force=true parameter bypasses the cache. Auto-refresh polls every 5 minutes when enabled.
Required Configuration
| Env Var | Purpose |
|---|---|
CF_API_TOKEN | Cloudflare API token |
CF_ACCOUNT_ID | Cloudflare account ID |
The API token needs these scopes: Workers Scripts Read, KV Storage Read, Pages Read, Argo Tunnel Read, DNS Read, Analytics Read.
If either variable is missing, the page shows a configuration banner with setup instructions instead of crashing.
Page Sections
Summary Stats Grid
Six stat cards across the top showing the headline numbers:
| Card | Source | Color Coding |
|---|---|---|
| HTTP Requests | Zone analytics | — |
| Bandwidth | Zone analytics | — |
| Unique Visitors | Zone analytics | — |
| Worker Requests | Workers analytics | Green/yellow/red vs 100K daily limit |
| Deploys | Pages deployments | Green/yellow/red vs 500 monthly limit |
| Tunnels | Tunnel connections | Green if connected, red if not |
Color thresholds: green < 50% of limit, yellow 50-80%, red > 80%.
Zone Traffic
Five metric tiles showing today’s zone-level traffic: requests, bandwidth, visitors, page views, and threats blocked. Data comes from the Cloudflare GraphQL Analytics API filtered to the current day.
Workers & KV
Side-by-side cards showing:
Workers: Request count vs 100K daily limit (progress bar), errors, subrequests, CPU limit (10ms), and a list of deployed Worker scripts with modification timestamps.
KV Storage: Namespace count, Free Plan limits (100K reads/day, 1K writes/day, 1GB storage), and a list of KV namespaces with copyable namespace IDs. The active ARGOBOX_CACHE namespace is highlighted.
Pages Deployments
Card-style deployment list showing the most recent 12 deployments this month. Each card shows:
- Top row: Environment badge (PRODUCTION in green / PREVIEW in yellow), branch name, short commit hash, and status indicator (dot + label)
- Bottom row: Commit message (truncated with tooltip) and build duration + relative time
The deployment count is tracked against the 500/month Free Plan limit with a progress bar.
DNS Records
Record count vs 3,500 Free Plan limit (progress bar), type breakdown as pill badges (e.g., CNAME 41, TXT 4, A 3), and the Zone ID with click-to-copy.
Tunnels
Each tunnel displays as a card with:
- Status dot (green = healthy, yellow = reconnecting, red = disconnected, gray = inactive)
- Tunnel name
- Connection locations (Cloudflare colo codes like DFW, IAD)
- Status badge with connection count
Wrangler Quick Reference
Collapsible section with copy-to-clipboard wrangler commands: list deployments, list KV keys, tail logs, deploy from local.
UI Design
The page uses a custom CSS component system prefixed cf-* to avoid collisions with the CosmicLayout. Key patterns:
- Cards: Dark glass-morphism with subtle borders (
rgba(255,255,255,0.06)) - Progress bars: Green gradient by default, yellow/red based on usage percentage
- Badges: Color-coded pills (green/yellow/red/info)
- Deploy cards: Two-line layout — env + branch + status on top, commit message + timing on bottom
- DNS pills: Monospace type name with highlighted count badge
- Tunnels: Grid cards with status dot, name, colo codes, and status badge
All rendering is done client-side via a single render(data) function that receives the API response and updates DOM elements by ID. No framework — just getElementById and innerHTML.
Error Handling
- Missing config: Shows a warning card with setup instructions
- Partial API failures: Individual sections show
--orN/A; an error banner lists which API calls failed - Network failures: Catch block shows “Fetch failed: {message}” in the error banner
- All sections degrade gracefully — a tunnel API failure doesn’t break the Workers display
File Map
| File | Purpose |
|---|---|
src/pages/admin/cloudflare.astro | Page template, CSS, and client-side JS |
src/pages/api/admin/cloudflare-status.ts | SSR API endpoint — Cloudflare API proxy + KV cache |
src/config/modules/cloudflare.ts | Module manifest (nav item, required env vars) |
Changelog
| Date | Change |
|---|---|
| 2026-02-23 | Initial build — stats grid, workers, KV, pages, DNS, tunnels |
| 2026-02-25 | Redesigned deployments from 6-column grid to 2-line card layout, fixed DNS pills readability, added tunnel card borders |