Grafana Cloud Dashboard
Build a custom TV dashboard displaying metrics from your Grafana Cloud Prometheus data
Guide
Grafana Cloud Dashboard
Build a custom TV-optimized dashboard that queries your Grafana Cloud Prometheus data source and visualizes the metrics.
Note: Grafana Cloud doesn't support iframe embedding, so we build a custom dashboard using their API.
Prerequisites
Activate OptiDev Cloud - Click the "OptiDev Cloud" button in your project
Create a Grafana Cloud Service Account - Go to Grafana Cloud > Administration > Service Accounts > Create
Add secrets - Go to OptiDev Cloud > Secrets and add:
-GRAFANA_API_TOKEN- Your service account token
-GRAFANA_STACK_URL- Your Grafana stack URL (e.g.,https://your-stack.grafana.net)
-GRAFANA_DATASOURCE_ID- Your Prometheus data source ID (find in Grafana > Data Sources)
API Reference
Query Prometheus metrics via Grafana Cloud:
``
GET {GRAFANA_STACK_URL}/api/datasources/proxy/{DATASOURCE_ID}/api/v1/query
Authorization: Bearer {GRAFANA_API_TOKEN}
Docs: https://grafana.com/docs/grafana-cloud/developer-resources/api-reference/http-api/
Customize Your Queries
Replace the example PromQL queries in the final prompt with your own metrics.
Final Prompt
### Purpose I need to build a custom dashboard for TV display that shows metrics from my Grafana Cloud Prometheus data source. ### Requirements Build a dashboard that queries Grafana Cloud and visualizes the results. **API Setup** - Base URL: Use `GRAFANA_STACK_URL` from secrets - Auth: Bearer token using `GRAFANA_API_TOKEN` from secrets - Endpoint: `/api/datasources/proxy/{GRAFANA_DATASOURCE_ID}/api/v1/query` - Query param: `query` = PromQL query string **Metrics to Display** (customize these PromQL queries for your data) - CPU Usage: `avg(rate(container_cpu_usage_seconds_total[5m])) * 100` - Memory Usage: `avg(container_memory_usage_bytes) / 1024 / 1024 / 1024` - Request Rate: `sum(rate(http_requests_total[5m]))` - Error Rate: `sum(rate(http_requests_total{status=~"5.."}[5m]))` **Dashboard Layout** - Dark theme for TV display - Large metric cards at top with current values - Simple line charts for trends (last 1 hour) - Auto-refresh every 60 seconds - Show last updated timestamp **Backend Setup** I've activated OptiDev Cloud and added `GRAFANA_API_TOKEN`, `GRAFANA_STACK_URL`, and `GRAFANA_DATASOURCE_ID` in the project secrets.