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">
-                <glances-plugin-quicklook></glances-plugin-quicklook>
+            <div class="hidden-xs hidden-sm hidden-md col-lg-6" ng-if="!vm.argumentsdisable_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">
-                <glances-plugin-per-cpu></glances-plugin-per-cpu>
+            <div class="col-sm-12 col-md-8 col-lg-6" ng-if="!vm.argumentsdisable_cpu && vm.argumentspercpu">
+                <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">
-                <glances-plugin-gpu></glances-plugin-gpu>
+                 ng-if="!vm.argumentsdisable_gpu && statsGpu.gpus.length > 0">
+                <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">
-                <glances-plugin-mem></glances-plugin-mem>
+            <div class="col-sm-6 col-md-4 col-lg-3" ng-if="!vm.argumentsdisable_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)">
-                <glances-plugin-mem-more></glances-plugin-mem-more>
+                 ng-if="!vm.arguments.disable_mem && !(!vm.arguments.disable_gpu && statsGpu.gpus.length > 0)">
+                <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">
-                <glances-plugin-memswap></glances-plugin-memswap>
+            <div class="col-sm-6 col-md-4 col-lg-3" ng-if="!vm.arguments.disable_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;
-    this.gateway = null;
-    this.mask = null;
-    this.maskCidr = null;
-    this.publicAddress = null;
+    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 stats = changes.stats.currentValue;
+        if (stats === undefined || stats.stats === undefined) {
+            return;
+        }
 
-      var data = stats.stats['ip'];
+        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
+        vm.address = data.address;
+        vm.gateway = data.gateway;
+        vm.mask = data.mask;
+        vm.maskCidr = data.mask_cidr;
+        vm.publicAddress = data.public_address
     };
 }

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

+'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

+'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

+<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

+'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

+'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

+<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

+'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

+'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

+<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>
\ No newline at end of file

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

+'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

+'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

+<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

+'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

+'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

+<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

+
+

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

+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/stats.js → glances/outputs/static/js/services/stats.js

-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);
+    });
+
+});
\ No newline at end of file