Add auto refresh for details

spring-boot-admin-server-ui/modules/applications-details/components/uptime.js

@@ -23,10 +23,18 @@ module.exports = {
     'ngInject';
 
     var ctrl = this;
-    var start = Date.now();
+    var timer = null;
+    var start = 0;
     ctrl.$onChanges = function () {
-      ctrl.clock = $filter('timeInterval')(ctrl.value + Date.now() - start);
-      $interval(function () {
+      ctrl.clock = $filter('timeInterval')(ctrl.value);
+      start = Date.now();
+
+      if (timer !== null) {
+        $interval.cancel(timer);
+        timer = null;
+      }
+
+      timer = $interval(function () {
         ctrl.clock = $filter('timeInterval')(ctrl.value + Date.now() - start);
       }, 1000);
     };

spring-boot-admin-server-ui/modules/applications-details/controllers/detailsCtrl.js

@@ -17,13 +17,15 @@
 
 var angular = require('angular');
 
-module.exports = function ($scope, application) {
+module.exports = function ($scope, application, $interval) {
   'ngInject';
 
   $scope.application = application;
   $scope.metrics = {};
+  $scope.refreshInterval = 1;
+  $scope.refresher = null;
 
-  $scope.getDetails = function () {
+  $scope.refresh = function () {
     application.getInfo().then(function (response) {
       $scope.info = response.data;
     }).catch(function (response) {
@@ -55,5 +57,30 @@ module.exports = function ($scope, application) {
     });
   };
 
-  $scope.getDetails();
+  $scope.start = function () {
+    $scope.refresher = $interval(function () {
+      $scope.refresh();
+    }, $scope.refreshInterval * 1000);
+  };
+
+  $scope.stop = function () {
+    if ($scope.refresher !== null) {
+      $interval.cancel($scope.refresher);
+      $scope.refresher = null;
+    }
+  };
+
+  $scope.toggleAutoRefresh = function () {
+    if ($scope.refresher === null) {
+      $scope.start();
+    } else {
+      $scope.stop();
+    }
+  };
+
+  $scope.$on('$destroy', function () {
+    $scope.stop();
+  });
+
+  $scope.refresh();
 };

spring-boot-admin-server-ui/modules/applications-details/views/details.html

@@ -3,11 +3,16 @@
     <b>Error:</b> {{ error }}
   </div>
   <div class="row">
-    <div class="text-center">
-      <form>
-        <button class="btn" ng-click="getDetails()"><i class="fa fa-repeat"></i> refresh</button>
+      <form class="form-inline">
+        <button title="refresh" class="btn" ng-click="refresh()"><i class="fa fa-repeat"></i></button>
+        <div class="input-prepend input-append">
+          <button title="auto refresh" class="btn" ng-click="toggleAutoRefresh()" ng-class="{'active':refresher != null}">
+            <i class="fa fa-refresh" ng-class="{'fa-spin':refresher != null}"></i>
+          </button>
+          <input class="input-mini" type="number" min="1" ng-model="refreshInterval" ng-disabled="refresher != null" />
+          <span class="add-on">sec</span>
+        </div>
       </form>
-    </div>
   </div>
   <div style="display: flex; flex-wrap: wrap; justify-content: space-around;">
     <sba-info-panel class="span6" style="margin-left:0px" panel-title="Application" raw="api/applications/{{ application.id }}/info">

spring-boot-admin-server-ui/modules/applications-trace/controllers/traceCtrl.js

@@ -34,16 +34,30 @@ module.exports = function ($scope, application, $interval) {
     });
   };
 
+  $scope.start = function () {
+    $scope.refresher = $interval(function () {
+      $scope.refresh();
+    }, $scope.refreshInterval * 1000);
+  };
+
+  $scope.stop = function () {
+    if ($scope.refresher !== null) {
+      $interval.cancel($scope.refresher);
+      $scope.refresher = null;
+    }
+  };
+
   $scope.toggleAutoRefresh = function () {
     if ($scope.refresher === null) {
-      $scope.refresher = $interval(function () {
-        $scope.refresh();
-      }, $scope.refreshInterval * 1000);
+      $scope.start();
     } else {
-      $interval.cancel($scope.refresher);
-      $scope.refresher = null;
+      $scope.stop();
     }
   };
 
+  $scope.$on('$destroy', function () {
+    $scope.stop();
+  });
+
   $scope.refresh();
 };