mio dashboard
docs.kosmonum.space/mio/
v2
+165
-178
+165
-178
dashboard.html
+165
-178
dashboard.html
···
19
19
}
20
20
21
21
.container {
22
-
max-width: 1200px;
22
+
max-width: 100%;
23
23
margin: 0 auto;
24
24
}
25
25
26
26
.header {
27
27
margin-bottom: 40px;
28
+
max-width: 1400px;
29
+
margin-left: auto;
30
+
margin-right: auto;
28
31
}
29
32
30
33
.header h1 {
···
39
42
font-size: 14px;
40
43
}
41
44
42
-
.instances-grid {
43
-
display: grid;
44
-
grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
45
-
gap: 20px;
45
+
.instances-list {
46
+
display: flex;
47
+
flex-direction: column;
48
+
gap: 16px;
49
+
max-width: 100%;
46
50
}
47
51
48
52
.instance-card {
49
53
background: white;
50
54
border-radius: 12px;
51
-
padding: 20px;
55
+
padding: 16px 20px;
52
56
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
53
57
transition: all 0.3s ease;
54
58
border: 1px solid #e8e8e8;
59
+
display: flex;
60
+
align-items: center;
61
+
gap: 20px;
55
62
}
56
63
57
64
.instance-card:hover {
···
59
66
border-color: #d0d0d0;
60
67
}
61
68
62
-
.instance-header {
63
-
display: flex;
64
-
align-items: center;
65
-
gap: 12px;
66
-
margin-bottom: 20px;
67
-
justify-content: space-between;
68
-
}
69
-
70
-
.instance-name-group {
71
-
display: flex;
72
-
align-items: center;
73
-
gap: 12px;
74
-
flex: 1;
75
-
}
76
-
77
69
.heartbeat {
78
-
width: 24px;
79
-
height: 24px;
70
+
width: 28px;
71
+
height: 28px;
80
72
display: flex;
81
73
align-items: center;
82
74
justify-content: center;
83
75
font-size: 20px;
84
76
animation: heartbeat 1.5s ease-in-out infinite;
77
+
flex-shrink: 0;
85
78
}
86
79
87
80
.heartbeat.healthy {
···
119
112
font-size: 16px;
120
113
font-weight: 600;
121
114
color: #1a1a1a;
115
+
min-width: 140px;
116
+
flex-shrink: 0;
122
117
}
123
118
124
-
.add-subinstance-btn {
125
-
background: none;
126
-
border: 2px solid #e8e8e8;
127
-
width: 32px;
128
-
height: 32px;
129
-
border-radius: 8px;
130
-
cursor: pointer;
131
-
font-size: 18px;
119
+
.metrics-container {
132
120
display: flex;
133
121
align-items: center;
134
-
justify-content: center;
135
-
transition: all 0.2s ease;
136
-
color: #999;
137
-
}
138
-
139
-
.add-subinstance-btn:hover {
140
-
background: #f9f9f9;
141
-
border-color: #d0d0d0;
142
-
color: #1a1a1a;
143
-
}
144
-
145
-
.add-subinstance-btn:active {
146
-
background: #efefef;
147
-
transform: scale(0.95);
148
-
}
149
-
150
-
.metrics-grid {
151
-
display: grid;
152
-
grid-template-columns: repeat(2, 1fr);
153
122
gap: 16px;
123
+
flex: 1;
154
124
}
155
125
156
126
.metric {
157
-
background: #f9f9f9;
158
-
border-radius: 8px;
159
-
padding: 12px;
160
-
border: 1px solid #f0f0f0;
127
+
display: flex;
128
+
flex-direction: column;
129
+
gap: 4px;
130
+
min-width: 120px;
161
131
}
162
132
163
133
.metric-label {
164
-
font-size: 12px;
134
+
font-size: 11px;
165
135
font-weight: 600;
166
136
color: #666;
167
137
text-transform: uppercase;
168
138
letter-spacing: 0.5px;
169
-
margin-bottom: 8px;
139
+
}
140
+
141
+
.metric-content {
142
+
display: flex;
143
+
align-items: center;
144
+
gap: 8px;
170
145
}
171
146
172
147
.metric-value {
173
-
font-size: 20px;
148
+
font-size: 16px;
174
149
font-weight: 700;
175
150
color: #1a1a1a;
176
-
margin-bottom: 6px;
151
+
min-width: 40px;
177
152
}
178
153
179
154
.metric-bar {
180
-
width: 100%;
181
-
height: 6px;
155
+
width: 60px;
156
+
height: 5px;
182
157
background: #e8e8e8;
183
158
border-radius: 3px;
184
159
overflow: hidden;
···
206
181
background: linear-gradient(90deg, #8b5cf6 0%, #6d28d9 100%);
207
182
}
208
183
209
-
.metric-description {
210
-
font-size: 11px;
184
+
.add-subinstance-btn {
185
+
background: none;
186
+
border: 2px solid #e8e8e8;
187
+
width: 36px;
188
+
height: 36px;
189
+
border-radius: 8px;
190
+
cursor: pointer;
191
+
font-size: 20px;
192
+
display: flex;
193
+
align-items: center;
194
+
justify-content: center;
195
+
transition: all 0.2s ease;
211
196
color: #999;
212
-
margin-top: 4px;
197
+
flex-shrink: 0;
213
198
}
214
199
215
-
.status-badge {
216
-
display: inline-block;
217
-
padding: 4px 8px;
218
-
border-radius: 4px;
219
-
font-size: 11px;
220
-
font-weight: 600;
221
-
text-transform: uppercase;
200
+
.add-subinstance-btn:hover {
201
+
background: #f9f9f9;
202
+
border-color: #d0d0d0;
203
+
color: #1a1a1a;
222
204
}
223
205
224
-
.status-badge.healthy {
225
-
background: #d1fae5;
226
-
color: #065f46;
206
+
.add-subinstance-btn:active {
207
+
background: #efefef;
208
+
transform: scale(0.95);
227
209
}
228
210
229
-
.status-badge.warning {
230
-
background: #fef3c7;
231
-
color: #92400e;
232
-
}
211
+
/* Responsive design */
212
+
@media (max-width: 1400px) {
213
+
.instance-card {
214
+
flex-wrap: wrap;
215
+
padding: 12px 16px;
216
+
}
233
217
234
-
.status-badge.critical {
235
-
background: #fee2e2;
236
-
color: #7f1d1d;
218
+
.metrics-container {
219
+
width: 100%;
220
+
order: 3;
221
+
margin-top: 8px;
222
+
}
223
+
224
+
.instance-name {
225
+
order: 1;
226
+
}
227
+
228
+
.add-subinstance-btn {
229
+
order: 2;
230
+
}
237
231
}
238
232
239
-
/* Responsive design */
240
233
@media (max-width: 768px) {
241
-
.instances-grid {
242
-
grid-template-columns: 1fr;
234
+
.instance-card {
235
+
flex-wrap: wrap;
236
+
padding: 12px 16px;
237
+
}
238
+
239
+
.metrics-container {
240
+
width: 100%;
241
+
order: 3;
242
+
margin-top: 8px;
243
+
gap: 12px;
243
244
}
244
245
245
-
.metrics-grid {
246
-
grid-template-columns: 1fr;
246
+
.metric {
247
+
min-width: 100px;
247
248
}
248
249
249
250
.header h1 {
···
259
260
<p>Monitor your system instances in real-time</p>
260
261
</div>
261
262
262
-
<div class="instances-grid">
263
+
<div class="instances-list">
263
264
<!-- Instance 1 -->
264
265
<div class="instance-card">
265
-
<div class="instance-header">
266
-
<div class="instance-name-group">
267
-
<div class="heartbeat healthy">♥</div>
268
-
<span class="instance-name">API Server</span>
269
-
</div>
270
-
<button class="add-subinstance-btn" title="Add subinstance">+</button>
271
-
</div>
272
-
273
-
<div class="metrics-grid">
274
-
<!-- Usage -->
266
+
<div class="heartbeat healthy">♥</div>
267
+
<span class="instance-name">API Server</span>
268
+
269
+
<div class="metrics-container">
275
270
<div class="metric">
276
271
<div class="metric-label">Usage</div>
277
-
<div class="metric-value">62%</div>
278
-
<div class="metric-bar">
279
-
<div class="metric-bar-fill usage" style="width: 62%"></div>
272
+
<div class="metric-content">
273
+
<div class="metric-value">62%</div>
274
+
<div class="metric-bar">
275
+
<div class="metric-bar-fill usage" style="width: 62%"></div>
276
+
</div>
280
277
</div>
281
-
<div class="metric-description">CPU & Memory</div>
282
278
</div>
283
279
284
-
<!-- Saturation -->
285
280
<div class="metric">
286
281
<div class="metric-label">Saturation</div>
287
-
<div class="metric-value">28%</div>
288
-
<div class="metric-bar">
289
-
<div class="metric-bar-fill saturation" style="width: 28%"></div>
282
+
<div class="metric-content">
283
+
<div class="metric-value">28%</div>
284
+
<div class="metric-bar">
285
+
<div class="metric-bar-fill saturation" style="width: 28%"></div>
286
+
</div>
290
287
</div>
291
-
<div class="metric-description">Queue depth</div>
292
288
</div>
293
289
294
-
<!-- Error Rate -->
295
290
<div class="metric">
296
291
<div class="metric-label">Error Rate</div>
297
-
<div class="metric-value">0.2%</div>
298
-
<div class="metric-bar">
299
-
<div class="metric-bar-fill error" style="width: 2%"></div>
292
+
<div class="metric-content">
293
+
<div class="metric-value">0.2%</div>
294
+
<div class="metric-bar">
295
+
<div class="metric-bar-fill error" style="width: 2%"></div>
296
+
</div>
300
297
</div>
301
-
<div class="metric-description">Per minute</div>
302
298
</div>
303
299
304
-
<!-- Latency -->
305
300
<div class="metric">
306
301
<div class="metric-label">Latency</div>
307
-
<div class="metric-value">45ms</div>
308
-
<div class="metric-bar">
309
-
<div class="metric-bar-fill latency" style="width: 45%"></div>
302
+
<div class="metric-content">
303
+
<div class="metric-value">45ms</div>
304
+
<div class="metric-bar">
305
+
<div class="metric-bar-fill latency" style="width: 45%"></div>
306
+
</div>
310
307
</div>
311
-
<div class="metric-description">P99</div>
312
308
</div>
313
309
</div>
310
+
311
+
<button class="add-subinstance-btn" title="Add subinstance">+</button>
314
312
</div>
315
313
316
314
<!-- Instance 2 -->
317
315
<div class="instance-card">
318
-
<div class="instance-header">
319
-
<div class="instance-name-group">
320
-
<div class="heartbeat warning">♥</div>
321
-
<span class="instance-name">Database</span>
322
-
</div>
323
-
<button class="add-subinstance-btn" title="Add subinstance">+</button>
324
-
</div>
325
-
326
-
<div class="metrics-grid">
316
+
<div class="heartbeat warning">♥</div>
317
+
<span class="instance-name">Database</span>
318
+
319
+
<div class="metrics-container">
327
320
<div class="metric">
328
321
<div class="metric-label">Usage</div>
329
-
<div class="metric-value">85%</div>
330
-
<div class="metric-bar">
331
-
<div class="metric-bar-fill usage" style="width: 85%"></div>
322
+
<div class="metric-content">
323
+
<div class="metric-value">85%</div>
324
+
<div class="metric-bar">
325
+
<div class="metric-bar-fill usage" style="width: 85%"></div>
326
+
</div>
332
327
</div>
333
-
<div class="metric-description">CPU & Memory</div>
334
328
</div>
335
329
336
330
<div class="metric">
337
331
<div class="metric-label">Saturation</div>
338
-
<div class="metric-value">72%</div>
339
-
<div class="metric-bar">
340
-
<div class="metric-bar-fill saturation" style="width: 72%"></div>
332
+
<div class="metric-content">
333
+
<div class="metric-value">72%</div>
334
+
<div class="metric-bar">
335
+
<div class="metric-bar-fill saturation" style="width: 72%"></div>
336
+
</div>
341
337
</div>
342
-
<div class="metric-description">Queue depth</div>
343
338
</div>
344
339
345
340
<div class="metric">
346
341
<div class="metric-label">Error Rate</div>
347
-
<div class="metric-value">1.5%</div>
348
-
<div class="metric-bar">
349
-
<div class="metric-bar-fill error" style="width: 15%"></div>
342
+
<div class="metric-content">
343
+
<div class="metric-value">1.5%</div>
344
+
<div class="metric-bar">
345
+
<div class="metric-bar-fill error" style="width: 15%"></div>
346
+
</div>
350
347
</div>
351
-
<div class="metric-description">Per minute</div>
352
348
</div>
353
349
354
350
<div class="metric">
355
351
<div class="metric-label">Latency</div>
356
-
<div class="metric-value">125ms</div>
357
-
<div class="metric-bar">
358
-
<div class="metric-bar-fill latency" style="width: 70%"></div>
352
+
<div class="metric-content">
353
+
<div class="metric-value">125ms</div>
354
+
<div class="metric-bar">
355
+
<div class="metric-bar-fill latency" style="width: 70%"></div>
356
+
</div>
359
357
</div>
360
-
<div class="metric-description">P99</div>
361
358
</div>
362
359
</div>
360
+
361
+
<button class="add-subinstance-btn" title="Add subinstance">+</button>
363
362
</div>
364
363
365
364
<!-- Instance 3 -->
366
365
<div class="instance-card">
367
-
<div class="instance-header">
368
-
<div class="instance-name-group">
369
-
<div class="heartbeat critical">♥</div>
370
-
<span class="instance-name">Cache Service</span>
371
-
</div>
372
-
<button class="add-subinstance-btn" title="Add subinstance">+</button>
373
-
</div>
374
-
375
-
<div class="metrics-grid">
366
+
<div class="heartbeat critical">♥</div>
367
+
<span class="instance-name">Cache Service</span>
368
+
369
+
<div class="metrics-container">
376
370
<div class="metric">
377
371
<div class="metric-label">Usage</div>
378
-
<div class="metric-value">92%</div>
379
-
<div class="metric-bar">
380
-
<div class="metric-bar-fill usage" style="width: 92%"></div>
372
+
<div class="metric-content">
373
+
<div class="metric-value">92%</div>
374
+
<div class="metric-bar">
375
+
<div class="metric-bar-fill usage" style="width: 92%"></div>
376
+
</div>
381
377
</div>
382
-
<div class="metric-description">CPU & Memory</div>
383
378
</div>
384
379
385
380
<div class="metric">
386
381
<div class="metric-label">Saturation</div>
387
-
<div class="metric-value">88%</div>
388
-
<div class="metric-bar">
389
-
<div class="metric-bar-fill saturation" style="width: 88%"></div>
382
+
<div class="metric-content">
383
+
<div class="metric-value">88%</div>
384
+
<div class="metric-bar">
385
+
<div class="metric-bar-fill saturation" style="width: 88%"></div>
386
+
</div>
390
387
</div>
391
-
<div class="metric-description">Queue depth</div>
392
388
</div>
393
389
394
390
<div class="metric">
395
391
<div class="metric-label">Error Rate</div>
396
-
<div class="metric-value">5.8%</div>
397
-
<div class="metric-bar">
398
-
<div class="metric-bar-fill error" style="width: 58%"></div>
392
+
<div class="metric-content">
393
+
<div class="metric-value">5.8%</div>
394
+
<div class="metric-bar">
395
+
<div class="metric-bar-fill error" style="width: 58%"></div>
396
+
</div>
399
397
</div>
400
-
<div class="metric-description">Per minute</div>
401
398
</div>
402
399
403
400
<div class="metric">
404
401
<div class="metric-label">Latency</div>
405
-
<div class="metric-value">340ms</div>
406
-
<div class="metric-bar">
407
-
<div class="metric-bar-fill latency" style="width: 95%"></div>
402
+
<div class="metric-content">
403
+
<div class="metric-value">340ms</div>
404
+
<div class="metric-bar">
405
+
<div class="metric-bar-fill latency" style="width: 95%"></div>
406
+
</div>
408
407
</div>
409
-
<div class="metric-description">P99</div>
410
408
</div>
411
409
</div>
410
+
411
+
<button class="add-subinstance-btn" title="Add subinstance">+</button>
412
412
</div>
413
413
</div>
414
414
</div>
···
424
424
// Replace with actual implementation
425
425
});
426
426
});
427
-
428
-
// Example: Update metrics dynamically (simulated)
429
-
function updateMetrics() {
430
-
document.querySelectorAll('.metric-value').forEach(el => {
431
-
const currentValue = parseInt(el.textContent);
432
-
const randomChange = (Math.random() - 0.5) * 10;
433
-
const newValue = Math.max(0, Math.min(100, currentValue + randomChange));
434
-
el.textContent = Math.round(newValue) + (el.textContent.includes('%') ? '%' : el.textContent.match(/ms|%/)[0] || '');
435
-
});
436
-
}
437
-
438
-
// Optional: Update every 5 seconds
439
-
// setInterval(updateMetrics, 5000);
440
427
</script>
441
428
</body>
442
429
</html>