WebUI: move mem/mem-more, network,percpu and quicklook to component

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

@@ -37,7 +37,7 @@ function GlancesController($interval, GlancesStats) {
     };
 
     vm.refreshData();
-    var refreshTime = 60; // arguments.time
+    var refreshTime = 5; // arguments.time
     $interval(function () {
         vm.refreshData();
     }, refreshTime * 1000); // in milliseconds

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

@@ -4,9 +4,9 @@
         <div class="loader">Loading...</div>
     </div>
 
-    <glances-help help="vm.help" ng-show="vm.arguments.help_tag"></glances-help>
+    <glances-help help="vm.help" ng-show="vm.vm.argumentshelp_tag"></glances-help>
 
-    <div ng-show="vm.dataLoaded && !vm.arguments.help_tag" class="container-fluid">
+    <div ng-show="vm.dataLoaded && !vm.vm.argumentshelp_tag" class="container-fluid">
         <div class="top-plugin">
             <div class="row">
                 <div class="col-sm-24">
@@ -31,37 +31,37 @@
         </div>
 
         <div class="row">
-            <div class="hidden-xs hidden-sm hidden-md col-lg-6" ng-if="!arguments.disable_quicklook">
+            <div class="hidden-xs hidden-sm hidden-md col-lg-6" ng-if="!vm.argumentsdisable_quicklook">
-                <glances-plugin-quicklook></glances-plugin-quicklook>
+                <glances-plugin-quicklook stats="vm.stats" arguments="vm.arguments"></glances-plugin-quicklook>
             </div>
-            <div class="col-sm-6 col-md-8 col-lg-6" ng-if="!arguments.disable_cpu && !arguments.percpu">
+            <div class="col-sm-6 col-md-8 col-lg-6" ng-if="!vm.argumentsdisable_cpu && !vm.argumentspercpu">
                 <glances-plugin-cpu stats="vm.stats"></glances-plugin-cpu>
             </div>
-            <div class="col-sm-12 col-md-8 col-lg-6" ng-if="!arguments.disable_cpu && arguments.percpu">
+            <div class="col-sm-12 col-md-8 col-lg-6" ng-if="!vm.argumentsdisable_cpu && vm.argumentspercpu">
-                <glances-plugin-per-cpu></glances-plugin-per-cpu>
+                <glances-plugin-percpu stats="vm.stats"></glances-plugin-percpu>
             </div>
             <div class="hidden-xs hidden-sm col-md-4 col-lg-3"
-                 ng-if="!arguments.disable_gpu && statsGpu.gpus.length > 0">
+                 ng-if="!vm.argumentsdisable_gpu && statsGpu.gpus.length > 0">
-                <glances-plugin-gpu></glances-plugin-gpu>
+                <glances-plugin-gpu stats="vm.stats"></glances-plugin-gpu>
             </div>
-            <div class="col-sm-6 col-md-4 col-lg-3" ng-if="!arguments.disable_mem">
+            <div class="col-sm-6 col-md-4 col-lg-3" ng-if="!vm.argumentsdisable_mem">
-                <glances-plugin-mem></glances-plugin-mem>
+                <glances-plugin-mem stats="vm.stats"></glances-plugin-mem>
             </div>
             <div class="hidden-xs hidden-sm col-md-4 col-lg-3"
-                 ng-if="!arguments.disable_mem && !(!arguments.disable_gpu && statsGpu.gpus.length > 0)">
+                 ng-if="!vm.arguments.disable_mem && !(!vm.arguments.disable_gpu && statsGpu.gpus.length > 0)">
-                <glances-plugin-mem-more></glances-plugin-mem-more>
+                <glances-plugin-mem-more stats="vm.stats"></glances-plugin-mem-more>
             </div>
-            <div class="col-sm-6 col-md-4 col-lg-3" ng-if="!arguments.disable_memswap">
+            <div class="col-sm-6 col-md-4 col-lg-3" ng-if="!vm.arguments.disable_memswap">
-                <glances-plugin-memswap></glances-plugin-memswap>
+                <glances-plugin-memswap stats="vm.stats"></glances-plugin-memswap>
             </div>
-            <div class="col-sm-6 col-md-4 col-lg-3" ng-if="!arguments.disable_load">
+            <div class="col-sm-6 col-md-4 col-lg-3" ng-if="!vm.arguments.disable_load">
                 <glances-plugin-load stats="vm.stats"></glances-plugin-load>
             </div>
         </div>
         <div class="row">
-            <div class="col-sm-6 sidebar" ng-show="!arguments.disable_left_sidebar">
+            <div class="col-sm-6 sidebar" ng-show="!vm.arguments.disable_left_sidebar">
                 <div class="table">
-                    <glances-plugin-network></glances-plugin-network ng-show="!arguments.disable_network">
+                    <glances-plugin-network stats="vm.stats" ng-show="!vm.arguments.disable_network"></glances-plugin-network>
                 </div>
             </div>
             <div class="col-sm-18">

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

@@ -4,7 +4,8 @@ glancesApp.component('glancesPluginIp', {
     controller: GlancesPluginIpController,
     controllerAs: 'vm',
     bindings: {
-        stats: '<'
+        stats: '<',
+        arguments: '<'
     },
     templateUrl: 'components/plugin-ip/view.html'
 });

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

@@ -3,24 +3,24 @@
 function GlancesPluginIpController() {
     var vm = this;
 
-    this.address  = null;
+    vm.address = null;
-    this.gateway = null;
+    vm.gateway = null;
-    this.mask = null;
+    vm.mask = null;
-    this.maskCidr = null;
+    vm.maskCidr = null;
-    this.publicAddress = null;
+    vm.publicAddress = null;
 
     vm.$onChanges = function (changes) {
-      var stats = changes.stats.currentValue;
+        var stats = changes.stats.currentValue;
-      if (stats === undefined || stats.stats === undefined) {
+        if (stats === undefined || stats.stats === undefined) {
-        return;
+            return;
-      }
+        }
 
-      var data = stats.stats['ip'];
+        var data = stats.stats['ip'];
 
-      vm.address = data.address;
+        vm.address = data.address;
-      vm.gateway = data.gateway;
+        vm.gateway = data.gateway;
-      vm.mask = data.mask;
+        vm.mask = data.mask;
-      vm.maskCidr = data.mask_cidr;
+        vm.maskCidr = data.mask_cidr;
-      vm.publicAddress = data.public_address
+        vm.publicAddress = data.public_address
     };
 }

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

@@ -0,0 +1,10 @@
+'use strict';
+
+glancesApp.component('glancesPluginMemMore', {
+    controller: GlancesPluginMemMoreController,
+    controllerAs: 'vm',
+    bindings: {
+        stats: '<'
+    },
+    templateUrl: 'components/plugin-mem-more/view.html'
+});

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

@@ -0,0 +1,24 @@
+'use strict';
+
+function GlancesPluginMemMoreController() {
+    var vm = this;
+
+    vm.active = null;
+    vm.inactive = null;
+    vm.buffers = null;
+    vm.cached = null;
+
+    vm.$onChanges = function (changes) {
+        var stats = changes.stats.currentValue;
+        if (stats === undefined || stats.stats === undefined) {
+            return;
+        }
+
+        var data = stats.stats['mem'];
+
+        vm.active = data['active'];
+        vm.inactive = data['inactive'];
+        vm.buffers = data['buffers'];
+        vm.cached = data['cached'];
+    };
+}

glances/outputs/static/js/components/plugin-mem-more/view.html

@@ -0,0 +1,20 @@
+<section id="mem-more" class="plugin">
+    <div class="table">
+        <div class="table-row">
+            <div class="table-cell text-left">active:</div>
+            <div class="table-cell">{{ vm.active | bytes }}</div>
+        </div>
+        <div class="table-row">
+            <div class="table-cell text-left">inactive:</div>
+            <div class="table-cell">{{ vm.inactive | bytes }}</div>
+        </div>
+        <div class="table-row" ng-show="vm.buffers != undefined">
+            <div class="table-cell text-left">buffers:</div>
+            <div class="table-cell">{{ vm.buffers | bytes }}</div>
+        </div>
+        <div class="table-row" ng-show="vm.cached != undefined">
+            <div class="table-cell text-left">cached:</div>
+            <div class="table-cell">{{ vm.cached | bytes }}</div>
+        </div>
+    </div>
+</section>

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

@@ -0,0 +1,10 @@
+'use strict';
+
+glancesApp.component('glancesPluginMem', {
+    controller: GlancesPluginMemController,
+    controllerAs: 'vm',
+    bindings: {
+        stats: '<'
+    },
+    templateUrl: 'components/plugin-mem/view.html'
+});

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

@@ -0,0 +1,34 @@
+'use strict';
+
+function GlancesPluginMemController() {
+    var vm = this;
+    var _view = {};
+
+    vm.percent = null;
+    vm.total = null;
+    vm.used = null;
+    vm.free = null;
+
+    vm.$onChanges = function (changes) {
+        var stats = changes.stats.currentValue;
+        if (stats === undefined || stats.stats === undefined) {
+            return;
+        }
+
+        var data = stats.stats['mem'];
+        _view = stats.view['mem'];
+
+        vm.percent = data['percent'];
+        vm.total = data['total'];
+        vm.used = data['used'];
+        vm.free = data['free'];
+    };
+
+    this.getDecoration = function (value) {
+        if (_view[value] === undefined) {
+            return;
+        }
+
+        return _view[value].decoration.toLowerCase();
+    };
+}

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

@@ -0,0 +1,22 @@
+<section id="mem" class="plugin">
+    <div class="table">
+        <div class="table-row">
+            <div class="table-cell text-left title">MEM</div>
+            <div class="table-cell">{{ vm.percent }}%</div>
+        </div>
+        <div class="table-row">
+            <div class="table-cell text-left">total:</div>
+            <div class="table-cell">{{ vm.total | bytes }}</div>
+        </div>
+        <div class="table-row">
+            <div class="table-cell text-left">used:</div>
+            <div class="table-cell" ng-class="vm.getDecoration('used')">
+                {{ vm.used | bytes:2 }}
+            </div>
+        </div>
+        <div class="table-row">
+            <div class="table-cell text-left">free:</div>
+            <div class="table-cell">{{ vm.free | bytes }}</div>
+        </div>
+    </div>
+</section>

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

@@ -0,0 +1,11 @@
+'use strict';
+
+glancesApp.component('glancesPluginNetwork', {
+    controller: GlancesPluginNetworkController,
+    controllerAs: 'vm',
+    bindings: {
+        stats: '<',
+        arguments: '<'
+    },
+    templateUrl: 'components/plugin-network/view.html'
+});

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

@@ -0,0 +1,36 @@
+'use strict';
+
+function GlancesPluginNetworkController($filter) {
+    var vm = this;
+
+    vm.networks = [];
+
+    vm.$onChanges = function (changes) {
+        var stats = changes.stats.currentValue;
+        if (stats === undefined || stats.stats === undefined) {
+            return;
+        }
+
+        var data = stats.stats['network'];
+
+        vm.networks = [];
+        for (var i = 0; i < data.length; i++) {
+            var networkData = data[i];
+
+            var network = {
+                'interfaceName': networkData['interface_name'],
+                'rx': networkData['rx'],
+                'tx': networkData['tx'],
+                'cx': networkData['cx'],
+                'time_since_update': networkData['time_since_update'],
+                'cumulativeRx': networkData['cumulative_rx'],
+                'cumulativeTx': networkData['cumulative_tx'],
+                'cumulativeCx': networkData['cumulative_cx']
+            };
+
+            vm.networks.push(network);
+        }
+
+        vm.networks = $filter('orderBy')(vm.networks, 'interfaceName');
+    };
+}

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

@@ -0,0 +1,30 @@
+<section id="network" class="plugin table-row-group">
+  <div class="table-row">
+    <div class="table-cell text-left title">NETWORK</div>
+    <div class="table-cell" ng-show="!vm.arguments.network_cumul && !vm.arguments.network_sum">Rx/s</div>
+    <div class="table-cell" ng-show="!vm.arguments.network_cumul && !vm.arguments.network_sum">Tx/s</div>
+
+    <div class="table-cell" ng-show="!vm.arguments.network_cumul && vm.arguments.network_sum"></div>
+    <div class="table-cell" ng-show="!vm.arguments.network_cumul && vm.arguments.network_sum">Rx+Tx/s</div>
+
+    <div class="table-cell" ng-show="vm.arguments.network_cumul && !vm.arguments.network_sum">Rx</div>
+    <div class="table-cell" ng-show="vm.arguments.network_cumul && !vm.arguments.network_sum">Tx</div>
+
+    <div class="table-cell" ng-show="vm.arguments.network_cumul && vm.arguments.network_sum"></div>
+    <div class="table-cell" ng-show="vm.arguments.network_cumul && vm.arguments.network_sum">Rx+Tx</div>
+  </div>
+  <div class="table-row" ng-repeat="network in vm.networks">
+    <div class="table-cell text-left">{{ network.interfaceName | min_size }}</div>
+    <div class="table-cell" ng-show="!vm.arguments.network_cumul && !vm.arguments.network_sum">{{ vm.arguments.byte ? (network.rx / network.time_since_update | bytes) : (network.rx / network.time_since_update | bits) }}</div>
+    <div class="table-cell" ng-show="!vm.arguments.network_cumul && !vm.arguments.network_sum">{{ vm.arguments.byte ? (network.tx / network.time_since_update | bytes) : (network.tx / network.time_since_update | bits) }}</div>
+
+    <div class="table-cell" ng-show="!vm.arguments.network_cumul && vm.arguments.network_sum"></div>
+    <div class="table-cell" ng-show="!vm.arguments.network_cumul && vm.arguments.network_sum">{{ vm.arguments.byte ? (network.cx / network.time_since_update | bytes) : (network.cx / network.time_since_update | bits) }}</div>
+
+    <div class="table-cell" ng-show="vm.arguments.network_cumul && !vm.arguments.network_sum">{{ vm.arguments.byte ? (network.cumulativeRx | bytes) : (network.cumulativeRx | bits) }}</div>
+    <div class="table-cell" ng-show="vm.arguments.network_cumul && !vm.arguments.network_sum">{{ vm.arguments.byte ? (network.cumulativeTx | bytes) : (network.cumulativeTx | bits) }}</div>
+
+    <div class="table-cell" ng-show="vm.arguments.network_cumul && vm.arguments.network_sum"></div>
+    <div class="table-cell" ng-show="vm.arguments.network_cumul && vm.arguments.network_sum">{{ vm.arguments.byte ? (network.cumulativeCx | bytes) : (network.cumulativeCx | bits) }}</div>
+  </div>
+</section>

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

@@ -0,0 +1,10 @@
+'use strict';
+
+glancesApp.component('glancesPluginPercpu', {
+    controller: GlancesPluginPercpuController,
+    controllerAs: 'vm',
+    bindings: {
+        stats: '<'
+    },
+    templateUrl: 'components/plugin-percpu/view.html'
+});

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

@@ -0,0 +1,38 @@
+'use strict';
+
+function GlancesPluginPercpuController(GlancesPluginHelper) {
+    var vm = this;
+    vm.cpus = [];
+
+    vm.$onChanges = function (changes) {
+        var stats = changes.stats.currentValue;
+        if (stats === undefined || stats.stats === undefined) {
+            return;
+        }
+
+        var data = stats.stats['percpu'];
+
+        vm.cpus = [];
+
+        for (var i = 0; i < data.length; i++) {
+            var cpuData = data[i];
+
+            vm.cpus.push({
+                'total': cpuData.total,
+                'user': cpuData.user,
+                'system': cpuData.system,
+                'idle': cpuData.idle,
+                'iowait': cpuData.iowait,
+                'steal': cpuData.steal
+            });
+        }
+    };
+
+    vm.getUserAlert = function(cpu) {
+        return GlancesPluginHelper.getAlert('percpu', 'percpu_user_', cpu.user)
+    };
+
+    vm.getSystemAlert = function(cpu) {
+        return GlancesPluginHelper.getAlert('percpu', 'percpu_system_', cpu.system);
+    };
+}

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

@@ -0,0 +1,36 @@
+<section id="percpu" class="plugin">
+    <div class="table">
+        <div class="table-row">
+            <div class="table-cell text-left title">PER CPU</div>
+            <div class="table-cell" ng-repeat="percpu in vm.cpus">{{ percpu.total }}%</div>
+        </div>
+        <div class="table-row">
+            <div class="table-cell text-left">user:</div>
+            <div class="table-cell" ng-repeat="percpu in vm.cpus" ng-class="vm.getUserAlert(percpu)">
+                {{ percpu.user }}%
+            </div>
+        </div>
+        <div class="table-row">
+            <div class="table-cell text-left">system:</div>
+            <div class="table-cell" ng-repeat="percpu in vm.cpus" ng-class="vm.getSystemAlert(percpu)">
+                {{ percpu.system }}%
+            </div>
+        </div>
+        <div class="table-row">
+            <div class="table-cell text-left">idle:</div>
+            <div class="table-cell" ng-repeat="percpu in vm.cpus">{{ percpu.idle }}%</div>
+        </div>
+        <div class="table-row" ng-show="vm.cpus[0].iowait">
+            <div class="table-cell text-left">iowait:</div>
+            <div class="table-cell" ng-repeat="percpu in vm.cpus" ng-class="vm.getSystemAlert(percpu)">
+                {{ percpu.iowait }}%
+            </div>
+        </div>
+        <div class="table-row" ng-show="vm.cpus[0].steal">
+            <div class="table-cell text-left">steal:</div>
+            <div class="table-cell" ng-repeat="percpu in vm.cpus" ng-class="vm.getSystemAlert(percpu)">
+                {{ percpu.steal }}%
+            </div>
+        </div>
+    </div>
+</section>

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

@@ -0,0 +1,11 @@
+'use strict';
+
+glancesApp.component('glancesPluginQuicklook', {
+    controller: GlancesPluginQuicklookController,
+    controllerAs: 'vm',
+    bindings: {
+        stats: '<',
+        arguments: '<'
+    },
+    templateUrl: 'components/plugin-quicklook/view.html'
+});

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

@@ -0,0 +1,47 @@
+'use strict';
+
+function GlancesPluginQuicklookController() {
+    var vm = this;
+    var _view = {};
+
+    vm.mem = null;
+    vm.cpu = null;
+    vm.cpu_name = null;
+    vm.cpu_hz_current = null;
+    vm.cpu_hz = null;
+    vm.swap = null;
+    vm.percpus = [];
+
+    vm.$onChanges = function (changes) {
+        var stats = changes.stats.currentValue;
+        if (stats === undefined || stats.stats === undefined) {
+            return;
+        }
+
+        var data = stats.stats['quicklook'];
+        _view = stats.view['quicklook'];
+
+        vm.mem = data.mem;
+        vm.cpu = data.cpu;
+        vm.cpu_name = data.cpu_name;
+        vm.cpu_hz_current = data.cpu_hz_current;
+        vm.cpu_hz = data.cpu_hz;
+        vm.swap = data.swap;
+        vm.percpus = [];
+
+        angular.forEach(data.percpu, function(cpu) {
+            vm.percpus.push({
+                'number': cpu.cpu_number,
+                'total': cpu.total
+            });
+        }, this);
+    };
+
+    this.getDecoration = function (value) {
+        if (_view[value] === undefined) {
+            return;
+        }
+
+        return _view[value].decoration.toLowerCase();
+    };
+}

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

@@ -0,0 +1,59 @@
+<section id="quicklook" class="plugin">
+    <div class="cpu-name">
+        {{ vm.cpu_name }}
+    </div>
+    <div class="table">
+        <div class="table-row" ng-show="!vm.arguments.percpu">
+            <div class="table-cell text-left">CPU</div>
+            <div class="table-cell">
+                <div class="progress">
+                    <div class="progress-bar progress-bar-{{ vm.getDecoration('cpu') }}" role="progressbar" aria-valuenow="{{ vm.cpu }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ vm.cpu }}%;">
+                        &nbsp;
+                    </div>
+                </div>
+            </div>
+            <div class="table-cell">
+                {{ vm.cpu }}%
+            </div>
+        </div>
+        <div class="table-row" ng-show="vm.arguments.percpu" ng-repeat="percpu in vm.percpus">
+            <div class="table-cell text-left">CPU{{ percpu.number }}</div>
+            <div class="table-cell">
+                <div class="progress">
+                    <div class="progress-bar progress-bar-{{ vm.getDecoration('cpu') }}" role="progressbar" aria-valuenow="{{ percpu.total }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ percpu.total }}%;">
+                        &nbsp;
+                    </div>
+                </div>
+            </div>
+            <div class="table-cell">
+                {{ percpu.total }}%
+            </div>
+        </div>
+        <div class="table-row">
+            <div class="table-cell text-left">MEM</div>
+            <div class="table-cell">
+                <div class="progress">
+                    <div class="progress-bar progress-bar-{{ vm.getDecoration('mem') }}" role="progressbar" aria-valuenow="{{ vm.mem }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ vm.mem }}%;">
+                        &nbsp;
+                    </div>
+                </div>
+            </div>
+            <div class="table-cell">
+                {{ vm.mem }}%
+            </div>
+        </div>
+        <div class="table-row">
+            <div class="table-cell text-left">SWAP</div>
+            <div class="table-cell">
+                <div class="progress">
+                    <div class="progress-bar progress-bar-{{ vm.getDecoration('swap') }}" role="progressbar" aria-valuenow="{{ vm.swap }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ vm.swap }}%;">
+                        &nbsp;
+                    </div>
+                </div>
+            </div>
+            <div class="table-cell">
+                {{ vm.swap }}%
+            </div>
+        </div>
+    </div>
+</section>

glances/outputs/static/js/filters.js

@@ -77,7 +77,7 @@ glancesApp.filter('bits', function($filter) {
     }
 });
 
-glancesApp.filter('leftPad', function($filter) {
+glancesApp.filter('leftPad', function() {
     return function (value, length, chars) {
       length = length || 0;
       chars = chars || ' ';

glances/outputs/static/js/services.js

@@ -0,0 +1,2 @@
+
+

glances/outputs/static/js/services/plugin_helper.js

@@ -0,0 +1,42 @@
+glancesApp.service('GlancesPluginHelper', function () {
+
+    var plugin = {
+        'limits': {},
+        'limitSuffix': ['critical', 'careful', 'warning']
+    };
+
+    plugin.setLimits = function(limits){
+        this.limits = limits;
+    };
+
+    plugin.getAlert = function (pluginName, limitNamePrefix, current, maximum, log) {
+        current = current || 0;
+        maximum = maximum || 100;
+        log = log || false;
+
+        var log_str = log ? '_log' : '';
+        var value = (current * 100) / maximum;
+
+        if (this.limits[pluginName] != undefined) {
+            for (var i = 0; i < this.limitSuffix.length; i++) {
+                var limitName = limitNamePrefix + this.limitSuffix[i];
+                var limit = this.limits[pluginName][limitName];
+
+                if (value >= limit) {
+                    var pos = limitName.lastIndexOf("_");
+                    var className = limitName.substring(pos + 1);
+
+                    return className + log_str;
+                }
+            }
+        }
+
+        return "ok" + log_str;
+    };
+
+    plugin.getAlertLog = function (pluginName, limitNamePrefix, current, maximum) {
+        return this.getAlert(pluginName, limitNamePrefix, current, maximum, true);
+    };
+
+    return plugin;
+});

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

@@ -1,4 +1,4 @@
-glancesApp.service('GlancesStats', function($http, $q) {
+glancesApp.service('GlancesStats', function($http, $q, GlancesPluginHelper) {
     var _stats = [], _views = [], _limits = [], _config = {};
 
     this.getData = function() {
@@ -57,4 +57,9 @@ glancesApp.service('GlancesStats', function($http, $q) {
         });
     };
 
+    // load limits to init GlancePlugin helper
+    this.getAllLimits().then(function(limits) {
+        GlancesPluginHelper.setLimits(limits);
+    });
+
 });

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

@@ -75,21 +75,6 @@ glancesApp.directive("sortableTh", function() {
         }
     };
 });
-glancesApp.service('favicoService', function() {
-
-  var favico = new Favico({
-    animation : 'none'
-  });
-
-  this.badge = function(nb) {
-    favico.badge(nb);
-  };
-
-  this.reset = function() {
-    favico.reset();
-  };
-});
-
 glancesApp.filter('min_size', function() {
     return function(input, max) {
         var max = max || 8;
@@ -169,13 +154,13 @@ glancesApp.filter('bits', ["$filter", function($filter) {
     }
 }]);
 
-glancesApp.filter('leftPad', ["$filter", function($filter) {
+glancesApp.filter('leftPad', function() {
     return function (value, length, chars) {
       length = length || 0;
       chars = chars || ' ';
       return _.padStart(value, length, chars);
     }
-}]);
+});
 
 glancesApp.filter('timemillis', function() {
     return function (array) {
@@ -201,7 +186,104 @@ glancesApp.filter('timedelta', ["$filter", function($filter) {
     }
 }]);
 
-glancesApp.service('GlancesStats', ["$http", "$q", function($http, $q) {
+
+
+
+var keycodes = {
+	'a' : '65',
+	'c' : '67',
+	'm' : '77',
+	'p' : '80',
+	'i' : '73',
+	't' : '84',
+	'u' : '85',
+	'd' : '68',
+	'f' : '70',
+	'n' : '78',
+	's' : '83',
+	'z' : '90',
+	'e' : '69',
+	'SLASH': '191',
+	'D' : '68',
+	'b' : '66',
+	'l' : '76',
+	'w' : '87',
+	'x' : '88',
+	'ONE': '49',
+	'TWO': '50',
+	'THREE': '51',
+	'FOUR': '52',
+	'FIVE': '53',
+	'SIX': '54',
+	'h' : '72',
+	'T' : '84',
+	'F' : '70',
+	'g' : '71',
+	'r' : '82',
+	'q' : '81',
+	'A' : '65',
+	'Q' : '81'
+}
+
+glancesApp.service('favicoService', function() {
+
+  var favico = new Favico({
+    animation : 'none'
+  });
+
+  this.badge = function(nb) {
+    favico.badge(nb);
+  };
+
+  this.reset = function() {
+    favico.reset();
+  };
+});
+
+glancesApp.service('GlancesPluginHelper', function () {
+
+    var plugin = {
+        'limits': {},
+        'limitSuffix': ['critical', 'careful', 'warning']
+    };
+
+    plugin.setLimits = function(limits){
+        this.limits = limits;
+    };
+
+    plugin.getAlert = function (pluginName, limitNamePrefix, current, maximum, log) {
+        current = current || 0;
+        maximum = maximum || 100;
+        log = log || false;
+
+        var log_str = log ? '_log' : '';
+        var value = (current * 100) / maximum;
+
+        if (this.limits[pluginName] != undefined) {
+            for (var i = 0; i < this.limitSuffix.length; i++) {
+                var limitName = limitNamePrefix + this.limitSuffix[i];
+                var limit = this.limits[pluginName][limitName];
+
+                if (value >= limit) {
+                    var pos = limitName.lastIndexOf("_");
+                    var className = limitName.substring(pos + 1);
+
+                    return className + log_str;
+                }
+            }
+        }
+
+        return "ok" + log_str;
+    };
+
+    plugin.getAlertLog = function (pluginName, limitNamePrefix, current, maximum) {
+        return this.getAlert(pluginName, limitNamePrefix, current, maximum, true);
+    };
+
+    return plugin;
+});
+
+glancesApp.service('GlancesStats', ["$http", "$q", "GlancesPluginHelper", function($http, $q, GlancesPluginHelper) {
     var _stats = [], _views = [], _limits = [], _config = {};
 
     this.getData = function() {
@@ -260,44 +342,12 @@ glancesApp.service('GlancesStats', ["$http", "$q", function($http, $q) {
         });
     };
 
+    // load limits to init GlancePlugin helper
+    this.getAllLimits().then(function(limits) {
+        GlancesPluginHelper.setLimits(limits);
+    });
+
 }]);
-
-var keycodes = {
-	'a' : '65',
-	'c' : '67',
-	'm' : '77',
-	'p' : '80',
-	'i' : '73',
-	't' : '84',
-	'u' : '85',
-	'd' : '68',
-	'f' : '70',
-	'n' : '78',
-	's' : '83',
-	'z' : '90',
-	'e' : '69',
-	'SLASH': '191',
-	'D' : '68',
-	'b' : '66',
-	'l' : '76',
-	'w' : '87',
-	'x' : '88',
-	'ONE': '49',
-	'TWO': '50',
-	'THREE': '51',
-	'FOUR': '52',
-	'FIVE': '53',
-	'SIX': '54',
-	'h' : '72',
-	'T' : '84',
-	'F' : '70',
-	'g' : '71',
-	'r' : '82',
-	'q' : '81',
-	'A' : '65',
-	'Q' : '81'
-}
-
 'use strict';
 
 glancesApp.component('glances', {
@@ -350,7 +400,7 @@ function GlancesController($interval, GlancesStats) {
     };
 
     vm.refreshData();
-    var refreshTime = 60; // arguments.time
+    var refreshTime = 5; // arguments.time
     $interval(function () {
         vm.refreshData();
     }, refreshTime * 1000); // in milliseconds
@@ -502,6 +552,23 @@ function GlancesController($interval, GlancesStats) {
 
 'use strict';
 
+glancesApp.component('glancesHelp', {
+    controller: GlancesHelpController,
+    controllerAs: 'vm',
+    bindings: {
+      help: '<',
+    },
+    templateUrl: 'components/help/view.html'
+});
+
+'use strict';
+
+function GlancesHelpController() {
+    var vm = this;
+}
+
+'use strict';
+
 glancesApp.component('glancesPluginCloud', {
     controller: GlancesPluginCloudController,
     controllerAs: 'vm',
@@ -536,23 +603,6 @@ function GlancesPluginCloudController() {
 
 'use strict';
 
-glancesApp.component('glancesHelp', {
-    controller: GlancesHelpController,
-    controllerAs: 'vm',
-    bindings: {
-      help: '<',
-    },
-    templateUrl: 'components/help/view.html'
-});
-
-'use strict';
-
-function GlancesHelpController() {
-    var vm = this;
-}
-
-'use strict';
-
 glancesApp.component('glancesPluginCpu', {
     controller: GlancesPluginCpuController,
     controllerAs: 'vm',
@@ -627,6 +677,45 @@ function GlancesPluginCpuController() {
 
 'use strict';
 
+glancesApp.component('glancesPluginIp', {
+    controller: GlancesPluginIpController,
+    controllerAs: 'vm',
+    bindings: {
+        stats: '<',
+        arguments: '<'
+    },
+    templateUrl: 'components/plugin-ip/view.html'
+});
+
+'use strict';
+
+function GlancesPluginIpController() {
+    var vm = this;
+
+    vm.address = null;
+    vm.gateway = null;
+    vm.mask = null;
+    vm.maskCidr = null;
+    vm.publicAddress = null;
+
+    vm.$onChanges = function (changes) {
+        var stats = changes.stats.currentValue;
+        if (stats === undefined || stats.stats === undefined) {
+            return;
+        }
+
+        var data = stats.stats['ip'];
+
+        vm.address = data.address;
+        vm.gateway = data.gateway;
+        vm.mask = data.mask;
+        vm.maskCidr = data.mask_cidr;
+        vm.publicAddress = data.public_address
+    };
+}
+
+'use strict';
+
 glancesApp.component('glancesPluginLoad', {
     controller: GlancesPluginLoadController,
     controllerAs: 'vm',
@@ -673,6 +762,247 @@ function GlancesPluginLoadController() {
 
 'use strict';
 
+glancesApp.component('glancesPluginMem', {
+    controller: GlancesPluginMemController,
+    controllerAs: 'vm',
+    bindings: {
+        stats: '<'
+    },
+    templateUrl: 'components/plugin-mem/view.html'
+});
+
+'use strict';
+
+function GlancesPluginMemController() {
+    var vm = this;
+    var _view = {};
+
+    vm.percent = null;
+    vm.total = null;
+    vm.used = null;
+    vm.free = null;
+
+    vm.$onChanges = function (changes) {
+        var stats = changes.stats.currentValue;
+        if (stats === undefined || stats.stats === undefined) {
+            return;
+        }
+
+        var data = stats.stats['mem'];
+        _view = stats.view['mem'];
+
+        vm.percent = data['percent'];
+        vm.total = data['total'];
+        vm.used = data['used'];
+        vm.free = data['free'];
+    };
+
+    this.getDecoration = function (value) {
+        if (_view[value] === undefined) {
+            return;
+        }
+
+        return _view[value].decoration.toLowerCase();
+    };
+}
+
+'use strict';
+
+glancesApp.component('glancesPluginMemMore', {
+    controller: GlancesPluginMemMoreController,
+    controllerAs: 'vm',
+    bindings: {
+        stats: '<'
+    },
+    templateUrl: 'components/plugin-mem-more/view.html'
+});
+
+'use strict';
+
+function GlancesPluginMemMoreController() {
+    var vm = this;
+
+    vm.active = null;
+    vm.inactive = null;
+    vm.buffers = null;
+    vm.cached = null;
+
+    vm.$onChanges = function (changes) {
+        var stats = changes.stats.currentValue;
+        if (stats === undefined || stats.stats === undefined) {
+            return;
+        }
+
+        var data = stats.stats['mem'];
+
+        vm.active = data['active'];
+        vm.inactive = data['inactive'];
+        vm.buffers = data['buffers'];
+        vm.cached = data['cached'];
+    };
+}
+
+'use strict';
+
+glancesApp.component('glancesPluginNetwork', {
+    controller: GlancesPluginNetworkController,
+    controllerAs: 'vm',
+    bindings: {
+        stats: '<',
+        arguments: '<'
+    },
+    templateUrl: 'components/plugin-network/view.html'
+});
+
+'use strict';
+
+function GlancesPluginNetworkController($filter) {
+    var vm = this;
+
+    vm.networks = [];
+
+    vm.$onChanges = function (changes) {
+        var stats = changes.stats.currentValue;
+        if (stats === undefined || stats.stats === undefined) {
+            return;
+        }
+
+        var data = stats.stats['network'];
+
+        vm.networks = [];
+        for (var i = 0; i < data.length; i++) {
+            var networkData = data[i];
+
+            var network = {
+                'interfaceName': networkData['interface_name'],
+                'rx': networkData['rx'],
+                'tx': networkData['tx'],
+                'cx': networkData['cx'],
+                'time_since_update': networkData['time_since_update'],
+                'cumulativeRx': networkData['cumulative_rx'],
+                'cumulativeTx': networkData['cumulative_tx'],
+                'cumulativeCx': networkData['cumulative_cx']
+            };
+
+            vm.networks.push(network);
+        }
+
+        vm.networks = $filter('orderBy')(vm.networks, 'interfaceName');
+    };
+}
+
+'use strict';
+
+glancesApp.component('glancesPluginPercpu', {
+    controller: GlancesPluginPercpuController,
+    controllerAs: 'vm',
+    bindings: {
+        stats: '<'
+    },
+    templateUrl: 'components/plugin-percpu/view.html'
+});
+
+'use strict';
+
+function GlancesPluginPercpuController(GlancesPluginHelper) {
+    var vm = this;
+    vm.cpus = [];
+
+    vm.$onChanges = function (changes) {
+        var stats = changes.stats.currentValue;
+        if (stats === undefined || stats.stats === undefined) {
+            return;
+        }
+
+        var data = stats.stats['percpu'];
+
+        vm.cpus = [];
+
+        for (var i = 0; i < data.length; i++) {
+            var cpuData = data[i];
+
+            vm.cpus.push({
+                'total': cpuData.total,
+                'user': cpuData.user,
+                'system': cpuData.system,
+                'idle': cpuData.idle,
+                'iowait': cpuData.iowait,
+                'steal': cpuData.steal
+            });
+        }
+    };
+
+    vm.getUserAlert = function(cpu) {
+        return GlancesPluginHelper.getAlert('percpu', 'percpu_user_', cpu.user)
+    };
+
+    vm.getSystemAlert = function(cpu) {
+        return GlancesPluginHelper.getAlert('percpu', 'percpu_system_', cpu.system);
+    };
+}
+
+'use strict';
+
+glancesApp.component('glancesPluginQuicklook', {
+    controller: GlancesPluginQuicklookController,
+    controllerAs: 'vm',
+    bindings: {
+        stats: '<',
+        arguments: '<'
+    },
+    templateUrl: 'components/plugin-quicklook/view.html'
+});
+
+'use strict';
+
+function GlancesPluginQuicklookController() {
+    var vm = this;
+    var _view = {};
+
+    vm.mem = null;
+    vm.cpu = null;
+    vm.cpu_name = null;
+    vm.cpu_hz_current = null;
+    vm.cpu_hz = null;
+    vm.swap = null;
+    vm.percpus = [];
+
+    vm.$onChanges = function (changes) {
+        var stats = changes.stats.currentValue;
+        if (stats === undefined || stats.stats === undefined) {
+            return;
+        }
+
+        var data = stats.stats['quicklook'];
+        _view = stats.view['quicklook'];
+
+        vm.mem = data.mem;
+        vm.cpu = data.cpu;
+        vm.cpu_name = data.cpu_name;
+        vm.cpu_hz_current = data.cpu_hz_current;
+        vm.cpu_hz = data.cpu_hz;
+        vm.swap = data.swap;
+        vm.percpus = [];
+
+        angular.forEach(data.percpu, function(cpu) {
+            vm.percpus.push({
+                'number': cpu.cpu_number,
+                'total': cpu.total
+            });
+        }, this);
+    };
+
+    this.getDecoration = function (value) {
+        if (_view[value] === undefined) {
+            return;
+        }
+
+        return _view[value].decoration.toLowerCase();
+    };
+}
+
+'use strict';
+
 glancesApp.component('glancesPluginSystem', {
     controller: GlancesPluginSystemController,
     controllerAs: 'vm',
@@ -714,44 +1044,6 @@ function GlancesPluginSystemController() {
 
 'use strict';
 
-glancesApp.component('glancesPluginIp', {
-    controller: GlancesPluginIpController,
-    controllerAs: 'vm',
-    bindings: {
-        stats: '<'
-    },
-    templateUrl: 'components/plugin-ip/view.html'
-});
-
-'use strict';
-
-function GlancesPluginIpController() {
-    var vm = this;
-
-    this.address  = null;
-    this.gateway = null;
-    this.mask = null;
-    this.maskCidr = null;
-    this.publicAddress = null;
-
-    vm.$onChanges = function (changes) {
-      var stats = changes.stats.currentValue;
-      if (stats === undefined || stats.stats === undefined) {
-        return;
-      }
-
-      var data = stats.stats['ip'];
-
-      vm.address = data.address;
-      vm.gateway = data.gateway;
-      vm.mask = data.mask;
-      vm.maskCidr = data.mask_cidr;
-      vm.publicAddress = data.public_address
-    };
-}
-
-'use strict';
-
 glancesApp.component('glancesPluginUptime', {
     controller: GlancesPluginUptimeController,
     controllerAs: 'vm',

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

@@ -1,8 +1,13 @@
-angular.module('glancesApp').run(['$templateCache', function($templateCache) {$templateCache.put('components/glances/view.html','<div ng-keydown="vm.onKeyDown($event)" tabindex="0">\n    <div ng-show="!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 help="vm.help" ng-show="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 stats="vm.stats"></glances-plugin-system>\n                    </div>\n                    <div class="pull-left">\n                        <glances-plugin-ip stats="vm.stats" arguments="vm.arguments"></glances-plugin-ip>\n                    </div>\n                    <div class="pull-right">\n                        <glances-plugin-uptime stats="vm.stats"></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 stats="vm.stats"></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="!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="!arguments.disable_cpu && !arguments.percpu">\n                <glances-plugin-cpu stats="vm.stats"></glances-plugin-cpu>\n            </div>\n            <div class="col-sm-12 col-md-8 col-lg-6" ng-if="!arguments.disable_cpu && arguments.percpu">\n                <glances-plugin-per-cpu></glances-plugin-per-cpu>\n            </div>\n            <div class="hidden-xs hidden-sm col-md-4 col-lg-3"\n                 ng-if="!arguments.disable_gpu && statsGpu.gpus.length > 0">\n                <glances-plugin-gpu></glances-plugin-gpu>\n            </div>\n            <div class="col-sm-6 col-md-4 col-lg-3" ng-if="!arguments.disable_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="!arguments.disable_mem && !(!arguments.disable_gpu && statsGpu.gpus.length > 0)">\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="!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="!arguments.disable_load">\n                <glances-plugin-load stats="vm.stats"></glances-plugin-load>\n            </div>\n        </div>\n        <div class="row">\n            <div class="col-sm-6 sidebar" ng-show="!arguments.disable_left_sidebar">\n                <div class="table">\n                    <glances-plugin-network></glances-plugin-network ng-show="!arguments.disable_network">\n                </div>\n            </div>\n            <div class="col-sm-18">\n\n            </div>\n        </div>\n    </div>\n</div>\n');
+angular.module('glancesApp').run(['$templateCache', function($templateCache) {$templateCache.put('components/glances/view.html','<div ng-keydown="vm.onKeyDown($event)" tabindex="0">\n    <div ng-show="!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 help="vm.help" ng-show="vm.vm.argumentshelp_tag"></glances-help>\n\n    <div ng-show="vm.dataLoaded && !vm.vm.argumentshelp_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 stats="vm.stats"></glances-plugin-system>\n                    </div>\n                    <div class="pull-left">\n                        <glances-plugin-ip stats="vm.stats" arguments="vm.arguments"></glances-plugin-ip>\n                    </div>\n                    <div class="pull-right">\n                        <glances-plugin-uptime stats="vm.stats"></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 stats="vm.stats"></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.argumentsdisable_quicklook">\n                <glances-plugin-quicklook stats="vm.stats" arguments="vm.arguments"></glances-plugin-quicklook>\n            </div>\n            <div class="col-sm-6 col-md-8 col-lg-6" ng-if="!vm.argumentsdisable_cpu && !vm.argumentspercpu">\n                <glances-plugin-cpu stats="vm.stats"></glances-plugin-cpu>\n            </div>\n            <div class="col-sm-12 col-md-8 col-lg-6" ng-if="!vm.argumentsdisable_cpu && vm.argumentspercpu">\n                <glances-plugin-percpu stats="vm.stats"></glances-plugin-percpu>\n            </div>\n            <div class="hidden-xs hidden-sm col-md-4 col-lg-3"\n                 ng-if="!vm.argumentsdisable_gpu && statsGpu.gpus.length > 0">\n                <glances-plugin-gpu stats="vm.stats"></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 stats="vm.stats"></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 && statsGpu.gpus.length > 0)">\n                <glances-plugin-mem-more stats="vm.stats"></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 stats="vm.stats"></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 stats="vm.stats"></glances-plugin-load>\n            </div>\n        </div>\n        <div class="row">\n            <div class="col-sm-6 sidebar" ng-show="!vm.arguments.disable_left_sidebar">\n                <div class="table">\n                    <glances-plugin-network stats="vm.stats" ng-show="!vm.arguments.disable_network"></glances-plugin-network>\n                </div>\n            </div>\n            <div class="col-sm-18">\n\n            </div>\n        </div>\n    </div>\n</div>\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/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-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">\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-load/view.html','<section id="load" class="plugin" ng-if="vm.cpucore != undefined">\n  <div class="table">\n      <div class="table-row">\n          <div class="table-cell text-left title">LOAD</div>\n          <div class="table-cell">{{ vm.cpucore }}-core</div>\n      </div>\n      <div class="table-row">\n          <div class="table-cell text-left">1 min:</div>\n          <div class="table-cell">\n              {{ vm.min1 | number : 2}}\n          </div>\n      </div>\n      <div class="table-row">\n          <div class="table-cell text-left">5 min:</div>\n          <div class="table-cell" ng-class="vm.getDecoration(\'min5\')">\n              {{ vm.min5 | number : 2}}\n          </div>\n      </div>\n      <div class="table-row">\n          <div class="table-cell text-left">15 min:</div>\n          <div class="table-cell" ng-class="vm.getDecoration(\'min15\')">\n              {{ vm.min15 | number : 2}}\n          </div>\n      </div>\n  </div>\n</section>\n');
-$templateCache.put('components/plugin-system/view.html','<section id="system">\n  <span ng-if="vm.isDisconnected" class="critical">Disconnected from</span>\n  <span class="title">{{ vm.hostname }}</span>\n  <span ng-show="vm.stats.isLinux" class="hidden-xs hidden-sm">({{ vm.humanReadableName }} / {{ vm.os.name }} {{ vm.os.version }})</span>\n  <span ng-show="!vm.stats.isLinux" class="hidden-xs hidden-sm">({{ vm.os.name }} {{ vm.os.version }} {{ vm.platform }})</span>\n</section>\n');
 $templateCache.put('components/plugin-ip/view.html','<section id="ip" ng-if="vm.address != undefined && !vm.arguments.disable_ip">\n  &nbsp;-&nbsp;<span class="title">IP</span>&nbsp;<span>{{ vm.address }}/{{ vm.maskCidr }}</span>&nbsp;<span ng-if="vm.publicAddress" class="title">Pub</span>&nbsp;<span>{{ vm.publicAddress }}</span>\n</section>\n');
+$templateCache.put('components/plugin-load/view.html','<section id="load" class="plugin" ng-if="vm.cpucore != undefined">\n  <div class="table">\n      <div class="table-row">\n          <div class="table-cell text-left title">LOAD</div>\n          <div class="table-cell">{{ vm.cpucore }}-core</div>\n      </div>\n      <div class="table-row">\n          <div class="table-cell text-left">1 min:</div>\n          <div class="table-cell">\n              {{ vm.min1 | number : 2}}\n          </div>\n      </div>\n      <div class="table-row">\n          <div class="table-cell text-left">5 min:</div>\n          <div class="table-cell" ng-class="vm.getDecoration(\'min5\')">\n              {{ vm.min5 | number : 2}}\n          </div>\n      </div>\n      <div class="table-row">\n          <div class="table-cell text-left">15 min:</div>\n          <div class="table-cell" ng-class="vm.getDecoration(\'min15\')">\n              {{ vm.min15 | number : 2}}\n          </div>\n      </div>\n  </div>\n</section>\n');
+$templateCache.put('components/plugin-mem/view.html','<section id="mem" class="plugin">\n    <div class="table">\n        <div class="table-row">\n            <div class="table-cell text-left title">MEM</div>\n            <div class="table-cell">{{ vm.percent }}%</div>\n        </div>\n        <div class="table-row">\n            <div class="table-cell text-left">total:</div>\n            <div class="table-cell">{{ vm.total | bytes }}</div>\n        </div>\n        <div class="table-row">\n            <div class="table-cell text-left">used:</div>\n            <div class="table-cell" ng-class="vm.getDecoration(\'used\')">\n                {{ vm.used | bytes:2 }}\n            </div>\n        </div>\n        <div class="table-row">\n            <div class="table-cell text-left">free:</div>\n            <div class="table-cell">{{ vm.free | bytes }}</div>\n        </div>\n    </div>\n</section>\n');
+$templateCache.put('components/plugin-mem-more/view.html','<section id="mem-more" class="plugin">\n    <div class="table">\n        <div class="table-row">\n            <div class="table-cell text-left">active:</div>\n            <div class="table-cell">{{ vm.active | bytes }}</div>\n        </div>\n        <div class="table-row">\n            <div class="table-cell text-left">inactive:</div>\n            <div class="table-cell">{{ vm.inactive | bytes }}</div>\n        </div>\n        <div class="table-row" ng-show="vm.buffers != undefined">\n            <div class="table-cell text-left">buffers:</div>\n            <div class="table-cell">{{ vm.buffers | bytes }}</div>\n        </div>\n        <div class="table-row" ng-show="vm.cached != undefined">\n            <div class="table-cell text-left">cached:</div>\n            <div class="table-cell">{{ vm.cached | bytes }}</div>\n        </div>\n    </div>\n</section>\n');
+$templateCache.put('components/plugin-network/view.html','<section id="network" class="plugin table-row-group">\n  <div class="table-row">\n    <div class="table-cell text-left title">NETWORK</div>\n    <div class="table-cell" ng-show="!vm.arguments.network_cumul && !vm.arguments.network_sum">Rx/s</div>\n    <div class="table-cell" ng-show="!vm.arguments.network_cumul && !vm.arguments.network_sum">Tx/s</div>\n\n    <div class="table-cell" ng-show="!vm.arguments.network_cumul && vm.arguments.network_sum"></div>\n    <div class="table-cell" ng-show="!vm.arguments.network_cumul && vm.arguments.network_sum">Rx+Tx/s</div>\n\n    <div class="table-cell" ng-show="vm.arguments.network_cumul && !vm.arguments.network_sum">Rx</div>\n    <div class="table-cell" ng-show="vm.arguments.network_cumul && !vm.arguments.network_sum">Tx</div>\n\n    <div class="table-cell" ng-show="vm.arguments.network_cumul && vm.arguments.network_sum"></div>\n    <div class="table-cell" ng-show="vm.arguments.network_cumul && vm.arguments.network_sum">Rx+Tx</div>\n  </div>\n  <div class="table-row" ng-repeat="network in vm.networks">\n    <div class="table-cell text-left">{{ network.interfaceName | min_size }}</div>\n    <div class="table-cell" ng-show="!vm.arguments.network_cumul && !vm.arguments.network_sum">{{ vm.arguments.byte ? (network.rx / network.time_since_update | bytes) : (network.rx / network.time_since_update | bits) }}</div>\n    <div class="table-cell" ng-show="!vm.arguments.network_cumul && !vm.arguments.network_sum">{{ vm.arguments.byte ? (network.tx / network.time_since_update | bytes) : (network.tx / network.time_since_update | bits) }}</div>\n\n    <div class="table-cell" ng-show="!vm.arguments.network_cumul && vm.arguments.network_sum"></div>\n    <div class="table-cell" ng-show="!vm.arguments.network_cumul && vm.arguments.network_sum">{{ vm.arguments.byte ? (network.cx / network.time_since_update | bytes) : (network.cx / network.time_since_update | bits) }}</div>\n\n    <div class="table-cell" ng-show="vm.arguments.network_cumul && !vm.arguments.network_sum">{{ vm.arguments.byte ? (network.cumulativeRx | bytes) : (network.cumulativeRx | bits) }}</div>\n    <div class="table-cell" ng-show="vm.arguments.network_cumul && !vm.arguments.network_sum">{{ vm.arguments.byte ? (network.cumulativeTx | bytes) : (network.cumulativeTx | bits) }}</div>\n\n    <div class="table-cell" ng-show="vm.arguments.network_cumul && vm.arguments.network_sum"></div>\n    <div class="table-cell" ng-show="vm.arguments.network_cumul && vm.arguments.network_sum">{{ vm.arguments.byte ? (network.cumulativeCx | bytes) : (network.cumulativeCx | bits) }}</div>\n  </div>\n</section>');
+$templateCache.put('components/plugin-percpu/view.html','<section id="percpu" class="plugin">\n    <div class="table">\n        <div class="table-row">\n            <div class="table-cell text-left title">PER CPU</div>\n            <div class="table-cell" ng-repeat="percpu in vm.cpus">{{ percpu.total }}%</div>\n        </div>\n        <div class="table-row">\n            <div class="table-cell text-left">user:</div>\n            <div class="table-cell" ng-repeat="percpu in vm.cpus" ng-class="vm.getUserAlert(percpu)">\n                {{ percpu.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-repeat="percpu in vm.cpus" ng-class="vm.getSystemAlert(percpu)">\n                {{ percpu.system }}%\n            </div>\n        </div>\n        <div class="table-row">\n            <div class="table-cell text-left">idle:</div>\n            <div class="table-cell" ng-repeat="percpu in vm.cpus">{{ percpu.idle }}%</div>\n        </div>\n        <div class="table-row" ng-show="vm.cpus[0].iowait">\n            <div class="table-cell text-left">iowait:</div>\n            <div class="table-cell" ng-repeat="percpu in vm.cpus" ng-class="vm.getSystemAlert(percpu)">\n                {{ percpu.iowait }}%\n            </div>\n        </div>\n        <div class="table-row" ng-show="vm.cpus[0].steal">\n            <div class="table-cell text-left">steal:</div>\n            <div class="table-cell" ng-repeat="percpu in vm.cpus" ng-class="vm.getSystemAlert(percpu)">\n                {{ percpu.steal }}%\n            </div>\n        </div>\n    </div>\n</section>\n');
+$templateCache.put('components/plugin-quicklook/view.html','<section id="quicklook" class="plugin">\n    <div class="cpu-name">\n        {{ vm.cpu_name }}\n    </div>\n    <div class="table">\n        <div class="table-row" ng-show="!vm.arguments.percpu">\n            <div class="table-cell text-left">CPU</div>\n            <div class="table-cell">\n                <div class="progress">\n                    <div class="progress-bar progress-bar-{{ vm.getDecoration(\'cpu\') }}" role="progressbar" aria-valuenow="{{ vm.cpu }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ vm.cpu }}%;">\n                        &nbsp;\n                    </div>\n                </div>\n            </div>\n            <div class="table-cell">\n                {{ vm.cpu }}%\n            </div>\n        </div>\n        <div class="table-row" ng-show="vm.arguments.percpu" ng-repeat="percpu in vm.percpus">\n            <div class="table-cell text-left">CPU{{ percpu.number }}</div>\n            <div class="table-cell">\n                <div class="progress">\n                    <div class="progress-bar progress-bar-{{ vm.getDecoration(\'cpu\') }}" role="progressbar" aria-valuenow="{{ percpu.total }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ percpu.total }}%;">\n                        &nbsp;\n                    </div>\n                </div>\n            </div>\n            <div class="table-cell">\n                {{ percpu.total }}%\n            </div>\n        </div>\n        <div class="table-row">\n            <div class="table-cell text-left">MEM</div>\n            <div class="table-cell">\n                <div class="progress">\n                    <div class="progress-bar progress-bar-{{ vm.getDecoration(\'mem\') }}" role="progressbar" aria-valuenow="{{ vm.mem }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ vm.mem }}%;">\n                        &nbsp;\n                    </div>\n                </div>\n            </div>\n            <div class="table-cell">\n                {{ vm.mem }}%\n            </div>\n        </div>\n        <div class="table-row">\n            <div class="table-cell text-left">SWAP</div>\n            <div class="table-cell">\n                <div class="progress">\n                    <div class="progress-bar progress-bar-{{ vm.getDecoration(\'swap\') }}" role="progressbar" aria-valuenow="{{ vm.swap }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ vm.swap }}%;">\n                        &nbsp;\n                    </div>\n                </div>\n            </div>\n            <div class="table-cell">\n                {{ vm.swap }}%\n            </div>\n        </div>\n    </div>\n</section>\n');
+$templateCache.put('components/plugin-system/view.html','<section id="system">\n  <span ng-if="vm.isDisconnected" class="critical">Disconnected from</span>\n  <span class="title">{{ vm.hostname }}</span>\n  <span ng-show="vm.stats.isLinux" class="hidden-xs hidden-sm">({{ vm.humanReadableName }} / {{ vm.os.name }} {{ vm.os.version }})</span>\n  <span ng-show="!vm.stats.isLinux" class="hidden-xs hidden-sm">({{ vm.os.name }} {{ vm.os.version }} {{ vm.platform }})</span>\n</section>\n');
 $templateCache.put('components/plugin-uptime/view.html','<section id="uptime">\n  <span>Uptime: {{ vm.value }}</span>\n</section>\n');}]);