nicolargo/glances
1
1
Fork 0
mirror of https://github.com/nicolargo/glances.git synced 2025-01-08 19:18:11 +03:00
Code Issues Projects Releases Wiki Activity

add quicklook plugin in web ui

Browse Source
This commit is contained in:
Nicolas Hart 2015-09-05 17:53:20 +02:00
parent a528d13de5
commit 64f53adfa6
8 changed files with 135 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
glances/outputs/static/css/bootstrap.min.css vendored
View File

File diff suppressed because one or more lines are too long

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

@ -105,6 +105,27 @@ gl-monitor-list .table-cell {
text-align: left;
}
#quicklook .progress {
margin-bottom: 0px;
min-width: 100px;
background-color: #000;
height: 12px;
border-radius: 0px;
text-align: right;
}
#quicklook .progress-bar-ok {
background-color: #3E7B04;
}
#quicklook .progress-bar-careful {
background-color: #295183;
}
#quicklook .progress-bar-warning {
background-color: #5D4062;
}
#quicklook .progress-bar-critical {
background-color: #A30000;
}
/* Loading page */
#loading-page .glances-logo {

1
glances/outputs/static/html/index.html
View File

@ -34,6 +34,7 @@
<script type="text/javascript" src="services/plugins/glances_percpu.js"></script>
<script type="text/javascript" src="services/plugins/glances_processcount.js"></script>
<script type="text/javascript" src="services/plugins/glances_processlist.js"></script>
<script type="text/javascript" src="services/plugins/glances_quicklook.js"></script>
<script type="text/javascript" src="services/plugins/glances_sensors.js"></script>
<script type="text/javascript" src="services/plugins/glances_system.js"></script>
<script type="text/javascript" src="services/plugins/glances_uptime.js"></script>

54
glances/outputs/static/html/plugins/quicklook.html Normal file
View File

@ -0,0 +1,54 @@
<div class="table">
<div class="table-row" ng-show="!show.per_cpu">
<div class="table-cell text-left">CPU</div>
<div class="table-cell">
<div class="progress">
<div class="progress-bar progress-bar-{{ statsQuicklook.getDecoration('cpu') }}" role="progressbar" aria-valuenow="{{ statsQuicklook.cpu }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ statsQuicklook.cpu }}%;">
&nbsp;
</div>
</div>
</div>
<div class="table-cell">
{{ statsQuicklook.cpu }}%
</div>
</div>
<div class="table-row" ng-show="show.per_cpu" ng-repeat="percpu in statsQuicklook.percpus">
<div class="table-cell text-left">CPU{{ percpu.number }}</div>
<div class="table-cell">
<div class="progress">
<div class="progress-bar progress-bar-{{ statsQuicklook.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-{{ statsQuicklook.getDecoration('mem') }}" role="progressbar" aria-valuenow="{{ statsQuicklook.mem }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ statsQuicklook.mem }}%;">
&nbsp;
</div>
</div>
</div>
<div class="table-cell">
{{ statsQuicklook.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-{{ statsQuicklook.getDecoration('swap') }}" role="progressbar" aria-valuenow="{{ statsQuicklook.swap }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ statsQuicklook.swap }}%;">
&nbsp;
</div>
</div>
</div>
<div class="table-cell">
{{ statsQuicklook.swap }}%
</div>
</div>
</div>

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

@ -7,7 +7,7 @@
<div ng-show="dataLoaded && !help_screen" class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div class="col-sm-24">
<div class="pull-left">
<section id="system" class="plugin" ng-include src="'plugins/system.html'"></section>
</div>
@ -20,30 +20,33 @@
</div>
</div>
<div class="row">
<div class="col-sm-3 col-md-2" ng-show="!show.per_cpu">
<div class="hidden-xs hidden-sm hidden-md col-lg-6">
<section id="quicklook" class="plugin" ng-include src="'plugins/quicklook.html'"></section>
</div>
<div class="col-sm-6 col-md-4 col-lg-3" ng-show="!show.per_cpu">
<section id="cpu" class="plugin" ng-include src="'plugins/cpu.html'"></section>
</div>
<div class="hidden-xs hidden-sm col-md-2" ng-show="!show.per_cpu">
<div class="hidden-xs hidden-sm col-md-4 col-lg-3" ng-show="!show.per_cpu">
<section id="cpu_more" class="plugin" ng-if="statsCpu.nice != undefined" ng-include src="'plugins/cpu_more.html'"></section>
</div>
<div class="col-sm-6 col-md-4" ng-show="show.per_cpu">
<div class="col-sm-12 col-md-8 col-lg-6" ng-show="show.per_cpu">
<section id="per_cpu" class="plugin" ng-include src="'plugins/per_cpu.html'"></section>
</div>
<div class="col-sm-3 col-md-2">
<div class="col-sm-6 col-md-4 col-lg-3">
<section id="mem" class="plugin" ng-include src="'plugins/mem.html'"></section>
</div>
<div class="hidden-xs hidden-sm col-md-2">
<div class="hidden-xs hidden-sm col-md-4 col-lg-3">
<section id="mem_more" class="plugin" ng-include src="'plugins/mem_more.html'"></section>
</div>
<div class="col-sm-3 col-md-2">
<div class="col-sm-6 col-md-4 col-lg-3">
<section id="memswap" class="plugin" ng-include src="'plugins/memswap.html'"></section>
</div>
<div class="col-sm-3 col-md-2">
<div class="col-sm-6 col-md-4 col-lg-3">
<section id="load" class="plugin" ng-if="statsLoad.cpucore != undefined" ng-include src="'plugins/load.html'"></section>
</div>
</div>
<div class="row">
<div class="col-sm-3 sidebar" ng-show="show.sidebar">
<div class="col-sm-6 sidebar" ng-show="show.sidebar">
<div class="table">
<section id="network" class="plugin table-row-group" ng-show="show.network" ng-include src="'plugins/network.html'"></section>
<section id="diskio" class="plugin table-row-group" ng-show="show.diskio" ng-include src="'plugins/diskio.html'"></section>
@ -51,14 +54,14 @@
<section id="sensors" class="plugin table-row-group" ng-show="show.sensors && statsSensors.sensors.length > 0" ng-include src="'plugins/sensors.html'"></section>
</div>
</div>
<div class="col-sm-9">
<div class="col-sm-18">
<section id="containers" class="plugin" ng-show="statsDocker.containers.length && show.docker_stats" ng-include src="'plugins/docker.html'"></section>
<section id="alerts" ng-show="show.alert" ng-include src="'plugins/alerts.html'"></section>
<section id="alert" class="plugin" ng-show="show.alert" ng-include src="'plugins/alert.html'"></section>
<div ng-show="show.process_stats">
<section id="processcount" class="plugin" ng-include src="'plugins/processcount.html'"></section>
<div class="row">
<div class="col-lg-9">
<div class="col-lg-18">
<section id="monitor" class="plugin" ng-include src="'plugins/monitor.html'"></section>
</div>
</div>

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

@ -16,6 +16,7 @@ glancesApp.service('GlancesStats', function($http, $injector, $q, GlancesPlugin)
'percpu': 'GlancesPluginPerCpu',
'processcount': 'GlancesPluginProcessCount',
'processlist': 'GlancesPluginProcessList',
'quicklook': 'GlancesPluginQuicklook',
'sensors': 'GlancesPluginSensors',
'system': 'GlancesPluginSystem',
'uptime': 'GlancesPluginUptime'

34
glances/outputs/static/js/services/plugins/glances_quicklook.js Normal file
View File

@ -0,0 +1,34 @@
glancesApp.service('GlancesPluginQuicklook', function() {
var _pluginName = "quicklook";
var _view = {};
this.mem = null;
this.cpu = null;
this.swap = null;
this.percpus = [];
this.setData = function(data, views) {
data = data[_pluginName];
_view = views[_pluginName];
this.mem = data.mem;
this.cpu = data.cpu;
this.swap = data.swap;
this.percpus = [];
_.forEach(data.percpu, function(cpu, key) {
this.percpus.push({
'number': cpu.cpu_number,
'total': cpu.total
});
}, this);
}
this.getDecoration = function(value) {
if(_view[value] == undefined) {
return;
}
return _view[value].decoration.toLowerCase();
}
});

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

@ -70,6 +70,7 @@ glancesApp.controller('statsController', function ($scope, $interval, $routePara
$scope.statsPerCpu = GlancesStats.getPlugin('percpu');
$scope.statsProcessCount = GlancesStats.getPlugin('processcount');
$scope.statsProcessList = GlancesStats.getPlugin('processlist');
$scope.statsQuicklook = GlancesStats.getPlugin('quicklook');
$scope.statsSensors = GlancesStats.getPlugin('sensors');
$scope.statsSystem = GlancesStats.getPlugin('system');
$scope.statsUptime = GlancesStats.getPlugin('uptime');