Skip to content

[EPIC][UI]: Integrated monitoring and observability UI #2299

Open
Feature
Open
[EPIC][UI]: Integrated monitoring and observability UI#2299
Feature
Labels
COULDP3: Nice-to-have features with minimal impact if left out; included if time permitsenhancementNew feature or requestepicLarge feature spanning multiple issuesfrontendFrontend development (HTML, CSS, JavaScript)observabilityObservability, logging, monitoringuiUser Interface
Milestone
Release 1.4.0
@crivetimihai

Description

@crivetimihai
crivetimihai
opened on Jan 21, 2026

Overview

Integrate Grafana, Prometheus, and Loki directly into the Admin UI to provide unified observability without context-switching between applications.

Current State

The monitoring stack includes:

  • Prometheus - Metrics collection and alerting
  • Grafana - Visualization dashboards
  • Loki - Log aggregation
  • Promtail - Log shipping
  • cAdvisor - Container metrics
  • Exporters - PostgreSQL, Redis, PgBouncer, Nginx

Existing dashboards:

  • mcp-gateway-overview.json - Gateway overview
  • mcpgateway-application.json - Application metrics
  • cadvisor.json, nginx.json, pgbouncer.json, postgresql.json, redis.json

User Stories

Embedded Metrics

  • As an operator, I want to see key metrics embedded in Admin UI so I don't need to switch to Grafana for basic monitoring
  • As an operator, I want configurable metric panels on the Admin UI dashboard page
  • As an operator, I want to embed Grafana panels using iframe embedding or direct Prometheus queries

Dashboard Integration

  • As an operator, I want quick links from Admin UI to relevant Grafana dashboards
  • As an operator, I want context-aware links (e.g., clicking a server shows its specific dashboard)
  • As an operator, I want to configure Grafana base URL for dashboard links

Log Viewer

  • As an operator, I want to query Loki logs from within Admin UI
  • As an operator, I want to filter logs by tool name, server, or time range
  • As an operator, I want to see tool invocation logs inline with tool details
  • As an operator, I want log streaming (tail -f style) for real-time debugging

Alerting Integration

  • As an operator, I want to view active Prometheus alerts in Admin UI
  • As an operator, I want to see alert history and acknowledgment status
  • As an operator, I want to manage alerting rules from Admin UI (if permissions allow)
  • As an operator, I want Grafana alert annotations visible in the UI

Health Overview

  • As an operator, I want an aggregate health status showing all service states
  • As an operator, I want to see Redis, PostgreSQL, and other dependency health at a glance
  • As an operator, I want health history trends (last 24h, 7d)

Custom Dashboards

  • As an operator, I want to create mini-dashboards with PromQL queries
  • As an operator, I want to save and share custom dashboard configurations
  • As an operator, I want preset dashboard templates for common use cases

Technical Considerations

Grafana Integration Options

  1. iframe embedding - Simple but requires Grafana anonymous auth or auth proxy
  2. Grafana HTTP API - Query dashboards/panels programmatically
  3. Direct Prometheus queries - Render metrics using Chart.js without Grafana

Loki Integration

  • Use Loki HTTP API for log queries
  • Consider LogQL query builder for non-expert users
  • Stream logs via WebSocket for real-time tailing

Configuration

MCPGATEWAY_GRAFANA_URL=http://grafana:3000
MCPGATEWAY_GRAFANA_API_KEY=...
MCPGATEWAY_PROMETHEUS_URL=http://prometheus:9090
MCPGATEWAY_LOKI_URL=http://loki:3100
MCPGATEWAY_OBSERVABILITY_ENABLED=true

Dependencies

Acceptance Criteria

  • Embedded metrics panels render in Admin UI dashboard
  • Dashboard deep links work with configurable Grafana URL
  • Log viewer queries Loki and displays results
  • Alert status visible in Admin UI
  • Health overview aggregates all service states
  • Documentation covers configuration and usage

Milestone

Release 1.5.0 - Ecosystem Integrations, Advanced Observability, Plugin Marketplace

Metadata

Metadata

Assignees

No one assigned

    Labels

    COULDP3: Nice-to-have features with minimal impact if left out; included if time permitsenhancementNew feature or requestepicLarge feature spanning multiple issuesfrontendFrontend development (HTML, CSS, JavaScript)observabilityObservability, logging, monitoringuiUser Interface

    Type

    Feature

    Fields

    No fields configured for Feature.

    Projects

    No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions