chore: initial clean commit
This commit is contained in:
207
DASHBOARD_README.md
Normal file
207
DASHBOARD_README.md
Normal file
@@ -0,0 +1,207 @@
|
||||
# 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. **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
|
||||
- `DELETE /api/clients/{id}` - Revoke client
|
||||
- `GET /api/clients/{id}/usage` - Client-specific usage
|
||||
|
||||
### 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.
|
||||
Reference in New Issue
Block a user