mohsen_hassani/LedgerLine
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Group frontend panels into explicit row containers

Browse Source 
Wrap Submit and Load burst in one full-width .row and Result, Chaos and
Service health in a second. Each .row splits its width evenly between its
panels (gap subtracted first) and stacks below 900px.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Movses Aslanyan
2026-10-09 15:46:40 +03:30
co-authored by Claude Opus 5.5
parent 9f0d19c08f
commit 79a41bf869
2 changed files with 74 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files
services/gateway/static/index.html
+61 -57
View File
@@ -12,67 +12,71 @@
</header>
<main>
<section id="submit-panel">
<h2>Submit a transaction</h2>
<form id="tx-form">
<label>Account
<select id="account-select"></select>
<div class="row">
<section id="submit-panel">
<h2>Submit a transaction</h2>
<form id="tx-form">
<label>Account
<select id="account-select"></select>
</label>
<label>Amount (minor units)
<input type="number" id="amount-input" value="1000" min="0">
</label>
<label>Merchant
<input type="text" id="merchant-input" value="Corner Store">
</label>
<fieldset>
<legend>Kind</legend>
<label><input type="radio" name="kind" value="deposit" checked> deposit</label>
<label><input type="radio" name="kind" value="withdrawal"> withdrawal</label>
<label><input type="radio" name="kind" value="purchase"> purchase</label>
</fieldset>
<button type="submit">Submit</button>
</form>
</section>
<section id="load-panel">
<h2>Load burst</h2>
<label>N
<select id="burst-n">
<option value="10">10</option>
<option value="50">50</option>
<option value="200">200</option>
</select>
</label>
<label>Amount (minor units)
<input type="number" id="amount-input" value="1000" min="0">
</label>
<label>Merchant
<input type="text" id="merchant-input" value="Corner Store">
</label>
<fieldset>
<legend>Kind</legend>
<label><input type="radio" name="kind" value="deposit" checked> deposit</label>
<label><input type="radio" name="kind" value="withdrawal"> withdrawal</label>
<label><input type="radio" name="kind" value="purchase"> purchase</label>
</fieldset>
<button type="submit">Submit</button>
</form>
</section>
<button id="burst-button">Fire burst</button>
<table id="burst-table">
<thead>
<tr><th>count</th><th>success</th><th>errors</th><th>min</th><th>mean</th><th>p50</th><th>p95</th><th>max</th></tr>
</thead>
<tbody><tr><td colspan="8">no burst run yet</td></tr></tbody>
</table>
</section>
</div>
<section id="load-panel">
<h2>Load burst</h2>
<label>N
<select id="burst-n">
<option value="10">10</option>
<option value="50">50</option>
<option value="200">200</option>
</select>
</label>
<button id="burst-button">Fire burst</button>
<table id="burst-table">
<thead>
<tr><th>count</th><th>success</th><th>errors</th><th>min</th><th>mean</th><th>p50</th><th>p95</th><th>max</th></tr>
</thead>
<tbody><tr><td colspan="8">no burst run yet</td></tr></tbody>
</table>
</section>
<div class="row">
<section id="result-panel">
<h2>Result</h2>
<p>Round-trip: <span id="result-rtt">--</span> ms &middot; request_id: <code id="result-request-id">--</code></p>
<pre id="result-json">(nothing yet)</pre>
</section>
<section id="result-panel">
<h2>Result</h2>
<p>Round-trip: <span id="result-rtt">--</span> ms &middot; request_id: <code id="result-request-id">--</code></p>
<pre id="result-json">(nothing yet)</pre>
</section>
<section id="chaos-panel">
<h2>Chaos</h2>
<div id="chaos-flags"></div>
<div id="chaos-profiles">
<button data-profile="clean">clean</button>
<button data-profile="light">light</button>
<button data-profile="nightmare">nightmare</button>
<button data-profile="random">random</button>
</div>
</section>
<section id="chaos-panel">
<h2>Chaos</h2>
<div id="chaos-flags"></div>
<div id="chaos-profiles">
<button data-profile="clean">clean</button>
<button data-profile="light">light</button>
<button data-profile="nightmare">nightmare</button>
<button data-profile="random">random</button>
</div>
</section>
<section id="health-panel">
<h2>Service health</h2>
<div id="health-strip"></div>
</section>
<section id="health-panel">
<h2>Service health</h2>
<div id="health-strip"></div>
</section>
</div>
</main>
<script src="/static/app.js"></script>