migrate the load plugin

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

@@ -19,6 +19,48 @@
                 <glances-plugin-uptime stats="vm.stats"></glances-plugin-uptime>
             </div>
         </div>
+        <div class="row"  ng-if="statsCloud.getProvider()">
+            <div class="col-sm-24">
+                <div class="pull-left">
+                    <glances-plugin-cloud></glances-plugin-cloud>
+                </div>
+            </div>
+        </div>
     </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>
+        <div class="col-sm-6 col-md-8 col-lg-6" ng-if="!arguments.disable_cpu && !arguments.percpu">
+            <glances-plugin-cpu></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>
+        <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>
+        </div>
+        <div class="col-sm-6 col-md-4 col-lg-3" ng-if="!arguments.disable_mem">
+            <glances-plugin-mem></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>
+        </div>
+        <div class="col-sm-6 col-md-4 col-lg-3" ng-if="!arguments.disable_memswap">
+            <glances-plugin-memswap></glances-plugin-memswap>
+        </div>
+        <div class="col-sm-6 col-md-4 col-lg-3" ng-if="!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="table">
+                <glances-plugin-network></glances-plugin-network ng-show="!arguments.disable_network">
+            </div>
+        </div>
+        <div class="col-sm-18">
 
+        </div>
+    </div>
 </div>

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

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

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

@@ -0,0 +1,34 @@
+'use strict';
+
+function GlancesPluginLoadController() {
+    var vm = this;
+    var _view = {};
+
+    this.cpucore = null;
+    this.min1 = null;
+    this.min5 = null;
+    this.min15 = null;
+
+    vm.$onChanges = function (changes) {
+      var stats = changes.stats.currentValue;
+      if (stats === undefined || stats.stats === undefined) {
+        return;
+      }
+
+      var data = stats.stats['load'];
+      _view = stats.view['load'];
+
+      vm.cpucore = data['cpucore'];
+      vm.min1 = data['min1'];
+      vm.min5 = data['min5'];
+      vm.min15 = data['min15'];
+    };
+
+    this.getDecoration = function(value) {
+    if(_view[value] == undefined) {
+        return;
+    }
+
+    return _view[value].decoration.toLowerCase();
+};
+}

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

@@ -0,0 +1,26 @@
+<section id="load" class="plugin" ng-if="vm.cpucore != undefined">
+  <div class="table">
+      <div class="table-row">
+          <div class="table-cell text-left title">LOAD</div>
+          <div class="table-cell">{{ vm.cpucore }}-core</div>
+      </div>
+      <div class="table-row">
+          <div class="table-cell text-left">1 min:</div>
+          <div class="table-cell">
+              {{ vm.min1 | number : 2}}
+          </div>
+      </div>
+      <div class="table-row">
+          <div class="table-cell text-left">5 min:</div>
+          <div class="table-cell" ng-class="vm.getDecoration('min5')">
+              {{ vm.min5 | number : 2}}
+          </div>
+      </div>
+      <div class="table-row">
+          <div class="table-cell text-left">15 min:</div>
+          <div class="table-cell" ng-class="vm.getDecoration('min15')">
+              {{ vm.min15 | number : 2}}
+          </div>
+      </div>
+  </div>
+</section>

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

@@ -300,6 +300,148 @@ var keycodes = {
 
 '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('glancesPluginLoad', {
+    controller: GlancesPluginLoadController,
+    controllerAs: 'vm',
+    bindings: {
+      stats: '<',
+    },
+    templateUrl: 'components/plugin-load/view.html'
+});
+
+'use strict';
+
+function GlancesPluginLoadController() {
+    var vm = this;
+    var _view = {};
+
+    this.cpucore = null;
+    this.min1 = null;
+    this.min5 = null;
+    this.min15 = null;
+
+    vm.$onChanges = function (changes) {
+      var stats = changes.stats.currentValue;
+      if (stats === undefined || stats.stats === undefined) {
+        return;
+      }
+
+      var data = stats.stats['load'];
+      _view = stats.view['load'];
+
+      vm.cpucore = data['cpucore'];
+      vm.min1 = data['min1'];
+      vm.min5 = data['min5'];
+      vm.min15 = data['min15'];
+    };
+
+    this.getDecoration = function(value) {
+    if(_view[value] == undefined) {
+        return;
+    }
+
+    return _view[value].decoration.toLowerCase();
+};
+}
+
+'use strict';
+
+glancesApp.component('glancesPluginSystem', {
+    controller: GlancesPluginSystemController,
+    controllerAs: 'vm',
+    bindings: {
+      stats: '<',
+      isDisconnected: '<'
+    },
+    templateUrl: 'components/plugin-system/view.html'
+});
+
+'use strict';
+
+function GlancesPluginSystemController() {
+    var vm = this;
+    var _pluginName = "system";
+
+    vm.hostname  = null;
+    vm.platform = null;
+    vm.humanReadableName = null;
+    vm.os = {
+        'name': null,
+        'version': null
+    };
+
+    vm.$onChanges = function (changes) {
+      var stats = changes.stats.currentValue;
+      if (stats === undefined || stats.stats === undefined) {
+        return;
+      }
+
+      var data = stats.stats[_pluginName];
+
+      vm.hostname = data['hostname'];
+      vm.platform = data['platform'];
+      vm.os.name = data['os_name'];
+      vm.os.version = data['os_version'];
+      vm.humanReadableName = data['hr_name'];
+    };
+
+    vm.isBsd = function() {
+        return this.os.name === 'FreeBSD';
+    };
+
+    vm.isLinux = function() {
+        return this.os.name === 'Linux';
+    };
+
+    vm.isMac = function() {
+        return this.os.name === 'Darwin';
+    };
+
+    vm.isWindows = function() {
+        return this.os.name === 'Windows';
+    };
+}
+
+'use strict';
+
 glancesApp.component('glances', {
     controller: GlancesController,
     bindings: {
@@ -497,102 +639,6 @@ function GlancesController($interval, GlancesStats, favicoService) {
 
 '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('glancesPluginSystem', {
-    controller: GlancesPluginSystemController,
-    controllerAs: 'vm',
-    bindings: {
-      stats: '<',
-      isDisconnected: '<'
-    },
-    templateUrl: 'components/plugin-system/view.html'
-});
-
-'use strict';
-
-function GlancesPluginSystemController() {
-    var vm = this;
-    var _pluginName = "system";
-
-    vm.hostname  = null;
-    vm.platform = null;
-    vm.humanReadableName = null;
-    vm.os = {
-        'name': null,
-        'version': null
-    };
-
-    vm.$onChanges = function (changes) {
-      var stats = changes.stats.currentValue;
-      if (stats === undefined || stats.stats === undefined) {
-        return;
-      }
-
-      var data = stats.stats[_pluginName];
-
-      vm.hostname = data['hostname'];
-      vm.platform = data['platform'];
-      vm.os.name = data['os_name'];
-      vm.os.version = data['os_version'];
-      vm.humanReadableName = data['hr_name'];
-    };
-
-    vm.isBsd = function() {
-        return this.os.name === 'FreeBSD';
-    };
-
-    vm.isLinux = function() {
-        return this.os.name === 'Linux';
-    };
-
-    vm.isMac = function() {
-        return this.os.name === 'Darwin';
-    };
-
-    vm.isWindows = function() {
-        return this.os.name === 'Windows';
-    };
-}
-
-'use strict';
-
 glancesApp.component('glancesPluginUptime', {
     controller: GlancesPluginUptimeController,
     controllerAs: 'vm',

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

@@ -1,4 +1,5 @@
-angular.module('glancesApp').run(['$templateCache', function($templateCache) {$templateCache.put('components/glances/view.html','<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<div ng-show="vm.arguments.help_tag" class="container-fluid" ng-include src="\'help.html\'"></div>\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>\n\n</div>\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');
+angular.module('glancesApp').run(['$templateCache', function($templateCache) {$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-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.isLinux()" class="hidden-xs hidden-sm">({{ vm.humanReadableName }} / {{ vm.os.name }} {{ vm.os.version }})</span>\n  <span ng-show="!vm.isLinux()" class="hidden-xs hidden-sm">({{ vm.os.name }} {{ vm.os.version }} {{ vm.platform }})</span>\n</section>\n');
+$templateCache.put('components/glances/view.html','<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<div ng-show="vm.arguments.help_tag" class="container-fluid" ng-include src="\'help.html\'"></div>\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"  ng-if="statsCloud.getProvider()">\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 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></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" 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" 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');
 $templateCache.put('components/plugin-uptime/view.html','<section id="uptime">\n  <span>Uptime: {{ vm.value }}</span>\n</section>\n');}]);