Change auto refresh system to allow init of components with initial data

glances/outputs/static/js/app.js

@@ -8,6 +8,8 @@ var glancesApp = angular.module('glancesApp', ['glances.config', 'cfp.hotkeys'])
   hotkeysProvider.includeCheatSheet = false;
 })
 
-.run(function($rootScope) {
+.run(function($rootScope, GlancesStats) {
       $rootScope.title = "Glances";
+
+      GlancesStats.init();
 });

glances/outputs/static/js/components/glances/controller.js

@@ -1,35 +1,14 @@
 'use strict';
 
-function GlancesController($scope, $rootScope, $timeout, GlancesStats, REFRESH_TIME, hotkeys, ARGUMENTS) {
+function GlancesController($scope, GlancesStats, hotkeys, ARGUMENTS) {
     var vm = this;
     vm.dataLoaded = false;
     vm.arguments = ARGUMENTS;
 
-    vm.refreshData = function () {
+    $scope.$on('data_refreshed', function(event, data) {
-        GlancesStats.getData().then(function (data) {
+      vm.hasGpu = data.stats.gpu.length > 0;
-            $rootScope.title = data.stats.system.hostname + ' - Glances';
+      vm.dataLoaded = true;
-            $scope.$broadcast('data_refreshed', data);
+    });
-            vm.hasGpu = data.stats.gpu.length > 0;
-            vm.dataLoaded = true;
-
-            nextLoad();
-        }, function() {
-            $scope.$broadcast('is_disconnected');
-            nextLoad();
-        });
-    };
-
-    var loadPromise;
-    var cancelNextLoad = function() {
-      $timeout.cancel(loadPromise);
-    };
-
-    var nextLoad = function() {
-      cancelNextLoad();
-      loadPromise = $timeout(vm.refreshData, REFRESH_TIME * 1000); // in milliseconds
-    };
-
-    vm.refreshData();
 
     // A => Enable/disable AMPs
     hotkeys.add({

glances/outputs/static/js/components/glances/view.html

@@ -6,7 +6,7 @@
 
     <glances-help ng-if="vm.arguments.help_tag"></glances-help>
 
-    <div ng-show="vm.dataLoaded && !vm.arguments.help_tag" class="container-fluid">
+    <div ng-if="vm.dataLoaded && !vm.arguments.help_tag" class="container-fluid">
         <div class="top-plugin">
             <div class="row">
                 <div class="col-sm-24">

glances/outputs/static/js/components/help/controller.js

@@ -1,9 +1,9 @@
 'use strict';
 
-function GlancesHelpController(GlancesStats) {
+function GlancesHelpController($http) {
     var vm = this;
 
-    GlancesStats.getHelp().then(function(help) {
+    $http.get('api/2/help').then(function (response) {
-        vm.help = help;
+        vm.help = response.data;
     });
 }

glances/outputs/static/js/components/plugin-alert/component.js

@@ -1,7 +1,7 @@
 'use strict';
 
-glancesApp.component('glancesPluginAmps', {
+glancesApp.component('glancesPluginAlert', {
-    controller: GlancesPluginAmpsController,
+    controller: GlancesPluginAlertController,
     controllerAs: 'vm',
-    templateUrl: 'components/plugin-amps/view.html'
+    templateUrl: 'components/plugin-alert/view.html'
 });

glances/outputs/static/js/components/plugin-alert/controller.js

@@ -1,36 +1,65 @@
 'use strict';
 
-function GlancesPluginAmpsController($scope, favicoService) {
+function GlancesPluginAlertController($scope, favicoService) {
     var vm = this;
-    vm.processes = [];
+    var _alerts = [];
 
-    $scope.$on('alertStats_refreshed', function(event, data) {
+    $scope.$on('data_refreshed', function(event, data) {
-      var processes = data.stats['amps'];
+      var alertStats = data.stats['alert'];
+      if(!_.isArray(alertStats)) {
+          alertStats = [];
+      }
 
-      this.processes = [];
+      _alerts = [];
-      angular.forEach(processes, function(process) {
+      for (var i = 0; i < alertStats.length; i++) {
-          if (process.result !== null) {
+          var alertalertStats = alertStats[i];
-              this.processes.push(process);
+          var alert = {};
+
+          alert.name = alertalertStats[3];
+          alert.level = alertalertStats[2];
+          alert.begin = alertalertStats[0] * 1000;
+          alert.end = alertalertStats[1] * 1000;
+          alert.ongoing = alertalertStats[1] == -1;
+          alert.min = alertalertStats[6];
+          alert.mean = alertalertStats[5];
+          alert.max = alertalertStats[4];
+
+          if (!alert.ongoing) {
+              var duration = alert.end - alert.begin;
+              var seconds = parseInt((duration / 1000) % 60)
+                  , minutes = parseInt((duration / (1000 * 60)) % 60)
+                  , hours = parseInt((duration / (1000 * 60 * 60)) % 24);
+
+              alert.duration = _.padStart(hours, 2, '0') + ":" + _.padStart(minutes, 2, '0') + ":" + _.padStart(seconds, 2, '0');
           }
-      }, this);
+
+          _alerts.push(alert);
+      }
+
+      if (vm.hasOngoingAlerts()) {
+          favicoService.badge(vm.countOngoingAlerts());
+      } else {
+          favicoService.reset();
+      }
     });
 
-    vm.getDescriptionDecoration = function(process) {
+    vm.hasAlerts = function () {
-        var count = process.count;
+        return _alerts.length > 0;
-        var countMin = process.countmin;
+    };
-        var countMax = process.countmax;
-        var decoration = "ok";
 
-        if (count > 0) {
+    vm.getAlerts = function () {
-            if ((countMin == null || count >= countMin) && (countMax == null || count <= countMax)) {
+        return _alerts;
-                decoration = 'ok';
+    };
-            } else {
-                decoration = 'careful';
-            }
-        } else {
-            decoration = countMin == null ? 'ok' : 'critical';
-        }
 
-        return decoration;
+    vm.count = function () {
+        return _alerts.length;
+    };
+
+    vm.hasOngoingAlerts = function () {
+        return _.filter(_alerts, { 'ongoing': true }).length > 0;
+    };
+
+    vm.countOngoingAlerts = function () {
+        return _.filter(_alerts, { 'ongoing': true }).length;
     }
 }

glances/outputs/static/js/components/plugin-alert/view.html

@@ -1,9 +1,13 @@
-<section id="amps" class="plugin">
+<section id="alerts">
-  <div class="table">
+    <span class="title" ng-if="!vm.hasAlerts()">No warning or critical alert detected</span>
-      <div class="table-row" ng-repeat="process in vm.processes">
+    <span class="title" ng-if="vm.hasAlerts()">Warning or critical alerts (lasts {{vm.count()}} entries)</span>
-          <div class="table-cell text-left" ng-class="vm.getDescriptionDecoration(process)">{{ process.name }}</div>
+</section>
-          <div class="table-cell text-left">{{ process.count }}</div>
+<section id="alert" class="plugin">
-          <div class="table-cell text-left process-result">{{ process.result }}</div>
+    <div class="table">
-      </div>
+        <div class="table-row" ng-repeat="alert in vm.getAlerts()">
-  </div>
+            <div class="table-cell text-left">
+                {{alert.begin | date : 'yyyy-MM-dd H:mm:ss'}} ({{ alert.ongoing ? 'ongoing' : alert.duration }}) - <span ng-hide="alert.ongoing">{{alert.level}} on</span> <span class="{{ alert.level | lowercase }}">{{alert.name}}</span> ({{alert.max}})
+            </div>
+        </div>
+    </div>
 </section>

glances/outputs/static/js/components/plugin-amps/component.js

@@ -1,7 +1,7 @@
 'use strict';
 
-glancesApp.component('glancesPluginAlert', {
+glancesApp.component('glancesPluginAmps', {
-    controller: GlancesPluginAlertController,
+    controller: GlancesPluginAmpsController,
     controllerAs: 'vm',
-    templateUrl: 'components/plugin-alert/view.html'
+    templateUrl: 'components/plugin-amps/view.html'
 });

glances/outputs/static/js/components/plugin-amps/controller.js

@@ -1,66 +1,44 @@
 'use strict';
 
-function GlancesPluginAlertController($scope, favicoService) {
+function GlancesPluginAmpsController($scope, GlancesStats, favicoService) {
     var vm = this;
-    var _alerts = [];
+    vm.processes = [];
 
-    $scope.$on('alertStats_refreshed', function(event, data) {
+    vm.$onInit = function() {
-      var alertStats = stats.stats['alert'];
+        loadData(GlancesStats.getData());
-      _alerts = [];
+    };
 
-      if(!_.isArray(alertStats)) {
+    $scope.$on('data_refreshed', function(event, data) {
-          alertStats = [];
+        loadData(data);
-      }
-
-      for (var i = 0; i < alertStats.length; i++) {
-          var alertalertStats = alertStats[i];
-          var alert = {};
-
-          alert.name = alertalertStats[3];
-          alert.level = alertalertStats[2];
-          alert.begin = alertalertStats[0] * 1000;
-          alert.end = alertalertStats[1] * 1000;
-          alert.ongoing = alertalertStats[1] == -1;
-          alert.min = alertalertStats[6];
-          alert.mean = alertalertStats[5];
-          alert.max = alertalertStats[4];
-
-          if (!alert.ongoing) {
-              var duration = alert.end - alert.begin;
-              var seconds = parseInt((duration / 1000) % 60)
-                  , minutes = parseInt((duration / (1000 * 60)) % 60)
-                  , hours = parseInt((duration / (1000 * 60 * 60)) % 24);
-
-              alert.duration = _.padStart(hours, 2, '0') + ":" + _.padStart(minutes, 2, '0') + ":" + _.padStart(seconds, 2, '0');
-          }
-
-          _alerts.push(alert);
-      }
-
-      if (vm.hasOngoingAlerts()) {
-          favicoService.badge(vm.countOngoingAlerts());
-      } else {
-          favicoService.reset();
-      }
     });
 
-    vm.hasAlerts = function () {
+    var loadData = function(data) {
-        return _alerts.length > 0;
+      var processes = data.stats['amps'];
-    };
 
-    vm.getAlerts = function () {
+      this.processes = [];
-        return _alerts;
+      angular.forEach(processes, function(process) {
-    };
+          if (process.result !== null) {
+              this.processes.push(process);
+          }
+      }, this);
+    }
 
-    vm.count = function () {
+    vm.getDescriptionDecoration = function(process) {
-        return _alerts.length;
+        var count = process.count;
-    };
+        var countMin = process.countmin;
+        var countMax = process.countmax;
+        var decoration = "ok";
 
-    vm.hasOngoingAlerts = function () {
+        if (count > 0) {
-        return _.filter(_alerts, { 'ongoing': true }).length > 0;
+            if ((countMin == null || count >= countMin) && (countMax == null || count <= countMax)) {
-    };
+                decoration = 'ok';
+            } else {
+                decoration = 'careful';
+            }
+        } else {
+            decoration = countMin == null ? 'ok' : 'critical';
+        }
 
-    vm.countOngoingAlerts = function () {
+        return decoration;
-        return _.filter(_alerts, { 'ongoing': true }).length;
     }
 }

glances/outputs/static/js/components/plugin-amps/view.html

@@ -1,13 +1,9 @@
-<section id="alerts">
+<section id="amps" class="plugin">
-    <span class="title" ng-if="!vm.hasAlerts()">No warning or critical alert detected</span>
+  <div class="table">
-    <span class="title" ng-if="vm.hasAlerts()">Warning or critical alerts (lasts {{vm.count()}} entries)</span>
+      <div class="table-row" ng-repeat="process in vm.processes">
-</section>
+          <div class="table-cell text-left" ng-class="vm.getDescriptionDecoration(process)">{{ process.name }}</div>
-<section id="alert" class="plugin">
+          <div class="table-cell text-left">{{ process.count }}</div>
-    <div class="table">
+          <div class="table-cell text-left process-result">{{ process.result }}</div>
-        <div class="table-row" ng-repeat="alert in vm.getAlerts()">
+      </div>
-            <div class="table-cell text-left">
+  </div>
-                {{alert.begin | date : 'yyyy-MM-dd H:mm:ss'}} ({{ alert.ongoing ? 'ongoing' : alert.duration }}) - <span ng-hide="alert.ongoing">{{alert.level}} on</span> <span class="{{ alert.level | lowercase }}">{{alert.name}}</span> ({{alert.max}})
-            </div>
-        </div>
-    </div>
 </section>

glances/outputs/static/js/components/plugin-cloud/controller.js

@@ -1,17 +1,25 @@
 'use strict';
 
-function GlancesPluginCloudController($scope) {
+function GlancesPluginCloudController($scope, GlancesStats) {
     var vm = this;
 
     vm.provider = null;
     vm.instance = null;
 
+    vm.$onInit = function() {
+        loadData(GlancesStats.getData());
+    };
+
     $scope.$on('data_refreshed', function(event, data) {
+        loadData(data);
+    });
+
+    var loadData = function(data) {
       var stats = data.stats['cloud'];
 
       if (stats['ami-id'] !== undefined) {
           vm.provider = 'AWS EC2';
           vm.instance =  stats['instance-type'] + ' instance ' + stats['instance-id'] + ' (' + stats['region'] + ')';
       }
-    });
+    }
 }

glances/outputs/static/js/components/plugin-cpu/controller.js

@@ -1,6 +1,6 @@
 'use strict';
 
-function GlancesPluginCpuController($scope) {
+function GlancesPluginCpuController($scope, GlancesStats) {
     var vm = this;
     var _view = {};
 
@@ -17,7 +17,15 @@ function GlancesPluginCpuController($scope) {
     vm.soft_interrupts = null;
     vm.syscalls = null;
 
+    vm.$onInit = function() {
+        loadData(GlancesStats.getData());
+    };
+
     $scope.$on('data_refreshed', function(event, data) {
+        loadData(data);
+    });
+
+    var loadData = function(data) {
       var stats = data.stats['cpu'];
       _view = data.views['cpu'];
 
@@ -45,7 +53,7 @@ function GlancesPluginCpuController($scope) {
       if (stats.syscalls) {
           vm.syscalls = Math.floor(stats.syscalls / stats.time_since_update);
       }
-    });
+    }
 
     this.getDecoration = function (value) {
         if (_view[value] === undefined) {

glances/outputs/static/js/components/plugin-diskio/controller.js

@@ -1,12 +1,19 @@
 'use strict';
 
-function GlancesPluginDiskioController($scope, $filter, ARGUMENTS) {
+function GlancesPluginDiskioController($scope, $filter, GlancesStats, ARGUMENTS) {
     var vm = this;
     vm.arguments = ARGUMENTS;
-
     vm.disks = [];
 
+    vm.$onInit = function() {
+        loadData(GlancesStats.getData());
+    };
+
     $scope.$on('data_refreshed', function(event, data) {
+        loadData(data);
+    });
+
+    var loadData = function(data) {
       var stats = data.stats['diskio'];
       stats = $filter('orderBy')(stats,'disk_name');
 
@@ -28,5 +35,5 @@ function GlancesPluginDiskioController($scope, $filter, ARGUMENTS) {
               'alias': diskioData['alias'] !== undefined ? diskioData['alias'] : null
           });
       }
-    });
+    }
 }

glances/outputs/static/js/components/plugin-docker/controller.js

@@ -1,11 +1,19 @@
 'use strict';
 
-function GlancesPluginDockerController($scope) {
+function GlancesPluginDockerController($scope, GlancesStats) {
     var vm = this;
     vm.containers = [];
     vm.version = null;
 
+    vm.$onInit = function() {
+        loadData(GlancesStats.getData());
+    };
+
     $scope.$on('data_refreshed', function(event, data) {
+        loadData(data);
+    });
+
+    var loadData = function(data) {
       var stats = data.stats['docker'];
       this.containers = [];
 
@@ -36,5 +44,5 @@ function GlancesPluginDockerController($scope) {
       }
 
       vm.version = stats['version']['Version'];
-    });
+    }
 }

glances/outputs/static/js/components/plugin-folders/controller.js

@@ -1,10 +1,18 @@
 'use strict';
 
-function GlancesPluginFoldersController($scope) {
+function GlancesPluginFoldersController($scope, GlancesStats) {
     var vm = this;
     vm.folders = [];
 
+    vm.$onInit = function() {
+        loadData(GlancesStats.getData());
+    };
+
     $scope.$on('data_refreshed', function(event, data) {
+        loadData(data);
+    });
+
+    var loadData = function(data) {
       var stats = data.stats['folders'];
       vm.folders = [];
 
@@ -21,7 +29,7 @@ function GlancesPluginFoldersController($scope) {
 
           vm.folders.push(folder);
       }
-    });
+    }
 
     vm.getDecoration = function(folder) {
 

glances/outputs/static/js/components/plugin-fs/controller.js

@@ -1,13 +1,20 @@
 'use strict';
 
-function GlancesPluginFsController($scope, $filter, ARGUMENTS) {
+function GlancesPluginFsController($scope, $filter, GlancesStats, ARGUMENTS) {
     var vm = this;
-    vm.arguments = ARGUMENTS;
     var _view = {};
-
+    vm.arguments = ARGUMENTS;
     vm.fileSystems = [];
 
+    vm.$onInit = function() {
+        loadData(GlancesStats.getData());
+    };
+
     $scope.$on('data_refreshed', function(event, data) {
+        loadData(data);
+    });
+
+    var loadData = function(data) {
       var stats = data.stats['fs'];
       _view = data.views['fs'];
 
@@ -32,7 +39,7 @@ function GlancesPluginFsController($scope, $filter, ARGUMENTS) {
       }
 
       vm.fileSystems = $filter('orderBy')(vm.fileSystems,'mnt_point');
-    });
+    };
 
     vm.getDecoration = function(mountPoint, field) {
         if(_view[mountPoint][field] == undefined) {

glances/outputs/static/js/components/plugin-gpu/controller.js

@@ -1,6 +1,6 @@
 'use strict';
 
-function GlancesPluginGpuController($scope, ARGUMENTS) {
+function GlancesPluginGpuController($scope, GlancesStats, ARGUMENTS) {
     var vm = this;
     vm.arguments = ARGUMENTS;
     var _view = {};
@@ -8,7 +8,15 @@ function GlancesPluginGpuController($scope, ARGUMENTS) {
     vm.name = "GPU";
     vm.mean = {};
 
+    vm.$onInit = function() {
+        loadData(GlancesStats.getData());
+    };
+
     $scope.$on('data_refreshed', function(event, data) {
+        loadData(data);
+    });
+
+    var loadData = function(data) {
       var stats = data.stats['gpu'];
       _view = data.views['gpu'];
 
@@ -43,7 +51,7 @@ function GlancesPluginGpuController($scope, ARGUMENTS) {
 
       vm.mean.proc = vm.mean.proc / stats.length;
       vm.mean.mem = vm.mean.mem / stats.length;
-    });
+    }
 
     vm.getDecoration = function(gpuId, value) {
         if(_view[gpuId][value] == undefined) {

glances/outputs/static/js/components/plugin-ip/controller.js

@@ -1,6 +1,6 @@
 'use strict';
 
-function GlancesPluginIpController($scope, ARGUMENTS) {
+function GlancesPluginIpController($scope, GlancesStats, ARGUMENTS) {
     var vm = this;
     vm.arguments = ARGUMENTS;
 
@@ -10,7 +10,15 @@ function GlancesPluginIpController($scope, ARGUMENTS) {
     vm.maskCidr = null;
     vm.publicAddress = null;
 
+    vm.$onInit = function() {
+        loadData(GlancesStats.getData());
+    };
+
     $scope.$on('data_refreshed', function(event, data) {
+        loadData(data);
+    });
+
+    var loadData = function(data) {
       var ipStats = data.stats['ip'];
 
       vm.address = ipStats.address;
@@ -18,5 +26,5 @@ function GlancesPluginIpController($scope, ARGUMENTS) {
       vm.mask = ipStats.mask;
       vm.maskCidr = ipStats.mask_cidr;
       vm.publicAddress = ipStats.public_address
-    });
+    }
 }

glances/outputs/static/js/components/plugin-irq/controller.js

@@ -1,10 +1,18 @@
 'use strict';
 
-function GlancesPluginIrqController($scope) {
+function GlancesPluginIrqController($scope, GlancesStats) {
     var vm = this;
     vm.irqs = [];
 
+    vm.$onInit = function() {
+        loadData(GlancesStats.getData());
+    };
+
     $scope.$on('data_refreshed', function(event, data) {
+        loadData(data);
+    });
+
+    var loadData = function(data) {
       var stats = data.stats['irq'];
       vm.irqs = [];
 
@@ -18,5 +26,5 @@ function GlancesPluginIrqController($scope) {
 
           vm.irqs.push(irq);
       }
-    });
+    }
 }

glances/outputs/static/js/components/plugin-load/controller.js

@@ -1,6 +1,6 @@
 'use strict';
 
-function GlancesPluginLoadController($scope) {
+function GlancesPluginLoadController($scope, GlancesStats) {
     var vm = this;
     var _view = {};
 
@@ -9,7 +9,15 @@ function GlancesPluginLoadController($scope) {
     vm.min5 = null;
     vm.min15 = null;
 
+    vm.$onInit = function() {
+        loadData(GlancesStats.getData());
+    };
+
     $scope.$on('data_refreshed', function(event, data) {
+        loadData(data);
+    });
+
+    var loadData = function(data) {
       var stats = data.stats['load'];
       _view = data.views['load'];
 
@@ -17,7 +25,7 @@ function GlancesPluginLoadController($scope) {
       vm.min1 = stats['min1'];
       vm.min5 = stats['min5'];
       vm.min15 = stats['min15'];
-    });
+    }
 
     this.getDecoration = function(value) {
     if(_view[value] === undefined) {

glances/outputs/static/js/components/plugin-mem-more/controller.js

@@ -1,6 +1,6 @@
 'use strict';
 
-function GlancesPluginMemMoreController($scope) {
+function GlancesPluginMemMoreController($scope, GlancesStats) {
     var vm = this;
 
     vm.active = null;
@@ -8,12 +8,20 @@ function GlancesPluginMemMoreController($scope) {
     vm.buffers = null;
     vm.cached = null;
 
+    vm.$onInit = function() {
+        loadData(GlancesStats.getData());
+    };
+
     $scope.$on('data_refreshed', function(event, data) {
+        loadData(data);
+    });
+
+    var loadData = function(data) {
       var stats = data.stats['mem'];
 
       vm.active = stats['active'];
       vm.inactive = stats['inactive'];
       vm.buffers = stats['buffers'];
       vm.cached = stats['cached'];
-    });
+    }
 }

glances/outputs/static/js/components/plugin-mem/controller.js

@@ -1,6 +1,6 @@
 'use strict';
 
-function GlancesPluginMemController($scope) {
+function GlancesPluginMemController($scope, GlancesStats) {
     var vm = this;
     var _view = {};
 
@@ -9,7 +9,15 @@ function GlancesPluginMemController($scope) {
     vm.used = null;
     vm.free = null;
 
+    vm.$onInit = function() {
+        loadData(GlancesStats.getData());
+    };
+
     $scope.$on('data_refreshed', function(event, data) {
+        loadData(data);
+    });
+
+    var loadData = function(data) {
       var stats = data.stats['mem'];
       _view = data.views['mem'];
 
@@ -17,7 +25,7 @@ function GlancesPluginMemController($scope) {
       vm.total = stats['total'];
       vm.used = stats['used'];
       vm.free = stats['free'];
-    });
+    }
 
     this.getDecoration = function (value) {
         if (_view[value] === undefined) {

glances/outputs/static/js/components/plugin-memswap/controller.js

@@ -1,6 +1,6 @@
 'use strict';
 
-function GlancesPluginMemswapController($scope) {
+function GlancesPluginMemswapController($scope, GlancesStats) {
     var vm = this;
     var _view = {};
 
@@ -9,7 +9,15 @@ function GlancesPluginMemswapController($scope) {
     vm.used = null;
     vm.free = null;
 
+    vm.$onInit = function() {
+        loadData(GlancesStats.getData());
+    };
+
     $scope.$on('data_refreshed', function(event, data) {
+        loadData(data);
+    });
+
+    var loadData = function(data) {
       var stats = data.stats['memswap'];
       _view = data.views['memswap'];
 
@@ -17,7 +25,7 @@ function GlancesPluginMemswapController($scope) {
       vm.total = stats['total'];
       vm.used = stats['used'];
       vm.free = stats['free'];
-    });
+    }
 
     this.getDecoration = function (value) {
         if (_view[value] === undefined) {

glances/outputs/static/js/components/plugin-network/controller.js

@@ -1,12 +1,19 @@
 'use strict';
 
-function GlancesPluginNetworkController($scope, $filter, ARGUMENTS) {
+function GlancesPluginNetworkController($scope, $filter, GlancesStats, ARGUMENTS) {
     var vm = this;
     vm.arguments = ARGUMENTS;
-
     vm.networks = [];
 
+    vm.$onInit = function() {
+        loadData(GlancesStats.getData());
+    };
+
     $scope.$on('data_refreshed', function(event, data) {
+        loadData(data);
+    });
+
+    var loadData = function(data) {
       var networkStats = data.stats['network'];
 
       vm.networks = [];
@@ -28,5 +35,5 @@ function GlancesPluginNetworkController($scope, $filter, ARGUMENTS) {
       }
 
       vm.networks = $filter('orderBy')(vm.networks, 'interfaceName');
-    });
+    }
 }

glances/outputs/static/js/components/plugin-percpu/controller.js

@@ -1,10 +1,18 @@
 'use strict';
 
-function GlancesPluginPercpuController($scope, GlancesPluginHelper) {
+function GlancesPluginPercpuController($scope, GlancesStats, GlancesPluginHelper) {
     var vm = this;
     vm.cpus = [];
 
+    vm.$onInit = function() {
+        loadData(GlancesStats.getData());
+    };
+
     $scope.$on('data_refreshed', function(event, data) {
+        loadData(data);
+    });
+
+    var loadData = function(data) {
       var percpuStats = data.stats['percpu'];
 
       vm.cpus = [];
@@ -21,7 +29,7 @@ function GlancesPluginPercpuController($scope, GlancesPluginHelper) {
               'steal': cpuData.steal
           });
       }
-    });
+    }
 
     vm.getUserAlert = function(cpu) {
         return GlancesPluginHelper.getAlert('percpu', 'percpu_user_', cpu.user)

glances/outputs/static/js/components/plugin-ports/controller.js

@@ -1,18 +1,25 @@
 'use strict';
 
-function GlancesPluginPortsController($scope) {
+function GlancesPluginPortsController($scope, GlancesStats) {
     var vm = this;
-
     vm.ports = [];
 
+    vm.$onInit = function() {
+        loadData(GlancesStats.getData());
+    };
+
     $scope.$on('data_refreshed', function(event, data) {
+        loadData(data);
+    });
+
+    var loadData = function(data) {
       var stats = data.stats['ports'];
 
       vm.ports = [];
       angular.forEach(stats, function(port) {
           vm.ports.push(port);
       }, this);
-    });
+    }
 
     vm.getDecoration = function(port) {
         if (port.status === null) {

glances/outputs/static/js/components/plugin-processcount/controller.js

@@ -1,6 +1,6 @@
 'use strict';
 
-function GlancesPluginProcesscountController($scope) {
+function GlancesPluginProcesscountController($scope, GlancesStats) {
     var vm = this;
 
     vm.total  = null;
@@ -9,7 +9,15 @@ function GlancesPluginProcesscountController($scope) {
     vm.stopped = null;
     vm.thread = null;
 
+    vm.$onInit = function() {
+        loadData(GlancesStats.getData());
+    };
+
     $scope.$on('data_refreshed', function(event, data) {
+        loadData(data);
+    });
+
+    var loadData = function(data) {
       var processcountStats = data.stats['processcount'];
 
       vm.total = processcountStats['total'] || 0;
@@ -17,5 +25,5 @@ function GlancesPluginProcesscountController($scope) {
       vm.sleeping = processcountStats['sleeping'] || 0;
       vm.stopped = processcountStats['stopped'] || 0;
       vm.thread = processcountStats['thread'] || 0;
-    });
+    }
 }

glances/outputs/static/js/components/plugin-processlist/controller.js

@@ -1,14 +1,22 @@
 'use strict';
 
-function GlancesPluginProcesslistController($scope, GlancesPluginHelper, $filter, CONFIG, ARGUMENTS) {
+function GlancesPluginProcesslistController($scope, GlancesStats, GlancesPluginHelper, $filter, CONFIG, ARGUMENTS) {
     var vm = this;
     vm.arguments = ARGUMENTS;
 
     vm.processes = [];
     vm.ioReadWritePresent = false;
 
+    vm.$onInit = function() {
+        loadData(GlancesStats.getData());
+    };
+
     $scope.$on('data_refreshed', function(event, data) {
-      var processlistStats = data.stats['processlist'];
+        loadData(data);
+    });
+
+    var loadData = function(data) {
+      var processlistStats = data.stats['processlist'] || [];
 
       vm.processes = [];
       vm.ioReadWritePresent = false;
@@ -52,7 +60,7 @@ function GlancesPluginProcesslistController($scope, GlancesPluginHelper, $filter
 
           vm.processes.push(process);
       }
-    });
+    }
 
     vm.getCpuPercentAlert = function(process) {
         return GlancesPluginHelper.getAlert('processlist', 'processlist_cpu_', process.cpu_percent);

glances/outputs/static/js/components/plugin-quicklook/controller.js

@@ -1,6 +1,6 @@
 'use strict';
 
-function GlancesPluginQuicklookController($scope, ARGUMENTS) {
+function GlancesPluginQuicklookController($scope, GlancesStats, ARGUMENTS) {
     var vm = this;
     vm.arguments = ARGUMENTS;
     var _view = {};
@@ -13,7 +13,15 @@ function GlancesPluginQuicklookController($scope, ARGUMENTS) {
     vm.swap = null;
     vm.percpus = [];
 
+    vm.$onInit = function() {
+        loadData(GlancesStats.getData());
+    };
+
     $scope.$on('data_refreshed', function(event, data) {
+        loadData(data);
+    });
+
+    var loadData = function(data) {
       var stats = data.stats['quicklook'];
       _view = data.views['quicklook'];
 
@@ -31,7 +39,7 @@ function GlancesPluginQuicklookController($scope, ARGUMENTS) {
               'total': cpu.total
           });
       }, this);
-    });
+    }
 
     this.getDecoration = function (value) {
         if (_view[value] === undefined) {

glances/outputs/static/js/components/plugin-raid/controller.js

@@ -1,10 +1,18 @@
 'use strict';
 
-function GlancesPluginRaidController($scope) {
+function GlancesPluginRaidController($scope, GlancesStats) {
     var vm = this;
     vm.disks = [];
 
+    vm.$onInit = function() {
+        loadData(GlancesStats.getData());
+    };
+
     $scope.$on('data_refreshed', function(event, data) {
+        loadData(data);
+    });
+
+    var loadData = function(data) {
       var disks = [];
       var stats = data.stats['raid'];
 
@@ -32,7 +40,7 @@ function GlancesPluginRaidController($scope) {
       });
 
       vm.disks = disks;
-    });
+    }
 
     vm.hasDisks = function() {
         return this.disks.length > 0;

glances/outputs/static/js/components/plugin-sensors/controller.js

@@ -1,10 +1,18 @@
 'use strict';
 
-function GlancesPluginSensorsController($scope, GlancesPluginHelper) {
+function GlancesPluginSensorsController($scope, GlancesStats, GlancesPluginHelper) {
     var vm = this;
     vm.sensors = [];
 
+    vm.$onInit = function() {
+        loadData(GlancesStats.getData());
+    };
+
     $scope.$on('data_refreshed', function(event, data) {
+        loadData(data);
+    });
+
+    var loadData = function(data) {
         var stats = data.stats['sensors'];
 
         _.remove(stats, function(sensor) {
@@ -12,9 +20,9 @@ function GlancesPluginSensorsController($scope, GlancesPluginHelper) {
         });
 
         vm.sensors = data;
-    });
+    }
 
-    this.getAlert = function(sensor) {
+    vm.getAlert = function(sensor) {
         var current = sensor.type == 'battery' ? 100 - sensor.value : sensor.value;
 
         return GlancesPluginHelper.getAlert('sensors', 'sensors_' + sensor.type + '_', current);

glances/outputs/static/js/components/plugin-system/controller.js

@@ -1,6 +1,6 @@
 'use strict';
 
-function GlancesPluginSystemController($scope) {
+function GlancesPluginSystemController($scope, GlancesStats) {
     var vm = this;
 
     vm.hostname = null;
@@ -11,7 +11,19 @@ function GlancesPluginSystemController($scope) {
         'version': null
     };
 
+    vm.$onInit = function() {
+        loadData(GlancesStats.getData());
+    };
+
     $scope.$on('data_refreshed', function(event, data) {
+        loadData(data);
+    });
+
+    $scope.$on('is_disconnected', function() {
+      vm.isDisconnected = true;
+    });
+
+    var loadData = function(data) {
       var stats = data.stats['system'];
 
       vm.hostname = stats['hostname'];
@@ -20,9 +32,5 @@ function GlancesPluginSystemController($scope) {
       vm.os.version = stats['os_version'];
       vm.humanReadableName = stats['hr_name'];
       vm.isDisconnected = false;
-    });
+    }
-
-    $scope.$on('is_disconnected', function() {
-      vm.isDisconnected = true;
-    });
 }

glances/outputs/static/js/components/plugin-uptime/controller.js

@@ -1,10 +1,18 @@
 'use strict';
 
-function GlancesPluginUptimeController($scope) {
+function GlancesPluginUptimeController($scope, GlancesStats) {
     var vm = this;
     vm.value = null;
 
+    vm.$onInit = function() {
+        loadData(GlancesStats.getData());
+    };
+
     $scope.$on('data_refreshed', function(event, data) {
-      vm.value = data.stats['uptime'];
+        loadData(data);
     });
+
+    var loadData = function(data) {
+      vm.value = data.stats['uptime'];
+    }
 }

glances/outputs/static/js/components/plugin-wifi/controller.js

@@ -1,12 +1,20 @@
 'use strict';
 
-function GlancesPluginWifiController($scope, $filter) {
+function GlancesPluginWifiController($scope, $filter, GlancesStats) {
     var vm = this;
     var _view = {};
 
     vm.hotspots = [];
 
+    vm.$onInit = function() {
+        loadData(GlancesStats.getData());
+    };
+
     $scope.$on('data_refreshed', function(event, data) {
+        loadData(data);
+    });
+
+    var loadData = function(data) {
       var stats = data.stats['wifi'];
       _view = data.views['wifi'];
 
@@ -27,7 +35,7 @@ function GlancesPluginWifiController($scope, $filter) {
       }
 
       vm.hotspots = $filter('orderBy')(vm.hotspots, 'ssid');
-    });
+    }
 
     vm.getDecoration = function(hotpost, field) {
         if(_view[hotpost.ssid][field] == undefined) {

glances/outputs/static/js/services/stats.js

@@ -1,48 +1,70 @@
-glancesApp.service('GlancesStats', function($http, $q, GlancesPluginHelper, CONFIG, ARGUMENTS) {
+glancesApp.service('GlancesStats', function($http, $q, $rootScope, $timeout, GlancesPluginHelper, REFRESH_TIME, CONFIG, ARGUMENTS) {
+
+    var _data = false;
 
     this.getData = function() {
-        return $q.all([
+        return _data;
-            this.getAllStats(),
+    }
-            this.getAllViews()
-        ]).then(function(results) {
-            return {
-                'stats': results[0],
-                'views': results[1],
-                'isBsd': results[0]['system']['os_name'] === 'FreeBSD',
-                'isLinux': results[0]['system']['os_name'] === 'Linux',
-                'isMac': results[0]['system']['os_name'] === 'Darwin',
-                'isWindows': results[0]['system']['os_name'] === 'Windows'
-            };
-        });
-    };
 
-    this.getAllStats = function() {
+    // load config/limit/arguments and execute stats/views auto refresh
+    this.init = function() {
+      var refreshData = function() {
+          return $q.all([
+              getAllStats(),
+              getAllViews()
+          ]).then(function(results) {
+              _data = {
+                  'stats': results[0],
+                  'views': results[1],
+                  'isBsd': results[0]['system']['os_name'] === 'FreeBSD',
+                  'isLinux': results[0]['system']['os_name'] === 'Linux',
+                  'isMac': results[0]['system']['os_name'] === 'Darwin',
+                  'isWindows': results[0]['system']['os_name'] === 'Windows'
+              };
+
+              $rootScope.title = _data.stats.system.hostname + ' - Glances';
+              $rootScope.$broadcast('data_refreshed', _data);
+
+              nextLoad();
+          }, function() {
+              $rootScope.$broadcast('is_disconnected');
+              nextLoad();
+          });
+      };
+
+      // load limits to init GlancePlugin helper
+      $http.get('api/2/all/limits').then(function (response) {
+        GlancesPluginHelper.setLimits(response.data);
+      });
+      $http.get('api/2/config').then(function (response) {
+          angular.extend(CONFIG, response.data);
+      });
+      $http.get('api/2/args').then(function (response) {
+          angular.extend(ARGUMENTS, response.data);
+      });
+
+      var loadPromise;
+      var cancelNextLoad = function() {
+        $timeout.cancel(loadPromise);
+      };
+
+      var nextLoad = function() {
+        cancelNextLoad();
+        loadPromise = $timeout(refreshData, REFRESH_TIME * 1000); // in milliseconds
+      };
+
+      refreshData();
+    }
+
+    var getAllStats = function() {
         return $http.get('api/2/all').then(function (response) {
             return response.data;
         });
     };
 
-    this.getAllViews = function() {
+    var getAllViews = function() {
         return $http.get('api/2/all/views').then(function (response) {
             return response.data;
         });
     };
-
-    this.getHelp = function() {
-        return $http.get('api/2/help').then(function (response) {
-            return response.data;
-        });
-    };
-
-    // load limits to init GlancePlugin helper
-    $http.get('api/2/all/limits').then(function (response) {
-      GlancesPluginHelper.setLimits(response.data);
-    });
-    $http.get('api/2/config').then(function (response) {
-        angular.extend(CONFIG, response.data);
-    });
-    $http.get('api/2/args').then(function (response) {
-        angular.extend(ARGUMENTS, response.data);
-    });
-
 });

glances/outputs/static/public/js/templates.min.js

@@ -1,7 +1,7 @@
-angular.module('glancesApp').run(['$templateCache', function($templateCache) {$templateCache.put('components/glances/view.html','<div>\n    <div ng-if="!vm.dataLoaded" class="container-fluid" id="loading-page">\n        <div class="glances-logo"></div>\n        <div class="loader">Loading...</div>\n    </div>\n\n    <glances-help ng-if="vm.arguments.help_tag"></glances-help>\n\n    <div ng-show="vm.dataLoaded && !vm.arguments.help_tag" class="container-fluid">\n        <div class="top-plugin">\n            <div class="row">\n                <div class="col-sm-24">\n                    <div class="pull-left">\n                        <glances-plugin-system></glances-plugin-system>\n                    </div>\n                    <div class="pull-left">\n                        <glances-plugin-ip></glances-plugin-ip>\n                    </div>\n                    <div class="pull-right">\n                        <glances-plugin-uptime></glances-plugin-uptime>\n                    </div>\n                </div>\n                <div class="row">\n                    <div class="col-sm-24">\n                        <div class="pull-left">\n                            <glances-plugin-cloud></glances-plugin-cloud>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <div class="row">\n            <div class="hidden-xs hidden-sm hidden-md col-lg-6" ng-if="!vm.arguments.disable_quicklook">\n                <glances-plugin-quicklook></glances-plugin-quicklook>\n            </div>\n            <div class="col-sm-6 col-md-8 col-lg-6" ng-if="!vm.arguments.disable_cpu && !vm.arguments.percpu">\n                <glances-plugin-cpu></glances-plugin-cpu>\n            </div>\n            <div class="col-sm-12 col-md-8 col-lg-6" ng-if="!vm.arguments.disable_cpu && vm.arguments.percpu">\n                <glances-plugin-percpu></glances-plugin-percpu>\n            </div>\n            <div class="hidden-xs hidden-sm col-md-4 col-lg-3" ng-if="!vm.arguments.disable_gpu && vm.hasGpu">\n                <glances-plugin-gpu></glances-plugin-gpu>\n            </div>\n            <div class="col-sm-6 col-md-4 col-lg-3" ng-if="!vm.argumentsdisable_mem">\n                <glances-plugin-mem></glances-plugin-mem>\n            </div>\n            <div class="hidden-xs hidden-sm col-md-4 col-lg-3"\n                 ng-if="!vm.arguments.disable_mem && !(!vm.arguments.disable_gpu && vm.hasGpu)">\n                <glances-plugin-mem-more></glances-plugin-mem-more>\n            </div>\n            <div class="col-sm-6 col-md-4 col-lg-3" ng-if="!vm.arguments.disable_memswap">\n                <glances-plugin-memswap></glances-plugin-memswap>\n            </div>\n            <div class="col-sm-6 col-md-4 col-lg-3" ng-if="!vm.arguments.disable_load">\n                <glances-plugin-load></glances-plugin-load>\n            </div>\n        </div>\n        <div class="row">\n            <div class="col-sm-6 sidebar" ng-if="!vm.arguments.disable_left_sidebar">\n                <div class="table">\n                    <glances-plugin-network id="plugin-network" class="plugin table-row-group" ng-if="!vm.arguments.disable_network"></glances-plugin-network>\n                    <glances-plugin-wifi id="plugin-wifi" class="plugin table-row-group" ng-if="!vm.arguments.disable_wifi"></glances-plugin-wifi>\n                    <glances-plugin-ports id="plugin-ports" class="plugin table-row-group" ng-if="!vm.arguments.disable_ports"></glances-plugin-ports>\n                    <glances-plugin-diskio id="plugin-diskio" class="plugin table-row-group" ng-if="!vm.arguments.disable_diskio"></glances-plugin-diskio>\n                    <glances-plugin-fs id="plugin-fs" class="plugin table-row-group" ng-if="!vm.arguments.disable_fs"></glances-plugin-fs>\n                    <glances-plugin-irq id="plugin-irq" ng-if="vm.arguments.enable_irq"></glances-plugin-irq>\n                    <glances-plugin-folders id="plugin-folders" ng-if="!vm.arguments.disable_folders"></glances-plugin-folders>\n                    <glances-plugin-raid id="plugin-raid" ng-if="!vm.arguments.raid"></glances-plugin-raid>\n                    <glances-plugin-sensors id="plugin-sensors" ng-if="!vm.arguments.disable_sensors"></glances-plugin-sensors>\n                </div>\n            </div>\n            <div class="col-sm-18">\n                <glances-plugin-docker ng-if="!vm.arguments.disable_docker"></glances-plugin-docker>\n                <glances-plugin-alert ng-if="!vm.arguments.disable_alert"></glances-plugin-alert>\n                <glances-plugin-process></glances-plugin-process>\n            </div>\n            </div>\n        </div>\n    </div>\n</div>\n');
+angular.module('glancesApp').run(['$templateCache', function($templateCache) {$templateCache.put('components/glances/view.html','<div>\n    <div ng-if="!vm.dataLoaded" class="container-fluid" id="loading-page">\n        <div class="glances-logo"></div>\n        <div class="loader">Loading...</div>\n    </div>\n\n    <glances-help ng-if="vm.arguments.help_tag"></glances-help>\n\n    <div ng-if="vm.dataLoaded && !vm.arguments.help_tag" class="container-fluid">\n        <div class="top-plugin">\n            <div class="row">\n                <div class="col-sm-24">\n                    <div class="pull-left">\n                        <glances-plugin-system></glances-plugin-system>\n                    </div>\n                    <div class="pull-left">\n                        <glances-plugin-ip></glances-plugin-ip>\n                    </div>\n                    <div class="pull-right">\n                        <glances-plugin-uptime></glances-plugin-uptime>\n                    </div>\n                </div>\n                <div class="row">\n                    <div class="col-sm-24">\n                        <div class="pull-left">\n                            <glances-plugin-cloud></glances-plugin-cloud>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <div class="row">\n            <div class="hidden-xs hidden-sm hidden-md col-lg-6" ng-if="!vm.arguments.disable_quicklook">\n                <glances-plugin-quicklook></glances-plugin-quicklook>\n            </div>\n            <div class="col-sm-6 col-md-8 col-lg-6" ng-if="!vm.arguments.disable_cpu && !vm.arguments.percpu">\n                <glances-plugin-cpu></glances-plugin-cpu>\n            </div>\n            <div class="col-sm-12 col-md-8 col-lg-6" ng-if="!vm.arguments.disable_cpu && vm.arguments.percpu">\n                <glances-plugin-percpu></glances-plugin-percpu>\n            </div>\n            <div class="hidden-xs hidden-sm col-md-4 col-lg-3" ng-if="!vm.arguments.disable_gpu && vm.hasGpu">\n                <glances-plugin-gpu></glances-plugin-gpu>\n            </div>\n            <div class="col-sm-6 col-md-4 col-lg-3" ng-if="!vm.argumentsdisable_mem">\n                <glances-plugin-mem></glances-plugin-mem>\n            </div>\n            <div class="hidden-xs hidden-sm col-md-4 col-lg-3"\n                 ng-if="!vm.arguments.disable_mem && !(!vm.arguments.disable_gpu && vm.hasGpu)">\n                <glances-plugin-mem-more></glances-plugin-mem-more>\n            </div>\n            <div class="col-sm-6 col-md-4 col-lg-3" ng-if="!vm.arguments.disable_memswap">\n                <glances-plugin-memswap></glances-plugin-memswap>\n            </div>\n            <div class="col-sm-6 col-md-4 col-lg-3" ng-if="!vm.arguments.disable_load">\n                <glances-plugin-load></glances-plugin-load>\n            </div>\n        </div>\n        <div class="row">\n            <div class="col-sm-6 sidebar" ng-if="!vm.arguments.disable_left_sidebar">\n                <div class="table">\n                    <glances-plugin-network id="plugin-network" class="plugin table-row-group" ng-if="!vm.arguments.disable_network"></glances-plugin-network>\n                    <glances-plugin-wifi id="plugin-wifi" class="plugin table-row-group" ng-if="!vm.arguments.disable_wifi"></glances-plugin-wifi>\n                    <glances-plugin-ports id="plugin-ports" class="plugin table-row-group" ng-if="!vm.arguments.disable_ports"></glances-plugin-ports>\n                    <glances-plugin-diskio id="plugin-diskio" class="plugin table-row-group" ng-if="!vm.arguments.disable_diskio"></glances-plugin-diskio>\n                    <glances-plugin-fs id="plugin-fs" class="plugin table-row-group" ng-if="!vm.arguments.disable_fs"></glances-plugin-fs>\n                    <glances-plugin-irq id="plugin-irq" ng-if="vm.arguments.enable_irq"></glances-plugin-irq>\n                    <glances-plugin-folders id="plugin-folders" ng-if="!vm.arguments.disable_folders"></glances-plugin-folders>\n                    <glances-plugin-raid id="plugin-raid" ng-if="!vm.arguments.raid"></glances-plugin-raid>\n                    <glances-plugin-sensors id="plugin-sensors" ng-if="!vm.arguments.disable_sensors"></glances-plugin-sensors>\n                </div>\n            </div>\n            <div class="col-sm-18">\n                <glances-plugin-docker ng-if="!vm.arguments.disable_docker"></glances-plugin-docker>\n                <glances-plugin-alert ng-if="!vm.arguments.disable_alert"></glances-plugin-alert>\n                <glances-plugin-process></glances-plugin-process>\n            </div>\n            </div>\n        </div>\n    </div>\n</div>\n');
 $templateCache.put('components/help/view.html','  <div  class="container-fluid">\n    <div class="row">\n        <div class="col-sm-12 col-lg-24">{{vm.help.version}} {{vm.help.psutil_version}}</div>\n    </div>\n    <div class="row">&nbsp;</div>\n    <div class="row">\n        <div class="col-sm-12 col-lg-24">{{vm.help.configuration_file}}</div>\n    </div>\n    <div class="row">&nbsp;</div>\n    <div class="row">\n        <div class="col-sm-12 col-lg-6">{{vm.help.sort_auto}}</div>\n        <div class="col-sm-12 col-lg-6">{{vm.help.sort_network}}</div>\n    </div>\n    <div class="row">\n        <div class="col-sm-12 col-lg-6">{{vm.help.sort_cpu}}</div>\n        <div class="col-sm-12 col-lg-6">{{vm.help.show_hide_alert}}</div>\n    </div>\n    <div class="row">\n        <div class="col-sm-12 col-lg-6">{{vm.help.sort_mem}}</div>\n        <div class="col-sm-12 col-lg-6">{{vm.help.percpu}}</div>\n    </div>\n    <div class="row">\n        <div class="col-sm-12 col-lg-6">{{vm.help.sort_user}}</div>\n        <div class="col-sm-12 col-lg-6">{{vm.help.show_hide_ip}}</div>\n    </div>\n    <div class="row">\n        <div class="col-sm-12 col-lg-6">{{vm.help.sort_proc}}</div>\n        <div class="col-sm-12 col-lg-6">{{vm.help.enable_disable_docker}}</div>\n    </div>\n    <div class="row">\n        <div class="col-sm-12 col-lg-6">{{vm.help.sort_io}}</div>\n        <div class="col-sm-12 col-lg-6">{{vm.help.view_network_io_combination}}</div>\n    </div>\n    <div class="row">\n        <div class="col-sm-12 col-lg-6">{{vm.help.sort_cpu_times}}</div>\n        <div class="col-sm-12 col-lg-6">{{vm.help.view_cumulative_network}}</div>\n    </div>\n    <div class="row">\n        <div class="col-sm-12 col-lg-6">{{vm.help.show_hide_diskio}}</div>\n        <div class="col-sm-12 col-lg-6">{{vm.help.show_hide_filesytem_freespace}}</div>\n    </div>\n    <div class="row">\n        <div class="col-sm-12 col-lg-6">{{vm.help.show_hide_filesystem}}</div>\n        <div class="col-sm-12 col-lg-6">{{vm.help.show_hide_vm.help}}</div>\n    </div>\n    <div class="row">\n        <div class="col-sm-12 col-lg-6">{{vm.help.show_hide_network}}</div>\n        <div class="col-sm-12 col-lg-6">{{vm.help.diskio_iops}}</div>\n    </div>\n    <div class="row">\n        <div class="col-sm-12 col-lg-6">{{vm.help.show_hide_sensors}}</div>\n        <div class="col-sm-12 col-lg-6">{{vm.help.show_hide_top_menu}}</div>\n    </div>\n    <div class="row">\n        <div class="col-sm-12 col-lg-6">{{vm.help.show_hide_left_sidebar}}</div>\n        <div class="col-sm-12 col-lg-6">{{vm.help.show_hide_amp}}</div>\n    </div>\n    <div class="row">\n        <div class="col-sm-12 col-lg-6">{{vm.help.enable_disable_process_stats}}</div>\n        <div class="col-sm-12 col-lg-6">{{vm.help.show_hide_irq}}</div>\n    </div>\n    <div class="row">\n        <div class="col-sm-12 col-lg-6">{{vm.help.enable_disable_gpu}}</div>\n        <div class="col-sm-12 col-lg-6">{{vm.help.enable_disable_mean_gpu}}</div>\n    </div>\n    <div class="row">\n        <div class="col-sm-12 col-lg-6">{{vm.help.enable_disable_quick_look}}</div>\n        <div class="col-sm-12 col-lg-6"></div>\n    </div>\n    <div class="row">\n        <div class="col-sm-12 col-lg-6">{{vm.help.enable_disable_short_processname}}</div>\n        <div class="col-sm-12 col-lg-6"></div>\n    </div>\n    <div class="row">\n        <div class="col-sm-12 col-lg-6">{{vm.help.enable_disable_ports}}</div>\n        <div class="col-sm-12 col-lg-6"></div>\n    </div>\n\n  </div>\n');
-$templateCache.put('components/plugin-alert/view.html','<section id="amps" class="plugin">\n  <div class="table">\n      <div class="table-row" ng-repeat="process in vm.processes">\n          <div class="table-cell text-left" ng-class="vm.getDescriptionDecoration(process)">{{ process.name }}</div>\n          <div class="table-cell text-left">{{ process.count }}</div>\n          <div class="table-cell text-left process-result">{{ process.result }}</div>\n      </div>\n  </div>\n</section>\n');
+$templateCache.put('components/plugin-alert/view.html','<section id="alerts">\n    <span class="title" ng-if="!vm.hasAlerts()">No warning or critical alert detected</span>\n    <span class="title" ng-if="vm.hasAlerts()">Warning or critical alerts (lasts {{vm.count()}} entries)</span>\n</section>\n<section id="alert" class="plugin">\n    <div class="table">\n        <div class="table-row" ng-repeat="alert in vm.getAlerts()">\n            <div class="table-cell text-left">\n                {{alert.begin | date : \'yyyy-MM-dd H:mm:ss\'}} ({{ alert.ongoing ? \'ongoing\' : alert.duration }}) - <span ng-hide="alert.ongoing">{{alert.level}} on</span> <span class="{{ alert.level | lowercase }}">{{alert.name}}</span> ({{alert.max}})\n            </div>\n        </div>\n    </div>\n</section>\n');
-$templateCache.put('components/plugin-amps/view.html','<section id="alerts">\n    <span class="title" ng-if="!vm.hasAlerts()">No warning or critical alert detected</span>\n    <span class="title" ng-if="vm.hasAlerts()">Warning or critical alerts (lasts {{vm.count()}} entries)</span>\n</section>\n<section id="alert" class="plugin">\n    <div class="table">\n        <div class="table-row" ng-repeat="alert in vm.getAlerts()">\n            <div class="table-cell text-left">\n                {{alert.begin | date : \'yyyy-MM-dd H:mm:ss\'}} ({{ alert.ongoing ? \'ongoing\' : alert.duration }}) - <span ng-hide="alert.ongoing">{{alert.level}} on</span> <span class="{{ alert.level | lowercase }}">{{alert.name}}</span> ({{alert.max}})\n            </div>\n        </div>\n    </div>\n</section>\n');
+$templateCache.put('components/plugin-amps/view.html','<section id="amps" class="plugin">\n  <div class="table">\n      <div class="table-row" ng-repeat="process in vm.processes">\n          <div class="table-cell text-left" ng-class="vm.getDescriptionDecoration(process)">{{ process.name }}</div>\n          <div class="table-cell text-left">{{ process.count }}</div>\n          <div class="table-cell text-left process-result">{{ process.result }}</div>\n      </div>\n  </div>\n</section>\n');
 $templateCache.put('components/plugin-cloud/view.html','<section id="cloud">\n  <span class="title">{{ vm.provider }}</span> {{ vm.instance }}\n</section>\n');
 $templateCache.put('components/plugin-cpu/view.html','<section id="cpu" class="plugin">\n    <div class="row">\n        <div class="col-sm-24 col-md-12 col-lg-8">\n            <div class="table">\n                <div class="table-row">\n                    <div class="table-cell text-left title">CPU</div>\n                    <div class="table-cell">{{ vm.total }}%</div>\n                </div>\n                <div class="table-row">\n                    <div class="table-cell text-left">user:</div>\n                    <div class="table-cell" ng-class="vm.getDecoration(\'user\')">\n                        {{ vm.user }}%\n                    </div>\n                </div>\n                <div class="table-row">\n                    <div class="table-cell text-left">system:</div>\n                    <div class="table-cell" ng-class="vm.getDecoration(\'system\')">\n                        {{ vm.system }}%\n                    </div>\n                </div>\n                <div class="table-row">\n                    <div class="table-cell text-left">idle:</div>\n                    <div class="table-cell">{{ vm.idle }}%</div>\n                </div>\n            </div>\n        </div>\n        <div class="hidden-xs hidden-sm col-md-12 col-lg-8">\n            <div class="table">\n                <div class="table-row" ng-show="vm.nice != undefined">\n                    <div class="table-cell text-left">nice:</div>\n                    <div class="table-cell">\n                        {{ vm.nice }}%\n                    </div>\n                </div>\n                <div class="table-row" ng-show="vm.irq != undefined">\n                    <div class="table-cell text-left">irq:</div>\n                    <div class="table-cell">\n                        {{ vm.irq }}%\n                    </div>\n                </div>\n                <div class="table-row" ng-show="vm.iowait != undefined">\n                    <div class="table-cell text-left">iowait:</div>\n                    <div class="table-cell" ng-class="vm.getDecoration(\'iowait\')">\n                        {{ vm.iowait }}%\n                    </div>\n                </div>\n                <div class="table-row" ng-show="vm.steal != undefined">\n                    <div class="table-cell text-left">steal:</div>\n                    <div class="table-cell" ng-class="vm.getDecoration(\'steal\')">\n                        {{ vm.steal }}%\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class="hidden-xs hidden-sm hidden-md col-lg-8">\n            <div class="table">\n                <div class="table-row" ng-if="vm.ctx_switches">\n                    <div class="table-cell text-left">ctx_sw:</div>\n                    <div class="table-cell" ng-class="vm.getDecoration(\'ctx_switches\')">\n                        {{ vm.ctx_switches }}\n                    </div>\n                </div>\n                <div class="table-row" ng-if="vm.interrupts">\n                    <div class="table-cell text-left">inter:</div>\n                    <div class="table-cell">\n                        {{ vm.interrupts }}\n                    </div>\n                </div>\n                <div class="table-row" ng-if="vm.soft_interrupts">\n                    <div class="table-cell text-left">sw_int:</div>\n                    <div class="table-cell">\n                        {{ vm.soft_interrupts }}\n                    </div>\n                </div>\n                <div class="table-row" ng-if="!statsSystem.isLinux() && vm.syscalls">\n                    <div class="table-cell text-left">syscal:</div>\n                    <div class="table-cell">\n                        {{ vm.syscalls }}\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</section>\n');
 $templateCache.put('components/plugin-diskio/view.html','<div class="table-row" ng-if="vm.disks.length > 0">\n    <div class="table-cell text-left title">DISK I/O</div>\n    <div class="table-cell" ng-show="!vm.arguments.diskio_iops">R/s</div>\n    <div class="table-cell" ng-show="!vm.arguments.diskio_iops">W/s</div>\n\n    <div class="table-cell" ng-show="vm.arguments.diskio_iops">IOR/s</div>\n    <div class="table-cell" ng-show="vm.arguments.diskio_iops">IOW/s</div>\n</div>\n<div class="table-row" ng-repeat="disk in vm.disks track by name">\n    <div class="table-cell text-left">{{(disk.alias ? disk.alias : disk.name) | min_size}}</div>\n    <div class="table-cell" ng-show="!vm.arguments.diskio_iops">{{disk.bitrate.txps }}</div>\n    <div class="table-cell" ng-show="!vm.arguments.diskio_iops">{{disk.bitrate.rxps }}</div>\n\n    <div class="table-cell" ng-show="vm.arguments.diskio_iops">{{disk.count.txps }}</div>\n    <div class="table-cell" ng-show="vm.arguments.diskio_iops">{{disk.count.rxps }}</div>\n</div>\n');