Fix display and shortcut issues for the gpu plugin of the webUi

6 files changed, 147 insertions, 132 deletions

diff --git a/glances/outputs/static/css/style.css b/glances/outputs/static/css/style.css
index acc7d2cf..d064d618 100644
--- a/glances/outputs/static/css/style.css
+++ b/glances/outputs/static/css/style.css
@@ -145,6 +145,13 @@ body {
     text-overflow: ellipsis;
 }
 
+#gpu .gpu-name {
+    white-space: nowrap;
+    overflow: hidden;
+    width: 100%;
+    text-overflow: ellipsis;
+}
+
 /* Loading page */
 
 #loading-page .glances-logo {
diff --git a/glances/outputs/static/html/plugins/gpu.html b/glances/outputs/static/html/plugins/gpu.html
index acb8c82c..731ad73a 100644
--- a/glances/outputs/static/html/plugins/gpu.html
+++ b/glances/outputs/static/html/plugins/gpu.html
@@ -1,25 +1,24 @@
+<div class="gpu-name title">
+    {{ statsGpu.name }}
+</div>
 <div class="table">
-    <div class="table-row">
-        <div class="table-cell text-left title">{{ statsGpu.name }}</div>
-        <div class="table-cell"></div>
-    </div>
     <div class="table-row" ng-if="arguments.meangpu || statsGpu.gpus.length === 1">
         <div class="table-cell text-left">proc:</div>
-        <div class="table-cell" ng-class="statsGpu.getMeanDecoration('proc')" ng-if="statsGpu.mean.proc">{{ statsGpu.mean.proc | number : 0 }} %</div>
+        <div class="table-cell" ng-class="statsGpu.getMeanDecoration('proc')" ng-if="statsGpu.mean.proc">{{ statsGpu.mean.proc | number : 0 }}%</div>
         <div class="table-cell" ng-if="!statsGpu.mean.proc">N/A</div>
     </div>
     <div class="table-row" ng-if="arguments.meangpu || statsGpu.gpus.length === 1">
         <div class="table-cell text-left">mem:</div>
-        <div class="table-cell" ng-class="statsGpu.getMeanDecoration('mem')" ng-if="statsGpu.mean.mem">{{ statsGpu.mean.mem | number : 0 }} %</div>
+        <div class="table-cell" ng-class="statsGpu.getMeanDecoration('mem')" ng-if="statsGpu.mean.mem">{{ statsGpu.mean.mem | number : 0 }}%</div>
         <div class="table-cell" ng-if="!statsGpu.mean.mem">N/A</div>
     </div>
     <div class="table-row" ng-if="!arguments.meangpu && statsGpu.gpus.length > 1" ng-repeat="gpu in statsGpu.gpus">
         <div class="table-cell text-left">
             {{ gpu.gpu_id }}:
-            <span ng-class="statsGpu.getDecoration(gpu.gpu_id, 'proc')" ng-if="gpu.proc">{{ gpu.proc | number : 0 }} %</span>
+            <span ng-class="statsGpu.getDecoration(gpu.gpu_id, 'proc')" ng-if="gpu.proc">{{ gpu.proc | number : 0 }}%</span>
             <span ng-if="!gpu.proc">N/A</span>
             mem:
-            <span ng-class="statsGpu.getDecoration(gpu.gpu_id, 'mem')" ng-if="gpu.mem">{{ gpu.mem | number : 0 }} %</span>
+            <span ng-class="statsGpu.getDecoration(gpu.gpu_id, 'mem')" ng-if="gpu.mem">{{ gpu.mem | number : 0 }}%</span>
             <span ng-if="!gpu.mem">N/A</span>
         </div>
     </div>
diff --git a/glances/outputs/static/js/controllers.js b/glances/outputs/static/js/controllers.js
index 4180d0af..6da7299e 100644
--- a/glances/outputs/static/js/controllers.js
+++ b/glances/outputs/static/js/controllers.js
@@ -181,7 +181,7 @@ glancesApp.controller('statsController', function ($scope, $rootScope, $interval
                 $scope.arguments.disable_quicklook = !$scope.arguments.disable_quicklook;
                 break;
             case $event.shiftKey && $event.keyCode == keycodes.SIX:
-                // 3 => Enable/disable mean gpu
+                // 6 => Enable/disable mean gpu
                 $scope.arguments.meangpu = !$scope.arguments.meangpu;
                 break;
             case $event.shiftKey && $event.keyCode == keycodes.FIVE:
@@ -190,6 +190,7 @@ glancesApp.controller('statsController', function ($scope, $rootScope, $interval
                 $scope.arguments.disable_mem = !$scope.arguments.disable_mem;
                 $scope.arguments.disable_memswap = !$scope.arguments.disable_memswap;
                 $scope.arguments.disable_load = !$scope.arguments.disable_load;
+                $scope.arguments.disable_gpu = !$scope.arguments.disable_gpu;
                 break;
             case $event.shiftKey && $event.keyCode == keycodes.i:
                 // I => Show/hide IP module
diff --git a/glances/outputs/static/public/css/style.min.css b/glances/outputs/static/public/css/style.min.css
index acc7d2cf..d064d618 100644
--- a/glances/outputs/static/public/css/style.min.css
+++ b/glances/outputs/static/public/css/style.min.css
@@ -145,6 +145,13 @@ body {
     text-overflow: ellipsis;
 }
 
+#gpu .gpu-name {
+    white-space: nowrap;
+    overflow: hidden;
+    width: 100%;
+    text-overflow: ellipsis;
+}
+
 /* Loading page */
 
 #loading-page .glances-logo {
diff --git a/glances/outputs/static/public/js/main.min.js b/glances/outputs/static/public/js/main.min.js
index 971b2c29..cd35183e 100644
--- a/glances/outputs/static/public/js/main.min.js
+++ b/glances/outputs/static/public/js/main.min.js
@@ -213,7 +213,7 @@ glancesApp.controller('statsController', ["$scope", "$rootScope", "$interval", "
                 $scope.arguments.disable_quicklook = !$scope.arguments.disable_quicklook;
                 break;
             case $event.shiftKey && $event.keyCode == keycodes.SIX:
-                // 3 => Enable/disable mean gpu
+                // 6 => Enable/disable mean gpu
                 $scope.arguments.meangpu = !$scope.arguments.meangpu;
                 break;
             case $event.shiftKey && $event.keyCode == keycodes.FIVE:
@@ -222,6 +222,7 @@ glancesApp.controller('statsController', ["$scope", "$rootScope", "$interval", "
                 $scope.arguments.disable_mem = !$scope.arguments.disable_mem;
                 $scope.arguments.disable_memswap = !$scope.arguments.disable_memswap;
                 $scope.arguments.disable_load = !$scope.arguments.disable_load;
+                $scope.arguments.disable_gpu = !$scope.arguments.disable_gpu;
                 break;
             case $event.shiftKey && $event.keyCode == keycodes.i:
                 // I => Show/hide IP module
@@ -425,6 +426,127 @@ var keycodes = {
 	'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('GlancesStats', ["$http", "$injector", "$q", "GlancesPlugin", function($http, $injector, $q, GlancesPlugin) {
+    var _stats = [], _views = [], _limits = [], _config = {};
+
+    var _plugins = {
+        'alert': 'GlancesPluginAlert',
+        'cpu': 'GlancesPluginCpu',
+        'diskio': 'GlancesPluginDiskio',
+        'irq'   : 'GlancesPluginIrq',
+        'docker': 'GlancesPluginDocker',
+        'ip': 'GlancesPluginIp',
+        'fs': 'GlancesPluginFs',
+        'folders': 'GlancesPluginFolders',
+        'gpu': 'GlancesPluginGpu',
+        'load': 'GlancesPluginLoad',
+        'mem': 'GlancesPluginMem',
+        'memswap': 'GlancesPluginMemSwap',
+        'amps': 'GlancesPluginAmps',
+        'network': 'GlancesPluginNetwork',
+        'percpu': 'GlancesPluginPerCpu',
+        'processcount': 'GlancesPluginProcessCount',
+        'processlist': 'GlancesPluginProcessList',
+        'quicklook': 'GlancesPluginQuicklook',
+        'raid': 'GlancesPluginRaid',
+        'sensors': 'GlancesPluginSensors',
+        'system': 'GlancesPluginSystem',
+        'uptime': 'GlancesPluginUptime',
+        'ports': 'GlancesPluginPorts',
+        'wifi': 'GlancesPluginWifi'
+    };
+
+    this.getData = function() {
+        return $q.all([
+            this.getAllStats(),
+            this.getAllViews()
+        ]).then(function(results) {
+            return {
+                'stats': results[0],
+                'view': results[1]
+            };
+        });
+    };
+
+    this.getAllStats = function() {
+        return $http.get('/api/2/all').then(function (response) {
+            _stats = response.data;
+
+            return response.data;
+        });
+    };
+
+    this.getAllLimits = function() {
+        return $http.get('/api/2/all/limits').then(function (response) {
+            _limits = response.data;
+
+            return response.data;
+        });
+    };
+
+    this.getAllViews = function() {
+        return $http.get('/api/2/all/views').then(function (response) {
+            _views = response.data;
+
+            return response.data;
+        });
+    };
+
+    this.getHelp = function() {
+        return $http.get('/api/2/help').then(function (response) {
+            return response.data;
+        });
+    };
+
+    this.getConfig = function() {
+        return $http.get('/api/2/config').then(function (response) {
+            _config = response.data;
+
+            return _config;
+        });
+    };
+
+    this.getArguments = function() {
+        return $http.get('/api/2/args').then(function (response) {
+            return response.data;
+        });
+    };
+
+    this.getPlugin = function(name) {
+        var plugin = _plugins[name];
+
+        if (plugin === undefined) {
+            throw "Plugin '" + name + "' not found";
+        }
+
+        plugin = $injector.get(plugin);
+        plugin.setData(_stats, _views, _config);
+
+        return plugin;
+    };
+
+    // load limits to init GlancePlugin helper
+    this.getAllLimits().then(function(limits) {
+        GlancesPlugin.setLimits(limits);
+    });
+
+}]);
+
 glancesApp.service('GlancesPluginAlert', function () {
     var _pluginName = "alert";
     var _alerts = [];
@@ -1321,124 +1443,3 @@ glancesApp.service('GlancesPluginWifi', function() {
         return _view[hotpost.ssid][field].decoration.toLowerCase();
     };
 });
-
-glancesApp.service('favicoService', function() {
-
-  var favico = new Favico({
-    animation : 'none'
-  });
-
-  this.badge = function(nb) {
-    favico.badge(nb);
-  };
-
-  this.reset = function() {
-    favico.reset();
-  };
-});
-
-glancesApp.service('GlancesStats', ["$http", "$injector", "$q", "GlancesPlugin", function($http, $injector, $q, GlancesPlugin) {
-    var _stats = [], _views = [], _limits = [], _config = {};
-
-    var _plugins = {
-        'alert': 'GlancesPluginAlert',
-        'cpu': 'GlancesPluginCpu',
-        'diskio': 'GlancesPluginDiskio',
-        'irq'   : 'GlancesPluginIrq',
-        'docker': 'GlancesPluginDocker',
-        'ip': 'GlancesPluginIp',
-        'fs': 'GlancesPluginFs',
-        'folders': 'GlancesPluginFolders',
-        'gpu': 'GlancesPluginGpu',
-        'load': 'GlancesPluginLoad',
-        'mem': 'GlancesPluginMem',
-        'memswap': 'GlancesPluginMemSwap',
-        'amps': 'GlancesPluginAmps',
-        'network': 'GlancesPluginNetwork',
-        'percpu': 'GlancesPluginPerCpu',
-        'processcount': 'GlancesPluginProcessCount',
-        'processlist': 'GlancesPluginProcessList',
-        'quicklook': 'GlancesPluginQuicklook',
-        'raid': 'GlancesPluginRaid',
-        'sensors': 'GlancesPluginSensors',
-        'system': 'GlancesPluginSystem',
-        'uptime': 'GlancesPluginUptime',
-        'ports': 'GlancesPluginPorts',
-        'wifi': 'GlancesPluginWifi'
-    };
-
-    this.getData = function() {
-        return $q.all([
-            this.getAllStats(),
-            this.getAllViews()
-        ]).then(function(results) {
-            return {
-                'stats': results[0],
-                'view': results[1]
-            };
-        });
-    };
-
-    this.getAllStats = function() {
-        return $http.get('/api/2/all').then(function (response) {
-            _stats = response.data;
-
-            return response.data;
-        });
-    };
-
-    this.getAllLimits = function() {
-        return $http.get('/api/2/all/limits').then(function (response) {
-            _limits = response.data;
-
-            return response.data;
-        });
-    };
-
-    this.getAllViews = function() {
-        return $http.get('/api/2/all/views').then(function (response) {
-            _views = response.data;
-
-            return response.data;
-        });
-    };
-
-    this.getHelp = function() {
-        return $http.get('/api/2/help').then(function (response) {
-            return response.data;
-        });
-    };
-
-    this.getConfig = function() {
-        return $http.get('/api/2/config').then(function (response) {
-            _config = response.data;
-
-            return _config;
-        });
-    };
-
-    this.getArguments = function() {
-        return $http.get('/api/2/args').then(function (response) {
-            return response.data;
-        });
-    };
-
-    this.getPlugin = function(name) {
-        var plugin = _plugins[name];
-
-        if (plugin === undefined) {
-            throw "Plugin '" + name + "' not found";
-        }
-
-        plugin = $injector.get(plugin);
-        plugin.setData(_stats, _views, _config);
-
-        return plugin;
-    };
-
-    // load limits to init GlancePlugin helper
-    this.getAllLimits().then(function(limits) {
-        GlancesPlugin.setLimits(limits);
-    });
-
-}]);
diff --git a/glances/outputs/static/public/js/templates.min.js b/glances/outputs/static/public/js/templates.min.js
index 247757ce..db0d5d6d 100644
--- a/glances/outputs/static/public/js/templates.min.js
+++ b/glances/outputs/static/public/js/templates.min.js
@@ -6,7 +6,7 @@ $templateCache.put('plugins/diskio.html','<div class="table-row">\n    <div clas
 $templateCache.put('plugins/docker.html','<span class="title">CONTAINERS</span> {{ statsDocker.containers.length }} (served by Docker {{ statsDocker.version }})\n\n<div class="table">\n    <div class="table-row">\n        <div class="table-cell text-left">Name</div>\n        <div class="table-cell">Status</div>\n        <div class="table-cell">CPU%</div>\n        <div class="table-cell">MEM</div>\n        <div class="table-cell">IOR/s</div>\n        <div class="table-cell">IOW/s</div>\n        <div class="table-cell">RX/s</div>\n        <div class="table-cell">TX/s</div>\n        <div class="table-cell text-left">Command</div>\n    </div>\n    <div class="table-row" ng-repeat="container in statsDocker.containers">\n        <div class="table-cell text-left">{{ container.name }}</div>\n        <div class="table-cell" ng-class="container.status == \'Paused\' ? \'careful\' : \'ok\'">{{ container.status }}</div>\n        <div class="table-cell">{{ container.cpu | number:1 }}</div>\n        <div class="table-cell">{{ container.memory | bytes }}</div>\n        <div class="table-cell">{{ container.ior / container.io_time_since_update | bits }}</div>\n        <div class="table-cell">{{ container.iow / container.io_time_since_update | bits }}</div>\n        <div class="table-cell">{{ container.rx / container.net_time_since_update | bits }}</div>\n        <div class="table-cell">{{ container.tx / container.net_time_since_update | bits }}</div>\n        <div class="table-cell text-left">{{ container.command }}</div>\n    </div>\n</div>\n');
 $templateCache.put('plugins/folders.html','<div class="table-row">\n    <div class="table-cell text-left title">FOLDERS</div>\n    <div class="table-cell">Size</div>\n</div>\n<div class="table-row" ng-repeat="folder in statsFolders.folders">\n    <div class="table-cell text-left">{{ folder.path }}</div>\n    <div class="table-cell" ng-class="statsFolders.getDecoration(folder)">{{ folder.size | bytes }}</div>\n</div>\n');
 $templateCache.put('plugins/fs.html','<div class="table-row">\n    <div class="table-cell text-left title">FILE SYS</div>\n    <div class="table-cell">\n        <span ng-show="!arguments.fs_free_space">Used</span>\n        <span ng-show="arguments.fs_free_space">Free</span>\n    </div>\n    <div class="table-cell">Total</div>\n</div>\n<div class="table-row" ng-repeat="fs in statsFs.fileSystems | orderBy:  \'mnt_point\'">\n    <div class="table-cell text-left">{{ fs.mountPoint }} <span class="visible-lg-inline" ng-show="fs.name.length <= 20">({{ fs.name }})<span></div>\n    <div class="table-cell" ng-class="statsFs.getDecoration(fs.mountPoint, \'used\')">\n        <span ng-show="!arguments.fs_free_space">{{ fs.used | bytes }}</span>\n        <span ng-show="arguments.fs_free_space">{{ fs.free | bytes }}</span>\n    </div>\n    <div class="table-cell">{{ fs.size | bytes }}</div>\n</div>\n');
-$templateCache.put('plugins/gpu.html','<div class="table">\n    <div class="table-row">\n        <div class="table-cell text-left title">{{ statsGpu.name }}</div>\n        <div class="table-cell"></div>\n    </div>\n    <div class="table-row" ng-if="arguments.meangpu || statsGpu.gpus.length === 1">\n        <div class="table-cell text-left">proc:</div>\n        <div class="table-cell" ng-class="statsGpu.getMeanDecoration(\'proc\')" ng-if="statsGpu.mean.proc">{{ statsGpu.mean.proc | number : 0 }} %</div>\n        <div class="table-cell" ng-if="!statsGpu.mean.proc">N/A</div>\n    </div>\n    <div class="table-row" ng-if="arguments.meangpu || statsGpu.gpus.length === 1">\n        <div class="table-cell text-left">mem:</div>\n        <div class="table-cell" ng-class="statsGpu.getMeanDecoration(\'mem\')" ng-if="statsGpu.mean.mem">{{ statsGpu.mean.mem | number : 0 }} %</div>\n        <div class="table-cell" ng-if="!statsGpu.mean.mem">N/A</div>\n    </div>\n    <div class="table-row" ng-if="!arguments.meangpu && statsGpu.gpus.length > 1" ng-repeat="gpu in statsGpu.gpus">\n        <div class="table-cell text-left">\n            {{ gpu.gpu_id }}:\n            <span ng-class="statsGpu.getDecoration(gpu.gpu_id, \'proc\')" ng-if="gpu.proc">{{ gpu.proc | number : 0 }} %</span>\n            <span ng-if="!gpu.proc">N/A</span>\n            mem:\n            <span ng-class="statsGpu.getDecoration(gpu.gpu_id, \'mem\')" ng-if="gpu.mem">{{ gpu.mem | number : 0 }} %</span>\n            <span ng-if="!gpu.mem">N/A</span>\n        </div>\n    </div>\n</div>\n');
+$templateCache.put('plugins/gpu.html','<div class="gpu-name title">\n    {{ statsGpu.name }}\n</div>\n<div class="table">\n    <div class="table-row" ng-if="arguments.meangpu || statsGpu.gpus.length === 1">\n        <div class="table-cell text-left">proc:</div>\n        <div class="table-cell" ng-class="statsGpu.getMeanDecoration(\'proc\')" ng-if="statsGpu.mean.proc">{{ statsGpu.mean.proc | number : 0 }}%</div>\n        <div class="table-cell" ng-if="!statsGpu.mean.proc">N/A</div>\n    </div>\n    <div class="table-row" ng-if="arguments.meangpu || statsGpu.gpus.length === 1">\n        <div class="table-cell text-left">mem:</div>\n        <div class="table-cell" ng-class="statsGpu.getMeanDecoration(\'mem\')" ng-if="statsGpu.mean.mem">{{ statsGpu.mean.mem | number : 0 }}%</div>\n        <div class="table-cell" ng-if="!statsGpu.mean.mem">N/A</div>\n    </div>\n    <div class="table-row" ng-if="!arguments.meangpu && statsGpu.gpus.length > 1" ng-repeat="gpu in statsGpu.gpus">\n        <div class="table-cell text-left">\n            {{ gpu.gpu_id }}:\n            <span ng-class="statsGpu.getDecoration(gpu.gpu_id, \'proc\')" ng-if="gpu.proc">{{ gpu.proc | number : 0 }}%</span>\n            <span ng-if="!gpu.proc">N/A</span>\n            mem:\n            <span ng-class="statsGpu.getDecoration(gpu.gpu_id, \'mem\')" ng-if="gpu.mem">{{ gpu.mem | number : 0 }}%</span>\n            <span ng-if="!gpu.mem">N/A</span>\n        </div>\n    </div>\n</div>\n');
 $templateCache.put('plugins/ip.html','&nbsp;-&nbsp;<span class="title">IP</span>&nbsp;<span>{{ statsIp.address }}/{{ statsIp.maskCidr }}</span>&nbsp;<span class="title">Pub</span>&nbsp;<span>{{ statsIp.publicAddress }}</span>\n');
 $templateCache.put('plugins/irq.html','<div class="table-row">\n    <div class="table-cell text-left title">IRQ</div>\n    <div class="table-cell"></div>\n    <div class="table-cell">Rate/s</div>\n</div>\n<div class="table-row" ng-repeat="irq in statsIrq.irqs">\n    <div class="table-cell text-left">{{irq.irq_line}}</div>\n    <div class="table-cell"></div>\n    <div class="table-cell"><span>{{irq.irq_rate}}</span></div>\n</div>\n');
 $templateCache.put('plugins/load.html','<div class="table">\n    <div class="table-row">\n        <div class="table-cell text-left title">LOAD</div>\n        <div class="table-cell">{{ statsLoad.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            {{ statsLoad.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="statsLoad.getDecoration(\'min5\')">\n            {{ statsLoad.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="statsLoad.getDecoration(\'min15\')">\n            {{ statsLoad.min15 | number : 2}}\n        </div>\n    </div>\n</div>\n');