feat: live timing waterfall with TTFB, DNS, TLS, TCP, sending, receiving
Backend: - Track all k6 HTTP phase metrics via PHASE_MAP in ingestPoint: http_req_blocked (DNS+wait), http_req_connecting, http_req_tls_handshaking, http_req_sending, http_req_waiting (TTFB), http_req_receiving - Compute avg + p95 per phase in computeLiveMetrics, broadcast every second - parseSummary now captures all trend metrics with generic trendRe() Frontend: - Live waterfall bar chart updates every second during the test - Each phase has a distinct colour: indigo/sky/purple/emerald/amber/blue - Bar width = phase avg as % of total request time - TTFB p95 + p99 shown below the waterfall - Bars animate smoothly with CSS transitions - Waterfall resets cleanly on new test start Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -154,7 +154,7 @@
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Live stat strip -->
|
||||
<!-- Live stat strip — response times -->
|
||||
<div class="stats-strip" id="stats-strip">
|
||||
<div class="stat-cell" id="sc-reqs">
|
||||
<span class="sc-val">--</span><span class="sc-lbl">Requests</span>
|
||||
@@ -163,7 +163,7 @@
|
||||
<span class="sc-val">--</span><span class="sc-lbl">Req / s</span>
|
||||
</div>
|
||||
<div class="stat-cell" id="sc-avg">
|
||||
<span class="sc-val">--</span><span class="sc-lbl">Avg</span>
|
||||
<span class="sc-val">--</span><span class="sc-lbl">Avg total</span>
|
||||
</div>
|
||||
<div class="stat-cell" id="sc-p90">
|
||||
<span class="sc-val">--</span><span class="sc-lbl">p(90)</span>
|
||||
@@ -176,6 +176,49 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Live timing phases waterfall -->
|
||||
<div class="waterfall-wrap" id="waterfall-wrap">
|
||||
<div class="waterfall-title">Request timing breakdown <span class="wf-hint">(avg per phase)</span></div>
|
||||
<div class="waterfall" id="waterfall">
|
||||
<div class="wf-row" id="wf-blocked">
|
||||
<span class="wf-label">DNS / Blocked</span>
|
||||
<div class="wf-bar-wrap"><div class="wf-bar wf-blocked"></div></div>
|
||||
<span class="wf-val">--</span>
|
||||
</div>
|
||||
<div class="wf-row" id="wf-connecting">
|
||||
<span class="wf-label">TCP connect</span>
|
||||
<div class="wf-bar-wrap"><div class="wf-bar wf-connecting"></div></div>
|
||||
<span class="wf-val">--</span>
|
||||
</div>
|
||||
<div class="wf-row" id="wf-tls">
|
||||
<span class="wf-label">TLS handshake</span>
|
||||
<div class="wf-bar-wrap"><div class="wf-bar wf-tls"></div></div>
|
||||
<span class="wf-val">--</span>
|
||||
</div>
|
||||
<div class="wf-row" id="wf-sending">
|
||||
<span class="wf-label">Sending</span>
|
||||
<div class="wf-bar-wrap"><div class="wf-bar wf-sending"></div></div>
|
||||
<span class="wf-val">--</span>
|
||||
</div>
|
||||
<div class="wf-row" id="wf-ttfb">
|
||||
<span class="wf-label">TTFB (waiting)</span>
|
||||
<div class="wf-bar-wrap"><div class="wf-bar wf-ttfb"></div></div>
|
||||
<span class="wf-val">--</span>
|
||||
</div>
|
||||
<div class="wf-row" id="wf-receiving">
|
||||
<span class="wf-label">Receiving</span>
|
||||
<div class="wf-bar-wrap"><div class="wf-bar wf-receiving"></div></div>
|
||||
<span class="wf-val">--</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wf-p95-row" id="wf-p95-row" style="display:none">
|
||||
<span class="wf-p95-label">TTFB p(95)</span>
|
||||
<span class="wf-p95-val" id="wf-ttfb-p95">--</span>
|
||||
<span class="wf-p95-label" style="margin-left:1rem">TTFB p(99)</span>
|
||||
<span class="wf-p95-val" id="wf-ttfb-p99">--</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bandwidth row -->
|
||||
<div class="bw-row" id="bw-row">
|
||||
<div class="bw-item">
|
||||
|
||||
Reference in New Issue
Block a user