Integrated Grafana dashboard panels#12
Merged
Merged
Conversation
5-step plan to embed Grafana panels into fdsc-dashboard via BFF proxy, following the established Apisix Dashboard iframe pattern. Uses Grafana auth proxy mode (X-WEBAUTH-USER header injection from JWT) to eliminate separate login. Panel definitions are operator-configurable via GRAFANA_PANELS_JSON env var. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
…t-35/plan into ticket-35/work Reviewed-on: http://localhost:3001/general-agent-1/fdsc-dashboard/pulls/14 Reviewed-by: wistefan <wistefan@dev-env.local>
Add GRAFANA_URL and GRAFANA_PANELS_JSON environment variables to the BFF server. When configured, a /api/grafana proxy route is mounted that forwards requests to the upstream Grafana instance, injecting an X-WEBAUTH-USER header extracted from the JWT Bearer token so Grafana's auth proxy mode trusts the upstream identity. The runtime /config.js endpoint now includes a window.__GRAFANA_CONFIG__ global for the frontend. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
…sc-dashboard' (#15) from ticket-35/step-1 into ticket-35/work Reviewed-on: http://localhost:3001/general-agent-1/fdsc-dashboard/pulls/15 Reviewed-by: wistefan <wistefan@dev-env.local>
…osable Create the frontend Grafana module (src/grafana/) mirroring the existing Apisix integration pattern: - types.ts: GrafanaPanel and GrafanaConfig interfaces - constants.ts: route paths, proxy base path, runtime config keys - config.ts: loadGrafanaConfig() with runtime global + build-time env fallback, isGrafanaConfigured() predicate, and panel validation - useGrafana.ts: composable returning config, isConfigured, and reactive isVisible (visible to all authenticated users, not just admins) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
…ants, config loader, and composable' (#16) from ticket-35/step-2 into ticket-35/work Reviewed-on: http://localhost:3001/general-agent-1/fdsc-dashboard/pulls/16 Reviewed-by: wistefan <wistefan@dev-env.local>
…rings Create the Grafana panels view component with three rendering states (not configured, no panels, panels grid), wire up the route without admin restriction (monitoring is read-only for all authenticated users), add the navigation drawer and home card entries with conditional visibility, and add all user-facing i18n strings. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
…sc-dashboard' (#17) from ticket-35/step-3 into ticket-35/work Reviewed-on: http://localhost:3001/general-agent-1/fdsc-dashboard/pulls/17 Reviewed-by: wistefan <wistefan@dev-env.local>
…hboard Wire up development tooling for the Grafana integration: - vite.config.ts: Add /api/grafana proxy in direct mode (strips prefix, targets VITE_GRAFANA_URL or localhost:3100) and inject window.__GRAFANA_CONFIG__ in the runtimeConfigPlugin so the frontend sees Grafana config without a running BFF. - docker-compose.yml: Add a grafana service (grafana/grafana:latest) with auth proxy mode enabled (X-WEBAUTH-USER), iframe embedding allowed, and light theme default. Mount provisioning directory for auto-provisioned TestData datasource and sample dashboard. Configure the dashboard BFF service with GRAFANA_URL and GRAFANA_PANELS_JSON pointing at the three sample panels. - mocks/grafana/provisioning/: Add TestData datasource config, dashboard provisioning config, and a sample dashboard JSON with three panels (time series, table, gauge) for out-of-the-box demonstration. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
…roxy, Docker Compose, and mock/sample Grafana' (#18) from ticket-35/step-4 into ticket-35/work Reviewed-on: http://localhost:3001/general-agent-1/fdsc-dashboard/pulls/18 Reviewed-by: wistefan <wistefan@dev-env.local>
Add comprehensive tests for the three frontend Grafana modules: - src/grafana/__tests__/config.spec.ts (36 tests): config loader, runtime global parsing, build-time env var fallback, panel validation, whitespace handling, frozen object checks, isGrafanaConfigured helper. - src/composables/__tests__/useGrafana.spec.ts (12 tests): parameterized visibility truth table covering configured/unconfigured, auth enabled/disabled, authenticated/unauthenticated combinations. Verifies Grafana is visible to all authenticated users (not admin-only like Apisix). - src/views/grafana/__tests__/GrafanaView.spec.ts (20 tests): three rendering states (not configured, no panels, configured with panels), iframe src construction, sandbox/referrerpolicy/loading attributes, panel dimensions (span and height defaults), panel title headings, back button navigation, and Escape key handler. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
…t coverage' (#19) from ticket-35/step-5 into ticket-35/work Reviewed-on: http://localhost:3001/general-agent-1/fdsc-dashboard/pulls/19 Reviewed-by: wistefan <wistefan@dev-env.local>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Integrated Grafana dashboard panels into the fdsc-dashboard, embedding them via iframes through the BFF proxy.
Release Notes
Integrated Grafana dashboard panels into the fdsc-dashboard, embedding them via iframes through the BFF proxy.
Testing
Checklist
major/minor/patchlabels.## Summaryand## Release Notessections are filled in, orI added a
release-notes/next.mdfile on this branch.npm run lint,npm run build).