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

token-validator/htdocs/js/adlin-main.js

@@ -33,6 +33,17 @@ angular.module("AdLinApp")
     });
 
 angular.module("AdLinApp")
+    .filter("since", function() {
+      return function(passed) {
+        passed -= Date.now()/1000
+	if (passed < 120) {
+	  return Math.floor(-passed) + " seconds ago";
+	} else {
+	  return Math.floor(-passed/60) + " minutes ago";
+	}
+      }
+    })
+
     .component('toast', {
       bindings: {
         date: '=',
@@ -157,6 +168,25 @@ angular.module("AdLinApp")
         var myinterval = $interval($scope.updateTunnelsList, 12000);
         $scope.$on('$destroy', function () { $interval.cancel(myinterval); });
 
+        $scope.PING_ok = false;
+        $scope.PING_time = '';
+        $scope.PING = false;
+	var refreshPing = function() {
+	    $http.get("/api/students/" + $scope.student.id + "/ping").then(function(response) {
+		$scope.PING_ok = response.data.State;
+		$scope.PING_time = new Date(response.data.Date);
+		$scope.PING = (Date.now() - $scope.PING_time)/1000;
+	    });
+	}
+        var myPingInterval
+        $scope.$watch("student", function(student) {
+          if (student == null) return;
+          $interval.cancel(myPingInterval);
+	  refreshPing();
+          myPingInterval = $interval(refreshPing, 15000);
+        })
+        $scope.$on('$destroy', function () { $interval.cancel(myPingInterval); });
+
 	$scope.newTunnel = function() {
 	    $scope.pleaseWaitNew = true;
 	    $http({

token-validator/htdocs/views/tunnels.html

@@ -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>
+	<button class="btn btn-sm btn-danger" ng-click="dropTunnel(tunnel)" disabled>
-      </td>
-      <td>
-	<button class="btn 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>