Jenkins Observability Console

A modern, production-ready web application for monitoring Jenkins CI/CD pipelines with intelligent failure analysis.

🚀 Quick Start

Prerequisites

• Python 3.9+
• Node.js 16+
• MongoDB 5.0+

Installation (5 minutes)

# 1. Backend Setup
cd backend
python -m venv venv
source venv/bin/activate  # Windows: venv\Scripts\activate
pip install -r requirements.txt

# 2. Frontend Setup (in new terminal)
cd frontend
yarn install

# 3. Start MongoDB
mongod  # Or: docker run -p 27017:27017 mongo:6.0

# 4. Run Backend (in first terminal)
cd backend
python server.py
# Server runs on http://localhost:8001

# 5. Run Frontend (in second terminal)
cd frontend
yarn start
# App opens at http://localhost:3000

📖 For detailed installation instructions, see INSTALLATION_GUIDE.md

---

✨ Features

🎯 Dashboard

• Real-time Monitoring: Live status of all Jenkins pipelines
• Hierarchical Tree View: Views → Sub-views → Pipelines → Stages
• Auto-Expand Failures: Instantly see what broke
• Multi-Server Support: Monitor multiple Jenkins instances
• Global Search: Find jobs across all servers instantly

🤖 AI-Powered Failure Analysis

• Automatic Classification: IT Infra / CI/CD Infra / Code-Related
• Root Cause Detection: AI explains what went wrong
• Confidence Scoring: See how sure the AI is (0-100%)
• Actionable Recommendations: Get specific steps to fix issues
• Team Assignment: Suggests which team should handle the failure

🔍 Advanced Filtering

• Selective View Monitoring: Choose specific views/sub-views to display
• Hierarchical Selection: Pick any level in the Jenkins tree
• One-Click Reset: "Clear All Filters" for instant full view
• Parent Chain Inclusion: Selected views show with full context

🚨 Major Outage Detection

• Automatic Alerts: Red banner when all jobs in a view fail
• View-Level Analysis: See which releases are completely down
• Critical Severity: Animated warnings for immediate attention

⚙️ Settings & Configuration

• Jenkins Server Management: Add/Edit/Delete servers
• Polling Configuration: Customize refresh intervals
• View Selection UI: Visual tree for choosing monitored views
• Credential Management: Secure API token storage

---

🏗️ Architecture

┌─────────────────────────────────────────────────────┐
│                   Frontend (React)                   │
│  - Dashboard UI with Accordion Tree View            │
│  - Real-time updates every 30s                      │
│  - Framer Motion animations                         │
│  - Tailwind CSS + Custom Tactical Obsidian theme   │
└────────────────┬────────────────────────────────────┘
                 │ REST API
┌────────────────▼────────────────────────────────────┐
│               Backend (FastAPI)                      │
│  - Jenkins API Integration                          │
│  - Mock data for testing                            │
│  - AI failure analysis (OpenAI GPT-5.2)            │
│  - View filtering & hierarchy builder              │
└────────────────┬────────────────────────────────────┘
                 │ Motor (async driver)
┌────────────────▼────────────────────────────────────┐
│               Database (MongoDB)                     │
│  - jenkins_servers collection                       │
│  - job_nodes collection (hierarchical)             │
│  - failure_analyses collection                     │
└─────────────────────────────────────────────────────┘

---

📂 Project Structure

jenkins-observability-console/
├── backend/
│   ├── server.py              # FastAPI main application
│   ├── requirements.txt       # Python dependencies
│   └── .env                   # Backend configuration
├── frontend/
│   ├── src/
│   │   ├── pages/
│   │   │   ├── Dashboard.jsx  # Main dashboard
│   │   │   └── Settings.jsx   # Configuration UI
│   │   ├── components/
│   │   │   ├── AccordionTreeView.jsx
│   │   │   ├── FailurePanel.jsx
│   │   │   ├── StatusBadge.jsx
│   │   │   └── ViewSelectionTree.jsx
│   │   ├── App.js
│   │   └── index.css          # Tailwind + custom styles
│   ├── package.json
│   └── .env                   # Frontend configuration
├── INSTALLATION_GUIDE.md      # Detailed setup instructions
└── README.md                  # This file

---

🔧 Configuration

Backend .env

MONGO_URL=mongodb://localhost:27017
DB_NAME=jenkins_observability
CORS_ORIGINS=*
EMERGENT_LLM_KEY=your-api-key-here  # Optional: for AI features

Frontend .env

REACT_APP_BACKEND_URL=http://localhost:8001
WDS_SOCKET_PORT=0
ENABLE_HEALTH_CHECK=false

---

📊 API Endpoints

Jenkins Servers

• GET /api/jenkins-servers - List all servers
• POST /api/jenkins-servers - Add new server
• PUT /api/jenkins-servers/{id} - Update server
• DELETE /api/jenkins-servers/{id} - Remove server

Monitoring

• GET /api/jenkins-servers/{id}/tree - Get job hierarchy
• GET /api/jenkins-servers/{id}/available-views - List all views
• PUT /api/jenkins-servers/{id}/monitored-views - Update view filters
• GET /api/jenkins-servers/{id}/outage-status - Check for major outages

Analysis

• GET /api/failures/{job_id} - Get failure analysis
• POST /api/analyze-failure - Trigger AI analysis
• GET /api/health-summary - Global health metrics
• GET /api/search?q={query} - Search jobs

---

🎨 Tech Stack

Backend

• FastAPI - Modern Python web framework
• Motor - Async MongoDB driver
• Pydantic - Data validation
• emergentintegrations - AI integration library (OpenAI GPT-5.2)

Frontend

• React 18 - UI library
• Framer Motion - Animations
• Tailwind CSS - Styling
• Axios - HTTP client
• React Router - Navigation
• Sonner - Toast notifications
• Lucide React - Icons

Database

• MongoDB - Document database for flexible hierarchical data

---

🧪 Mock Data

The application includes pre-configured mock data:

• 2 Jenkins Servers: Jenkins-Prod, Jenkins-Stage
• Multiple Views: Release 24.1 with Core Services and Frontend Apps
• Sample Pipelines: User Authentication, Payment Service, Web Application
• Various Statuses: Success, Failure, Unstable, Running
• Pre-analyzed Failures: AI analysis examples included

Perfect for testing and demonstration without connecting to real Jenkins!

---

🔐 Security Best Practices

Development

✅ Mock data enabled
✅ CORS set to *
✅ Verbose logging
✅ Hot reload enabled

Production

⚠️ Connect to real Jenkins
⚠️ Restrict CORS to your domain
⚠️ Enable MongoDB authentication
⚠️ Use environment variables for secrets
⚠️ Implement rate limiting
⚠️ Set up SSL/TLS
⚠️ Enable audit logging

---

🚀 Deployment Options

Local Development

python server.py  # Backend
yarn start        # Frontend

Docker

docker-compose up -d

Production

• Emergent Cloud: One-click deployment
• Docker Swarm: Container orchestration
• Kubernetes: Scalable cloud deployment
• Traditional Servers: Nginx + Gunicorn + PM2

See INSTALLATION_GUIDE.md for detailed deployment instructions.

---

📈 Performance

• Tree Virtualization: Handles 1000+ nodes smoothly
• Caching: Reduces Jenkins API load
• Async Operations: Non-blocking database queries
• Optimized Renders: React memo and useCallback
• Debounced Search: Smooth search experience

---

🐛 Troubleshooting

Common issues and solutions in INSTALLATION_GUIDE.md

Quick Checks:

# Backend health
curl http://localhost:8001/api/

# Frontend running
curl http://localhost:3000

# MongoDB connection
mongosh --eval "db.version()"

---

📝 License

Built with Emergent AI Platform

---

🤝 Contributing

This is a generated application. To modify:

1. Make changes locally
2. Test thoroughly
3. Update documentation
4. Consider edge cases

---

📞 Support

• Installation Issues: See INSTALLATION_GUIDE.md
• Application Bugs: Check browser console and backend logs
• Feature Requests: Document requirements clearly

---

Built with ❤️ using Emergent AI Platform