@alejandrojca/elmulo-reporter 2.0.0-beta.8 → 2.0.0-beta.9

package/VERSION.json

@@ -1,6 +1,6 @@
 {
   "name": "Elmulo Reporter",
-  "version": "2.0.0-beta.8",
+  "version": "2.0.0-beta.9",
   "schemaVersion": 3,
   "source": "elmulo-reporter",
   "results": "elmulo-results",

package/assets/app.css

@@ -850,19 +850,59 @@ button {
   margin: 1rem 0;
 }
 
-.trendHistoryStats span {
-  background: var(--pw-blue-050);
-  border-radius: 999px;
-  color: var(--pw-gray-700);
-  font-size: 0.78rem;
-  padding: 0.45rem 0.65rem;
-}
-
-.trendHistoryStats .passed { color: #11694f; }
-.trendHistoryStats .failed { color: #b42143; }
-.trendHistoryStats .otherErrors { color: #875100; }
-
-.historicalTestList {
+.historicalExecutionCount {
+  background: var(--pw-blue-050);
+  border-radius: 999px;
+  color: var(--pw-gray-700);
+  font-size: 0.78rem;
+  padding: 0.45rem 0.65rem;
+}
+
+.historicalStatusFilters {
+  display: flex;
+  flex: 1 1 420px;
+  flex-wrap: wrap;
+  gap: 0.45rem;
+}
+
+.historicalStatusFilter {
+  --historical-status-color: var(--pw-gray-700);
+  background: color-mix(in srgb, var(--historical-status-color) 7%, var(--pw-white));
+  border: 1px solid color-mix(in srgb, var(--historical-status-color) 55%, var(--pw-gray-200));
+  border-radius: 999px;
+  color: var(--historical-status-color);
+  font-size: 0.75rem;
+  font-weight: 700;
+  padding: 0.42rem 0.65rem;
+  transition:
+    background 140ms ease,
+    box-shadow 140ms ease,
+    transform 140ms ease;
+}
+
+.historicalStatusFilter.passed { --historical-status-color: var(--pw-success); }
+.historicalStatusFilter.failed { --historical-status-color: var(--pw-danger); }
+.historicalStatusFilter.environment_error { --historical-status-color: var(--pw-warning); }
+.historicalStatusFilter.precondition_error { --historical-status-color: #e87922; }
+.historicalStatusFilter.outdated_test { --historical-status-color: #7c5ce5; }
+.historicalStatusFilter.reported { --historical-status-color: var(--pw-blue-600); }
+.historicalStatusFilter.skipped,
+.historicalStatusFilter.pending { --historical-status-color: #71859a; }
+
+.historicalStatusFilter:hover,
+.historicalStatusFilter:focus-visible {
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--historical-status-color) 18%, transparent);
+  transform: translateY(-1px);
+}
+
+.historicalStatusFilter.active {
+  background: var(--historical-status-color);
+  border-color: var(--historical-status-color);
+  color: #fff;
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--historical-status-color) 22%, transparent);
+}
+
+.historicalTestList {
   display: grid;
   gap: 0.55rem;
   max-height: 480px;

package/assets/app.js

@@ -201,9 +201,10 @@
     tag: initialUrlState.get("tag") || "all",
     trendStatus: "total",
     trendEnvironment: initialTrendEnvironment,
-    selectedTrendRunId: null,
-    historicalRun: null,
-    historicalRerun: null,
+    selectedTrendRunId: null,
+    historicalRun: null,
+    historicalRerun: null,
+    historicalStatusFilter: "",
     historyJiraId: null,
     historyTestTitle: "",
     historyCurrentTestId: null,
@@ -1119,7 +1120,7 @@
     </div>`;
   }
 
-  function renderHistoricalRun() {
+  function renderHistoricalRun() {
     const historicalRun = state.historicalRun;
     if (!state.selectedTrendRunId) {
       return `<div class="trendHistoryPlaceholder">
@@ -1130,11 +1131,39 @@
       return `<div class="trendHistoryPlaceholder">Cargando resultados históricos…</div>`;
     }
 
-    const tests = historicalRun.tests || [];
-    const statusCount = (status) =>
-      tests.filter((test) => test.status === status).length;
-    const otherErrors = tests.filter((test) =>
-      otherErrorStatuses.has(test.status)).length;
+    const tests = historicalRun.tests || [];
+    const historicalStatusOrder = [
+      "passed",
+      "failed",
+      "environment_error",
+      "precondition_error",
+      "outdated_test",
+      "reported",
+      "skipped",
+      "pending",
+      "unknown",
+    ];
+    const statusCounts = tests.reduce((counts, test) => {
+      const status = String(test.status || "unknown");
+      counts.set(status, (counts.get(status) || 0) + 1);
+      return counts;
+    }, new Map());
+    const visibleStatuses = [...statusCounts.entries()]
+      .sort(([left], [right]) => {
+        const leftIndex = historicalStatusOrder.indexOf(left);
+        const rightIndex = historicalStatusOrder.indexOf(right);
+        return (leftIndex < 0 ? historicalStatusOrder.length : leftIndex) -
+          (rightIndex < 0 ? historicalStatusOrder.length : rightIndex);
+      });
+    if (
+      state.historicalStatusFilter &&
+      !statusCounts.has(state.historicalStatusFilter)
+    ) {
+      state.historicalStatusFilter = "";
+    }
+    const filteredTests = state.historicalStatusFilter
+      ? tests.filter((test) => test.status === state.historicalStatusFilter)
+      : tests;
     const rerun = state.historicalRerun || historicalRun.rerun || {};
     const rerunBusy = ["starting", "running"].includes(rerun.status);
     const rerunLabel = rerun.status === "starting"
@@ -1172,18 +1201,23 @@
           >×</button>
         </div>
       </header>
-      ${rerunFeedback
-        ? `<div class="trendRerunFeedback ${rerun.status === "failed" || rerun.status === "unavailable" ? "error" : "success"}" role="status">${escapeHtml(rerunFeedback)}</div>`
-        : ""}
-      <div class="trendHistoryStats">
-        <span><strong>${tests.length}</strong> ejecuciones</span>
-        <span class="passed"><strong>${statusCount("passed")}</strong> exitosas</span>
-        <span class="failed"><strong>${statusCount("failed")}</strong> fallidas</span>
-        <span class="otherErrors"><strong>${otherErrors}</strong> otros errores</span>
-      </div>
-      <div class="historicalTestList">
-        ${tests.length
-          ? tests.map((test) => `<article class="historicalTestRow">
+      ${rerunFeedback
+        ? `<div class="trendRerunFeedback ${rerun.status === "failed" || rerun.status === "unavailable" ? "error" : "success"}" role="status">${escapeHtml(rerunFeedback)}</div>`
+        : ""}
+      <div class="trendHistoryStats">
+        <span class="historicalExecutionCount"><strong>${tests.length}</strong> ejecuciones</span>
+        <div class="historicalStatusFilters" aria-label="Filtrar pruebas históricas por estado">
+          ${visibleStatuses.map(([status, count]) => `<button
+            class="historicalStatusFilter ${escapeHtml(status)} ${state.historicalStatusFilter === status ? "active" : ""}"
+            type="button"
+            data-historical-status-filter="${escapeHtml(status)}"
+            aria-pressed="${state.historicalStatusFilter === status}"
+          ><strong>${escapeHtml(count)}</strong> ${escapeHtml(statusLabel[status] || status)}</button>`).join("")}
+        </div>
+      </div>
+      <div class="historicalTestList">
+        ${filteredTests.length
+          ? filteredTests.map((test) => `<article class="historicalTestRow">
               <span class="statusDot ${escapeHtml(test.status)}" aria-hidden="true"></span>
               <span>
                 <strong>${escapeHtml(test.title)}</strong>
@@ -1196,7 +1230,7 @@
                 <small>${escapeHtml(formatDuration(test.duration_ms))}</small>
               </span>
             </article>`).join("")
-          : `<div class="emptyState"><strong>Sin resultados</strong><span>Esta corrida no tiene pruebas registradas.</span></div>`}
+          : `<div class="emptyState"><strong>Sin resultados</strong><span>Esta corrida no tiene pruebas registradas.</span></div>`}
       </div>
     </section>`;
   }
@@ -1225,11 +1259,20 @@
     const closeButton = document.querySelector("[data-close-trend-history]");
     if (!closeButton) return;
     closeButton.addEventListener("click", () => {
-      state.selectedTrendRunId = null;
-      state.historicalRun = null;
-      state.historicalRerun = null;
-      renderTrendArea();
-    });
+      state.selectedTrendRunId = null;
+      state.historicalRun = null;
+      state.historicalRerun = null;
+      state.historicalStatusFilter = "";
+      renderTrendArea();
+    });
+    document.querySelectorAll("[data-historical-status-filter]").forEach((button) => {
+      button.addEventListener("click", () => {
+        const status = button.dataset.historicalStatusFilter;
+        state.historicalStatusFilter =
+          state.historicalStatusFilter === status ? "" : status;
+        renderTrendHistoryPanel();
+      });
+    });
     document.querySelector("[data-rerun-trend-report]")?.addEventListener(
       "click",
       startHistoricalRerun,
@@ -1302,10 +1345,11 @@
   function bindTrendEvents() {
     document.querySelectorAll("[data-trend-run-id]").forEach((button) => {
       button.addEventListener("click", async () => {
-        const requestedRunId = button.dataset.trendRunId;
-        state.selectedTrendRunId = requestedRunId;
-        state.historicalRun = null;
-        state.historicalRerun = null;
+        const requestedRunId = button.dataset.trendRunId;
+        state.selectedTrendRunId = requestedRunId;
+        state.historicalRun = null;
+        state.historicalRerun = null;
+        state.historicalStatusFilter = "";
         renderTrendArea();
 
         try {
@@ -1332,9 +1376,10 @@
 
   async function loadTrendEnvironment(environment) {
     state.trendEnvironment = environment;
-    state.selectedTrendRunId = null;
-    state.historicalRun = null;
-    state.historicalRerun = null;
+    state.selectedTrendRunId = null;
+    state.historicalRun = null;
+    state.historicalRerun = null;
+    state.historicalStatusFilter = "";
     const trendContent = document.getElementById("trend-content");
     const trendHistory = document.getElementById("trend-history");
     const trendCounter = document.getElementById("trend-run-count");

package/finalize.cjs

@@ -435,7 +435,7 @@ function persistRun(database, run) {
         system: run.system || {},
         source: run.source || {},
         execution: run.execution || null,
-        reporterVersion: "2.0.0-beta.8",
+        reporterVersion: "2.0.0-beta.9",
       }),
     ],
   );
@@ -932,7 +932,7 @@ async function finalizeRun(options = {}) {
   if (!run) throw new Error(`No se encontró ${rawPath}`);
 
   run.schemaVersion = DATABASE_SCHEMA_VERSION;
-  run.reporterVersion = "2.0.0-beta.8";
+  run.reporterVersion = "2.0.0-beta.9";
   run.lifecycle = run.lifecycle || "completed";
   run.source = run.source || {
     branch: process.env.CI_COMMIT_REF_NAME || "",

package/jira.cjs

@@ -303,12 +303,12 @@ async function jiraRequest(config, pathname, options = {}) {
 }
 
 async function findMatchingIssues(config, fingerprint) {
-  const jql = [
+  const conditions = [
     `project = "${config.projectKey}"`,
     `issuetype = "${config.issueTypeName}"`,
     `labels = "${fingerprint}"`,
-    "ORDER BY created DESC",
   ].join(" AND ");
+  const jql = `${conditions} ORDER BY created DESC`;
   const query = new URLSearchParams({
     jql,
     fields: "summary,status,labels",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alejandrojca/elmulo-reporter",
-  "version": "2.0.0-beta.8",
+  "version": "2.0.0-beta.9",
   "description": "Reporter independiente para ejecuciones de Cypress con dashboard, historial SQLite y evidencias.",
   "type": "commonjs",
   "main": "plugin.cjs",

package/plugin.cjs

@@ -57,7 +57,7 @@ function registerElmuloReporter(on, config, options = {}) {
         "unknown",
       tagExpression: config.env?.TAGS || process.env.CYPRESS_TAGS || "",
       lifecycle: "running",
-      reporterVersion: "2.0.0-beta.8",
+      reporterVersion: "2.0.0-beta.9",
       execution: executionScript
         ? { runner: "npm", script: executionScript, args: executionArgs }
         : null,

package/server.cjs

@@ -182,7 +182,7 @@ async function serveReport(options = {}) {
     if (request.method === "GET" && url.pathname === "/api/health") {
       sendJson(response, 200, {
         ok: true,
-        version: "2.0.0-beta.8",
+        version: "2.0.0-beta.9",
         schemaVersion: 3,
       });
       return;