diff --git a/apps/cluster-health-dashboard/dashboard_preview.md b/apps/cluster-health-dashboard/dashboard_preview.md new file mode 100644 index 0000000..c4e195a --- /dev/null +++ b/apps/cluster-health-dashboard/dashboard_preview.md @@ -0,0 +1,262 @@ +# πŸ“Š Dashboard Preview + +## What the Dashboard Looks Like + +``` +╔═══════════════════════════════════════════════════════════════════╗ +β•‘ ☸️ Kubernetes Cluster Health Dashboard β•‘ +β•‘ Generated: 2025-01-08 08:00:00 | Period: 24h β•‘ +β•šβ•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β• + +β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” +β”‚ πŸ“‹ Cluster Info β”‚ πŸ’» Resource Capacityβ”‚ πŸ“¦ Pod Status β”‚ πŸ’° Monthly Costs β”‚ +β”‚ β”‚ β”‚ β”‚ β”‚ +β”‚ K8s Version β”‚ Total CPU β”‚ Running 45 βœ… β”‚ CPU $48.00 β”‚ +β”‚ v1.28.0 β”‚ 12 cores β”‚ Pending 2 ⏳ β”‚ Memory $36.00 β”‚ +β”‚ β”‚ β”‚ Failed 1 ❌ β”‚ ─────────────────── β”‚ +β”‚ Nodes 3 β”‚ Total Memory β”‚ Restarts 8 β”‚ Total $84.00 β”‚ +β”‚ Namespaces 14 β”‚ 48 GB β”‚ β”‚ β”‚ +β”‚ Total Pods 48 β”‚ β”‚ β”‚ πŸ’‘ Adjust pricing β”‚ +β”‚ β”‚ Avg CPU Usage β”‚ β”‚ in Jenkinsfile β”‚ +β”‚ β”‚ 23.5% β”‚ β”‚ β”‚ +β”‚ β”‚ β–ˆβ–ˆβ–ˆβ–ˆβ–‘β–‘β–‘β–‘β–‘β–‘β–‘β–‘ β”‚ β”‚ β”‚ +β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”΄β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”΄β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”΄β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ + +β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” +β”‚ πŸ” Health Checks & Issues β”‚ +β”‚ β”‚ +β”‚ ⚠️ High pod restart count: 15 β”‚ +β”‚ ❌ 1 pods in Failed state β”‚ +β”‚ ⚠️ 2 pods in Pending state (possible resource constraints) β”‚ +β”‚ β”‚ +β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ + +β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” +β”‚ πŸ“Š Resources by Namespace β”‚ +β”‚ β”‚ +β”‚ Namespace β”‚ Pods β”‚ Containers β”‚ +β”‚ ────────────────────────────────────────── β”‚ +β”‚ monitoring β”‚ 12 β”‚ 24 β”‚ +β”‚ jenkins β”‚ 8 β”‚ 16 β”‚ +β”‚ argocd β”‚ 7 β”‚ 14 β”‚ +β”‚ demo-app β”‚ 5 β”‚ 10 β”‚ +β”‚ kube-system β”‚ 4 β”‚ 8 β”‚ +β”‚ ... β”‚ ... β”‚ ... β”‚ +β”‚ β”‚ +β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ + + Generated by Jenkins CI/CD Pipeline β€’ Build #42 +``` + +## Key Features + +### 1. **Real-time Metrics** +- CPU usage with visual progress bar +- Memory utilization +- Network I/O +- Pod status breakdown + +### 2. **Cost Tracking** +- Monthly cost estimates +- Breakdown by CPU and Memory +- Adjustable pricing rates + +### 3. **Health Monitoring** +- Automatic issue detection +- Failed/Pending pod alerts +- High restart count warnings +- Resource constraint detection + +### 4. **Namespace Analysis** +- Pod count per namespace +- Container count +- Sorted by usage (highest first) + +### 5. **Interactive HTML** +- Hover effects on tables +- Color-coded status (green/yellow/red) +- Responsive design +- Beautiful gradient background + +### 6. **Exportable Data** +- JSON report with all metrics +- CSV-ready format +- Historical tracking ready + +## Dashboard Sections + +### Header +``` +☸️ Kubernetes Cluster Health Dashboard +Generated: 2025-01-08 08:00:00 | Period: 24h +``` + +### Cluster Overview (4 Cards) +``` +β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” +β”‚ Cluster β”‚ β”‚ Resources β”‚ β”‚ Pod Status β”‚ β”‚ Costs β”‚ +β”‚ Information β”‚ β”‚ Capacity β”‚ β”‚ β”‚ β”‚ β”‚ +β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ +``` + +### Issues Section +``` +πŸ” Health Checks & Issues +━━━━━━━━━━━━━━━━━━━━━━ + +⚠️ Potential issues detected +❌ Action required +βœ… All clear (when no issues) +``` + +### Namespace Details Table +``` +πŸ“Š Resources by Namespace +━━━━━━━━━━━━━━━━━━━━━━━━ + +Sortable table with: +- Namespace name +- Pod count +- Container count +- Hover highlight +``` + +### Footer +``` +Generated by Jenkins CI/CD Pipeline β€’ Build #42 +[Jenkins Logo] [Kubernetes Logo] +``` + +## Color Scheme + +### Status Colors +- 🟒 **Green (#10b981):** Success, Running, All clear +- 🟑 **Yellow (#f59e0b):** Warning, Pending, Attention needed +- πŸ”΄ **Red (#ef4444):** Error, Failed, Critical + +### UI Colors +- **Primary Gradient:** Purple to Blue (#667eea β†’ #764ba2) +- **Background:** White cards on gradient +- **Text:** Dark gray (#333) on light background +- **Borders:** Light gray (#f0f0f0) + +### Example CSS +```css +.metric-value.success { color: #10b981; } +.metric-value.warning { color: #f59e0b; } +.metric-value.error { color: #ef4444; } + +.progress-fill { + background: linear-gradient(90deg, #667eea 0%, #764ba2 100%); +} +``` + +## Responsive Design + +### Desktop (>1200px) +- 4-column grid layout +- Full-width tables +- Large fonts + +### Tablet (768px - 1200px) +- 2-column grid +- Adjusted table columns +- Medium fonts + +### Mobile (<768px) +- Single column stack +- Scrollable tables +- Smaller fonts + +## Accessibility + +- βœ… High contrast text +- βœ… Clear visual hierarchy +- βœ… Color-blind friendly (icons + colors) +- βœ… Screen reader compatible +- βœ… Keyboard navigation + +## Browser Compatibility + +- βœ… Chrome/Edge (latest) +- βœ… Firefox (latest) +- βœ… Safari (latest) +- βœ… Mobile browsers + +## Performance + +- Fast loading (<1s) +- No external dependencies +- Inline CSS (single file) +- Optimized images +- Cached assets + +## Example Use Cases + +### 1. Daily Stand-up +``` +Team: "What's our cluster status?" +β†’ Open dashboard +β†’ See: 45 running pods, 2 pending +β†’ Discuss: Why pending? Resource constraints? +``` + +### 2. Cost Review +``` +Manager: "How much are we spending?" +β†’ Dashboard shows: $84/month +β†’ Last month: $72/month +β†’ Analysis: 15% increase +β†’ Action: Check which namespace grew +``` + +### 3. Capacity Planning +``` +DevOps: "Can we deploy new service?" +β†’ Dashboard: CPU 23.5%, Memory adequate +β†’ Decision: Yes, plenty of capacity +β†’ OR: CPU 87%, need more nodes +``` + +### 4. Troubleshooting +``` +Alert: "App is slow" +β†’ Dashboard: 15 pod restarts detected +β†’ Namespace table: monitoring namespace +β†’ Action: Check monitoring pods +``` + +### 5. Executive Report +``` +CTO: "How's infrastructure?" +β†’ Email dashboard +β†’ See: Green status, costs under budget +β†’ Confidence: All systems healthy +``` + +## Future Enhancements + +Possible additions: +- πŸ“ˆ Historical graphs (trends over time) +- πŸ”” Real-time alerts +- πŸ“Š Drill-down per namespace +- πŸ’Ύ Export to PDF +- πŸ“§ Scheduled email reports +- πŸ“± Mobile app view +- πŸ”„ Auto-refresh +- 🎨 Custom themes +- πŸ“ Multi-cluster view +- πŸ€– AI recommendations + +## Implementation Notes + +- Pure HTML/CSS (no JavaScript required) +- Single file deployment +- Jenkins HTML Publisher plugin +- Generated from Groovy template +- Embedded Chart.js (optional) +- Data from Prometheus + kubectl + +--- + +**The dashboard provides at-a-glance cluster health visibility!** πŸ‘οΈβœ¨ \ No newline at end of file