This is a web portal displaying CloudStack health checks and other quality metrics.

• Active Health Check Runs: Automatically displays all open PRs with [HEALTH] in the title
• PR Search: Search for any PR by number or GitHub URL
• Smoketest Results: Displays smoketest results from BlueOrangutan bot comments
  • ✅ Download logs icon for each hypervisor test
  • ✅ Test execution timestamps
  • ✅ Expandable failure details with failed test names
• Approvals: Shows approval counts (approved, commented, changes requested)
• Code Coverage: Integration with CodeCov
• Logs Access: Direct links to test logs
• Automated Data Collection: GitHub PR scraper runs periodically via cron job

The portal includes an automated scraper that collects PR data from GitHub:

• Code Coverage: Codecov bot comments with coverage percentages
• LGTM Approvals: All PR reviews (APPROVED, CHANGES_REQUESTED, COMMENTED)
• Smoketest Results: Trillian test results per hypervisor
• State Tracking: Automatically updates when PRs are closed

See scripts/README.md and scripts/QUICKSTART.md for setup instructions.

• Multiple View Modes:
  • 🗺️ Heatmap (default): Visual success rate grid for upgrade paths
  • All Upgrade Paths: Accordion view with expandable test details
  • Historical Runs: Chronological table of all tests
• Filter Tests: Filter by version (from/to), distro, hypervisor, and status
• Statistics Dashboard: View total tests, pass/fail counts, and latest test date
• Rich Test Details:
  • Formatted OS names (e.g., "Ubuntu 22.04" instead of "u22")
  • Formatted hypervisor versions (e.g., "vSphere 7.0 U3" instead of "70u3")
  • Test data created indicator with checkbox
  • Expandable failure information showing failure stage
  • Duration and timestamps for each test
• Logs & Artifacts: Direct access to test logs, error logs, and upgrade matrix URLs
• Real-time Data: Displays current running and pending tests

🔒 Security Features:

• SQL injection prevention via parameterized queries
• XSS protection through React auto-escaping
• CORS properly configured
• Environment variables for secrets management
• Read-only database access recommended

See SECURITY.md for detailed security information.

• Node.js (v16 or higher)
• npm or yarn
• MySQL database (local or remote)
• VPN access to database server (if remote)

1. Clone the repository:

   git clone https://github.com/shapeblue/QA-Portal.git
   cd QA-Portal

2. Install dependencies:

   # Install root dependencies
   npm install
   
   # Install client dependencies
   cd client
   npm install
   cd ..

3. Configure environment variables:

   cd server
   cp .env.example .env

   Edit server/.env with your database credentials:

   PORT=5001
   DB_HOST=your_database_host
   DB_PORT=3306
   DB_NAME=cloudstack_tests
   DB_USER=your_db_user
   DB_PASSWORD=your_db_password
   

   Note: Never commit the .env file. It contains sensitive credentials.

4. Start the development servers:

   # Start both backend and frontend
   npm run dev
   
   # Or start them separately:
   # Terminal 1 - Backend server
   npm run server
   
   # Terminal 2 - Frontend client
   npm run client

5. Open your browser and navigate to:

   http://localhost:3000
   

QA-Portal/
├── client/              # React frontend
│   ├── src/
│   │   ├── components/  # React components
│   │   ├── services/    # API services
│   │   ├── types/       # TypeScript types
│   │   └── App.tsx      # Main app component
│   └── package.json
├── server/              # Express backend
│   ├── src/
│   │   └── index.ts     # Server entry point
│   ├── .env             # Environment variables (not committed)
│   ├── .env.example     # Environment template
│   ├── .gitignore       # Git ignore rules
│   └── tsconfig.json
├── scripts/             # Automation scripts
│   ├── scrape-github-prs.js  # GitHub PR scraper
│   ├── scraper-cron.sh       # Cron job wrapper
│   ├── setup-cron.sh         # Cron setup script
│   ├── README.md             # Scraper documentation
│   └── QUICKSTART.md         # Quick start guide
└── package.json         # Root package.json

When you open the dashboard, it automatically loads all active health check PRs from the database. These are PRs labeled with type:healthcheckrun in the pr_health_labels table.

1. Enter a PR number (e.g., 11523) or full GitHub URL in the search box
2. Click "Search"
3. View the PR details including smoketest results and approvals
4. Click "Back to Health Check PRs" to return to the main view

• Green badges: Successful tests (>85% pass rate)
• Red badges: Failed tests (<85% pass rate)
• Approvals: Shows approved, commented, and changes requested counts
• Logs: Click the "View Logs" link to access full test logs

cd client
npm test

npm run build

This will:

1. Build the React frontend to client/build/
2. Compile the TypeScript backend to server/dist/

The project uses ESLint (configured by Create React App):

cd client
npm run lint

The backend provides the following REST API endpoints:

• GET /api/health-prs - Get all health check PRs from database
• GET /api/pr/:number - Get a specific PR by number from database

• GET /api/upgrade-tests - Get upgrade test results with optional filters
  • Query params: fromVersion, toVersion, distro, hypervisor, status
• GET /api/upgrade-tests/filters - Get available filter options (versions, distros, hypervisors)
• GET /api/upgrade-tests/stats - Get upgrade test statistics (total, passed, failed, running)

• GET /api/health - Health check endpoint

The application uses the following MySQL tables:

• pr_health_labels - PR information and labels
• pr_trillian_comments - Smoke test results from Trillian bot
• pr_codecov_comments - Code coverage data from Codecov
• upgrade_test_results - Upgrade test results with the following key fields:
  • upgrade_start_version, upgrade_target_version - Version information
  • management_server_os - Operating system/distro
  • hypervisor, hypervisor_version - Hypervisor details
  • overall_status - Test status (PASS, FAIL, ERROR, SKIPPED, or NULL for in-progress)
  • timestamp_start, timestamp_end, duration_seconds - Timing information
  • upgrade_console, error_log, upgrade_matrix_url - Links to logs and resources

If you cannot connect to the database:

• Verify VPN connection (if database is remote)
• Check database credentials in .env
• Ensure database server is running and accessible
• Verify firewall rules allow connection to database port

If port 5000 or 3000 is already in use, you can change them:

• Backend: Edit PORT in .env
• Frontend: Set PORT=3001 before running npm run client

If you encounter CORS issues, ensure the proxy is correctly configured in client/package.json:

"proxy": "http://localhost:5000"

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

ISC