diff --git a/dashboard.html b/dashboard.html index 6225294..2b4a6b1 100644 --- a/dashboard.html +++ b/dashboard.html @@ -19,12 +19,15 @@ } .container { - max-width: 1200px; + max-width: 100%; margin: 0 auto; } .header { margin-bottom: 40px; + max-width: 1400px; + margin-left: auto; + margin-right: auto; } .header h1 { @@ -39,19 +42,23 @@ font-size: 14px; } - .instances-grid { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(500px, 1fr)); - gap: 20px; + .instances-list { + display: flex; + flex-direction: column; + gap: 16px; + max-width: 100%; } .instance-card { background: white; border-radius: 12px; - padding: 20px; + padding: 16px 20px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; border: 1px solid #e8e8e8; + display: flex; + align-items: center; + gap: 20px; } .instance-card:hover { @@ -59,29 +66,15 @@ border-color: #d0d0d0; } - .instance-header { - display: flex; - align-items: center; - gap: 12px; - margin-bottom: 20px; - justify-content: space-between; - } - - .instance-name-group { - display: flex; - align-items: center; - gap: 12px; - flex: 1; - } - .heartbeat { - width: 24px; - height: 24px; + width: 28px; + height: 28px; display: flex; align-items: center; justify-content: center; font-size: 20px; animation: heartbeat 1.5s ease-in-out infinite; + flex-shrink: 0; } .heartbeat.healthy { @@ -119,66 +112,48 @@ font-size: 16px; font-weight: 600; color: #1a1a1a; + min-width: 140px; + flex-shrink: 0; } - .add-subinstance-btn { - background: none; - border: 2px solid #e8e8e8; - width: 32px; - height: 32px; - border-radius: 8px; - cursor: pointer; - font-size: 18px; + .metrics-container { display: flex; align-items: center; - justify-content: center; - transition: all 0.2s ease; - color: #999; - } - - .add-subinstance-btn:hover { - background: #f9f9f9; - border-color: #d0d0d0; - color: #1a1a1a; - } - - .add-subinstance-btn:active { - background: #efefef; - transform: scale(0.95); - } - - .metrics-grid { - display: grid; - grid-template-columns: repeat(2, 1fr); gap: 16px; + flex: 1; } .metric { - background: #f9f9f9; - border-radius: 8px; - padding: 12px; - border: 1px solid #f0f0f0; + display: flex; + flex-direction: column; + gap: 4px; + min-width: 120px; } .metric-label { - font-size: 12px; + font-size: 11px; font-weight: 600; color: #666; text-transform: uppercase; letter-spacing: 0.5px; - margin-bottom: 8px; + } + + .metric-content { + display: flex; + align-items: center; + gap: 8px; } .metric-value { - font-size: 20px; + font-size: 16px; font-weight: 700; color: #1a1a1a; - margin-bottom: 6px; + min-width: 40px; } .metric-bar { - width: 100%; - height: 6px; + width: 60px; + height: 5px; background: #e8e8e8; border-radius: 3px; overflow: hidden; @@ -206,44 +181,70 @@ background: linear-gradient(90deg, #8b5cf6 0%, #6d28d9 100%); } - .metric-description { - font-size: 11px; + .add-subinstance-btn { + background: none; + border: 2px solid #e8e8e8; + width: 36px; + height: 36px; + border-radius: 8px; + cursor: pointer; + font-size: 20px; + display: flex; + align-items: center; + justify-content: center; + transition: all 0.2s ease; color: #999; - margin-top: 4px; + flex-shrink: 0; } - .status-badge { - display: inline-block; - padding: 4px 8px; - border-radius: 4px; - font-size: 11px; - font-weight: 600; - text-transform: uppercase; + .add-subinstance-btn:hover { + background: #f9f9f9; + border-color: #d0d0d0; + color: #1a1a1a; } - .status-badge.healthy { - background: #d1fae5; - color: #065f46; + .add-subinstance-btn:active { + background: #efefef; + transform: scale(0.95); } - .status-badge.warning { - background: #fef3c7; - color: #92400e; - } + /* Responsive design */ + @media (max-width: 1400px) { + .instance-card { + flex-wrap: wrap; + padding: 12px 16px; + } - .status-badge.critical { - background: #fee2e2; - color: #7f1d1d; + .metrics-container { + width: 100%; + order: 3; + margin-top: 8px; + } + + .instance-name { + order: 1; + } + + .add-subinstance-btn { + order: 2; + } } - /* Responsive design */ @media (max-width: 768px) { - .instances-grid { - grid-template-columns: 1fr; + .instance-card { + flex-wrap: wrap; + padding: 12px 16px; } - .metrics-grid { - grid-template-columns: 1fr; + .metrics-container { + width: 100%; + order: 3; + margin-top: 8px; + gap: 12px; + } + + .metric { + min-width: 100px; } .header h1 { @@ -259,156 +260,155 @@

Monitor your system instances in real-time

-
+
-
-
-
♥
- API Server -
- -
- -
- +
♥
+ API Server + +
Usage
-
62%
-
-
+
+
62%
+
+
+
-
CPU & Memory
-
Saturation
-
28%
-
-
+
+
28%
+
+
+
-
Queue depth
-
Error Rate
-
0.2%
-
-
+
+
0.2%
+
+
+
-
Per minute
-
Latency
-
45ms
-
-
+
+
45ms
+
+
+
-
P99
+ +
-
-
-
♥
- Database -
- -
- -
+
♥
+ Database + +
Usage
-
85%
-
-
+
+
85%
+
+
+
-
CPU & Memory
Saturation
-
72%
-
-
+
+
72%
+
+
+
-
Queue depth
Error Rate
-
1.5%
-
-
+
+
1.5%
+
+
+
-
Per minute
Latency
-
125ms
-
-
+
+
125ms
+
+
+
-
P99
+ +
-
-
-
♥
- Cache Service -
- -
- -
+
♥
+ Cache Service + +
Usage
-
92%
-
-
+
+
92%
+
+
+
-
CPU & Memory
Saturation
-
88%
-
-
+
+
88%
+
+
+
-
Queue depth
Error Rate
-
5.8%
-
-
+
+
5.8%
+
+
+
-
Per minute
Latency
-
340ms
-
-
+
+
340ms
+
+
+
-
P99
+ +
@@ -424,19 +424,6 @@ // Replace with actual implementation }); }); - - // Example: Update metrics dynamically (simulated) - function updateMetrics() { - document.querySelectorAll('.metric-value').forEach(el => { - const currentValue = parseInt(el.textContent); - const randomChange = (Math.random() - 0.5) * 10; - const newValue = Math.max(0, Math.min(100, currentValue + randomChange)); - el.textContent = Math.round(newValue) + (el.textContent.includes('%') ? '%' : el.textContent.match(/ms|%/)[0] || ''); - }); - } - - // Optional: Update every 5 seconds - // setInterval(updateMetrics, 5000); \ No newline at end of file