token-validator: reorganize tunnels page to clarify active tunnels and connected tunnels

This commit is contained in:
nemunaire 2020-04-26 17:25:39 +02:00
parent 1f47b01294
commit e7d9b1c89f
2 changed files with 42 additions and 8 deletions

View file

@ -5,22 +5,23 @@
<table class="table table-striped table-hover">
<thead>
<tr>
<th></th>
<th>Token</th>
<th>Dernière utilisation</th>
<th>Clef publique</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="tunnel in tunnels" ng-class="{'bg-success': tunnel.dump}">
<td>
<span ng-if="tunnel.Dump" class="text-bold text-success">&gt;</span>
<span ng-if="!tunnel.Dump">&#x274c;</span>
</td>
<td><code>{{ tunnel.TokenText }}</code></td>
<td>{{ tunnel.Time | date:"medium" }}</td>
<td>{{ tunnel.Time | date:"medium" }}<span ng-if="tunnel.Version"> (VM TP {{ tunnel.Version }})</span></td>
<td><code ng-show="tunnel.PubKey">{{ tunnel.PubKey }}</code><span ng-show="!tunnel.PubKey">(none)</span></td>
<td>
<span class="badge" ng-class="{'badge-success': tunnel.Dump, 'badge-danger': !tunnel.Dump}">&#x1f4bb;</span>
</td>
<td>
<button class="btn btn-danger" ng-click="dropTunnel(tunnel)" disabled>
<button class="btn btn-sm btn-danger" ng-click="dropTunnel(tunnel)" disabled>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true" ng-show="tunnel.pleaseWaitDrop"></span>
Révoquer
</button>
@ -51,12 +52,15 @@
</ul>
</div>
<div class="card" ng-repeat="tunnel in tunnels" ng-if="tunnel.Dump">
<h4 class="card-header">État de mon tunnel</h4>
<h4 class="card-header">
État de mon tunnel
<span class="badge" ng-class="{'badge-success': PING && PING < 90, 'badge-danger': !PING || PING >= 90}" title="{{ PING_time }}">&#x1f4bb;</span>
</h4>
<ul class="list-group list-group-flush">
<li class="list-group-item"><strong>Clef publique pair&nbsp;:</strong> <code>{{ tunnel.Dump.PubKey }}</code></li>
<li class="list-group-item"><strong>Pre-Shared Key&nbsp;:</strong> {{ tunnel.Dump.PSK }}</li>
<li class="list-group-item"><strong>Endpoint&nbsp;:</strong> {{ tunnel.Dump.Endpoint }}</li>
<li class="list-group-item"><strong>Dernier Handshake&nbsp;:</strong> {{ tunnel.Dump.LastHandS }}</li>
<li class="list-group-item"><strong>Dernier Handshake&nbsp;:</strong> {{ tunnel.Dump.LastHandS }} <em class="text-muted">{{ tunnel.Dump.LastHandS | since }}</em></li>
<li class="list-group-item"><strong>TX/RX&nbsp;:</strong> {{ tunnel.Dump.TX }} B / {{ tunnel.Dump.RX }} B</li>
</ul>
</div>