Cloudflare Custom Dashboards

Building Magic Transit
Monitoring Dashboards

A complete guide to using GraphQL datasets and Custom Dashboards for tunnel health, traffic volume, and DDoS mitigation monitoring

Magic Transit Custom Dashboards GraphQL Analytics
Last Updated: May 14, 2026
Overview

What You'll Learn

Custom Dashboards Basics

  • What Custom Dashboards are and how they work
  • Natural language prompts vs. manual configuration
  • Available chart types and when to use them
  • Dashboard-level filters and time ranges

Magic Transit GraphQL Datasets

  • 7 key datasets for traffic, health, and security
  • Available metrics and dimensions for each
  • Sample rates and data granularity
  • How datasets map to Network Health page queries

Building Dashboards

  • Step-by-step chart creation workflows
  • Replicating Network Health page views
  • Common patterns: health, traffic, DDoS
  • Multi-chart dashboard composition
⚠️ Important: This presentation teaches concepts and workflows. The exact UI elements may differ from what's shown. Always refer to official Cloudflare documentation for current interface details.
100+
GraphQL datasets available
7
Magic Transit datasets
📊
Custom Dashboards

Personalized monitoring with GraphQL data

GA as of April 2026 — Available to all Cloudflare customers (up to 25 dashboards; 100 for Log Explorer customers)

Key Features

🤖
Natural Language Prompts
Describe what you want to see — AI generates the chart configuration automatically
⚙️
Manual Configuration
Full control over datasets, metrics, dimensions, filters, and chart types
🎯
Dashboard-Level Filters
Set time range and filters once — applies to all charts on the dashboard
📈
Multiple Chart Types
Timeseries, Bar, Donut, Map, Stat, Ratio, Top N, Table — choose the right visualization

How It Works

  • Access any of 100+ GraphQL datasets
  • Includes Magic Transit data from Network Health page
  • Combine multiple charts on one dashboard
  • Share dashboards with your team
  • Export data or screenshots
Pro Tip: Start with natural language prompts to learn the dataset structure, then switch to manual configuration for fine-tuning.

Navigation

Cloudflare Dashboard
Analytics → Custom Dashboards → Create Dashboard

Natural Language GraphQL Filters Multi-Chart
Key Concepts

Custom Series vs. Group By Field

Custom Series

Manually define each line/bar/segment

Example:
Series 1: "Tunnel A Traffic"
→ Metric: Bit Rate
→ Filter: Tunnel Name = "AWS-TGW-1"

Series 2: "Tunnel B Traffic"
→ Metric: Bit Rate
→ Filter: Tunnel Name = "GCP-VPN-1"
Good for: Comparing specific items, different metrics per series, complex filtering

Group By Field

Automatically create series from a dimension

Example:
Group By: "Tunnel Name"

Result:
→ Automatically graphs ALL tunnels
→ One series per tunnel value
→ All use same metric and filters
Good for: Showing all values of a dimension (all tunnels, all countries, all status codes)
For Magic Transit dashboards, you'll mostly use "Group By Field" to show all tunnels at once without manually creating series for each tunnel.
🌐
Magic Transit Datasets

7 GraphQL datasets for comprehensive monitoring

Traffic & Connectivity

Tunnel Traffic
Bandwidth metrics (5-min, hourly), ingress/egress direction
Tunnel Health
Health check results, tunnel state (healthy/degraded/down)
bitRate tunnelState

Network Analysis

Network Analytics
Deep packet-level info: protocols, IPs, ports, mitigation status (1/10k sample)
packets bits protocols

DDoS Protection

Attack Analytics
Attack-level metadata: start/end times, types, vectors, source IPs
DDoS Network Analytics
Forensic packet details: checksums, sequences, rules triggered
attackId attackType ruleId

Advanced Protection

TCP Protection
Out-of-state TCP attacks (SYN floods, ACK floods) — 1/1k sample
DNS Protection
DNS floods and amplification attacks — 1/1k sample
tcpFlags dnsQuery

Firewall

Magic Firewall Analytics
Custom rule matches: which rules blocked/allowed traffic (dynamic sample)
ruleId action
2
traffic datasets
3
DDoS datasets
2
advanced protection
1
firewall dataset
Sample Rates: 1/10k (network), 1/1k (advanced), dynamic (firewall, DDoS)
Dataset Deep Dive

Tunnel Health Checks Dataset

magicTransitTunnelHealthChecksAdaptiveGroups

Purpose

Monitor tunnel health check results across all Cloudflare data centers. Track tunnel availability, degradation, and failures.

Key Metric

avg.tunnelState
• 1.0 = 100% healthy
• 0.5 = degraded
• 0.0 = down
Example: 0.95 = 95% uptime

Key Dimensions

  • tunnelName — Tunnel identifier
  • edgeColoName — Cloudflare colo
  • datetime — Time bucket

Example API Query

{
  viewer {
    accounts(filter: {accountTag: $accountTag}) {
      magicTransitTunnelHealthChecksAdaptiveGroups(
        filter: {
          datetime_geq: "2026-05-14T12:00:00Z",
          datetime_leq: "2026-05-14T13:00:00Z"
        }
      ) {
        dimensions { tunnelName edgeColoName datetime }
        avg { tunnelState }
      }
    }
  }
}
⚠️ Important: Use Average aggregation for tunnelState
Health Monitoring Uptime % Per-Colo
Dataset Deep Dive

Tunnel Traffic Dataset

magicTransitTunnelTrafficAdaptiveGroups

Purpose

Monitor tunnel bandwidth and traffic volume. Track ingress and egress traffic patterns over time.

Key Metrics

5-Minute: avg.bitRateFiveMinutes + datetimeFiveMinutes
Hourly: avg.bitRateHour + datetimeHour
Critical: Match metric and datetime granularity!

Key Dimensions

  • tunnelName, direction
  • datetimeFiveMinutes, datetimeHour
  • edgePopName (optional)

Example API Query

{
  viewer {
    accounts(filter: {accountTag: $accountTag}) {
      magicTransitTunnelTrafficAdaptiveGroups(
        filter: {
          datetimeFiveMinutes_geq: "2026-05-14T12:00:00Z",
          datetimeFiveMinutes_leq: "2026-05-14T13:00:00Z"
        }
      ) {
        dimensions { tunnelName direction datetimeFiveMinutes }
        avg { bitRateFiveMinutes }
      }
    }
  }
}
Bandwidth 5-min / Hourly Ingress/Egress
🛠️
Step-by-Step

Building Your First Chart: Tunnel Health

✅ Option A: Natural Language (Recommended)

1. Create Dashboard

Analytics → Custom Dashboards → Create Dashboard

2. Add Chart

Click Add Chart button

3. Use Natural Language

Type in prompt box:
"Show me Magic Transit tunnel health check pass rate by tunnel name for the last hour"

4. Review & Save

  • AI generates chart configuration
  • Review dataset, metrics, filters
  • Click Save
⚙️ Option B: Manual Configuration

Manual Steps (Approximate)

  • Chart Type: "Stat" (single number) or "Timeseries" (trend)
  • Dataset: "Magic Transit Tunnel Health Checks"
  • Graph Mode: Click "Group by field" tab
  • Group By: Select "Tunnel Name"
  • Metric: "Tunnel State - Average"
  • Aggregation: Ensure "Average" is selected
  • Filters: Set time range (dashboard level)
  • Title: "Tunnel Health Status"
  • Click Save
⚠️ Disclaimer: Manual UI steps are approximations. Exact options may differ. Use natural language first, then explore UI.
Understanding Values: Results are 0.0 to 1.0 where 1.0 = 100% healthy, 0.5 = degraded, 0.0 = down. Average over time gives uptime %.
Step-by-Step

Building Traffic Volume Chart

✅ Natural Language Prompt
TYPE THIS:
"Display Magic Transit tunnel traffic bit rate over time grouped by tunnel name for the last hour"

What This Creates

  • Chart Type: Timeseries (line chart)
  • One line per tunnel (automatic via grouping)
  • Metric: Bit rate (bits per second)
  • Time range: Last 1 hour
💡 Pro Tip: After AI creates the chart, you can switch between 5-minute and hourly granularity by editing the metric selection.
⚙️ Manual Configuration (Approximate)

Manual Steps

  • Chart Type: "Timeseries"
  • Dataset: "Magic Transit Tunnel Traffic"
  • Graph Mode: Click "Group by field" tab
  • Group By: "Tunnel Name"
  • Metric: "Bit Rate Five Minutes - Average"
  • Time Dimension: Ensure uses "datetimeFiveMinutes"
  • Optional Filter: Direction = "ingress" or "egress"

Variations to Try

Ingress vs Egress
Add filter: direction = "ingress" or create two charts
Per Data Center
Group by "edgePopName" to see traffic per colo
Top N Tunnels
Use "Top N" chart type instead of timeseries
Dashboard Composition

Building a Complete Network Health Dashboard

📊 Health & Status

Tunnel Health %
Type: Stat
Metric: avg.tunnelState
Group: Tunnel Name
Health Over Time
Type: Timeseries
Metric: avg.tunnelState
Group: Tunnel Name
Health by Colo
Type: Donut/Bar
Group: edgeColoName

🌐 Traffic & Volume

Traffic Over Time
Type: Timeseries
Metric: avg.bitRateFiveMinutes
Group: Tunnel Name
Top Tunnels by Volume
Type: Top N / Bar
Metric: sum.bits
Group: Tunnel Name
Ingress vs Egress
Type: Bar
Group: direction
Filter: Specific tunnel

🔒 Security & DDoS

Attack Count
Dataset: dosdAttackAnalytics
Type: Stat
Metric: count
Attack Types
Type: Donut
Group: attackType
Mitigated Traffic
Dataset: magicTransitNetworkAnalytics
Filter: mitigationSource exists
Dashboard-level filters: Set time range and common filters once at dashboard level — they apply to all charts automatically, keeping your view consistent.
🚀
Advanced Patterns

Complex filtering and multi-dataset views

OR Filter Logic

The Network Health page uses complex OR filters to capture bi-directional tunnel traffic: 

"OR": [
  {"ingressTunnelName_in": ["tunnel1", ...]},
  {"egressTunnelName_in": ["tunnel1", ...]},
  {"egressTunnelID_in": ["id1", ...]},
  {"ingressTunnelID_in": ["id1", ...]}
]

Why? Captures traffic where tunnels appear as EITHER source OR destination.

In Custom Dashboards

  • Create separate charts for ingress vs egress
  • Use direction dimension filter
  • Or create two series on one chart (one per direction)

Combining Multiple Datasets

Network Health page queries TWO datasets simultaneously (health + traffic). In Custom Dashboards:

  • Create multiple charts on one dashboard
  • Each chart uses a different dataset
  • Dashboard-level time filter keeps them aligned
  • Layout them side-by-side for comparison

Common Pattern: Health + Traffic

Chart 1: Health Status
Dataset: Tunnel Health Checks
Chart 2: Traffic Volume
Dataset: Tunnel Traffic
Chart 3: DDoS Events
Dataset: DDoS Attack Analytics

All filtered to same tunnel names and time range

Troubleshooting

Common Issues & Solutions

❌ Problem: Health shows 0.0 instead of %

Solution

  • Use avg.tunnelState metric
  • Aggregation: "Average" (not Sum/Count)
  • Use Health Checks dataset, not Traffic
❌ Problem: No data for traffic metrics

Solution

  • Match metric and datetime granularity:
  • • bitRateFiveMinutes → datetimeFiveMinutes
  • • bitRateHour → datetimeHour
  • Check time range has recent data
  • Verify tunnel names match (case-sensitive)
❌ Problem: Can't find "Group by field"

Solution

  • Look for "Custom series" vs "Group by field" tabs
  • Use "Custom series" if missing
  • Or start with natural language prompt
❌ Problem: Natural language fails

Solution

  • Be specific with prompts
  • Use official dataset names
  • Try rephrasing or simplifying
  • Fall back to manual config if needed
❌ Problem: Charts not updating with filters

Solution

  • Set filters at dashboard level (not chart level)
  • Check for conflicting chart-level filters
  • Refresh dashboard after changes
✅ Best Practice: Start with natural language to understand structure, then manual for fine-tuning. Always verify metric/datetime match!
💡 Pro Tip: Use browser dev tools (Network tab) to inspect GraphQL queries being sent.
Resources

Official Documentation & Next Steps

📖 Official Cloudflare Docs

🎓 What to Explore Next

  • DDoS Attack Analytics datasets for security monitoring
  • Advanced TCP/DNS Protection datasets
  • Magic Firewall analytics for custom rule monitoring
  • Combining multiple dataset charts on one dashboard
  • Exporting dashboard data for reporting

🚀 Quick Start Checklist

  • ✅ Navigate to Analytics → Custom Dashboards
  • ✅ Create new dashboard, give it a name
  • ✅ Start with natural language: "Show tunnel health..."
  • ✅ Add second chart for traffic volume
  • ✅ Set dashboard-level time filter (e.g., last 24 hours)
  • ✅ Experiment with chart types (timeseries, bar, stat)
  • ✅ Use "Group by" for automatic multi-series
  • ✅ Add DDoS attack count chart for security view
  • ✅ Review and compare with Network Health page
  • ✅ Share dashboard with your team
⚠️ Remember: This guide teaches concepts. The UI may differ. Always refer to official Cloudflare documentation for current interface and features.
25
dashboards per account (100 for Log Explorer)
100+
GraphQL datasets available
Summary

Key Takeaways

📊
Custom Dashboards = GraphQL + UI
Access any of 100+ datasets including all Magic Transit data from Network Health page. Natural language OR manual configuration.
🌐
7 Magic Transit Datasets
Traffic (health, bandwidth), DDoS (attacks, forensics), Advanced Protection (TCP, DNS), and Firewall. Each with unique metrics and dimensions.
🎯
Start with Natural Language
Describe what you want — AI generates the configuration. Then explore manual options for fine-tuning. Match metric/datetime granularity!
🛠️
Multi-Chart Composition
Combine health, traffic, and security charts on one dashboard. Use "Group by field" for automatic multi-series. Dashboard-level filters keep everything aligned.
Next Steps: Log into Cloudflare Dashboard → Analytics → Custom Dashboards → Start building your first Magic Transit monitoring view! 🚀