172 lines
4.4 KiB
Markdown
172 lines
4.4 KiB
Markdown
# MCP Gateway Dashboard Setup
|
|
|
|
## Overview
|
|
|
|
The dashboard provides real-time monitoring of all MCP services with:
|
|
- **Service Health Status** (healthy/warning/unhealthy)
|
|
- **Tool Counts** per service
|
|
- **Response Times** for each backend
|
|
- **Live Updates** every 30 seconds
|
|
- **Summary Statistics** (total services, total tools, healthy count)
|
|
|
|
## Files Created
|
|
|
|
- `dashboard/dashboard.html` - Standalone React dashboard
|
|
- `gateway-proxy/dashboard_routes.py` - FastAPI routes for status endpoints
|
|
- `Dashboard.jsx` - React component (for reference/development)
|
|
|
|
## Integration Steps
|
|
|
|
### 1. Add Dashboard Routes to Gateway Proxy
|
|
|
|
Edit `gateway-proxy/gateway_proxy.py` and add these imports:
|
|
|
|
```python
|
|
from dashboard_routes import setup_dashboard_routes
|
|
import asyncio
|
|
```
|
|
|
|
In the app initialization section (after creating the FastAPI app), add:
|
|
|
|
```python
|
|
# Setup dashboard routes
|
|
dashboard_router = await setup_dashboard_routes(app)
|
|
app.include_router(dashboard_router)
|
|
```
|
|
|
|
### 2. Ensure Static Files Are Served
|
|
|
|
The gateway must serve static files. Add to your FastAPI app setup:
|
|
|
|
```python
|
|
from fastapi.staticfiles import StaticFiles
|
|
|
|
# Mount dashboard static files
|
|
app.mount("/dashboard", StaticFiles(directory="dashboard"), name="dashboard")
|
|
```
|
|
|
|
### 3. Verify Dockerfile
|
|
|
|
Make sure the Dockerfile copies the dashboard folder:
|
|
|
|
```dockerfile
|
|
COPY dashboard/ /app/dashboard/
|
|
```
|
|
|
|
## Usage
|
|
|
|
Once running, access the dashboard at:
|
|
|
|
```
|
|
http://localhost:4444/dashboard
|
|
```
|
|
|
|
Or if running on a remote server:
|
|
|
|
```
|
|
https://mcp.wilddragon.net/dashboard
|
|
```
|
|
|
|
## API Endpoints
|
|
|
|
### Get All Services Status
|
|
```bash
|
|
curl http://localhost:4444/mcp/status
|
|
```
|
|
|
|
Response:
|
|
```json
|
|
{
|
|
"timestamp": "2026-03-31T12:34:56.789Z",
|
|
"services": [
|
|
{
|
|
"name": "ERPNext",
|
|
"key": "erpnext",
|
|
"url": "http://mcp-erpnext:32802/mcp",
|
|
"status": "healthy",
|
|
"toolCount": 42,
|
|
"responseTime": 125.5,
|
|
"lastCheck": "2026-03-31T12:34:56.789Z"
|
|
},
|
|
...
|
|
],
|
|
"summary": {
|
|
"total": 5,
|
|
"healthy": 5,
|
|
"warning": 0,
|
|
"unhealthy": 0,
|
|
"totalTools": 150
|
|
}
|
|
}
|
|
```
|
|
|
|
### Get Specific Service Status
|
|
```bash
|
|
curl http://localhost:4444/mcp/status/erpnext
|
|
```
|
|
|
|
## Dashboard Features
|
|
|
|
### Summary Statistics
|
|
- **Total Services** - Number of MCP backends configured
|
|
- **Total Tools** - Aggregate count of all available tools
|
|
- **Healthy Services** - Count of services with "healthy" status
|
|
|
|
### Service Cards
|
|
Each service displays:
|
|
- **Service Name** with status badge (green/yellow/red)
|
|
- **Tools Available** - Count of callable tools
|
|
- **Response Time** - Latency to service in milliseconds
|
|
- **Service URL** - Full HTTP endpoint
|
|
- **Last Check** - Timestamp of last health check
|
|
|
|
### Status Indicators
|
|
|
|
**Healthy** (Green)
|
|
- Service is running and responding
|
|
- Tools are accessible
|
|
- Response time under normal range
|
|
|
|
**Warning** (Yellow)
|
|
- Service is responding but with issues
|
|
- May be slow or returning partial data
|
|
- Investigate configuration or load
|
|
|
|
**Unhealthy** (Red)
|
|
- Service is not responding
|
|
- Cannot retrieve tools
|
|
- Check service logs and Docker status
|
|
|
|
## Troubleshooting
|
|
|
|
### Dashboard Not Loading
|
|
1. Check gateway is running: `docker ps | grep mcp-gateway`
|
|
2. Verify dashboard files exist: `ls gateway-proxy/dashboard/`
|
|
3. Check gateway logs: `docker logs mcp-gateway`
|
|
4. Ensure Flask/FastAPI is serving static files correctly
|
|
|
|
### Services Showing "Unhealthy"
|
|
1. Check service container is running: `docker ps`
|
|
2. View service logs: `docker logs mcp-<service>`
|
|
3. Test service directly: `curl http://localhost:<port>/mcp/tools`
|
|
4. Check network connectivity in Docker: `docker network ls`
|
|
|
|
### No Tools Appearing
|
|
1. Verify MCP service has loaded its tools
|
|
2. Check service logs for initialization errors
|
|
3. Restart the service: `docker compose restart mcp-<service>`
|
|
4. Rebuild if configuration changed: `docker compose up --build`
|
|
|
|
## Auto-Refresh
|
|
|
|
The dashboard automatically refreshes every 30 seconds. You can also manually refresh by clicking the "Refresh" button.
|
|
|
|
The refresh interval can be adjusted in `dashboard/dashboard.html` (search for `setInterval(fetchServiceStatus, 30000)`).
|
|
|
|
## Performance Notes
|
|
|
|
- Dashboard makes requests to `/mcp/status` endpoint
|
|
- Each status check queries all services (health check + tool count)
|
|
- Response time is typically 1-5 seconds depending on service count and network
|
|
- Results are displayed with individual service response times
|
|
- No heavy processing — all work done by individual MCP services
|