Show liveness indicator (beating heart)

This commit is contained in:
Jakob Borg 2014-05-17 13:54:52 +02:00
parent 7d672fd989
commit 84c4298cd5
2 changed files with 30 additions and 8 deletions

View File

@ -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) {

View File

@ -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">