Malin/six.k
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
cf51a4620b889a50cefd6bc4158cd4c27d45dd65
six.k/frontend/index.html

137 lines
5.0 KiB
HTML
Raw Normal View History

feat: k6 load testing web UI with Docker - Multi-stage Dockerfile builds k6 from source (grafana/k6) - Express backend with SSE live output streaming - SQLite-backed test history with delete support - Frontend: URL input, VUs, duration, RPS limit, custom headers - Persisted via Docker volume, listens on port 8118 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-01 19:36:21 +02:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>k6 Load Tester</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="app">
<header>
<h1>&#9889; k6 Load Tester</h1>
<nav>
<button class="tab-btn active" data-tab="run">Run Test</button>
<button class="tab-btn" data-tab="history">History</button>
</nav>
</header>
<!-- RUN TAB -->
<section id="tab-run" class="tab active">
<form id="test-form">
<div class="form-grid">
<div class="form-group full">
<label for="url">Target URL</label>
<input type="url" id="url" placeholder="https://example.com" required />
</div>
<div class="form-group">
<label for="httpMethod">HTTP Method</label>
<select id="httpMethod">
<option value="GET">GET</option>
<option value="POST">POST</option>
<option value="PUT">PUT</option>
<option value="PATCH">PATCH</option>
<option value="DELETE">DELETE</option>
<option value="HEAD">HEAD</option>
</select>
</div>
<div class="form-group">
<label for="vus">Virtual Users (VUs)</label>
<div class="range-row">
<input type="range" id="vus" min="1" max="500" value="10" />
<input type="number" id="vus-num" min="1" max="500" value="10" />
</div>
</div>
<div class="form-group">
<label for="duration">Duration (seconds)</label>
<div class="range-row">
<input type="range" id="duration" min="5" max="300" value="30" />
<input type="number" id="duration-num" min="5" max="300" value="30" />
</div>
</div>
<div class="form-group">
<label for="rpsLimit">Max RPS <span class="hint">(0 = unlimited)</span></label>
<input type="number" id="rpsLimit" min="0" value="0" />
</div>
feat: add gzip toggle and cache mode (normal / no-cache / bust) - Cache-mode selector: Normal, No-cache headers, Cache-bust URL+headers - Cache-bust appends random ?_cb= per iteration to bypass CDN/proxy - gzip toggle: on = k6 default (Accept-Encoding: gzip/br), off = identity - Both options stored in DB with non-destructive migration - History items show cache-mode and gzip pills - Schema migration handles existing DBs gracefully Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-01 20:03:36 +02:00
<div class="form-group">
<label for="cacheMode">Cache Mode</label>
<select id="cacheMode">
<option value="normal">Normal (allow cache)</option>
<option value="no-cache">No-cache headers (revalidate)</option>
<option value="bust">Cache-bust URL + headers (full bypass)</option>
</select>
</div>
feat: add desktop/mobile device toggle (User-Agent) - Segmented Desktop / Mobile button in the form - Desktop: Chrome 124 on Windows - Mobile: iPhone Safari 17 (iOS 17.4) - User-Agent injected into k6 script headers - Stored in DB with migration for existing data - History items show device pill alongside cache/gzip Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-01 20:13:13 +02:00
<div class="form-group">
<label for="device">Device</label>
<div class="device-toggle">
<input type="radio" name="device" id="device-desktop" value="desktop" checked />
<label for="device-desktop" class="device-btn">&#x1F5A5; Desktop</label>
<input type="radio" name="device" id="device-mobile" value="mobile" />
<label for="device-mobile" class="device-btn">&#128241; Mobile</label>
</div>
<div class="hint" id="ua-hint">Chrome 124 on Windows</div>
</div>
feat: add gzip toggle and cache mode (normal / no-cache / bust) - Cache-mode selector: Normal, No-cache headers, Cache-bust URL+headers - Cache-bust appends random ?_cb= per iteration to bypass CDN/proxy - gzip toggle: on = k6 default (Accept-Encoding: gzip/br), off = identity - Both options stored in DB with non-destructive migration - History items show cache-mode and gzip pills - Schema migration handles existing DBs gracefully Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-01 20:03:36 +02:00
<div class="form-group">
<label>Encoding</label>
<div class="toggle-row">
<label class="toggle">
<input type="checkbox" id="gzip" checked />
<span class="toggle-track"></span>
<span class="toggle-label">Accept gzip / br</span>
</label>
</div>
<div class="hint" id="gzip-hint">k6 default — server may compress response</div>
</div>
feat: k6 load testing web UI with Docker - Multi-stage Dockerfile builds k6 from source (grafana/k6) - Express backend with SSE live output streaming - SQLite-backed test history with delete support - Frontend: URL input, VUs, duration, RPS limit, custom headers - Persisted via Docker volume, listens on port 8118 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-01 19:36:21 +02:00
<div class="form-group full" id="body-group" style="display:none">
<label for="requestBody">Request Body</label>
<textarea id="requestBody" rows="4" placeholder='{"key": "value"}'></textarea>
</div>
<div class="form-group full">
<label for="headers">
feat: add gzip toggle and cache mode (normal / no-cache / bust) - Cache-mode selector: Normal, No-cache headers, Cache-bust URL+headers - Cache-bust appends random ?_cb= per iteration to bypass CDN/proxy - gzip toggle: on = k6 default (Accept-Encoding: gzip/br), off = identity - Both options stored in DB with non-destructive migration - History items show cache-mode and gzip pills - Schema migration handles existing DBs gracefully Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-01 20:03:36 +02:00
Custom Headers <span class="hint">(JSON, optional — merged with above options)</span>
feat: k6 load testing web UI with Docker - Multi-stage Dockerfile builds k6 from source (grafana/k6) - Express backend with SSE live output streaming - SQLite-backed test history with delete support - Frontend: URL input, VUs, duration, RPS limit, custom headers - Persisted via Docker volume, listens on port 8118 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-01 19:36:21 +02:00
</label>
<input type="text" id="headers" placeholder='{"Authorization": "Bearer token"}' />
</div>
</div>
<button type="submit" id="start-btn" class="btn-primary">&#9654; Run Test</button>
</form>
<div id="result-panel" style="display:none">
<div class="result-header">
<h2>Test Running</h2>
<span id="result-status" class="badge running">running</span>
</div>
<pre id="output-log"></pre>
<div id="summary-panel" style="display:none">
<h3>Summary</h3>
<div id="summary-cards" class="summary-grid"></div>
</div>
</div>
</section>
<!-- HISTORY TAB -->
<section id="tab-history" class="tab">
<div class="history-header">
<h2>Test History</h2>
<button id="refresh-history" class="btn-secondary">&#8635; Refresh</button>
</div>
<div id="history-list">
<p class="empty">No tests yet.</p>
</div>
</section>
</div>
<script src="app.js"></script>
</body>
</html>
Reference in New Issue Copy Permalink