Add DASHBOARD_SETUP.md
This commit is contained in:
parent
f4026a1b53
commit
4d4640ecc1
1 changed files with 172 additions and 0 deletions
172
DASHBOARD_SETUP.md
Normal file
172
DASHBOARD_SETUP.md
Normal file
|
|
@ -0,0 +1,172 @@
|
|||
# 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
|
||||
Loading…
Reference in a new issue