Vultr MCP

# 🎨 MCP-Vultr Testing Dashboard A beautiful, modern HTML testing dashboard that transforms pytest reports into an enterprise-grade visualization experience. ## ✨ Features ### 🎯 **Enterprise-Grade Design** - **Gruvbox Terminal Theme**: Beautiful dark terminal aesthetic with authentic color palette - **Zero Dependencies**: Completely self-contained HTML files that work offline - **Universal Compatibility**: Works with `file://` and `https://` protocols - **Mobile Responsive**: Looks stunning on desktop, tablet, and mobile - **Print Friendly**: Professional PDF generation with optimized print styles ### 📊 **Comprehensive Reporting** - **Test Results**: Visual breakdown of passed/failed/skipped tests by category - **Coverage Analysis**: Interactive heatmaps and detailed module coverage - **Performance Metrics**: Slowest tests, memory usage, parallel efficiency - **Historical Trends**: SQLite-based tracking with 30-day trend analysis - **Quality Metrics**: Ruff, MyPy, and code complexity integration ### 🎮 **Interactive Components** - **Collapsible Sections**: Expandable test categories and detailed views - **Modal Dialogs**: Click modules for detailed coverage reports - **Data Tables**: Sortable, filterable tables with intelligent search - **Theme Switching**: Multiple themes (Gruvbox, Solarized, Dracula, Nord) - **Real-time Updates**: Auto-refresh when test files change ### 🚀 **Advanced Features** - **File System Monitoring**: Auto-runs tests when source files change - **Intelligent Debouncing**: Prevents excessive test runs on rapid file changes - **Historical Database**: SQLite tracking for trend analysis - **Export Functionality**: JSON/CSV export of all dashboard data - **Keyboard Shortcuts**: Navigate dashboard efficiently with hotkeys ## 🏗️ Architecture ### Core Components ``` dashboard_generator.py # Main HTML dashboard generator run_tests_with_dashboard.py # Comprehensive test runner with dashboard dashboard_monitor.py # Real-time file watching and auto-updates dashboard_themes.css # Extended theme system and components demo_dashboard.py # Interactive demo with sample data ``` ### File Structure ``` reports/ ├── dashboard.html # Main testing dashboard ├── demo_dashboard.html # Interactive demo ├── test_history.db # Historical trend database ├── junit-*.xml # Test result files └── coverage/ # Coverage report assets ``` ## 🚀 Quick Start ### 1. Generate Demo Dashboard ```bash # Create interactive demo with sample data python demo_dashboard.py ``` This creates a beautiful demo showing all dashboard features with realistic sample data. ### 2. Run Tests with Dashboard ```bash # Fix coverage + run tests + generate dashboard python run_tests_with_dashboard.py --all-checks # Quick tests without coverage python run_tests_with_dashboard.py --fast # Coverage analysis only python run_tests_with_dashboard.py --coverage-only # Generate dashboard from existing results python run_tests_with_dashboard.py --dashboard-only ``` ### 3. Real-time Monitoring ```bash # Start file watching + auto-test execution python dashboard_monitor.py --watch # Run tests once and generate dashboard python dashboard_monitor.py --once # Full test suite with coverage python dashboard_monitor.py --full ``` ## 🎨 Dashboard Features ### **Executive Summary** - Total test count with trend indicators - Overall success rate with historical comparison - Coverage percentage with improvement tracking - Test duration with performance analysis ### **Test Results Visualization** - **Category Breakdown**: Unit, Integration, MCP, TUI tests - **Failure Analysis**: Recent failures with error details and file locations - **Flaky Test Detection**: Tests with inconsistent results - **Performance Tracking**: Slowest tests and optimization opportunities ### **Coverage Heatmap** - **Module-level Coverage**: Visual grid showing coverage per module - **Status Indicators**: Color-coded excellent/good/warning/critical status - **Interactive Details**: Click modules for detailed missing line reports - **Trend Analysis**: Coverage improvements over time ### **Historical Trends** - **30-Day History**: Test count, success rate, coverage trends - **Performance Metrics**: Duration trends and memory usage patterns - **Quality Scores**: Code complexity and maintainability over time - **Regression Detection**: Automated alerts for quality degradation ## 🎯 Themes ### **Gruvbox Dark** (Default) Authentic terminal aesthetic with warm earth tones: - Background: `#282828` (warm dark) - Text: `#ebdbb2` (cream) - Accents: Green `#b8bb26`, Blue `#83a598`, Red `#fb4934` ### **Solarized Dark** Professional design with carefully balanced colors: - Background: `#002b36` (deep blue) - Text: `#839496` (balanced gray) - Accents: Blue `#268bd2`, Green `#859900` ### **Dracula** Modern dark theme with vibrant highlights: - Background: `#282a36` (purple dark) - Text: `#f8f8f2` (bright white) - Accents: Purple `#bd93f9`, Pink `#ff79c6` ### **Nord** Clean Arctic theme with subtle blues: - Background: `#2e3440` (polar night) - Text: `#eceff4` (snow storm) - Accents: Blue `#5e81ac`, Green `#a3be8c` ## 📱 Responsive Design ### **Desktop** (1200px+) - 4-column grid layout - Sidebar navigation - Full interactive charts - Comprehensive data tables ### **Tablet** (768px - 1199px) - 2-column grid layout - Collapsible navigation - Optimized charts - Touch-friendly interactions ### **Mobile** (< 768px) - Single column layout - Hamburger navigation - Simplified metrics - Swipe gestures ## 🔧 Configuration ### **Coverage Settings** The dashboard automatically fixes coverage configuration: ```ini [run] source = src/mcp_vultr omit = */tests/* */test_* */__pycache__/* [report] show_missing = True precision = 1 [html] directory = htmlcov show_contexts = True ``` ### **Test Categories** Tests are automatically categorized using pytest markers: ```python @pytest.mark.unit # Individual component tests @pytest.mark.integration # Component interaction tests @pytest.mark.mcp # MCP server functionality @pytest.mark.tui # TUI application tests @pytest.mark.slow # Performance-intensive tests ``` ## 🎮 Keyboard Shortcuts - **Ctrl+1-6**: Switch between dashboard tabs - **Ctrl+R**: Refresh dashboard data - **Ctrl+P**: Print dashboard - **Ctrl+E**: Export dashboard data - **F**: Focus search filter - **Esc**: Close modals/dialogs ## 🔍 File Watching The monitor intelligently watches for changes: ### **Watched Directories** - `src/mcp_vultr/` - Source code changes - `tests/` - Test file changes ### **Smart Triggers** - **Test Files**: Run specific test file when modified - **Source Files**: Run related tests based on file mapping - **Config Files**: Full test suite re-run - **Debouncing**: 2-second delay to prevent rapid-fire execution ## 📊 Data Export Export dashboard data in multiple formats: ### **JSON Export** Complete dashboard data including: - Test results and coverage - Historical trends - Performance metrics - Quality analysis ### **CSV Export** Tabular data for spreadsheet analysis: - Test results by file - Coverage by module - Historical trends - Performance metrics ## 🎯 Integration ### **CI/CD Pipeline** ```yaml - name: Generate Testing Dashboard run: | python run_tests_with_dashboard.py --all-checks # Upload dashboard as artifact ``` ### **Git Hooks** ```bash # Pre-push hook python dashboard_monitor.py --once ``` ### **IDE Integration** The dashboard works with any editor: - VS Code: Open `reports/dashboard.html` in browser - PyCharm: View dashboard in built-in browser - Vim/Emacs: Use system browser ## 🐛 Troubleshooting ### **Coverage Shows 9%** The dashboard automatically fixes coverage configuration. Run: ```bash python run_tests_with_dashboard.py --coverage-only ``` ### **Dashboard Not Updating** Check file watching: ```bash # Install watchdog if missing uv add watchdog # Run with explicit monitoring python dashboard_monitor.py --watch ``` ### **Themes Not Working** Clear browser cache and reload: - Chrome: Ctrl+Shift+R - Firefox: Ctrl+F5 - Safari: Cmd+Shift+R ### **Mobile Issues** The dashboard is fully responsive. If issues persist: - Check viewport meta tag - Clear mobile browser cache - Try desktop user agent ## 🌟 Advanced Usage ### **Custom Themes** Add your own theme in `dashboard_themes.css`: ```css .theme-custom { --primary-bg: #your-color; --text-primary: #your-text-color; /* ... other variables */ } ``` ### **Custom Metrics** Extend `dashboard_generator.py` to add custom metrics: ```python def add_custom_metrics(self): return { "custom_metric": calculate_custom_value(), "business_impact": analyze_business_impact() } ``` ### **WebSocket Integration** For real-time updates, extend `dashboard_monitor.py`: ```python async def setup_websocket_server(self): # WebSocket server for live updates pass ``` ## 📈 Performance ### **Dashboard Generation** - Typical generation time: 1-3 seconds - Dashboard file size: 200-500KB (self-contained) - Memory usage: < 50MB during generation ### **File Watching** - CPU overhead: < 1% - Memory overhead: < 20MB - Debounce delay: 2 seconds (configurable) ### **Browser Performance** - Load time: < 1 second - Interactive elements: 60fps animations - Mobile performance: Optimized for low-power devices ## 🤝 Contributing The dashboard system is modular and extensible: 1. **Theme System**: Add new themes in `dashboard_themes.css` 2. **Metrics**: Extend data collection in `dashboard_generator.py` 3. **Components**: Add interactive elements in the JavaScript section 4. **Export Formats**: Add new export options in the export functions ## 📄 License MIT License - See project LICENSE file for details. --- **🎯 Ready to create beautiful testing dashboards!** Start with the demo to see all features, then integrate into your testing workflow for enterprise-grade test reporting.