Show liveness indicator (beating heart)

gui/app.js

@@ -5,12 +5,13 @@
 
 var syncthing = angular.module('syncthing', []);
 var urlbase = 'rest';
+var refreshInterval = 10000; // ms
 
 syncthing.controller('SyncthingCtrl', function ($scope, $http) {
     var prevDate = 0;
-    var getOK = true;
     var restarting = false;
 
+    $scope.getOK = true;
     $scope.connections = {};
     $scope.config = {};
     $scope.myID = '';
@@ -20,6 +21,8 @@ syncthing.controller('SyncthingCtrl', function ($scope, $http) {
     $scope.seenError = '';
     $scope.model = {};
     $scope.repos = {};
+    $scope.lastUpdated = new Date();
+    $scope.heartbeat = 0;
 
     // Strings before bools look better
     $scope.settings = [
@@ -43,10 +46,11 @@ syncthing.controller('SyncthingCtrl', function ($scope, $http) {
     ];
 
     function getSucceeded() {
-        if (!getOK) {
+        $scope.lastUpdated = new Date();
+        if (!$scope.getOK) {
             $scope.init();
             $('#networkError').modal('hide');
-            getOK = true;
+            $scope.getOK = true;
         }
         if (restarting) {
             $scope.init();
@@ -59,9 +63,18 @@ syncthing.controller('SyncthingCtrl', function ($scope, $http) {
         if (restarting) {
             return;
         }
-        if (getOK) {
+        if ($scope.getOK) {
             $('#networkError').modal({backdrop: 'static', keyboard: false});
-            getOK = false;
+            $scope.getOK = false;
+            $scope.heartbeat = 0;
+        }
+    }
+
+    function heartbeat() {
+        if ($scope.getOK){
+            $scope.$apply(function () {
+                $scope.heartbeat = ($scope.heartbeat + 1) % 5;
+            });
         }
     }
 
@@ -445,7 +458,9 @@ syncthing.controller('SyncthingCtrl', function ($scope, $http) {
     };
 
     $scope.init();
-    setInterval($scope.refresh, 10000);
+
+    setInterval($scope.refresh, refreshInterval);
+    setInterval(heartbeat, 450);
 });
 
 function nodeCompare(a, b) {

gui/index.html

@@ -88,6 +88,10 @@
     .ng-cloak {
       display: none !important;
     }
+
+    .navbar-text {
+      margin-top: 14px;
+    }
   </style>
 </head>
 
@@ -98,7 +102,10 @@
   <nav class="navbar navbar-top navbar-default" role="navigation">
     <div class="container">
       <span class="navbar-brand"><img class="logo" src="st-logo-128.png" width="32" height="32" /> Syncthing<small> | {{thisNodeName()}}</small></span>
-      <button type="button" class="btn btn-default btn-sm pull-right navbar-btn" ng-click="editSettings()"><span class="glyphicon glyphicon-cog"></span> Settings</button>
+      <div class="navbar-right">
+      <p class="navbar-text" title="Time of last contact with backend"><small><span ng-class="{'text-muted': heartbeat == 0}" class="glyphicon glyphicon-heart"></span> {{lastUpdated | date:'HH:mm'}}</small></p>
+      <button type="button" class="btn btn-primary btn-sm navbar-btn" ng-click="editSettings()"><span class="glyphicon glyphicon-cog"></span> Settings</button>
+      </div>
     </div>
   </nav>
 
@@ -226,7 +233,7 @@
             <h5>This Node</h5>
             <ul class="list-unstyled" ng-repeat="nodeCfg in thisNode()">
               <li>
-                <span class="text-monospace">{{nodeName(nodeCfg)}}</span>&emsp;
+                <span class="text-monospace">{{nodeName(nodeCfg)}}</span>
                 <ul class="list-no-bullet">
                   <li>
                     <div class="li-column" title="Current RAM utilization">