# 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