admin/k3s-gitops
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
01cbbf2f1b3523f7f6e4a24ca2a776021c3a92c7
k3s-gitops/apps/cluster-health-dashboard/dashboard_preview.md

9.8 KiB
Raw Blame History

📊 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

.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! 👁️✨