feat(admin): add observability dashboard UI with Grafana embeds#666
Open
Ferryx349 wants to merge 5 commits into
Open
feat(admin): add observability dashboard UI with Grafana embeds#666Ferryx349 wants to merge 5 commits into
Ferryx349 wants to merge 5 commits into
Conversation
Signed-off-by: ABHAY PANDEY <pandeyabhay967@gmail.com>
Signed-off-by: ABHAY PANDEY <pandeyabhay967@gmail.com>
Signed-off-by: ABHAY PANDEY <pandeyabhay967@gmail.com>
🦋 Changeset detectedLatest commit: 9228c24 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
| // codeql[js/missing-rate-limiting] - feature gate only, not authentication | ||
| router.use(adminEnabledMiddleware) | ||
| router.use('/assets', express.static('./resources/admin/assets')) | ||
| router.get('/', getAdminDashboardRequestHandler) |
Collaborator
|
coverage: 67.635% (-0.1%) from 67.747% — Ferryx349:UI-DASH into cameri:main |
There was a problem hiding this comment.
Pull request overview
Adds an opt-in admin observability console at /admin that streams live health/throughput/resource metrics via SSE and embeds Grafana panels for richer charts, including local docker-compose provisioning for Prometheus+Grafana.
Changes:
- Introduces
/admindashboard shell + static assets, plus/admin/metricsSSE streaming and Prometheus query utilities. - Adds Grafana URL helpers and docker-compose provisioning for a
nostream-overviewdashboard and Prometheus datasource. - Hardens admin dependency/metrics timeouts and makes Redis-backed rate limiting fail-open on backend outages.
Reviewed changes
Copilot reviewed 33 out of 33 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| test/unit/utils/prometheus-client.spec.ts | Unit tests for Prometheus URL normalization, scalar parsing, and instant query behavior. |
| test/unit/utils/admin-metrics.spec.ts | Unit tests for admin metrics snapshot composition, degraded/unavailable states, and caching. |
| test/unit/utils/admin-grafana.spec.ts | Unit tests for Grafana URL helpers and env var normalization. |
| test/unit/routes/admin.spec.ts | Route-level tests for admin enablement, dashboard shell, auth gating, and SSE content-type. |
| test/unit/handlers/event-message-handler.spec.ts | Test coverage for fail-open behavior when rate limiter backend fails. |
| src/utils/prometheus-client.ts | Prometheus instant-query client with parsing + timeout and warning logs. |
| src/utils/admin-session.ts | Adds helper for clearing the admin session cookie on logout. |
| src/utils/admin-metrics.ts | Collects and caches admin metrics snapshots from Prometheus + dependency health. |
| src/utils/admin-health.ts | Parallel dependency pings with configurable timeouts. |
| src/utils/admin-grafana.ts | Grafana base/dashboard/embed URL utilities and origin extraction for CSP. |
| src/routes/admin/index.ts | Admin router wiring: static assets, dashboard routes, logout, health, metrics SSE. |
| src/handlers/request-handlers/get-admin-dashboard-request-handler.ts | Serves the admin dashboard HTML template with injected settings/URLs. |
| src/handlers/event-message-handler.ts | Rate limiter failures are treated as fail-open (do not reject events on Redis outages). |
| src/factories/web-app-factory.ts | CSP updates (incl. frame-src) and protocol fix for derived web relay URL. |
| src/factories/controllers/post-admin-logout-controller-factory.ts | Factory for admin logout controller. |
| src/factories/controllers/get-admin-metrics-controller-factory.ts | Factory for admin metrics SSE controller. |
| src/controllers/admin/post-logout-controller.ts | Logout controller delegating to auth provider. |
| src/controllers/admin/get-metrics-controller.ts | SSE controller that streams metrics snapshots at a configured interval. |
| src/app/app.ts | Safer centering logic when terminal width is smaller than text length. |
| src/admin/password-admin-auth-provider.ts | Implements logout by clearing the session cookie and returning { authenticated: false }. |
| src/@types/admin.ts | Extends admin auth provider interface with handleLogout. |
| resources/admin/dashboard.html | New admin dashboard HTML shell with login + KPI cards + Grafana iframes. |
| resources/admin/assets/dashboard.js | Frontend logic for login/session, SSE streaming, staleness detection, theme toggle, and embeds. |
| resources/admin/assets/dashboard.css | Styling for the admin console UI in light/dark themes. |
| grafana/provisioning/datasources/prometheus.yaml | Provisioned Prometheus datasource for Grafana. |
| grafana/provisioning/dashboards/default.yaml | Provisioned dashboard provider configuration. |
| grafana/dashboards/nostream-overview.json | Provisioned Grafana dashboard definition used by the admin embeds. |
| docs/REDIS.md | Documents fail-open rate limiting behavior during Redis outages. |
| docker-compose.yml | Adds Grafana service + env vars for Prometheus/admin metrics configuration. |
| CONFIGURATION.md | Documents new observability/admin-related environment variables. |
| .env.example | Adds example env vars for Prometheus/Grafana/admin console setup. |
| .changeset/admin-metrics-sse-endpoint.md | Changeset for admin metrics SSE endpoint feature. |
| .changeset/admin-dashboard-ui.md | Changeset for admin dashboard UI + Grafana embed feature. |
Comments suppressed due to low confidence (1)
src/factories/web-app-factory.ts:35
- Admin dashboard loads IBM Plex Mono from https://fonts.googleapis.com / https://fonts.gstatic.com (resources/admin/dashboard.html), but the global CSP currently only allows styles/fonts from self and jsdelivr. This will block the Google Fonts stylesheet and font files in the browser.
Allow these origins in the relevant CSP directives (or alternatively vend the font locally).
const directives = {
'img-src': ["'self'", 'data:', 'https://cdn.zebedee.io/an/nostr/'],
'connect-src': ["'self'", settings.info.relay_url as string, webRelayUrl.toString()],
'default-src': ["'self'"],
'frame-src': ["'self'", getGrafanaFrameOrigin()],
'script-src-attr': [`'nonce-${nonce}'`],
'script-src': [
"'self'",
`'nonce-${nonce}'`,
'https://cdn.jsdelivr.net/npm/',
'https://unpkg.com/',
'https://cdnjs.cloudflare.com/ajax/libs/',
],
'style-src': ["'self'", 'https://cdn.jsdelivr.net/npm/'],
'font-src': ["'self'", 'https://cdn.jsdelivr.net/npm/'],
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Collaborator
|
Hello, im wondering why Grafana? and not raw tailwind components? i've the code for the original screens at #594 i was waiting for ground work, Good job on the other PRs! |
Collaborator
Author
|
@Justxd22 Sure, we can replace the screen with tailwind components. Actually styling was handled with Bootstrap and custom CSS by me, and Grafana was added specifically for the charting layer. |
Collaborator
Author
|
Will it work for you to push tailwind code in seperate PR, then we can make changes accordingly in this PR.. |
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
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.
Description
Summary
/adminwith live health, throughput, events, and resource cards/admin/metricsSSE endpoint with stale-data and fault indicatorsnostream-overviewdashboardadmin.enabled: falseby default)Related Issue
Fixes :- #663
How Has This Been Tested?
admin.enabled: true&ADMIN_PASSWORDin settings/env, sign in at/admin[FAULT], dashboard stays reachabledocker compose up -d otel-collector prometheus grafana-> Grafana panels loadpnpm test:unitfor admin routes, grafana utils, event handler, and metrics specsScreenshots (if appropriate):
Auth
Metrices Dashboard
Graphs
Hamburger (Light Mode)
Grafana dashboard
Types of changes
Checklist: