220 lines
6.4 KiB
Markdown
220 lines
6.4 KiB
Markdown
# LLM Proxy Gateway - Admin Dashboard
|
|
|
|
## Overview
|
|
|
|
This is a comprehensive admin dashboard for the LLM Proxy Gateway, providing real-time monitoring, analytics, and management capabilities for the proxy service.
|
|
|
|
## Features
|
|
|
|
### 1. Dashboard Overview
|
|
- Real-time request counters and statistics
|
|
- System health indicators
|
|
- Provider status monitoring
|
|
- Recent requests stream
|
|
|
|
### 2. Usage Analytics
|
|
- Time series charts for requests, tokens, and costs
|
|
- Filter by date range, client, provider, and model
|
|
- Top clients and models analysis
|
|
- Export functionality to CSV/JSON
|
|
|
|
### 3. Cost Management
|
|
- Cost breakdown by provider, client, and model
|
|
- Budget tracking with alerts
|
|
- Cost projections
|
|
- Pricing configuration management
|
|
|
|
### 4. Client Management
|
|
- List, create, revoke, and rotate API tokens
|
|
- Client-specific rate limits
|
|
- Usage statistics per client
|
|
- Token management interface
|
|
|
|
### 5. Provider Configuration
|
|
- Enable/disable LLM providers
|
|
- Configure API keys (masked display)
|
|
- Test provider connections
|
|
- Model availability management
|
|
|
|
### 6. User Management (RBAC)
|
|
- **Admin Role:** Full access to all dashboard features, user management, system configuration
|
|
- **Viewer Role:** Read-only access to usage analytics, costs, and monitoring
|
|
- Create/manage dashboard users with role assignment
|
|
- Secure password management
|
|
|
|
### 7. Real-time Monitoring
|
|
- Live request stream via WebSocket
|
|
- System metrics dashboard
|
|
- Response time and error rate tracking
|
|
- Live system logs
|
|
|
|
### 7. **System Settings**
|
|
- General configuration
|
|
- Database management
|
|
- Logging settings
|
|
- Security settings
|
|
|
|
## Technology Stack
|
|
|
|
### Frontend
|
|
- **HTML5/CSS3**: Modern, responsive design with CSS Grid/Flexbox
|
|
- **JavaScript (ES6+)**: Vanilla JavaScript with modular architecture
|
|
- **Chart.js**: Interactive data visualizations
|
|
- **Luxon**: Date/time manipulation
|
|
- **WebSocket API**: Real-time updates
|
|
|
|
### Backend (Rust/Axum)
|
|
- **Axum**: Web framework with WebSocket support
|
|
- **Tokio**: Async runtime
|
|
- **Serde**: JSON serialization/deserialization
|
|
- **Broadcast channels**: Real-time event distribution
|
|
|
|
## Installation & Setup
|
|
|
|
### 1. Build and Run the Server
|
|
```bash
|
|
# Build the project
|
|
cargo build --release
|
|
|
|
# Run the server
|
|
cargo run --release
|
|
```
|
|
|
|
### 2. Access the Dashboard
|
|
Once the server is running, access the dashboard at:
|
|
```
|
|
http://localhost:8080
|
|
```
|
|
|
|
### 3. Default Login Credentials
|
|
- **Username**: `admin`
|
|
- **Password**: `admin123`
|
|
|
|
## API Endpoints
|
|
|
|
### Authentication
|
|
- `POST /api/auth/login` - Dashboard login
|
|
- `GET /api/auth/status` - Authentication status
|
|
|
|
### Analytics
|
|
- `GET /api/usage/summary` - Overall usage summary
|
|
- `GET /api/usage/time-series` - Time series data
|
|
- `GET /api/usage/clients` - Client breakdown
|
|
- `GET /api/usage/providers` - Provider breakdown
|
|
|
|
### Clients
|
|
- `GET /api/clients` - List all clients
|
|
- `POST /api/clients` - Create new client
|
|
- `PUT /api/clients/{id}` - Update client
|
|
- `DELETE /api/clients/{id}` - Revoke client
|
|
- `GET /api/clients/{id}/usage` - Client-specific usage
|
|
|
|
### Users (RBAC)
|
|
- `GET /api/users` - List all dashboard users
|
|
- `POST /api/users` - Create new user
|
|
- `PUT /api/users/{id}` - Update user (admin only)
|
|
- `DELETE /api/users/{id}` - Delete user (admin only)
|
|
|
|
### Providers
|
|
- `GET /api/providers` - List providers and status
|
|
- `PUT /api/providers/{name}` - Update provider config
|
|
- `POST /api/providers/{name}/test` - Test provider connection
|
|
|
|
### System
|
|
- `GET /api/system/health` - System health
|
|
- `GET /api/system/logs` - Recent logs
|
|
- `POST /api/system/backup` - Trigger backup
|
|
|
|
### WebSocket
|
|
- `GET /ws` - WebSocket endpoint for real-time updates
|
|
|
|
## Project Structure
|
|
|
|
```
|
|
llm-proxy/
|
|
├── src/
|
|
│ ├── dashboard/ # Dashboard backend module
|
|
│ │ └── mod.rs # Dashboard routes and handlers
|
|
│ ├── server/ # Main proxy server
|
|
│ ├── providers/ # LLM provider implementations
|
|
│ └── ... # Other modules
|
|
├── static/ # Frontend dashboard files
|
|
│ ├── index.html # Main dashboard HTML
|
|
│ ├── css/
|
|
│ │ └── dashboard.css # Dashboard styles
|
|
│ ├── js/
|
|
│ │ ├── auth.js # Authentication module
|
|
│ │ ├── dashboard.js # Main dashboard controller
|
|
│ │ ├── websocket.js # WebSocket manager
|
|
│ │ ├── charts.js # Chart.js utilities
|
|
│ │ └── pages/ # Page-specific modules
|
|
│ │ ├── overview.js
|
|
│ │ ├── analytics.js
|
|
│ │ ├── costs.js
|
|
│ │ ├── clients.js
|
|
│ │ ├── providers.js
|
|
│ │ ├── monitoring.js
|
|
│ │ ├── settings.js
|
|
│ │ └── logs.js
|
|
│ ├── img/ # Images and icons
|
|
│ └── fonts/ # Font files
|
|
└── Cargo.toml # Rust dependencies
|
|
```
|
|
|
|
## Development
|
|
|
|
### Adding New Pages
|
|
1. Create a new JavaScript module in `static/js/pages/`
|
|
2. Implement the page class with `init()` method
|
|
3. Register the page in `dashboard.js`
|
|
4. Add menu item in `index.html`
|
|
|
|
### Adding New API Endpoints
|
|
1. Add route in `src/dashboard/mod.rs`
|
|
2. Implement handler function
|
|
3. Update frontend JavaScript to call the endpoint
|
|
|
|
### Styling Guidelines
|
|
- Use CSS custom properties (variables) from `:root`
|
|
- Follow mobile-first responsive design
|
|
- Use BEM-like naming convention for CSS classes
|
|
- Maintain consistent spacing with CSS variables
|
|
|
|
## Security Considerations
|
|
|
|
1. **Authentication**: Simple password-based auth for demo; replace with proper auth in production
|
|
2. **API Keys**: Tokens are masked in the UI (only last 4 characters shown)
|
|
3. **CORS**: Configure appropriate CORS headers for production
|
|
4. **Rate Limiting**: Implement rate limiting for API endpoints
|
|
5. **HTTPS**: Always use HTTPS in production
|
|
|
|
## Performance Optimizations
|
|
|
|
1. **Code Splitting**: JavaScript modules are loaded on-demand
|
|
2. **Caching**: Static assets are served with cache headers
|
|
3. **WebSocket**: Real-time updates reduce polling overhead
|
|
4. **Lazy Loading**: Charts and tables load data as needed
|
|
5. **Compression**: Enable gzip/brotli compression for static files
|
|
|
|
## Browser Support
|
|
|
|
- Chrome 60+
|
|
- Firefox 55+
|
|
- Safari 11+
|
|
- Edge 79+
|
|
|
|
## License
|
|
|
|
MIT License - See LICENSE file for details.
|
|
|
|
## Contributing
|
|
|
|
1. Fork the repository
|
|
2. Create a feature branch
|
|
3. Make your changes
|
|
4. Add tests if applicable
|
|
5. Submit a pull request
|
|
|
|
## Support
|
|
|
|
For issues and feature requests, please use the GitHub issue tracker. |