blaze-performance-tester 3.0.21 → 3.0.23

package/dist/cli.js

@@ -401,30 +401,50 @@ function exportHtmlDashboard(history, config, verdictReason, semanticReport, res
   }).join("");
   let logClustersHtml = "";
   if (semanticReport) {
+    const totalLogCount = semanticReport.clusters.reduce((sum, c) => sum + c.count, 0);
+    const uniquePatternsCount = semanticReport.clusters.length;
     logClustersHtml = `
-    <div class="card" style="margin-top: 2rem;">
-      <h3>\u{1F9E0} Semantic Log Clustering & Error Classification</h3>
-      <table>
+    <div class="card" style="margin-top: 2rem; background: #131c2e; border: 1px solid #1e293b;">
+      <h3 style="border-bottom: none; padding-bottom: 0rem; margin-bottom: 0.25rem; display: flex; align-items: center; gap: 0.5rem; color: #ffffff; font-size: 1.2rem;">
+        \u{1F9E0} Semantic Log Clustering & Error Classification
+      </h3>
+      <div style="color: #94a3b8; font-size: 0.9rem; margin-bottom: 1.5rem;">
+        Captured <strong style="color: #f8fafc;">${totalLogCount}</strong> raw failures grouped into <strong style="color: #f8fafc;">${uniquePatternsCount}</strong> unique structural patterns.
+      </div>
+      
+      <table style="width: 100%; border-collapse: collapse;">
         <thead>
-          <tr>
-            <th style="width: 10%;">Count</th>
-            <th style="width: 25%;">Classification Category</th>
-            <th style="width: 10%;">Severity</th>
-            <th style="width: 55%;">Structural Abstract Blueprint</th>
+          <tr style="border-bottom: 1px solid #1e293b;">
+            <th style="width: 8%; padding: 0.75rem; text-align: left; color: #64748b; font-size: 0.85rem; font-weight: bold; text-transform: none;">Count</th>
+            <th style="width: 22%; padding: 0.75rem; text-align: left; color: #64748b; font-size: 0.85rem; font-weight: bold; text-transform: none;">Classification Category</th>
+            <th style="width: 10%; padding: 0.75rem; text-align: left; color: #64748b; font-size: 0.85rem; font-weight: bold; text-transform: none;">Severity</th>
+            <th style="width: 60%; padding: 0.75rem; text-align: left; color: #64748b; font-size: 0.85rem; font-weight: bold; text-transform: none;">Structural Abstract Blueprint / Dynamic Log Fingerprint</th>
           </tr>
         </thead>
         <tbody>
           ${semanticReport.clusters.map((c) => {
-      let catColor = "#f87171";
-      if (c.category === "Environment_Infrastructure_Error") catColor = "#fb923c";
+      let catColor = "#fb923c";
       if (c.category === "Authentication_Error") catColor = "#c084fc";
-      let sevColor = c.severity === "CRITICAL" ? "#dc2626" : "#eab308";
+      if (c.category === "Product_Error") catColor = "#f87171";
+      if (c.category === "Environment_Infrastructure_Error") catColor = "#fb923c";
+      let sevBg = c.severity === "CRITICAL" ? "#dc2626" : "#ea580c";
+      const rawTemplate = c.template || "";
+      const cleanedTemplate = rawTemplate.replace(/\[\d{4}-\d{2}-\d{2}.*?\]\s*/, "");
       return `
-              <tr>
-                <td><span style="font-size: 1.1rem; font-weight: bold; color: #f8fafc;">${c.count}</span></td>
-                <td><span style="color: ${catColor}; font-weight: 600;">${c.category}</span></td>
-                <td><span style="background: ${sevColor}; color: #fff; padding: 0.15rem 0.4rem; border-radius:3px; font-size:0.75rem; font-weight:bold;">${c.severity}</span></td>
-                <td><code style="color: #cbd5e1; background: #0f172a; padding: 0.3rem 0.5rem; display: block; border-radius: 4px; font-size: 0.85rem;">${c.template}</code></td>
+              <tr style="border-bottom: 1px solid #1e293b; vertical-align: top;">
+                <td style="padding: 1.25rem 0.75rem; font-size: 1.2rem; font-weight: bold; color: #f8fafc;">${c.count}</td>
+                <td style="padding: 1.25rem 0.75rem; color: ${catColor}; font-weight: 600; font-size: 0.95rem;">${c.category}</td>
+                <td style="padding: 1.25rem 0.75rem;">
+                  <span style="background: ${sevBg}; color: #ffffff; padding: 0.2rem 0.5rem; border-radius: 4px; font-size: 0.7rem; font-weight: bold; letter-spacing: 0.05em;">${c.severity}</span>
+                </td>
+                <td style="padding: 1.25rem 0.75rem;">
+                  <div style="background: #090d16; border-radius: 4px; padding: 0.6rem 0.8rem; border-left: 3px solid #1e293b; margin-bottom: 0.5rem;">
+                    <code style="color: #cbd5e1; font-family: monospace; font-size: 0.9rem; white-space: pre-wrap; word-break: break-all;">${cleanedTemplate}</code>
+                  </div>
+                  <div style="color: #64748b; font-size: 0.8rem; font-family: monospace; padding-left: 0.2rem; line-height: 1.4;">
+                    <span style="color: #475569;">Real Example Trace:</span> ${rawTemplate}
+                  </div>
+                </td>
               </tr>`;
     }).join("")}
         </tbody>
@@ -442,7 +462,6 @@ function exportHtmlDashboard(history, config, verdictReason, semanticReport, res
     h1 { color: #38bdf8; margin: 0; font-size: 2rem; }
     .meta { color: #94a3b8; font-size: 0.9rem; margin-top: 0.5rem; }
     
-    /* \u{1F3B4} CARDS DASHBOARD GRID SYSTEM */
     .cards-wrapper { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.5rem; }
     .metric-card { background: #131c2e; border: 1px solid #1e293b; border-radius: 6px; padding: 1.25rem; position: relative; }
     .card-title { font-size: 0.75rem; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.5rem; }
@@ -472,8 +491,10 @@ function exportHtmlDashboard(history, config, verdictReason, semanticReport, res
     .badge-5xx { background: rgba(220, 38, 38, 0.2); color: #f87171; }
     .matrix-value { font-size: 1rem; font-weight: bold; color: #ffffff; }
 
-    .graph-card { background: #131c2e; border: 1px solid #1e293b; border-radius: 8px; padding: 1.5rem; margin-bottom: 2rem; }
-    .graph-title { font-size: 1.15rem; font-weight: 700; color: #ffffff; margin-bottom: 1.2rem; display: flex; align-items: center; gap: 0.5rem; }
+    /* \u{1F4CA} TWO-COLUMN CHART GRID */
+    .charts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 2rem; }
+    .graph-card { background: #131c2e; border: 1px solid #1e293b; border-radius: 8px; padding: 1.5rem; }
+    .graph-title { font-size: 1.1rem; font-weight: 700; color: #ffffff; margin-bottom: 1.2rem; display: flex; align-items: center; gap: 0.5rem; }
     
     .card { background: #131c2e; border: 1px solid #1e293b; border-radius: 8px; padding: 1.5rem; }
     h3 { margin-top: 0; color: #cbd5e1; border-bottom: 1px solid #1e293b; padding-bottom: 0.5rem; }
@@ -490,7 +511,6 @@ function exportHtmlDashboard(history, config, verdictReason, semanticReport, res
       <div class="meta">Target Script: <code>${config.targetScript}</code></div>
     </div>
     
-    <!-- \u{1F3B4} METRICS CARDS GRID PANEL -->
     <div class="cards-wrapper">
       <div class="metric-card">
         <div class="card-title">Apdex Score (T: 50ms)</div>
@@ -554,11 +574,22 @@ function exportHtmlDashboard(history, config, verdictReason, semanticReport, res
       </div>
     </div>
 
-    <!-- \u{1F4C9} CORRELATION STREAM GRAPH CHART -->
-    <div class="graph-card">
-      <div class="graph-title">\u{1F504} Throughput, TTF Trend & Active Threads Concurrency Correlation</div>
-      <div style="height: 320px; position: relative;">
-        <canvas id="correlationChart"></canvas>
+    <!-- \u{1F4C9} SPLIT CHARTS SYSTEM -->
+    <div class="charts-grid">
+      <!-- Chart 1: Volume Streams -->
+      <div class="graph-card">
+        <div class="graph-title">\u{1F4CA} Throughput Velocity & Workload Volume</div>
+        <div style="height: 280px; position: relative;">
+          <canvas id="volumeChart"></canvas>
+        </div>
+      </div>
+
+      <!-- Chart 2: Concurrency & Health Trends -->
+      <div class="graph-card">
+        <div class="graph-title">\u{1F504} Active Concurrency (VUs) vs. Time-to-Failure (TTF) Trend</div>
+        <div style="height: 280px; position: relative;">
+          <canvas id="concurrencyChart"></canvas>
+        </div>
       </div>
     </div>
     
@@ -595,7 +626,9 @@ function exportHtmlDashboard(history, config, verdictReason, semanticReport, res
   
   <script>
     const labels = ${JSON.stringify(labels)};
-    new Chart(document.getElementById('correlationChart'), {
+    
+    // \u{1F6E0}\uFE0F Chart 1 Setup: Throughput Bar Streams
+    new Chart(document.getElementById('volumeChart'), {
       type: 'bar',
       data: {
         labels: labels,
@@ -615,25 +648,45 @@ function exportHtmlDashboard(history, config, verdictReason, semanticReport, res
             stack: 'requests',
             barPercentage: 0.95,
             categoryPercentage: 0.95
-          },
+          }
+        ]
+      },
+      options: {
+        responsive: true,
+        maintainAspectRatio: false,
+        plugins: {
+          legend: { position: 'top', labels: { color: '#94a3b8', font: { size: 11 } } }
+        },
+        scales: {
+          x: { grid: { color: '#1e293b' }, ticks: { color: '#64748b' } },
+          y: { stacked: true, grid: { color: '#1e293b' }, ticks: { color: '#64748b' } }
+        }
+      }
+    });
+
+    // \u{1F6E0}\uFE0F Chart 2 Setup: Concurrency & TTF Correlated Slopes
+    new Chart(document.getElementById('concurrencyChart'), {
+      type: 'line',
+      data: {
+        labels: labels,
+        datasets: [
           {
             label: 'Active VU Threads',
             data: ${JSON.stringify(activeThreadsData)},
-            type: 'line',
             borderColor: '#38bdf8',
-            borderWidth: 2,
-            pointRadius: 3,
-            fill: false,
+            backgroundColor: 'rgba(56, 189, 248, 0.1)',
+            borderWidth: 2.5,
+            pointRadius: 4,
+            fill: true,
             yAxisID: 'yThreads'
           },
           {
             label: 'Time-to-Failure (TTF) Trend',
             data: ${JSON.stringify(ttfTrendData)},
-            type: 'line',
             borderColor: '#f43f5e',
-            borderWidth: 1.5,
-            borderDash: [4, 4],
-            pointRadius: 0,
+            borderWidth: 2,
+            borderDash: [5, 5],
+            pointRadius: 3,
             fill: false,
             yAxisID: 'yTtf'
           }
@@ -643,16 +696,12 @@ function exportHtmlDashboard(history, config, verdictReason, semanticReport, res
         responsive: true,
         maintainAspectRatio: false,
         plugins: {
-          legend: {
-            position: 'top',
-            labels: { color: '#94a3b8', boxWidth: 12, font: { size: 11 } }
-          }
+          legend: { position: 'top', labels: { color: '#94a3b8', font: { size: 11 } } }
         },
         scales: {
           x: { grid: { color: '#1e293b' }, ticks: { color: '#64748b' } },
-          y: { stacked: true, grid: { color: '#1e293b' }, ticks: { color: '#64748b' }, title: { display: true, text: 'Requests Volume', color: '#64748b' } },
-          yThreads: { position: 'right', display: true, grid: { drawOnChartArea: false }, ticks: { color: '#38bdf8' }, title: { display: true, text: 'Active Threads', color: '#38bdf8' } },
-          yTtf: { position: 'right', display: false, grid: { drawOnChartArea: false } }
+          yThreads: { position: 'left', grid: { color: '#1e293b' }, ticks: { color: '#38bdf8' }, title: { display: true, text: 'VUs / Threads', color: '#38bdf8' } },
+          yTtf: { position: 'right', grid: { drawOnChartArea: false }, ticks: { color: '#f43f5e' }, title: { display: true, text: 'TTF Index / Latency ms', color: '#f43f5e' } }
         }
       }
     });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "blaze-performance-tester",
-  "version": "3.0.21",
+  "version": "3.0.23",
   "description": "A high-performance, multi-threaded load testing engine built with Rust and QuickJS.",
   "type": "module",
   "main": "dist/index.js",