Add DASHBOARD_SETUP.md

DASHBOARD_SETUP.md

@@ -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