thrilltrack-explorer/monitoring/grafana-dashboard.json

{
  "dashboard": {
    "title": "Playwright Test Execution Dashboard",
    "tags": ["playwright", "testing", "e2e"],
    "timezone": "browser",
    "refresh": "30s",
    "time": {
      "from": "now-24h",
      "to": "now"
    },
    "panels": [
      {
        "id": 1,
        "title": "Test Execution Overview",
        "type": "stat",
        "gridPos": { "x": 0, "y": 0, "w": 6, "h": 4 },
        "targets": [
          {
            "expr": "count_over_time({job=\"playwright-tests\", event=\"test_end\"}[$__range])",
            "legendFormat": "Total Tests"
          }
        ],
        "options": {
          "colorMode": "value",
          "graphMode": "area",
          "textMode": "auto"
        }
      },
      {
        "id": 2,
        "title": "Pass Rate %",
        "type": "stat",
        "gridPos": { "x": 6, "y": 0, "w": 6, "h": 4 },
        "targets": [
          {
            "expr": "(sum(count_over_time({job=\"playwright-tests\", status=\"passed\"}[$__range])) / sum(count_over_time({job=\"playwright-tests\", event=\"test_end\"}[$__range]))) * 100",
            "legendFormat": "Pass Rate"
          }
        ],
        "options": {
          "colorMode": "value",
          "graphMode": "area",
          "textMode": "auto",
          "unit": "percent"
        },
        "fieldConfig": {
          "defaults": {
            "thresholds": {
              "mode": "absolute",
              "steps": [
                { "value": 0, "color": "red" },
                { "value": 80, "color": "yellow" },
                { "value": 95, "color": "green" }
              ]
            }
          }
        }
      },
      {
        "id": 3,
        "title": "Failure Rate %",
        "type": "stat",
        "gridPos": { "x": 12, "y": 0, "w": 6, "h": 4 },
        "targets": [
          {
            "expr": "(sum(count_over_time({job=\"playwright-tests\", status=\"failed\"}[$__range])) / sum(count_over_time({job=\"playwright-tests\", event=\"test_end\"}[$__range]))) * 100",
            "legendFormat": "Failure Rate"
          }
        ],
        "options": {
          "colorMode": "value",
          "graphMode": "area",
          "textMode": "auto",
          "unit": "percent"
        },
        "fieldConfig": {
          "defaults": {
            "thresholds": {
              "mode": "absolute",
              "steps": [
                { "value": 0, "color": "green" },
                { "value": 5, "color": "yellow" },
                { "value": 20, "color": "red" }
              ]
            }
          }
        }
      },
      {
        "id": 4,
        "title": "Avg Test Duration",
        "type": "stat",
        "gridPos": { "x": 18, "y": 0, "w": 6, "h": 4 },
        "targets": [
          {
            "expr": "avg_over_time({job=\"playwright-tests\", event=\"test_end\"} | json | unwrap duration_ms [$__range])",
            "legendFormat": "Avg Duration"
          }
        ],
        "options": {
          "colorMode": "value",
          "graphMode": "area",
          "textMode": "auto",
          "unit": "ms"
        }
      },
      {
        "id": 5,
        "title": "Test Status Over Time",
        "type": "timeseries",
        "gridPos": { "x": 0, "y": 4, "w": 12, "h": 8 },
        "targets": [
          {
            "expr": "sum by (status) (count_over_time({job=\"playwright-tests\", event=\"test_end\"} | json [$__interval]))",
            "legendFormat": "{{status}}"
          }
        ],
        "fieldConfig": {
          "defaults": {
            "custom": {
              "lineInterpolation": "smooth",
              "fillOpacity": 20
            }
          },
          "overrides": [
            {
              "matcher": { "id": "byName", "options": "passed" },
              "properties": [{ "id": "color", "value": { "mode": "fixed", "fixedColor": "green" } }]
            },
            {
              "matcher": { "id": "byName", "options": "failed" },
              "properties": [{ "id": "color", "value": { "mode": "fixed", "fixedColor": "red" } }]
            },
            {
              "matcher": { "id": "byName", "options": "skipped" },
              "properties": [{ "id": "color", "value": { "mode": "fixed", "fixedColor": "yellow" } }]
            }
          ]
        }
      },
      {
        "id": 6,
        "title": "Browser Comparison",
        "type": "bargauge",
        "gridPos": { "x": 12, "y": 4, "w": 12, "h": 8 },
        "targets": [
          {
            "expr": "sum by (browser) (count_over_time({job=\"playwright-tests\", status=\"passed\"} [$__range]))",
            "legendFormat": "{{browser}}"
          }
        ],
        "options": {
          "orientation": "horizontal",
          "displayMode": "gradient"
        }
      },
      {
        "id": 7,
        "title": "Test Duration Distribution",
        "type": "histogram",
        "gridPos": { "x": 0, "y": 12, "w": 12, "h": 8 },
        "targets": [
          {
            "expr": "{job=\"playwright-tests\", event=\"test_end\"} | json | unwrap duration_ms",
            "legendFormat": "Duration"
          }
        ],
        "options": {
          "bucketOffset": 0,
          "bucketSize": 1000
        }
      },
      {
        "id": 8,
        "title": "Top 10 Failing Tests",
        "type": "bargauge",
        "gridPos": { "x": 12, "y": 12, "w": 12, "h": 8 },
        "targets": [
          {
            "expr": "topk(10, sum by (test_name) (count_over_time({job=\"playwright-tests\", status=\"failed\"} | json [$__range])))",
            "legendFormat": "{{test_name}}"
          }
        ],
        "options": {
          "orientation": "horizontal",
          "displayMode": "gradient",
          "showUnfilled": true
        }
      },
      {
        "id": 9,
        "title": "Recent Test Runs",
        "type": "table",
        "gridPos": { "x": 0, "y": 20, "w": 24, "h": 8 },
        "targets": [
          {
            "expr": "{job=\"playwright-tests\", event=\"test_end\"} | json",
            "legendFormat": ""
          }
        ],
        "options": {
          "showHeader": true,
          "sortBy": [{ "displayName": "Time", "desc": true }]
        },
        "transformations": [
          {
            "id": "organize",
            "options": {
              "excludeByName": {},
              "indexByName": {
                "Time": 0,
                "test_name": 1,
                "test_file": 2,
                "browser": 3,
                "status": 4,
                "duration_ms": 5,
                "branch": 6,
                "commit": 7
              },
              "renameByName": {
                "test_name": "Test Name",
                "test_file": "File",
                "browser": "Browser",
                "status": "Status",
                "duration_ms": "Duration (ms)",
                "branch": "Branch",
                "commit": "Commit"
              }
            }
          },
          {
            "id": "limit",
            "options": {
              "limitField": 20
            }
          }
        ]
      },
      {
        "id": 10,
        "title": "Slowest Tests (P95)",
        "type": "table",
        "gridPos": { "x": 0, "y": 28, "w": 12, "h": 6 },
        "targets": [
          {
            "expr": "topk(10, quantile_over_time(0.95, {job=\"playwright-tests\", event=\"test_end\"} | json | unwrap duration_ms by (test_name) [$__range]))",
            "legendFormat": "{{test_name}}"
          }
        ]
      },
      {
        "id": 11,
        "title": "Flaky Tests Detection",
        "type": "table",
        "gridPos": { "x": 12, "y": 28, "w": 12, "h": 6 },
        "targets": [
          {
            "expr": "(count by (test_name) ({job=\"playwright-tests\", status=\"failed\"} | json) and count by (test_name) ({job=\"playwright-tests\", status=\"passed\"} | json))",
            "legendFormat": "{{test_name}}"
          }
        ],
        "description": "Tests that have both passed and failed runs (potential flaky tests)"
      }
    ]
  }
}