A public, read-only dashboard to monitor application health across environments (e.g. QA, Live). Health is determined by Playwright test execution; tests run in Jenkins, and results are stored in a database. This project reads that data and displays it—no login required for viewers.

• Frontend: React (Vite) + TypeScript
• Backend: Python FastAPI
• Data: SQLAlchemy (PostgreSQL or SQLite); Jenkins/CI posts results via API or writes to the same DB

Local dev with PostgreSQL (recommended; same as deployment):

1. Install PostgreSQL and start the service.
2. Create a database, e.g. playwright_results:
   • Windows (psql): psql -U postgres -c "CREATE DATABASE playwright_results;"
   • Linux/macOS: createdb playwright_results or use pgAdmin.
3. Copy env and set your DB user/password:

cd health-dashboard/backend
python -m venv .venv
.venv\Scripts\activate   # Windows
# source .venv/bin/activate  # Linux/macOS
pip install -r requirements.txt
cp .env.example .env      # set DATABASE_URL: postgresql://USER:PASSWORD@localhost:5432/playwright_results
python seed_db.py         # creates QA + Live envs and sample data
uvicorn main:app --reload --port 8000

cd health-dashboard/frontend
npm install
npm run dev

Open http://localhost:5173. You’ll see the dashboard with environments (QA, Live) and latest run summaries. No login.

• Environments are configured in the DB (e.g. QA, Live). Seed script creates them.
• Execution runs come from:
  • Option A – Ingest API: Jenkins (or any CI) POSTs each Playwright run to POST /api/ingest/run with environment slug, job name, build number, and test results. No auth by default.
  • Option B – Direct DB: Your pipeline writes to the same database (same tables). This app only reads.
• Dashboard is public: anyone with the URL can view. No credentials.

POST application/json to /api/ingest/run:

{
  "environment_slug": "qa",
  "job_name": "playwright-smoke",
  "build_number": 42,
  "started_at": "2025-02-15T10:00:00Z",
  "finished_at": "2025-02-15T10:05:00Z",
  "tests": [
    { "test_name": "login flow", "status": "passed", "duration_ms": 1200 },
    { "test_name": "dashboard", "status": "failed", "duration_ms": 800, "error_message": "Timeout" }
  ]
}

Environments must exist (create via seed or DB). Use environment_slug: qa, live, etc.

Use the provided Playwright reporter so each test run is sent to the dashboard automatically:

1. Copy the reporter from playwright-dashboard-reporter/ into your Playwright project.
2. Add it to playwright.config.ts:

   reporter: [["list"], ["./dashboard-reporter.ts", { environmentSlug: "qa" }]],

3. Set DASHBOARD_URL (and optionally DASHBOARD_ENV_SLUG, JOB_NAME, BUILD_NUMBER) when running tests or in CI.

See playwright-dashboard-reporter/README.md for full setup and Jenkins example.

Try it in this repo: A sample Playwright project in playwright-tests/ uses the dashboard reporter. Start the backend and frontend, then run cd playwright-tests && npm install && npm test; the run appears on the dashboard.

• Backend: backend/.env
  • DATABASE_URL: e.g. postgresql://user:pass@host:5432/db or sqlite:///./health.db
  • CORS_ORIGINS: Comma-separated origins for the React app (e.g. http://localhost:5173)
• Frontend: Uses Vite proxy to /api → http://localhost:8000 in dev. For production, set your API base URL or serve frontend and API under one host.

The dashboard and read API are public. The ingest endpoint is unauthenticated by default. If the API is exposed on the internet, add authentication (e.g. API key) for POST /api/ingest/run and restrict CORS as needed.