blaze-performance-tester 3.1.23 → 3.1.24

package/dist/cli.js

@@ -467,7 +467,7 @@ function processMetricsTelemetry(requests, durationSec) {
   const avgTlsMs = mathUtils.mean(requests.map((r) => r.tlsTimeMs || 0));
   const avgTtfbMs = avgDnsMs + avgTcpMs + avgTlsMs + avgLatencyMs * 0.3;
   let c1xx = 0, c2xx = 0, c3xx = 0, c4xx = 0, c5xx = 0;
-  const codeCounts = { 400: 0, 401: 0, 403: 0, 404: 0, 429: 0, 500: 0, 502: 0, 503: 0, 504: 0 };
+  const codeCounts = { 400: 0, 401: 0, 403: 0, 404: 429, 429: 0, 500: 0, 502: 0, 503: 0, 504: 0 };
   requests.forEach((r) => {
     if (r.statusCode >= 100 && r.statusCode < 200) c1xx++;
     else if (r.statusCode >= 200 && r.statusCode < 300) c2xx++;
@@ -640,26 +640,6 @@ function exportHtmlDashboard(history, config, verdictReason, semanticReport, res
       </div>
     </div>
   </div>`;
-  const rightSizingHtml = `
-  <div class="card p-devops p-exec" style="margin-top: 2rem; background: #131c2e; border: 1px solid #1e293b;">
-    <h3 style="color: #38bdf8; display: flex; align-items: center; gap: 0.5rem; font-size: 1.2rem;">
-      \u2601\uFE0F Infrastructure Right-Sizing & Cloud Cost Projections
-    </h3>
-    <div style="grid-template-columns: repeat(3, 1fr); display: grid; gap: 1rem; margin-top: 1rem;">
-      <div style="background: #090d16; padding: 1rem; border-radius: 6px; border: 1px solid #1e293b;">
-        <div class="card-title">Est. Monthly Cloud Cost</div>
-        <div class="card-value green">$${estimatedMonthlyCost} <span class="unit">/mo</span></div>
-      </div>
-      <div style="background: #090d16; padding: 1rem; border-radius: 6px; border: 1px solid #1e293b;">
-        <div class="card-title">Recommended CPU Right-Sizing</div>
-        <div class="card-value purple">${recommendedCpuCores} <span class="unit">vCores</span></div>
-      </div>
-      <div style="background: #090d16; padding: 1rem; border-radius: 6px; border: 1px solid #1e293b;">
-        <div class="card-title">Recommended Memory Allocation</div>
-        <div class="card-value orange">${recommendedRamGb} <span class="unit">GB RAM</span></div>
-      </div>
-    </div>
-  </div>`;
   const breakdownRates = responseMatrix.breakdownRates || {};
   const breakdownGridHtml = [400, 401, 403, 404, 429, 500, 502, 503, 504].map((code) => {
     const rate = breakdownRates[code] || 0;
@@ -708,7 +688,7 @@ function exportHtmlDashboard(history, config, verdictReason, semanticReport, res
     .gauge-container-box { background: #131c2e; border: 1px solid #1e293b; border-radius: 8px; padding: 1.25rem; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
     .gauge-title { font-size: 0.85rem; font-weight: bold; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 1rem; }
 
-    .matrix-box { background: #131c2e; border: 1px solid #1e293b; border-radius: 8px; padding: 1.25rem; }
+    .matrix-box { background: #131c2e; border: 1px solid #1e293b; border-radius: 8px; padding: 1.25rem; display: flex; flex-direction: column; justify-content: space-between; }
     .matrix-title { font-size: 1.1rem; font-weight: bold; color: #ffffff; margin-bottom: 1rem; }
     .matrix-box .matrix-row { display: flex; justify-content: space-between; align-items: center; padding: 0.6rem 0; border-bottom: 1px solid #1e293b; }
     .matrix-box .matrix-row:last-child { border-bottom: none; }
@@ -741,12 +721,12 @@ function exportHtmlDashboard(history, config, verdictReason, semanticReport, res
         <div class="meta">Target Script: <code>${config.targetScript}</code></div>
       </div>
       
-      <!-- IMPLEMENTED: Persona Selector Toggle Buttons -->
+      <!-- Persona View Switcher Selector Elements -->
       <div class="persona-toggle-container">
         <span style="font-size: 0.8rem; color: #64748b; font-weight: bold; text-transform: uppercase;">View Perspective:</span>
-        <button class="persona-btn active" onclick="switchPersona('developer')">Developer</button>
-        <button class="persona-btn" onclick="switchPersona('devops')">DevOps</button>
-        <button class="persona-btn" onclick="switchPersona('executive')">Executive</button>
+        <button class="persona-btn active" onclick="switchPersona('developer', this)">Developer</button>
+        <button class="persona-btn" onclick="switchPersona('devops', this)">DevOps</button>
+        <button class="persona-btn" onclick="switchPersona('executive', this)">Executive</button>
       </div>
     </div>
     
@@ -809,25 +789,29 @@ function exportHtmlDashboard(history, config, verdictReason, semanticReport, res
       </div>
 
       <div class="matrix-box p-devops p-dev">
-        <div class="matrix-title">\u{1F4CB} HTTP Response Matrix</div>
-        <div class="matrix-row">
-          <div class="matrix-label">Successful <span class="matrix-badge badge-2xx">2xx</span></div>
-          <div class="matrix-value">${responseMatrix.total2xx}</div>
-        </div>
-        <div class="matrix-row">
-          <div class="matrix-label">Client Error <span class="matrix-badge badge-4xx">4xx</span></div>
-          <div class="matrix-value">${responseMatrix.total4xx}</div>
-        </div>
-        <div class="matrix-row">
-          <div class="matrix-label">Server Error <span class="matrix-badge badge-5xx">5xx</span></div>
-          <div class="matrix-value">${responseMatrix.total5xx}</div>
+        <div>
+          <div class="matrix-title">\u{1F4CB} HTTP Response Matrix</div>
+          <div class="matrix-row">
+            <div class="matrix-label">Successful <span class="matrix-badge badge-2xx">2xx</span></div>
+            <div class="matrix-value">${responseMatrix.total2xx}</div>
+          </div>
+          <div class="matrix-row">
+            <div class="matrix-label">Client Error <span class="matrix-badge badge-4xx">4xx</span></div>
+            <div class="matrix-value">${responseMatrix.total4xx}</div>
+          </div>
+          <div class="matrix-row">
+            <div class="matrix-label">Server Error <span class="matrix-badge badge-5xx">5xx</span></div>
+            <div class="matrix-value">${responseMatrix.total5xx}</div>
+          </div>
         </div>
 
-        <div class="matrix-title" style="margin-top: 1.5rem; font-size: 0.85rem; border-top: 1px solid #1e293b; padding-top: 1rem; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.05em;">
-          \u{1F522} HTTP Status Code Breakdown Rate
-        </div>
-        <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-top: 0.5rem;">
-          ${breakdownGridHtml}
+        <div>
+          <div class="matrix-title" style="margin-top: 1.5rem; font-size: 0.85rem; border-top: 1px solid #1e293b; padding-top: 1rem; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.05em;">
+            \u{1F522} HTTP Status Code Breakdown Rate
+          </div>
+          <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-top: 0.5rem;">
+            ${breakdownGridHtml}
+          </div>
         </div>
       </div>
     </div>
@@ -911,26 +895,38 @@ function exportHtmlDashboard(history, config, verdictReason, semanticReport, res
       });
     }
 
-    // Dynamic View Selection Switching Functionality
-    function switchPersona(persona) {
-      document.querySelectorAll('.persona-btn').forEach(btn => btn.classList.remove('active'));
-      event.target.classList.add('active');
+    // Global register tracking charts for explicit redraw logic execution
+    const activeCharts = [];
+
+    function switchPersona(persona, targetBtn) {
+      if (targetBtn) {
+        document.querySelectorAll('.persona-btn').forEach(btn => btn.classList.remove('active'));
+        targetBtn.classList.add('active');
+      }
 
-      // Hide all dynamic components initially
+      // Hide all dynamic viewport configurations
       const layouts = ['.p-dev', '.p-devops', '.p-exec'];
       layouts.forEach(selector => {
         document.querySelectorAll(selector).forEach(el => el.style.display = 'none');
       });
 
-      // Show specific class tags tied to selected viewport context
+      // Target current selector views for block visibility execution
       document.querySelectorAll('.p-' + persona).forEach(el => {
         if (el.tagName === 'TR') el.style.display = 'table-row';
         else if (el.classList.contains('metric-card')) el.style.display = 'block';
         else el.style.display = '';
       });
+
+      // AUTO-REFRESH IMPLEMENTATION: Triggers sizing layout re-calculations on unhidden canvases
+      activeCharts.forEach(chart => {
+        if (chart) {
+          chart.resize();
+          chart.update('active');
+        }
+      });
     }
     
-    new Chart(document.getElementById('volumeChart'), {
+    activeCharts.push(new Chart(document.getElementById('volumeChart'), {
       type: 'bar',
       data: {
         labels: labels,
@@ -940,9 +936,9 @@ function exportHtmlDashboard(history, config, verdictReason, semanticReport, res
         ]
       },
       options: { responsive: true, maintainAspectRatio: false, scales: { x: { grid: { color: '#1e293b' } }, y: { stacked: true, grid: { color: '#1e293b' } } } }
-    });
+    }));
 
-    new Chart(document.getElementById('concurrencyChart'), {
+    activeCharts.push(new Chart(document.getElementById('concurrencyChart'), {
       type: 'line',
       data: {
         labels: labels,
@@ -952,24 +948,24 @@ function exportHtmlDashboard(history, config, verdictReason, semanticReport, res
         ]
       },
       options: { responsive: true, maintainAspectRatio: false }
-    });
+    }));
 
-    new Chart(document.getElementById('statusDonutChart'), {
+    activeCharts.push(new Chart(document.getElementById('statusDonutChart'), {
       type: 'doughnut',
       data: {
         labels: ['Success', 'Client Err', 'Server Err'],
         datasets: [{ data: [${responseMatrix.total2xx}, ${responseMatrix.total4xx}, ${responseMatrix.total5xx}], backgroundColor: ['#4ade80', '#fde047', '#f87171'] }]
       },
       options: { responsive: true, maintainAspectRatio: false }
-    });
+    }));
 
-    new Chart(document.getElementById('ttfbScatterChart'), {
+    activeCharts.push(new Chart(document.getElementById('ttfbScatterChart'), {
       type: 'scatter',
       data: { datasets: [{ label: 'Processing Delay', data: ${JSON.stringify(scatterPoints)}, backgroundColor: '#a855f7' }] },
       options: { responsive: true, maintainAspectRatio: false }
-    });
+    }));
 
-    // Initialize layout setup to display Developer view on start
+    // Bootstrapped configuration state defaults dashboard load view to Developer
     document.querySelectorAll('.p-devops, .p-exec').forEach(el => el.style.display = 'none');
     document.querySelectorAll('.p-dev').forEach(el => el.style.display = '');
   </script></body></html>`;

package/package.json

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