solana-bankingstage-dashboard/templates/transaction_details.html

302 lines
16 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<title>Transaction Details</title>
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
<link rel="preconnect" href="https://api.fonts.coollabs.io" crossorigin>
<link href="https://api.fonts.coollabs.io/css2?family=Rubik&display=swap" rel="stylesheet">
<link rel="stylesheet" href="{{ url_for('static', filename='a72bf4ce55ad4320.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='main.css') }}">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
<body>
<div class="main-content pb-6">
{% include "_navbar.html" %}
<div class="container mt-n2">
<div class="header">
<div class="header-body"><h6 class="header-pretitle">Details</h6>
<h2 class="header-title">Transaction details</h2></div>
</div>
<div class="card">
<div class="card-header"><h3 class="card-header-title mb-0 d-flex align-items-center">Overview</h3>
</div>
<div class="table-responsive mb-0">
<table class="table table-sm table-nowrap card-table">
<tbody class="list">
<tr>
<td class="w-100">Signature</td>
<td class="text-lg-end font-monospace">
<span class="font-monospace">
<a href="https://explorer.solana.com/tx/{{transaction.signature}}?cluster={{config.cluster}}">
{{ transaction.signature }}
</a>
</span>
</td>
</tr>
<tr>
<td class="w-100">Successful</td>
<td class="text-lg-end font-monospace">
{% if transaction.is_successful %}
<span class="badge bg-success-soft">Success</span>
{% else %}
<span class="text-warning">Failed</span>
{% endif %}
</td>
</tr>
<tr>
<td class="w-100">Processed slot</td>
<td class="text-lg-end font-monospace">
<span><a hx-boost="true" href="/block/{{transaction.processed_slot}}">{{ transaction.processed_slot | slotnumber or '--' }}</a></span></td>
</tr>
<tr>
<td class="w-100">First notification slot</td>
<td class="text-lg-end font-monospace">
<span><a hx-boost="true" href="/block/{{transaction.first_notification_slot}}">{{ transaction.first_notification_slot | slotnumber }}</a></span></td>
</tr>
<tr>
<td class="w-100">CU Requested</td>
<td class="text-lg-end font-monospace"><span>{{ transaction.cu_requested | lamports or '--' }}</span></td>
</tr>
<tr>
<td class="w-100">Prioritization Fees</td>
<td class="text-lg-end font-monospace"><span>{{ transaction.prioritization_fees | lamports or '--' }}</span></td>
</tr>
<tr>
<td class="w-100">UTC timestamp</td>
<td class="text-lg-end font-monospace"><span>{{ transaction.utc_timestamp | timestamp }}</span></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="container">
<div class="header">
<div class="header-body pt-0">
<ul class="nav nav-tabs nav-overflow header-tabs">
<!-- note: local anchors are not hx-boost'ed -->
{% for slot in transaction.relevant_slots %}
<li class="nav-item">
<div class="d-flex">
<span class="nav-link">
Slot: {{ slot | slotnumber }}
<a href="#relevant-slot-{{slot}}-write">.write</a>
<a href="#relevant-slot-{{slot}}-read">.read</a>
</span>
</div>
</li>
{% endfor %}
</ul>
</div>
</div>
</div>
{% if not transaction.relevant_slots %}
<div class="card">
<div class="card-header align-items-center"><h3 class="card-header-title text-warning">No relevant slots</h3></div>
</div>
{% endif %}
{% for slot in transaction.relevant_slots %}
{% set block_details = transaction.block_details_per_slot[slot] %}
<div id="relevant-slot-{{slot}}" class="card">
<div class="card-header align-items-center"><h3 class="card-header-title">Slot {{ slot | slotnumber }} - Errors</h3></div>
<div class="table-responsive mb-0">
<table class="table table-sm table-nowrap card-table">
<thead>
<tr>
<th class="text-muted text-end table-cell-width-number">Min Prio Fees</th>
<th class="text-muted text-end table-cell-width-number">Median Prio Fees</th>
<th class="text-muted text-end table-cell-width-number">Max Prio Fees</th>
<th class="text-muted text-end table-cell-width-number">p75 Prio Fees</th>
<th class="text-muted text-end table-cell-width-number">p90 Prio Fees</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-end font-monospace">
<span class="font-monospace">{{ block_details.prioritization_fees.p_min }}</span>
</td>
<td class="text-end font-monospace">
<span class="font-monospace">{{ block_details.prioritization_fees.p_median }}</span>
</td>
<td class="text-end font-monospace">
<span class="font-monospace">{{ block_details.prioritization_fees.p_max }}</span>
</td>
<td class="text-end font-monospace">
<span class="font-monospace">{{ block_details.prioritization_fees.p_75 }}</span>
</td>
<td class="text-end font-monospace">
<span class="font-monospace">{{ block_details.prioritization_fees.p_90 }}</span>
</td>
<td class="text-end">
<span>(micro-lamports/CU)</span>
</td>
</tr>
</tbody>
</table>
</div>
<div class="table-responsive mb-0">
<table class="table table-sm table-nowrap card-table">
<thead>
<tr>
<th class="text-muted">Error</th>
<th class="text-muted">Count</th>
</tr>
</thead>
<tbody>
{% for error in transaction.tx_errors_by_slots[slot] %}
<tr>
<td>
<span class="text-danger">{{ error.error_text }}</span>
</td>
<td>
<span class="text-danger">{{ error.count | count }}</span>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<div id="relevant-slot-{{slot}}-write">
<div class="card-header align-items-center"><h3 class="card-header-title">Slot {{slot|slotnumber}} - Write-Locked Accounts</h3></div>
<div class="table-responsive mb-0">
<table class="table table-sm table-nowrap card-table">
<thead>
<tr>
<th class="text-muted table-cell-width-account">Account</th>
<th class="text-muted text-end table-cell-width-number">CU Requested</th>
<th class="text-muted text-end table-cell-width-number">CU Consumed</th>
<th class="text-muted text-end table-cell-width-number">Min Prio Fees</th>
<th class="text-muted text-end table-cell-width-number">Median Prio Fees</th>
<th class="text-muted text-end table-cell-width-number">Max Prio Fees</th>
</tr>
</thead>
<tbody>
{% for write_account in transaction.write_lock_info[slot] %}
<tr>
<td>
<a href="/account/{{write_account.key}}">
<div class="d-none d-lg-flex align-items-center "><span class="font-size-tiny me-2"><span
class=""></span></span><span
class="font-monospace"><span class="">{{ write_account.key }}</span></span>
</div>
</a>
</td>
<td class="text-end font-monospace">
<div class="font-monospace">
{{ write_account.cu_requested | lamports }}
</div>
</td>
<td class="text-end font-monospace">
<div class="font-monospace">
{{ write_account.cu_consumed | lamports }}
</div>
</td>
<td class="text-end font-monospace">
<div class="font-monospace">
{{ write_account.min_pf | lamports }}
</div>
</td>
<td class="text-end font-monospace">
<div class="font-monospace">
{{ write_account.median_pf | lamports }}
</div>
</td>
<td class="text-end font-monospace">
<div class="font-monospace">
{{ write_account.max_pf | lamports }}
</div>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
<hr/>
<div id="relevant-slot-{{slot}}-read">
<div class="card-header align-items-center"><h3 class="card-header-title">Slot {{slot|slotnumber}} - Read-Locked Accounts</h3></div>
<div class="table-responsive mb-0">
<table class="table table-sm table-nowrap card-table">
<thead>
<tr>
<th class="text-muted table-cell-width-account">Account</th>
<th class="text-muted text-end table-cell-width-number">CU Requested</th>
<th class="text-muted text-end table-cell-width-number">CU Consumed</th>
<th class="text-muted text-end table-cell-width-number">Min Prio Fees</th>
<th class="text-muted text-end table-cell-width-number">Median Prio Fees</th>
<th class="text-muted text-end table-cell-width-number">Max Prio Fees</th>
</tr>
</thead>
<tbody>
{% for read_account in transaction.read_lock_info[slot] %}
<tr>
<td>
<a href="/account/{{read_account.key}}">
<div class="d-none d-lg-flex align-items-center">
<span class="font-size-tiny me-2">
<span class="font-monospace">{{ read_account.key }}</span>
</span>
</div>
</a>
</td>
<td class="text-end font-monospace">
<div class="font-monospace">
{{ read_account.cu_requested | lamports }}
</div>
</td>
<td class="text-end font-monospace">
<div class="font-monospace">
{{ read_account.cu_consumed | lamports }}
</div>
</td>
<td class="text-end font-monospace">
<div class="font-monospace">
{{ read_account.min_pf | lamports }}
</div>
</td>
<td class="text-end font-monospace">
<div class="font-monospace">
{{ read_account.median_pf | lamports }}
</div>
</td>
<td class="text-end font-monospace">
<div class="font-monospace">
{{ read_account.max_pf | lamports }}
</div>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
<hr class="border border-dark border-3 opacity-75">
{% endfor %}
</div>
</div>
</body>
</html>