Skip to content

Commit 3cfb3b3

Browse files
fahuddinfahuddin
committed
edited README and AI created a simple html file test the ui of the dashboard
1 parent ed22126 commit 3cfb3b3

File tree

2 files changed

+176
-0
lines changed

2 files changed

+176
-0
lines changed

‎dashboard/README.md‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
# Modern Dashboard for Semantic Router
2+
3+
This dashboard provides a unified entry point for configuration management, interactive playground, and real-time monitoring & observability.
4+
5+
## Structure
6+
7+
- `frontend/`: UI for configuration, playground, monitoring
8+
- Monitoring (iframe Grafana + Prometheus charts)
9+
- Config Viewer (Read-only VSR config JSON)
10+
- Playground (iframe Open WebUI)
11+
- `backend/`: API proxy, authentication, metrics aggregation
12+
- `/api/metrics` → Prometheus
13+
- `/api/config` → semantic-router API / config loader
14+
- `/api/proxy` → Open WebUI proxy
15+
- `deploy/`: Deployment setups
16+
- `docker/`: Docker Compose setup
17+
- `kubernetes/`: K8s manifests
18+
- `local/`: Local/dev setup
19+
- `helm-chart/`: (optional) Helm chart for dashboard
20+
21+
## Key Features
22+
23+
- **Grafana Integration**: Embedded dashboards via iframe, with reverse proxy and authentication.
24+
- **Deployment Flexibility**: Local, Docker Compose, and Kubernetes support.
25+
- **Security & Access Control**: Centralized authentication and role-based access control.
26+
- **Extensibility**: Modular structure for future integrations.
27+
28+
## Getting Started
29+
30+
1. Choose your deployment method (`local/`, `docker/`, or `kubernetes/`).
31+
2. Follow the setup instructions in the respective folder.
32+
3. Access the dashboard via the provided URL.
33+
34+
## Future Extensions
35+
- Alerts, advanced analytics, third-party integrations, Frontend UI, Backend API etc.
36+
37+
---
38+
For more details, see individual folder READMEs and configuration files.

‎dashboard/frontend/index.html‎

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
/* A simple, AI generated HTML modern dashboard UI for the Semantic Router project. */
2+
3+
<!DOCTYPE html>
4+
<html lang="en">
5+
<head>
6+
<meta charset="UTF-8">
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
8+
<title>Semantic Router Dashboard</title>
9+
<link href="https://fonts.googleapis.com/css?family=Inter:400,600&display=swap" rel="stylesheet">
10+
<style>
11+
body {
12+
margin: 0;
13+
font-family: 'Inter', Arial, sans-serif;
14+
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
15+
color: #222;
16+
}
17+
header {
18+
background: #2d3748;
19+
color: #fff;
20+
padding: 2rem 0 1.5rem 0;
21+
text-align: center;
22+
box-shadow: 0 2px 8px rgba(44,62,80,0.08);
23+
}
24+
header h1 {
25+
margin: 0;
26+
font-size: 2.5rem;
27+
font-weight: 600;
28+
letter-spacing: 1px;
29+
}
30+
header p {
31+
margin: 0.5rem 0 0 0;
32+
font-size: 1.2rem;
33+
color: #cbd5e1;
34+
}
35+
.container {
36+
max-width: 1100px;
37+
margin: 2rem auto;
38+
padding: 0 1.5rem;
39+
}
40+
.dashboard-grid {
41+
display: grid;
42+
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
43+
gap: 2rem;
44+
}
45+
.card {
46+
background: #fff;
47+
border-radius: 1rem;
48+
box-shadow: 0 4px 24px rgba(44,62,80,0.10);
49+
padding: 2rem;
50+
transition: box-shadow 0.2s;
51+
display: flex;
52+
flex-direction: column;
53+
align-items: flex-start;
54+
}
55+
.card:hover {
56+
box-shadow: 0 8px 32px rgba(44,62,80,0.18);
57+
}
58+
.card-title {
59+
font-size: 1.3rem;
60+
font-weight: 600;
61+
margin-bottom: 0.5rem;
62+
color: #2d3748;
63+
}
64+
.card-desc {
65+
font-size: 1rem;
66+
color: #4a5568;
67+
margin-bottom: 1.5rem;
68+
}
69+
.card-action {
70+
margin-top: auto;
71+
}
72+
.btn {
73+
background: linear-gradient(90deg, #667eea 0%, #5a67d8 100%);
74+
color: #fff;
75+
border: none;
76+
border-radius: 0.5rem;
77+
padding: 0.7rem 1.5rem;
78+
font-size: 1rem;
79+
font-weight: 600;
80+
cursor: pointer;
81+
box-shadow: 0 2px 8px rgba(102,126,234,0.12);
82+
transition: background 0.2s;
83+
text-decoration: none;
84+
display: inline-block;
85+
}
86+
.btn:hover {
87+
background: linear-gradient(90deg, #5a67d8 0%, #434190 100%);
88+
}
89+
@media (max-width: 600px) {
90+
header h1 { font-size: 1.6rem; }
91+
.container { padding: 0 0.5rem; }
92+
.dashboard-grid { gap: 1rem; }
93+
.card { padding: 1rem; }
94+
}
95+
</style>
96+
</head>
97+
<body>
98+
<header>
99+
<h1>Semantic Router Test Dashboard</h1>
100+
<p>Monitor, manage, and optimize your semantic routing with ease.</p>
101+
</header>
102+
<div class="container">
103+
<div class="dashboard-grid">
104+
<div class="card">
105+
<div class="card-title">Traffic Overview</div>
106+
<div class="card-desc">Visualize real-time routing traffic and performance metrics.</div>
107+
<div class="card-action">
108+
<a href="/" class="btn">View Analytics</a>
109+
</div>
110+
</div>
111+
<div class="card">
112+
<div class="card-title">Route Management</div>
113+
<div class="card-desc">Add, edit, or remove semantic routes and configure rules.</div>
114+
<div class="card-action">
115+
/* set the links for each button */
116+
<a href="#" class="btn">Manage Routes</a>
117+
</div>
118+
</div>
119+
<div class="card">
120+
<div class="card-title">System Health</div>
121+
<div class="card-desc">Check system status, uptime, and resource utilization.</div>
122+
<div class="card-action">
123+
/* set the links for each button */
124+
<a href="#" class="btn">View Status</a>
125+
</div>
126+
</div>
127+
<div class="card">
128+
<div class="card-title">Settings</div>
129+
<div class="card-desc">Configure dashboard preferences and notification options.</div>
130+
<div class="card-action">
131+
/* set the links for each button */
132+
<a href="#" class="btn">Go to Settings</a>
133+
</div>
134+
</div>
135+
</div>
136+
</div>
137+
</body>
138+
</html>

0 commit comments

Comments
 (0)