dashboard-designlisted

# dashboard-design ## When to use Use when designing a new Grafana or admin dashboard, deciding what goes where (Grafana vs. app), or embedding Grafana panels in the Laravel app. Do NOT use when: - Writing Grafana queries/JSON (use `grafana` skill) - Building Livewire components (use `livewire` skill) ## Procedure: Design a dashboard | Domain | Technology | Purpose | |---|---|---| | **Monitoring** | Grafana + Loki | Infrastructure health, error rates, logs, SLAs | | **Business/Admin** | Laravel + Livewire + Tailwind | Customer KPIs, import stats, usage metrics | ### Decision: What goes where? | Data | Where | |---|---| | Server metrics, error rates, latency | Grafana | | Log analysis, traces | Grafana (Loki) | | SLA/uptime tracking | Grafana | | Customer-facing KPIs | App dashboard | | Import statistics per customer | App dashboard (+ Grafana embed) | | User activity, usage metrics | App dashboard | ### Grafana Embedding ```html <iframe src="https://grafana.example.com/d-solo/{dashboard-uid}/{panel-id}?orgId=1&from=now-24h&to=now&var-fqdn={{ $customer->fqdn }}&theme=light" width="100%" height="300" frameborder="0" ></iframe> ``` Config required: `allow_embedding = true`, `cookie_samesite = none` (cross-origin), anonymous access/auth proxy, tenant variables via URL params, `&theme=light|dark`. | Scenario | Approach | |---|---| | Quick KPI overview | Embed Grafana stat panels | | Detailed investigation | Link to full Grafana dashboard | | Customer-facing | Build