greatbody
/
glances
mirror of https://github.com/nicolargo/glances
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge pull request #990 from notFloran/webui-gpu 

[WIP] Add GPU plugin in the WebUI
pull/992/head
Nicolas Hennion 2017-01-07 14:31:39 +01:00 committed by GitHub
parent fa3a3ed715 674d2c140d
commit 6316fa6aa5
11 changed files with 177 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
glances/outputs/static/css/style.css
View File

@ -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 {

25
glances/outputs/static/html/plugins/gpu.html Normal file
View File

@ -0,0 +1,25 @@
<div class="gpu-name title">
{{ statsGpu.name }}
</div>
<div class="table">
<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-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-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-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-if="!gpu.mem">N/A</span>
</div>
</div>
</div>

5
glances/outputs/static/html/stats.html
View File

@ -29,10 +29,13 @@
<div class="col-sm-12 col-md-8 col-lg-6" ng-if="!arguments.disable_cpu && arguments.percpu">
<section id="per_cpu" class="plugin" ng-include src="'plugins/per_cpu.html'"></section>
</div>
<div class="hidden-xs hidden-sm col-md-4 col-lg-3" ng-if="!arguments.disable_gpu && statsGpu.gpus.length > 0">
<section id="gpu" class="plugin" ng-include src="'plugins/gpu.html'"></section>
</div>
<div class="col-sm-6 col-md-4 col-lg-3" ng-if="!arguments.disable_mem">
<section id="mem" class="plugin" ng-include src="'plugins/mem.html'"></section>
</div>
<div class="hidden-xs hidden-sm col-md-4 col-lg-3" ng-if="!arguments.disable_mem">
<div class="hidden-xs hidden-sm col-md-4 col-lg-3" ng-if="!arguments.disable_mem && statsGpu.gpus.length == 0">
<section id="mem_more" class="plugin" ng-include src="'plugins/mem_more.html'"></section>
</div>
<div class="col-sm-6 col-md-4 col-lg-3" ng-if="!arguments.disable_memswap">

6
glances/outputs/static/js/controllers.js
View File

@ -28,6 +28,7 @@ glancesApp.controller('statsController', function ($scope, $rootScope, $interval
$scope.statsDocker = GlancesStats.getPlugin('docker');
$scope.statsFs = GlancesStats.getPlugin('fs');
$scope.statsFolders = GlancesStats.getPlugin('folders');
$scope.statsGpu = GlancesStats.getPlugin('gpu');
$scope.statsIp = GlancesStats.getPlugin('ip');
$scope.statsLoad = GlancesStats.getPlugin('load');
$scope.statsMem = GlancesStats.getPlugin('mem');
@ -179,12 +180,17 @@ glancesApp.controller('statsController', function ($scope, $rootScope, $interval
// 3 => Enable/disable quick look plugin
$scope.arguments.disable_quicklook = !$scope.arguments.disable_quicklook;
break;
case $event.shiftKey && $event.keyCode == keycodes.SIX:
// 6 => Enable/disable mean gpu
$scope.arguments.meangpu = !$scope.arguments.meangpu;
break;
case $event.shiftKey && $event.keyCode == keycodes.FIVE:
$scope.arguments.disable_quicklook = !$scope.arguments.disable_quicklook;
$scope.arguments.disable_cpu = !$scope.arguments.disable_cpu;
$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

1
glances/outputs/static/js/services/core/stats.js
View File

@ -10,6 +10,7 @@ glancesApp.service('GlancesStats', function($http, $injector, $q, GlancesPlugin)
'ip': 'GlancesPluginIp',
'fs': 'GlancesPluginFs',
'folders': 'GlancesPluginFolders',
'gpu': 'GlancesPluginGpu',
'load': 'GlancesPluginLoad',
'mem': 'GlancesPluginMem',
'memswap': 'GlancesPluginMemSwap',

56
glances/outputs/static/js/services/plugins/gpu.js Normal file
View File

@ -0,0 +1,56 @@
glancesApp.service('GlancesPluginGpu', function() {
var _pluginName = "gpu";
var _view = {};
this.gpus = [];
this.name = "GPU";
this.mean = {};
this.setData = function(data, views) {
data = data[_pluginName];
_view = views[_pluginName];
if (data.length === 0) {
return;
}
this.gpus = [];
this.name = "GPU";
this.mean = {
proc: null,
mem: null
};
var sameName = true;
for (var i = 0; i < data.length; i++) {
var gpuData = data[i];
var gpu = gpuData;
this.mean.proc += gpu.proc;
this.mean.mem += gpu.mem;
this.gpus.push(gpu);
}
if (data.length === 1 ) {
this.name = data[0].name;
} else if (sameName) {
this.name = data.length + ' GPU ' + data[0].name;
}
this.mean.proc = this.mean.proc / data.length;
this.mean.mem = this.mean.mem / data.length;
};
this.getDecoration = function(gpuId, value) {
if(_view[gpuId][value] == undefined) {
return;
}
return _view[gpuId][value].decoration.toLowerCase();
};
this.getMeanDecoration = function(value) {
return this.getDecoration(0, value);
};
});

1
glances/outputs/static/js/variables.js
View File

@ -23,6 +23,7 @@ var keycodes = {
'THREE': '51',
'FOUR': '52',
'FIVE': '53',
'SIX': '54',
'h' : '72',
'T' : '84',
'F' : '70',

7
glances/outputs/static/public/css/style.min.css vendored
View File

@ -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 {

65
glances/outputs/static/public/js/main.min.js vendored
View File

@ -60,6 +60,7 @@ glancesApp.controller('statsController', ["$scope", "$rootScope", "$interval", "
$scope.statsDocker = GlancesStats.getPlugin('docker');
$scope.statsFs = GlancesStats.getPlugin('fs');
$scope.statsFolders = GlancesStats.getPlugin('folders');
$scope.statsGpu = GlancesStats.getPlugin('gpu');
$scope.statsIp = GlancesStats.getPlugin('ip');
$scope.statsLoad = GlancesStats.getPlugin('load');
$scope.statsMem = GlancesStats.getPlugin('mem');
@ -211,12 +212,17 @@ glancesApp.controller('statsController', ["$scope", "$rootScope", "$interval", "
// 3 => Enable/disable quick look plugin
$scope.arguments.disable_quicklook = !$scope.arguments.disable_quicklook;
break;
case $event.shiftKey && $event.keyCode == keycodes.SIX:
// 6 => Enable/disable mean gpu
$scope.arguments.meangpu = !$scope.arguments.meangpu;
break;
case $event.shiftKey && $event.keyCode == keycodes.FIVE:
$scope.arguments.disable_quicklook = !$scope.arguments.disable_quicklook;
$scope.arguments.disable_cpu = !$scope.arguments.disable_cpu;
$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
@ -409,6 +415,7 @@ var keycodes = {
'THREE': '51',
'FOUR': '52',
'FIVE': '53',
'SIX': '54',
'h' : '72',
'T' : '84',
'F' : '70',
@ -446,6 +453,7 @@ glancesApp.service('GlancesStats', ["$http", "$injector", "$q", "GlancesPlugin",
'ip': 'GlancesPluginIp',
'fs': 'GlancesPluginFs',
'folders': 'GlancesPluginFolders',
'gpu': 'GlancesPluginGpu',
'load': 'GlancesPluginLoad',
'mem': 'GlancesPluginMem',
'memswap': 'GlancesPluginMemSwap',
@ -836,6 +844,63 @@ glancesApp.service('GlancesPluginFs', function() {
};
});
glancesApp.service('GlancesPluginGpu', function() {
var _pluginName = "gpu";
var _view = {};
this.gpus = [];
this.name = "GPU";
this.mean = {};
this.setData = function(data, views) {
data = data[_pluginName];
_view = views[_pluginName];
if (data.length === 0) {
return;
}
this.gpus = [];
this.name = "GPU";
this.mean = {
proc: null,
mem: null
};
var sameName = true;
for (var i = 0; i < data.length; i++) {
var gpuData = data[i];
var gpu = gpuData;
this.mean.proc += gpu.proc;
this.mean.mem += gpu.mem;
this.gpus.push(gpu);
}
if (data.length === 1 ) {
this.name = data[0].name;
} else if (sameName) {
this.name = data.length + ' GPU ' + data[0].name;
}
this.mean.proc = this.mean.proc / data.length;
this.mean.mem = this.mean.mem / data.length;
};
this.getDecoration = function(gpuId, value) {
if(_view[gpuId][value] == undefined) {
return;
}
return _view[gpuId][value].decoration.toLowerCase();
};
this.getMeanDecoration = function(value) {
return this.getDecoration(0, value);
};
});
glancesApp.service('GlancesPluginIp', function() {
var _pluginName = "ip";

1
glances/outputs/static/public/js/templates.min.js vendored
View File

@ -6,6 +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="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');

5
glances/outputs/static/public/stats.html vendored
View File

@ -29,10 +29,13 @@
<div class="col-sm-12 col-md-8 col-lg-6" ng-if="!arguments.disable_cpu && arguments.percpu">
<section id="per_cpu" class="plugin" ng-include src="'plugins/per_cpu.html'"></section>
</div>
<div class="hidden-xs hidden-sm col-md-4 col-lg-3" ng-if="!arguments.disable_gpu && statsGpu.gpus.length > 0">
<section id="gpu" class="plugin" ng-include src="'plugins/gpu.html'"></section>
</div>
<div class="col-sm-6 col-md-4 col-lg-3" ng-if="!arguments.disable_mem">
<section id="mem" class="plugin" ng-include src="'plugins/mem.html'"></section>
</div>
<div class="hidden-xs hidden-sm col-md-4 col-lg-3" ng-if="!arguments.disable_mem">
<div class="hidden-xs hidden-sm col-md-4 col-lg-3" ng-if="!arguments.disable_mem && statsGpu.gpus.length == 0">
<section id="mem_more" class="plugin" ng-include src="'plugins/mem_more.html'"></section>
</div>
<div class="col-sm-6 col-md-4 col-lg-3" ng-if="!arguments.disable_memswap">