Skip to content

Commit 620c245

Browse files
ismoilovdevmlclaude
ismoilovdevml
and
claude
committed
Add modern real-time dashboard with metrics monitoring
## New Features ### 🎨 RustStrom Dashboard Created a beautiful, modern web dashboard for monitoring and managing RustStrom **Features:** - 📊 Real-time metrics visualization with Chart.js - 🌑 Dark mode UI with glassmorphism design - ⚙️ Live configuration editor with TOML syntax - 🖥️ Backend health monitoring and status tracking - 📈 Historical performance trends (1m, 5m, 15m views) - 🔄 Auto-refresh every 5 seconds - 📱 Responsive design for all screen sizes ### 📊 Dashboard Tabs **Overview Tab:** - Total requests counter with real-time rate - Average response time tracking - Success rate percentage - Healthy backends counter - Request distribution doughnut chart - Backend status list with indicators **Metrics Tab:** - Real-time performance line charts - Dual-axis (requests + response time) - Time range filters (1m, 5m, 15m) - Detailed metrics breakdown: - Request metrics - Response time metrics - Error tracking - Backend-specific metrics **Configuration Tab:** - Live TOML editor with line count - Save and reload functionality - Modification status indicator - Quick reference guide - Copy to clipboard - Human-readable with comments **Backends Tab:** - Backend server cards with status - Filter by: All, Healthy, Slow, Unhealthy - Performance metrics per backend - Health status indicators with animations - Test and view logs actions ### 🛠️ Technical Stack - **Vue 3** - Composition API - **Vite** - Fast dev server and build tool - **Chart.js** - Interactive charts - **Axios** - API client - **Modern CSS** - Glassmorphism, animations, dark theme ### 📦 Installation ```bash cd ruststrom-dashboard npm install npm run dev # http://localhost:3000 ``` ### 🔧 API Integration Dashboard connects to RustStrom metrics endpoint: - GET `/metrics` - Prometheus metrics - GET `/config` - Configuration (optional) - POST `/config` - Update config (optional) - POST `/reload` - Reload config (optional) ### 🎨 Design Highlights - GitHub Dark color scheme (#0f1419 background) - Gradient accents (purple, pink, blue, green) - Smooth fade-in animations - Pulse effects for live indicators - Glass morphism cards - Custom scrollbars ### 🐛 Bug Fixes - Fixed cargo fmt issue in ip_hash.rs test assertion 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
1 parent 1de59e1 commit 620c245

File tree

13 files changed

+2246
-1
lines changed

13 files changed

+2246
-1
lines changed

‎ruststrom-dashboard/.gitignore‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
# Dependencies
2+
node_modules/
3+
package-lock.json
4+
5+
# Build output
6+
dist/
7+
8+
# IDE
9+
.vscode/
10+
.idea/
11+
12+
# OS
13+
.DS_Store

‎ruststrom-dashboard/README.md‎

Lines changed: 169 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,169 @@
1+
# RustStrom Dashboard
2+
3+
Modern, real-time dashboard for monitoring and managing RustStrom load balancer.
4+
5+
## ✨ Features
6+
7+
- 📊 **Real-time Metrics** - Live visualization of requests, response times, and errors
8+
- 🎨 **Dark Mode UI** - Beautiful, modern interface with glassmorphism design
9+
- ⚙️ **Configuration Management** - Edit and reload config without restarting
10+
- 🖥️ **Backend Monitoring** - Track health and performance of all backend servers
11+
- 📈 **Historical Data** - View performance trends over time (1m, 5m, 15m)
12+
- 🔄 **Auto-refresh** - Metrics update every 5 seconds automatically
13+
14+
## 🚀 Quick Start
15+
16+
### Prerequisites
17+
18+
- Node.js 18+ or npm
19+
- RustStrom running on `http://127.0.0.1:8000`
20+
21+
### Installation
22+
23+
```bash
24+
cd ruststrom-dashboard
25+
npm install
26+
```
27+
28+
### Development
29+
30+
```bash
31+
npm run dev
32+
```
33+
34+
Dashboard will be available at `http://localhost:3000`
35+
36+
### Production Build
37+
38+
```bash
39+
npm run build
40+
npm run preview
41+
```
42+
43+
## 📊 Screenshots
44+
45+
### Overview Tab
46+
- Total requests counter with real-time rate
47+
- Average response time monitoring
48+
- Success rate tracking
49+
- Backend health status
50+
- Request distribution chart
51+
- Backend status list
52+
53+
### Metrics Tab
54+
- Real-time performance charts
55+
- Request metrics breakdown
56+
- Response time statistics
57+
- Error tracking
58+
- Backend-specific metrics
59+
- Time range filters (1m, 5m, 15m)
60+
61+
### Configuration Tab
62+
- Live TOML editor with syntax highlighting
63+
- Line count and modification status
64+
- Save and reload functionality
65+
- Quick reference guide
66+
- Copy to clipboard
67+
68+
### Backends Tab
69+
- Detailed backend server cards
70+
- Health status indicators
71+
- Performance metrics per backend
72+
- Filter by status (All, Healthy, Slow, Unhealthy)
73+
- Test and view logs actions
74+
75+
## 🔧 Configuration
76+
77+
### API Proxy
78+
79+
The dashboard proxies API requests to RustStrom. Configure in `vite.config.js`:
80+
81+
```javascript
82+
server: {
83+
proxy: {
84+
'/api': {
85+
target: 'http://127.0.0.1:8000',
86+
changeOrigin: true,
87+
rewrite: (path) => path.replace(/^\/api/, '')
88+
}
89+
}
90+
}
91+
```
92+
93+
### Required RustStrom Endpoints
94+
95+
The dashboard expects these endpoints from RustStrom:
96+
97+
- `GET /metrics` - Prometheus metrics endpoint
98+
- `GET /config` - Current configuration (optional)
99+
- `POST /config` - Update configuration (optional)
100+
- `POST /reload` - Reload configuration (optional)
101+
102+
## 🎨 Design Features
103+
104+
- **Glassmorphism** - Modern glass-like UI elements
105+
- **Smooth Animations** - Fade-in effects and transitions
106+
- **Responsive Layout** - Works on all screen sizes
107+
- **Dark Theme** - Easy on the eyes with GitHub Dark color scheme
108+
- **Real-time Updates** - Live data without page refresh
109+
- **Chart.js Integration** - Beautiful, interactive charts
110+
111+
## 📦 Dependencies
112+
113+
- **Vue 3** - Progressive JavaScript framework
114+
- **Chart.js** - Flexible charting library
115+
- **Axios** - HTTP client for API requests
116+
- **Vite** - Fast build tool and dev server
117+
118+
## 🛠️ Development
119+
120+
### Project Structure
121+
122+
```
123+
ruststrom-dashboard/
124+
├── src/
125+
│ ├── components/
126+
│ │ ├── OverviewTab.vue # Main dashboard overview
127+
│ │ ├── MetricsTab.vue # Detailed metrics charts
128+
│ │ ├── ConfigTab.vue # Configuration editor
129+
│ │ └── BackendsTab.vue # Backend server monitoring
130+
│ ├── App.vue # Main app component
131+
│ ├── main.js # App entry point
132+
│ └── style.css # Global styles
133+
├── index.html
134+
├── vite.config.js
135+
└── package.json
136+
```
137+
138+
### Adding New Features
139+
140+
1. Create new component in `src/components/`
141+
2. Add route/tab in `App.vue`
142+
3. Update navigation in sidebar
143+
4. Add necessary API calls
144+
145+
## 📝 Notes
146+
147+
- Metrics are stored in memory (last 60 data points = 5 minutes at 5s interval)
148+
- Backend status is parsed from Prometheus metrics
149+
- Configuration management requires backend API support
150+
- Charts use Chart.js with custom dark theme colors
151+
152+
## 🔒 Security
153+
154+
- No authentication implemented (add reverse proxy auth if needed)
155+
- CORS should be configured on RustStrom backend
156+
- Use HTTPS in production
157+
- Consider rate limiting for configuration changes
158+
159+
## 🤝 Contributing
160+
161+
Contributions welcome! This dashboard is part of the RustStrom project.
162+
163+
## 📄 License
164+
165+
Same as RustStrom main project.
166+
167+
---
168+
169+
🤖 Generated with [Claude Code](https://claude.com/claude-code)

‎ruststrom-dashboard/index.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>RustStrom Dashboard</title>
7+
</head>
8+
<body>
9+
<div id="app"></div>
10+
<script type="module" src="/src/main.js"></script>
11+
</body>
12+
</html>

‎ruststrom-dashboard/package.json‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{
2+
"name": "ruststrom-dashboard",
3+
"version": "1.0.0",
4+
"description": "Modern real-time dashboard for RustStrom load balancer",
5+
"type": "module",
6+
"scripts": {
7+
"dev": "vite",
8+
"build": "vite build",
9+
"preview": "vite preview"
10+
},
11+
"dependencies": {
12+
"vue": "^3.5.13",
13+
"chart.js": "^4.4.7",
14+
"vue-chartjs": "^5.3.2",
15+
"axios": "^1.7.9",
16+
"js-yaml": "^4.1.0"
17+
},
18+
"devDependencies": {
19+
"@vitejs/plugin-vue": "^5.2.1",
20+
"vite": "^6.0.7"
21+
}
22+
}

0 commit comments

Comments
 (0)