Add throughput display for WireGuard peer details

This commit is contained in:
Eduardo Silva 2025-02-25 12:41:10 -03:00
parent 7226177d42
commit 490008e3c3

View File

@ -46,6 +46,7 @@
</span> </span>
</div> </div>
<p> <p>
<b>Throughput: </b> <span id="peer-throughput-{{ peer.public_key }}"></span><br>
<b>Transfer:</b> <span id="peer-transfer-{{ peer.public_key }}"></span><br> <b>Transfer:</b> <span id="peer-transfer-{{ peer.public_key }}"></span><br>
<b>Latest Handshake:</b> <span id="peer-latest-handshake-{{ peer.public_key }}"></span> <b>Latest Handshake:</b> <span id="peer-latest-handshake-{{ peer.public_key }}"></span>
<span style="display: none;" id="peer-stored-latest-handshake-{{ peer.public_key }}">{% if peer.peerstatus.last_handshake %}{{ peer.peerstatus.last_handshake|date:"U" }}{% else %}0{% endif %}</span><br> <span style="display: none;" id="peer-stored-latest-handshake-{{ peer.public_key }}">{% if peer.peerstatus.last_handshake %}{{ peer.peerstatus.last_handshake|date:"U" }}{% else %}0{% endif %}</span><br>
@ -92,6 +93,7 @@
<div class="modal-body"> <div class="modal-body">
<!-- Info content section --> <!-- Info content section -->
<div class="info-content"> <div class="info-content">
<p><b><i class="fas fa-arrows-alt-v nav-icon"></i> Throughput:</b> <span id="peerThroughput">--</span></p>
<p><b><i class="fas fa-dolly nav-icon"></i> Transfer:</b> <span id="peerTransfer">--</span></p> <p><b><i class="fas fa-dolly nav-icon"></i> Transfer:</b> <span id="peerTransfer">--</span></p>
<p><b><i class="far fa-clock nav-icon"></i></i> Latest Handshake:</b> <span id="peerHandshake">--</span></p> <p><b><i class="far fa-clock nav-icon"></i></i> Latest Handshake:</b> <span id="peerHandshake">--</span></p>
<p><b><i class="far fa-address-card nav-icon"></i> Endpoints:</b> <span id="peerEndpoints">--</span></p> <p><b><i class="far fa-address-card nav-icon"></i> Endpoints:</b> <span id="peerEndpoints">--</span></p>
@ -182,6 +184,7 @@
var peerElem = document.querySelector('[data-uuid="' + uuid + '"]'); var peerElem = document.querySelector('[data-uuid="' + uuid + '"]');
if (peerElem) { if (peerElem) {
var peerNameFromCard = peerElem.querySelector('h5').innerText; var peerNameFromCard = peerElem.querySelector('h5').innerText;
var peerThroughput = peerElem.querySelector('[id^="peer-throughput-"]').innerText;
var peerTransfer = peerElem.querySelector('[id^="peer-transfer-"]').innerText; var peerTransfer = peerElem.querySelector('[id^="peer-transfer-"]').innerText;
var peerHandshake = peerElem.querySelector('[id^="peer-latest-handshake-"]').innerText; var peerHandshake = peerElem.querySelector('[id^="peer-latest-handshake-"]').innerText;
var peerEndpoints = peerElem.querySelector('[id^="peer-endpoints-"]').innerText; var peerEndpoints = peerElem.querySelector('[id^="peer-endpoints-"]').innerText;
@ -189,6 +192,7 @@
// Update the modal fields with the card values // Update the modal fields with the card values
$('#peerPreviewModalLabel').text(peerNameFromCard); $('#peerPreviewModalLabel').text(peerNameFromCard);
$('#peerThroughput').text(peerThroughput);
$('#peerTransfer').text(peerTransfer); $('#peerTransfer').text(peerTransfer);
$('#peerHandshake').text(peerHandshake); $('#peerHandshake').text(peerHandshake);
$('#peerEndpoints').text(peerEndpoints); $('#peerEndpoints').text(peerEndpoints);