A comprehensive web-based dashboard for analyzing Allure test execution results with advanced observability features, built with React, TypeScript, and Tailwind CSS.
- 📁 Multiple Data Sources: Load test data from local filesystem or FTP server
- 📊 Interactive Charts: Test status distribution, execution trends, and timeline visualization
- 🔍 Advanced Search & Filtering: Deep filtering by status, package, suite, thread, duration, and more
- 📈 Real-time Analytics: Live updates and interactive data exploration
- 🌓 Dark/Light Theme: Toggle between dark and light modes
- 📤 Export Capabilities: Export results to CSV, JSON, and PDF formats
- 🔄 Flaky Test Detection: Automatically identify tests with inconsistent results
- 🔁 Retry Analysis: Track test retry patterns and success rates
- 🧩 Failure Clustering: Group similar failures and identify common error patterns
- ⚡ Performance Metrics: Duration analysis, slowest/fastest tests, and performance distribution
- 🕐 Timeline Visualization: Gantt chart showing parallel test execution across threads
Complete support for all Allure report files:
behaviors.json- Main test execution datacategories.json- Test categorization and groupingpackages.json- Package/module organizationsuites.json- Test suite hierarchytimeline.json- Execution timeline and threading
- 🔌 REST API: Programmatic access to test data and analytics
- 📡 Webhook Integration: Generate payloads for external systems
- 🔍 Debug Mode: Detailed error information and debugging tools
- 📋 Environment Comparison: Compare results across different environments
- 🚨 Smart Alerts: Configurable notifications for test failures and trends
- Node.js 18+ and npm/yarn/bun
- Modern web browser with ES2020+ support
# Clone the repository
git clone <repository-url>
cd lovable-observability-dashboard
# Install dependencies
npm install
# Start development server
npm run dev# Build the application
npm run build
# Preview the build
npm run preview- Click "Open Folder" button in the dashboard
- Select a folder containing Allure JSON files
- The dashboard will automatically scan and load all supported files
- If running in a restricted environment, use "Upload Files"
- Select individual JSON files or multiple files at once
- Supported file types: behaviors.json, categories.json, packages.json, suites.json, timeline.json
- Go to Settings and configure FTP connection
- Enter host, port, credentials, and remote path
- Click "Load from FTP" to fetch test data
The dashboard provides powerful filtering capabilities:
- Text Search: Search across test names, packages, suites, and error messages
- Status Filter: Filter by passed, failed, broken, or skipped tests
- Package/Suite Filter: Filter by specific packages or test suites
- Thread Filter: Filter by execution thread for parallel test analysis
- Duration Range: Filter tests by execution time
- Special Filters: Show only flaky tests or tests with retries
- Detection: Automatically identifies tests with inconsistent results
- Scoring: Calculates flakiness score based on pass/fail ratio
- History: Shows execution history and patterns
- Statistics: Total retries, retry success rate, most retried tests
- Patterns: Identifies which tests require retries most frequently
- Success Rate: Analysis of retry effectiveness
- Error Grouping: Groups similar failures by error type and message
- Pattern Recognition: Identifies common failure patterns
- Impact Analysis: Shows which tests are affected by each cluster
- Duration Analysis: Average, fastest, and slowest test execution times
- Distribution: Histogram of test duration ranges
- Trends: Performance trends over time
- Exports filtered test results with all metadata
- Includes execution times, status, packages, suites, and error messages
- Compatible with Excel and other spreadsheet applications
- Complete export including metadata, summary, and analytics
- Structured format for programmatic processing
- Includes all advanced analytics data
- Comprehensive test report with summary and analytics
- Professional formatting suitable for stakeholders
- Includes flaky test analysis and failure patterns
The dashboard exposes a REST API for programmatic access:
// Access via browser console or external scripts
window.TestObservabilityAPI.getSummary()
window.TestObservabilityAPI.getTests({ status: 'failed', limit: 10 })
window.TestObservabilityAPI.getFailedTests()
window.TestObservabilityAPI.getFlakyTests()
window.TestObservabilityAPI.getPerformanceMetrics()
window.TestObservabilityAPI.getRetryAnalysis()
window.TestObservabilityAPI.getFailureClusters()
window.TestObservabilityAPI.getTimeline()
window.TestObservabilityAPI.getHealthStatus()Generate webhook payloads for external systems:
const payload = window.TestObservabilityAPI.generateWebhookPayload(true);
// Send to your external system (Slack, Teams, Jenkins, etc.)Monitor test health programmatically:
const health = window.TestObservabilityAPI.getHealthStatus();
// Returns: { status: 'healthy|warning|critical', passRate, flakyTestCount, ... }- Frontend: React 18, TypeScript, Tailwind CSS
- Charts: Chart.js with react-chartjs-2
- UI Components: Radix UI primitives with custom styling
- Build Tool: Vite
- Package Manager: Bun (npm/yarn compatible)
src/
├── components/ # Reusable UI components
│ ├── charts/ # Chart components (Status, TimeSeries, Gantt)
│ ├── ui/ # Base UI components (shadcn/ui)
│ └── widgets/ # Complex widgets (Analytics, Search, Export)
├── context/ # React context providers
├── hooks/ # Custom React hooks
├── lib/ # Utility libraries
├── pages/ # Application pages
├── services/ # Data services (file, FTP, API)
├── types/ # TypeScript type definitions
└── utils/ # Utility functions and parsers
- Data Loading: File/FTP services load Allure JSON files
- Parsing: Utility functions parse and aggregate test data
- Analytics: Advanced analytics are calculated from parsed data
- Context: Data is stored in React context for global access
- Components: UI components consume data and provide interactivity
- API: REST API exposes data for external integration
# Optional: Configure default FTP settings
VITE_DEFAULT_FTP_HOST=your-ftp-server.com
VITE_DEFAULT_FTP_PORT=21
VITE_DEFAULT_FTP_PATH=/allure-resultsThe dashboard uses Tailwind CSS with CSS custom properties for theming. Modify src/index.css to customize colors and appearance.
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
- Follow TypeScript best practices
- Use existing UI components from the component library
- Add proper error handling and loading states
- Write descriptive commit messages
- Test new features thoroughly
- ✨ Added advanced analytics (flaky tests, retry analysis, failure clustering)
- ✨ Implemented parallel execution timeline with Gantt chart
- ✨ Added comprehensive search and filtering
- ✨ Integrated export functionality (CSV, JSON, PDF)
- ✨ Added REST API for external integration
- ✨ Implemented dark/light theme toggle
- ✨ Enhanced support for all Allure JSON files
- 🐛 Fixed TypeScript typing issues
- 🎨 Improved UI/UX with better responsiveness
- 🎉 Initial release with basic dashboard functionality
- 📊 Test status charts and basic analytics
- 📁 Local folder and FTP data loading
- 📅 Date range filtering
- 📋 Test results table
This project is licensed under the MIT License - see the LICENSE file for details.
- Allure Framework for the test reporting standard
- Chart.js for visualization capabilities
- Radix UI for accessible UI primitives
- Tailwind CSS for utility-first styling
- Vite for fast development and building
For support, bug reports, or feature requests:
- Check existing GitHub Issues
- Create a new issue with detailed description
- Include browser information and steps to reproduce
Built with ❤️ for better test observability