nicolargo/glances
1
1
Fork 0
mirror of https://github.com/nicolargo/glances.git synced 2024-12-22 08:41:32 +03:00
Code Issues Projects Releases Wiki Activity

Merge pull request #1103 from notFloran/webui-move-to-components

Browse Source 
[WIP] Refactoring of the WebUI
This commit is contained in:
Nicolas Hennion 2017-06-05 17:50:21 +02:00 committed by GitHub
commit 949d29a472
161 changed files with 6973 additions and 5213 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
glances/main.py
View File

@ -296,8 +296,9 @@ Examples of use:
if WINDOWS:
args.webserver = True
# In web server mode
# In web server mode, defaul refresh time: 5 sec
if args.webserver:
args.time = 5
args.process_short_name = True
# Server or client login/password

11
glances/outputs/glances_bottle.py
View File

@ -30,7 +30,7 @@ from glances.timer import Timer
from glances.logger import logger
try:
from bottle import Bottle, static_file, abort, response, request, auth_basic
from bottle import Bottle, static_file, abort, response, request, auth_basic, template, TEMPLATE_PATH
except ImportError:
logger.critical('Bottle module not found. Glances cannot start in web server mode.')
sys.exit(2)
@ -72,6 +72,9 @@ class GlancesBottle(object):
# Path where the statics files are stored
self.STATIC_PATH = os.path.join(os.path.dirname(os.path.realpath(__file__)), 'static/public')
# Paths for templates
TEMPLATE_PATH.insert(0, os.path.join(os.path.dirname(os.path.realpath(__file__)), 'static/templates'))
def load_config(self, config):
"""Load the outputs section of the configuration file."""
# Limit the number of processes to display in the WebUI
@ -153,11 +156,15 @@ class GlancesBottle(object):
def _index(self, refresh_time=None):
"""Bottle callback for index.html (/) file."""
if refresh_time is None:
refresh_time = self.args.time
# Update the stat
self.__update__()
# Display
return static_file("index.html", root=self.STATIC_PATH)
return template("index.html", refresh_time=refresh_time)
def _resource(self, filepath):
"""Bottle callback for resources files."""

15
glances/outputs/static/README.md
View File

@ -31,11 +31,22 @@ static
|
|--- css
|
|--- html
|
|--- images
|
|--- js
|
|--- public # path where builds are put
|
|--- templates (bottle)
```
## Data
Each plugin receives the data in the following format:
* stats
* views
* isBsd
* isLinux
* isMac
* isWindows

11
glances/outputs/static/bower.json
View File

@ -3,8 +3,15 @@
"private": true,
"dependencies": {
"angular": "^1.5.8",
"angular-route": "^1.5.8",
"lodash": "^4.13.1",
"favico.js": "^0.3.10"
"favico.js": "^0.3.10",
"angular-hotkeys": "chieffancypants/angular-hotkeys#^1.7.0"
},
"overrides": {
"angular-hotkeys": {
"main": [
"build/hotkeys.js"
]
}
}
}

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

@ -106,16 +106,16 @@ body {
}
/* Plugins */
#processlist .table-cell {
#processlist-plugin .table-cell {
padding: 0px 5px 0px 5px;
white-space: nowrap;
}
#containers .table-cell {
#containers-plugin .table-cell {
padding: 0px 10px 0px 10px;
white-space: nowrap;
}
#quicklook .progress {
#quicklook-plugin .progress {
margin-bottom: 0px;
min-width: 100px;
background-color: #000;
@ -123,25 +123,25 @@ body {
border-radius: 0px;
text-align: right;
}
#quicklook .progress-bar-ok {
#quicklook-plugin .progress-bar-ok {
background-color: #3E7B04;
}
#quicklook .progress-bar-careful {
#quicklook-plugin .progress-bar-careful {
background-color: #295183;
}
#quicklook .progress-bar-warning {
#quicklook-plugin .progress-bar-warning {
background-color: #5D4062;
}
#quicklook .progress-bar-critical {
#quicklook-plugin .progress-bar-critical {
background-color: #A30000;
}
#quicklook .cpu-name {
#quicklook-plugin .cpu-name {
white-space: nowrap;
overflow: hidden;
width: 100%;
text-overflow: ellipsis;
}
#amps .process-result {
#amps-plugin .process-result {
max-width: 300px;
overflow: hidden;
white-space: pre-wrap;
@ -149,7 +149,7 @@ body {
text-overflow: ellipsis;
}
#gpu .gpu-name {
#gpu-plugin .gpu-name {
white-space: nowrap;
overflow: hidden;
width: 100%;

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

@ -21,7 +21,7 @@ gulp.task('copy', function() {
gulp.src('./images/*.png')
.pipe(gulp.dest('./public/images'));
gulp.src('favicon.ico')
gulp.src('./images/favicon.ico')
.pipe(gulp.dest('./public'));
});
@ -41,8 +41,8 @@ gulp.task('build-js', function() {
});
gulp.task('template', function () {
return gulp.src('./html/plugins/*.html')
.pipe(templateCache('templates.js', {'root': 'plugins/', 'module': 'glancesApp'}))
return gulp.src('./js/components/**/*.html')
.pipe(templateCache('templates.js', {'root': 'components/', 'module': 'glancesApp'}))
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('./public/js'));
});

76
glances/outputs/static/html/help.html
View File

@ -1,76 +0,0 @@
<div class="row">
<div class="col-sm-12 col-lg-24">{{help.version}} {{help.psutil_version}}</div>
</div>
<div class="row">&nbsp;</div>
<div class="row">
<div class="col-sm-12 col-lg-24">{{help.configuration_file}}</div>
</div>
<div class="row">&nbsp;</div>
<div class="row">
<div class="col-sm-12 col-lg-6">{{help.sort_auto}}</div>
<div class="col-sm-12 col-lg-6">{{help.sort_network}}</div>
</div>
<div class="row">
<div class="col-sm-12 col-lg-6">{{help.sort_cpu}}</div>
<div class="col-sm-12 col-lg-6">{{help.show_hide_alert}}</div>
</div>
<div class="row">
<div class="col-sm-12 col-lg-6">{{help.sort_mem}}</div>
<div class="col-sm-12 col-lg-6">{{help.percpu}}</div>
</div>
<div class="row">
<div class="col-sm-12 col-lg-6">{{help.sort_user}}</div>
<div class="col-sm-12 col-lg-6">{{help.show_hide_ip}}</div>
</div>
<div class="row">
<div class="col-sm-12 col-lg-6">{{help.sort_proc}}</div>
<div class="col-sm-12 col-lg-6">{{help.enable_disable_docker}}</div>
</div>
<div class="row">
<div class="col-sm-12 col-lg-6">{{help.sort_io}}</div>
<div class="col-sm-12 col-lg-6">{{help.view_network_io_combination}}</div>
</div>
<div class="row">
<div class="col-sm-12 col-lg-6">{{help.sort_cpu_times}}</div>
<div class="col-sm-12 col-lg-6">{{help.view_cumulative_network}}</div>
</div>
<div class="row">
<div class="col-sm-12 col-lg-6">{{help.show_hide_diskio}}</div>
<div class="col-sm-12 col-lg-6">{{help.show_hide_filesytem_freespace}}</div>
</div>
<div class="row">
<div class="col-sm-12 col-lg-6">{{help.show_hide_filesystem}}</div>
<div class="col-sm-12 col-lg-6">{{help.show_hide_help}}</div>
</div>
<div class="row">
<div class="col-sm-12 col-lg-6">{{help.show_hide_network}}</div>
<div class="col-sm-12 col-lg-6">{{help.diskio_iops}}</div>
</div>
<div class="row">
<div class="col-sm-12 col-lg-6">{{help.show_hide_sensors}}</div>
<div class="col-sm-12 col-lg-6">{{help.show_hide_top_menu}}</div>
</div>
<div class="row">
<div class="col-sm-12 col-lg-6">{{help.show_hide_left_sidebar}}</div>
<div class="col-sm-12 col-lg-6">{{help.show_hide_amp}}</div>
</div>
<div class="row">
<div class="col-sm-12 col-lg-6">{{help.enable_disable_process_stats}}</div>
<div class="col-sm-12 col-lg-6">{{help.show_hide_irq}}</div>
</div>
<div class="row">
<div class="col-sm-12 col-lg-6">{{help.enable_disable_gpu}}</div>
<div class="col-sm-12 col-lg-6">{{help.enable_disable_mean_gpu}}</div>
</div>
<div class="row">
<div class="col-sm-12 col-lg-6">{{help.enable_disable_quick_look}}</div>
<div class="col-sm-12 col-lg-6"></div>
</div>
<div class="row">
<div class="col-sm-12 col-lg-6">{{help.enable_disable_short_processname}}</div>
<div class="col-sm-12 col-lg-6"></div>
</div>
<div class="row">
<div class="col-sm-12 col-lg-6">{{help.enable_disable_ports}}</div>
<div class="col-sm-12 col-lg-6"></div>
</div>

7
glances/outputs/static/html/plugins/alert.html
View File

@ -1,7 +0,0 @@
<div class="table">
<div class="table-row" ng-repeat="alert in statsAlert.getAlerts()">
<div class="table-cell text-left">
{{alert.begin | date : 'yyyy-MM-dd H:mm:ss'}} ({{ alert.ongoing ? 'ongoing' : alert.duration }}) - <span ng-hide="alert.ongoing">{{alert.level}} on</span> <span class="{{ alert.level | lowercase }}">{{alert.name}}</span> ({{alert.max}})
</div>
</div>
</div>

2
glances/outputs/static/html/plugins/alerts.html
View File

@ -1,2 +0,0 @@
<span class="title" ng-show="!statsAlert.hasAlerts()">No warning or critical alert detected</span>
<span class="title" ng-show="statsAlert.hasAlerts()">Warning or critical alerts (lasts {{statsAlert.count()}} entries)</span>

7
glances/outputs/static/html/plugins/amps.html
View File

@ -1,7 +0,0 @@
<div class="table">
<div class="table-row" ng-repeat="process in statsAmps.processes">
<div class="table-cell text-left" ng-class="statsAmps.getDescriptionDecoration(process)">{{ process.name }}</div>
<div class="table-cell text-left">{{ process.count }}</div>
<div class="table-cell text-left process-result">{{ process.result }}</div>
</div>
</div>

1
glances/outputs/static/html/plugins/cloud.html
View File

@ -1 +0,0 @@
<span class="title">{{ statsCloud.getProvider() }}</span> {{ statsCloud.getInstance() }}

82
glances/outputs/static/html/plugins/cpu.html
View File

@ -1,82 +0,0 @@
<div class="row">
<div class="col-sm-24 col-md-12 col-lg-8">
<div class="table">
<div class="table-row">
<div class="table-cell text-left title">CPU</div>
<div class="table-cell">{{ statsCpu.total }}%</div>
</div>
<div class="table-row">
<div class="table-cell text-left">user:</div>
<div class="table-cell" ng-class="statsCpu.getDecoration('user')">
{{ statsCpu.user }}%
</div>
</div>
<div class="table-row">
<div class="table-cell text-left">system:</div>
<div class="table-cell" ng-class="statsCpu.getDecoration('system')">
{{ statsCpu.system }}%
</div>
</div>
<div class="table-row">
<div class="table-cell text-left">idle:</div>
<div class="table-cell">{{ statsCpu.idle }}%</div>
</div>
</div>
</div>
<div class="hidden-xs hidden-sm col-md-12 col-lg-8">
<div class="table">
<div class="table-row" ng-show="statsCpu.nice != undefined">
<div class="table-cell text-left">nice:</div>
<div class="table-cell">
{{ statsCpu.nice }}%
</div>
</div>
<div class="table-row" ng-show="statsCpu.irq != undefined">
<div class="table-cell text-left">irq:</div>
<div class="table-cell">
{{ statsCpu.irq }}%
</div>
</div>
<div class="table-row" ng-show="statsCpu.iowait != undefined">
<div class="table-cell text-left">iowait:</div>
<div class="table-cell" ng-class="statsCpu.getDecoration('iowait')">
{{ statsCpu.iowait }}%
</div>
</div>
<div class="table-row" ng-show="statsCpu.steal != undefined">
<div class="table-cell text-left">steal:</div>
<div class="table-cell" ng-class="statsCpu.getDecoration('steal')">
{{ statsCpu.steal }}%
</div>
</div>
</div>
</div>
<div class="hidden-xs hidden-sm hidden-md col-lg-8">
<div class="table">
<div class="table-row" ng-if="statsCpu.ctx_switches">
<div class="table-cell text-left">ctx_sw:</div>
<div class="table-cell" ng-class="statsCpu.getDecoration('ctx_switches')">
{{ statsCpu.ctx_switches }}
</div>
</div>
<div class="table-row" ng-if="statsCpu.interrupts">
<div class="table-cell text-left">inter:</div>
<div class="table-cell">
{{ statsCpu.interrupts }}
</div>
</div>
<div class="table-row" ng-if="statsCpu.soft_interrupts">
<div class="table-cell text-left">sw_int:</div>
<div class="table-cell">
{{ statsCpu.soft_interrupts }}
</div>
</div>
<div class="table-row" ng-if="!statsSystem.isLinux() && statsCpu.syscalls">
<div class="table-cell text-left">syscal:</div>
<div class="table-cell">
{{ statsCpu.syscalls }}
</div>
</div>
</div>
</div>
</div>

16
glances/outputs/static/html/plugins/diskio.html
View File

@ -1,16 +0,0 @@
<div class="table-row">
<div class="table-cell text-left title">DISK I/O</div>
<div class="table-cell" ng-show="!arguments.diskio_iops">R/s</div>
<div class="table-cell" ng-show="!arguments.diskio_iops">W/s</div>
<div class="table-cell" ng-show="arguments.diskio_iops">IOR/s</div>
<div class="table-cell" ng-show="arguments.diskio_iops">IOW/s</div>
</div>
<div class="table-row" ng-repeat="disk in statsDiskio.disks">
<div class="table-cell text-left">{{(disk.alias ? disk.alias : disk.name) | min_size}}</div>
<div class="table-cell" ng-show="!arguments.diskio_iops">{{disk.bitrate.txps }}</div>
<div class="table-cell" ng-show="!arguments.diskio_iops">{{disk.bitrate.rxps }}</div>
<div class="table-cell" ng-show="arguments.diskio_iops">{{disk.count.txps }}</div>
<div class="table-cell" ng-show="arguments.diskio_iops">{{disk.count.rxps }}</div>
</div>

26
glances/outputs/static/html/plugins/docker.html
View File

@ -1,26 +0,0 @@
<span class="title">CONTAINERS</span> {{ statsDocker.containers.length }} (served by Docker {{ statsDocker.version }})
<div class="table">
<div class="table-row">
<div class="table-cell text-left">Name</div>
<div class="table-cell">Status</div>
<div class="table-cell">CPU%</div>
<div class="table-cell">MEM</div>
<div class="table-cell">IOR/s</div>
<div class="table-cell">IOW/s</div>
<div class="table-cell">RX/s</div>
<div class="table-cell">TX/s</div>
<div class="table-cell text-left">Command</div>
</div>
<div class="table-row" ng-repeat="container in statsDocker.containers">
<div class="table-cell text-left">{{ container.name }}</div>
<div class="table-cell" ng-class="container.status == 'Paused' ? 'careful' : 'ok'">{{ container.status }}</div>
<div class="table-cell">{{ container.cpu | number:1 }}</div>
<div class="table-cell">{{ container.memory | bytes }}</div>
<div class="table-cell">{{ container.ior / container.io_time_since_update | bits }}</div>
<div class="table-cell">{{ container.iow / container.io_time_since_update | bits }}</div>
<div class="table-cell">{{ container.rx / container.net_time_since_update | bits }}</div>
<div class="table-cell">{{ container.tx / container.net_time_since_update | bits }}</div>
<div class="table-cell text-left">{{ container.command }}</div>
</div>
</div>

8
glances/outputs/static/html/plugins/folders.html
View File

@ -1,8 +0,0 @@
<div class="table-row">
<div class="table-cell text-left title">FOLDERS</div>
<div class="table-cell">Size</div>
</div>
<div class="table-row" ng-repeat="folder in statsFolders.folders">
<div class="table-cell text-left">{{ folder.path }}</div>
<div class="table-cell" ng-class="statsFolders.getDecoration(folder)">{{ folder.size | bytes }}</div>
</div>

16
glances/outputs/static/html/plugins/fs.html
View File

@ -1,16 +0,0 @@
<div class="table-row">
<div class="table-cell text-left title">FILE SYS</div>
<div class="table-cell">
<span ng-show="!arguments.fs_free_space">Used</span>
<span ng-show="arguments.fs_free_space">Free</span>
</div>
<div class="table-cell">Total</div>
</div>
<div class="table-row" ng-repeat="fs in statsFs.fileSystems | orderBy: 'mnt_point'">
<div class="table-cell text-left">{{ fs.shortMountPoint }} <span class="visible-lg-inline" ng-show="fs.name.length <= 20">({{ fs.name }})<span></div>
<div class="table-cell" ng-class="statsFs.getDecoration(fs.mountPoint, 'used')">
<span ng-show="!arguments.fs_free_space">{{ fs.used | bytes }}</span>
<span ng-show="arguments.fs_free_space">{{ fs.free | bytes }}</span>
</div>
<div class="table-cell">{{ fs.size | bytes }}</div>
</div>

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

@ -1,25 +0,0 @@
<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>

1
glances/outputs/static/html/plugins/ip.html
View File

@ -1 +0,0 @@
&nbsp;-&nbsp;<span class="title">IP</span>&nbsp;<span>{{ statsIp.address }}/{{ statsIp.maskCidr }}</span>&nbsp;<span ng-if="statsIp.publicAddress" class="title">Pub</span>&nbsp;<span>{{ statsIp.publicAddress }}</span>

24
glances/outputs/static/html/plugins/load.html
View File

@ -1,24 +0,0 @@
<div class="table">
<div class="table-row">
<div class="table-cell text-left title">LOAD</div>
<div class="table-cell">{{ statsLoad.cpucore }}-core</div>
</div>
<div class="table-row">
<div class="table-cell text-left">1 min:</div>
<div class="table-cell">
{{ statsLoad.min1 | number : 2}}
</div>
</div>
<div class="table-row">
<div class="table-cell text-left">5 min:</div>
<div class="table-cell" ng-class="statsLoad.getDecoration('min5')">
{{ statsLoad.min5 | number : 2}}
</div>
</div>
<div class="table-row">
<div class="table-cell text-left">15 min:</div>
<div class="table-cell" ng-class="statsLoad.getDecoration('min15')">
{{ statsLoad.min15 | number : 2}}
</div>
</div>
</div>

20
glances/outputs/static/html/plugins/mem.html
View File

@ -1,20 +0,0 @@
<div class="table">
<div class="table-row">
<div class="table-cell text-left title">MEM</div>
<div class="table-cell">{{ statsMem.percent }}%</div>
</div>
<div class="table-row">
<div class="table-cell text-left">total:</div>
<div class="table-cell">{{ statsMem.total | bytes }}</div>
</div>
<div class="table-row">
<div class="table-cell text-left">used:</div>
<div class="table-cell" ng-class="statsMem.getDecoration('used')">
{{ statsMem.used | bytes:2 }}
</div>
</div>
<div class="table-row">
<div class="table-cell text-left">free:</div>
<div class="table-cell">{{ statsMem.free | bytes }}</div>
</div>
</div>

18
glances/outputs/static/html/plugins/mem_more.html
View File

@ -1,18 +0,0 @@
<div class="table">
<div class="table-row" ng-show="statsMem.active != undefined">
<div class="table-cell text-left">active:</div>
<div class="table-cell">{{ statsMem.active | bytes }}</div>
</div>
<div class="table-row" ng-show="statsMem.inactive != undefined">
<div class="table-cell text-left">inactive:</div>
<div class="table-cell">{{ statsMem.inactive | bytes }}</div>
</div>
<div class="table-row" ng-show="statsMem.buffers != undefined">
<div class="table-cell text-left">buffers:</div>
<div class="table-cell">{{ statsMem.buffers | bytes }}</div>
</div>
<div class="table-row" ng-show="statsMem.cached != undefined">
<div class="table-cell text-left">cached:</div>
<div class="table-cell">{{ statsMem.cached | bytes }}</div>
</div>
</div>

20
glances/outputs/static/html/plugins/memswap.html
View File

@ -1,20 +0,0 @@
<div class="table">
<div class="table-row">
<div class="table-cell text-left title">SWAP</div>
<div class="table-cell">{{ statsMemSwap.percent }}%</div>
</div>
<div class="table-row">
<div class="table-cell text-left">total:</div>
<div class="table-cell">{{ statsMemSwap.total | bytes }}</div>
</div>
<div class="table-row">
<div class="table-cell text-left">used:</div>
<div class="table-cell" ng-class="statsMemSwap.getDecoration('used')">
{{ statsMemSwap.used | bytes }}
</div>
</div>
<div class="table-row">
<div class="table-cell text-left">free:</div>
<div class="table-cell">{{ statsMemSwap.free | bytes }}</div>
</div>
</div>

28
glances/outputs/static/html/plugins/network.html
View File

@ -1,28 +0,0 @@
<div class="table-row">
<div class="table-cell text-left title">NETWORK</div>
<div class="table-cell" ng-show="!arguments.network_cumul && !arguments.network_sum">Rx/s</div>
<div class="table-cell" ng-show="!arguments.network_cumul && !arguments.network_sum">Tx/s</div>
<div class="table-cell" ng-show="!arguments.network_cumul && arguments.network_sum"></div>
<div class="table-cell" ng-show="!arguments.network_cumul && arguments.network_sum">Rx+Tx/s</div>
<div class="table-cell" ng-show="arguments.network_cumul && !arguments.network_sum">Rx</div>
<div class="table-cell" ng-show="arguments.network_cumul && !arguments.network_sum">Tx</div>
<div class="table-cell" ng-show="arguments.network_cumul && arguments.network_sum"></div>
<div class="table-cell" ng-show="arguments.network_cumul && arguments.network_sum">Rx+Tx</div>
</div>
<div class="table-row" ng-repeat="network in statsNetwork.networks | orderBy: 'interfaceName'">
<div class="table-cell text-left">{{ network.interfaceName | min_size }}</div>
<div class="table-cell" ng-show="!arguments.network_cumul && !arguments.network_sum">{{ arguments.byte ? (network.rx / network.time_since_update | bytes) : (network.rx / network.time_since_update | bits) }}</div>
<div class="table-cell" ng-show="!arguments.network_cumul && !arguments.network_sum">{{ arguments.byte ? (network.tx / network.time_since_update | bytes) : (network.tx / network.time_since_update | bits) }}</div>
<div class="table-cell" ng-show="!arguments.network_cumul && arguments.network_sum"></div>
<div class="table-cell" ng-show="!arguments.network_cumul && arguments.network_sum">{{ arguments.byte ? (network.cx / network.time_since_update | bytes) : (network.cx / network.time_since_update | bits) }}</div>
<div class="table-cell" ng-show="arguments.network_cumul && !arguments.network_sum">{{ arguments.byte ? (network.cumulativeRx | bytes) : (network.cumulativeRx | bits) }}</div>
<div class="table-cell" ng-show="arguments.network_cumul && !arguments.network_sum">{{ arguments.byte ? (network.cumulativeTx | bytes) : (network.cumulativeTx | bits) }}</div>
<div class="table-cell" ng-show="arguments.network_cumul && arguments.network_sum"></div>
<div class="table-cell" ng-show="arguments.network_cumul && arguments.network_sum">{{ arguments.byte ? (network.cumulativeCx | bytes) : (network.cumulativeCx | bits) }}</div>
</div>

34
glances/outputs/static/html/plugins/per_cpu.html
View File

@ -1,34 +0,0 @@
<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 statsPerCpu.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 statsPerCpu.cpus" ng-class="statsPerCpu.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 statsPerCpu.cpus" ng-class="statsPerCpu.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 statsPerCpu.cpus">{{ percpu.idle }}%</div>
</div>
<div class="table-row" ng-show="statsPerCpu.cpus[0].iowait">
<div class="table-cell text-left">iowait:</div>
<div class="table-cell" ng-repeat="percpu in statsPerCpu.cpus" ng-class="statsPerCpu.getSystemAlert(percpu)">
{{ percpu.iowait }}%
</div>
</div>
<div class="table-row" ng-show="statsPerCpu.cpus[0].steal">
<div class="table-cell text-left">steal:</div>
<div class="table-cell" ng-repeat="percpu in statsPerCpu.cpus" ng-class="statsPerCpu.getSystemAlert(percpu)">
{{ percpu.steal }}%
</div>
</div>
</div>

10
glances/outputs/static/html/plugins/ports.html
View File

@ -1,10 +0,0 @@
<div class="table-row" ng-repeat="port in statsPorts.ports">
<div class="table-cell text-left">{{(port.description ? port.description : port.host + ' ' + port.port) | min_size: 20}}</div>
<div class="table-cell"></div>
<div ng-switch="port.status" ng-class="statsPorts.getDecoration(port)" class="table-cell">
<span ng-switch-when="null">Scanning</span>
<span ng-switch-when="false">Timeout</span>
<span ng-switch-when="true">Open</span>
<span ng-switch-default>{{port.status * 1000.0 | number:0}}ms</span>
</div>
</div>

6
glances/outputs/static/html/plugins/processcount.html
View File

@ -1,6 +0,0 @@
<span class="title">TASKS</span>
<span>{{ statsProcessCount.total }} ({{ statsProcessCount.thread }} thr),</span>
<span>{{ statsProcessCount.running }} run,</span>
<span>{{ statsProcessCount.sleeping }} slp,</span>
<span>{{ statsProcessCount.stopped }} oth</span>
<span> sorted {{ sorter.auto ? 'automatically' : '' }} by {{ sorter.getColumnLabel(sorter.column) }}, flat view</span>

33
glances/outputs/static/html/plugins/processlist.html
View File

@ -1,33 +0,0 @@
<div class="table">
<div class="table-row">
<div sortable-th sorter="sorter" column="cpu_percent" class="table-cell">CPU%</div>
<div sortable-th sorter="sorter" column="memory_percent" class="table-cell">MEM%</div>
<div class="table-cell hidden-xs hidden-sm">VIRT</div>
<div class="table-cell hidden-xs hidden-sm">RES</div>
<div class="table-cell">PID</div>
<div sortable-th sorter="sorter" column="username" class="table-cell text-left">USER</div>
<div class="table-cell">NI</div>
<div class="table-cell">S</div>
<div sortable-th sorter="sorter" column="timemillis" class="table-cell hidden-xs hidden-sm">TIME+</div>
<div sortable-th sorter="sorter" column="io_read" class="table-cell hidden-xs hidden-sm" ng-show="statsProcessList.ioReadWritePresent">IOR/s</div>
<div sortable-th sorter="sorter" column="io_write" class="table-cell hidden-xs hidden-sm" ng-show="statsProcessList.ioReadWritePresent">IOW/s</div>
<div sortable-th sorter="sorter" column="name" class="table-cell text-left">Command</div>
</div>
<div class="table-row" ng-repeat="process in statsProcessList.processes | orderBy:sorter.column:sorter.isReverseColumn(sorter.column) | limitTo: statsProcessList.getLimit()">
<div class="table-cell" ng-class="statsProcessList.getCpuPercentAlert(process)">{{process.cpu_percent | number:1}}</div>
<div class="table-cell" ng-class="statsProcessList.getMemoryPercentAlert(process)">{{process.memory_percent | number:1}}</div>
<div class="table-cell hidden-xs hidden-sm">{{process.memvirt | bytes}}</div>
<div class="table-cell hidden-xs hidden-sm">{{process.memres | bytes}}</div>
<div class="table-cell">{{process.pid}}</div>
<div class="table-cell text-left">{{process.username}}</div>
<div class="table-cell" ng-class="{nice: process.isNice}">{{process.nice | exclamation}}</div>
<div class="table-cell" ng-class="{status: process.status == 'R'}">{{process.status}}</div>
<div class="table-cell hidden-xs hidden-sm">
<span ng-show="process.timeplus.hours > 0" class="highlight">{{ process.timeplus.hours }}h</span>{{ process.timeplus.minutes | leftPad:2:'0' }}:{{ process.timeplus.seconds | leftPad:2:'0' }}<span ng-show="process.timeplus.hours <= 0">.{{ process.timeplus.milliseconds | leftPad:2:'0' }}</span>
</div>
<div class="table-cell hidden-xs hidden-sm" ng-show="statsProcessList.ioReadWritePresent">{{process.ioRead}}</div>
<div class="table-cell hidden-xs hidden-sm" ng-show="statsProcessList.ioReadWritePresent">{{process.ioWrite}}</div>
<div class="table-cell text-left" ng-show="arguments.process_short_name">{{process.name}}</div>
<div class="table-cell text-left" ng-show="!arguments.process_short_name">{{process.cmdline}}</div>
</div>
</div>

57
glances/outputs/static/html/plugins/quicklook.html
View File

@ -1,57 +0,0 @@
<div class="cpu-name">
{{ statsQuicklook.cpu_name }}
</div>
<div class="table">
<div class="table-row" ng-show="!arguments.percpu">
<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="arguments.percpu" 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>

9
glances/outputs/static/html/plugins/sensors.html
View File

@ -1,9 +0,0 @@
<div class="table-row">
<div class="table-cell text-left title">SENSORS</div>
</div>
<div class="table-row" ng-repeat="sensor in statsSensors.sensors">
<div class="table-cell text-left">{{ sensor.label }}</div>
<div class="table-cell">{{ sensor.unit }}</div>
<div class="table-cell" ng-class="statsSensors.getAlert(sensor)">{{ sensor.value }}</div>
</div>

4
glances/outputs/static/html/plugins/system.html
View File

@ -1,4 +0,0 @@
<span ng-if="is_disconnected" class="critical">Disconnected from</span>
<span class="title">{{ statsSystem.hostname }}</span>
<span ng-show="statsSystem.isLinux()" class="hidden-xs hidden-sm">({{ statsSystem.humanReadableName }} / {{ statsSystem.os.name }} {{ statsSystem.os.version }})</span>
<span ng-show="!statsSystem.isLinux()" class="hidden-xs hidden-sm">({{ statsSystem.os.name }} {{ statsSystem.os.version }} {{ statsSystem.platform }})</span>

1
glances/outputs/static/html/plugins/uptime.html
View File

@ -1 +0,0 @@
<span>Uptime: {{ statsUptime.uptime }}</span>

10
glances/outputs/static/html/plugins/wifi.html
View File

@ -1,10 +0,0 @@
<div class="table-row">
<div class="table-cell text-left title">WIFI</div>
<div class="table-cell"></div>
<div class="table-cell">dBm</div>
</div>
<div class="table-row" ng-repeat="hotspot in statsWifi.hotspots | orderBy: 'ssid'">
<div class="table-cell text-left">{{ hotspot.ssid|limitTo:20 }} <span ng-if="hotspot.encrypted">{{ hotspot.encryption_type }}</span></div>
<div class="table-cell"></div>
<div class="table-cell" ng-class="statsWifi.getDecoration(hotspot, 'signal')">{{ hotspot.signal }}</div>
</div>

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

@ -1,88 +0,0 @@
<div ng-show="!dataLoaded" class="container-fluid" id="loading-page">
<div class="glances-logo"></div>
<div class="loader">Loading...</div>
</div>
<div ng-show="arguments.help_tag" class="container-fluid" ng-include src="'help.html'"></div>
<div ng-show="dataLoaded && !arguments.help_tag" class="container-fluid">
<div class="top-plugin">
<div class="row">
<div class="col-sm-24">
<div class="pull-left">
<section id="system" ng-include src="'plugins/system.html'"></section>
</div>
<div class="pull-left">
<section id="ip" ng-if="statsIp.address != undefined && !arguments.disable_ip" ng-include src="'plugins/ip.html'"></section>
</div>
<div class="pull-right">
<section id="uptime" ng-include src="'plugins/uptime.html'"></section>
</div>
</div>
</div>
<div class="row" ng-if="statsCloud.getProvider()">
<div class="col-sm-24">
<div class="pull-left">
<section id="cloud" ng-include src="'plugins/cloud.html'"></section>
</div>
</div>
</div>
</div>
<div class="row">
<div class="hidden-xs hidden-sm hidden-md col-lg-6" ng-if="!arguments.disable_quicklook">
<section id="quicklook" class="plugin" ng-include src="'plugins/quicklook.html'"></section>
</div>
<div class="col-sm-6 col-md-8 col-lg-6" ng-if="!arguments.disable_cpu && !arguments.percpu">
<section id="cpu" class="plugin" ng-include src="'plugins/cpu.html'"></section>
</div>
<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 && !(!arguments.disable_gpu && 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">
<section id="memswap" class="plugin" ng-include src="'plugins/memswap.html'"></section>
</div>
<div class="col-sm-6 col-md-4 col-lg-3" ng-if="!arguments.disable_load">
<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-6 sidebar" ng-show="!arguments.disable_left_sidebar">
<div class="table">
<section id="network" class="plugin table-row-group" ng-show="!arguments.disable_network" ng-include src="'plugins/network.html'"></section>
<section id="wifi" class="plugin table-row-group" ng-show="!arguments.disable_wifi && statsWifi.hotspots.length > 0" ng-include src="'plugins/wifi.html'"></section>
<section id="ports" class="plugin table-row-group" ng-show="!arguments.disable_ports" ng-include src="'plugins/ports.html'"></section>
<section id="diskio" class="plugin table-row-group" ng-show="!arguments.disable_diskio && statsDiskio.disks.length > 0" ng-include src="'plugins/diskio.html'"></section>
<section id="fs" class="plugin table-row-group" ng-show="!arguments.disable_fs" ng-include src="'plugins/fs.html'"></section>
<section id="irq" class="plugin table-row-group" ng-show="arguments.enable_irq && statsIrq.irqs.length > 0" ng-include src="'plugins/irq.html'"></section>
<section id="folders" class="plugin table-row-group" ng-show="!arguments.disable_fs && statsFolders.folders.length > 0" ng-include src="'plugins/folders.html'"></section>
<section id="raid" class="plugin table-row-group" ng-show="statsRaid.hasDisks()" ng-include src="'plugins/raid.html'"></section>
<section id="sensors" class="plugin table-row-group" ng-show="!arguments.disable_sensors && statsSensors.sensors.length > 0" ng-include src="'plugins/sensors.html'"></section>
</div>
</div>
<div class="col-sm-18">
<section id="containers" class="plugin" ng-show="statsDocker.containers.length && !arguments.disable_docker" ng-include src="'plugins/docker.html'"></section>
<section id="alerts" ng-show="!arguments.disable_alert" ng-include src="'plugins/alerts.html'"></section>
<section id="alert" class="plugin" ng-show="!arguments.disable_alert" ng-include src="'plugins/alert.html'"></section>
<div ng-show="!arguments.disable_process">
<section id="processcount" class="plugin" ng-include src="'plugins/processcount.html'"></section>
<div class="row" ng-if="!arguments.disable_amps">
<div class="col-lg-18">
<section id="amps" class="plugin" ng-include src="'plugins/amps.html'"></section>
</div>
</div>
<section id="processlist" class="plugin" ng-include src="'plugins/processlist.html'"></section>
</div>
<div ng-show="arguments.disable_process">PROCESSES DISABLED (press 'z' to display)</div>
</div>
</div>
</div>

0
glances/outputs/static/favicon.ico → glances/outputs/static/images/favicon.ico
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.2 KiB

After

Width:  |  Height:  |  Size: 4.2 KiB

40
glances/outputs/static/js/app.js
View File

@ -1,31 +1,19 @@
var glancesApp = angular.module('glancesApp', ['ngRoute'])
var glancesApp = angular.module('glancesApp', ['glances.config', 'cfp.hotkeys'])
.config(function($routeProvider, $locationProvider) {
$routeProvider.when('/:refresh_time?', {
templateUrl : 'stats.html',
controller : 'statsController',
resolve: {
help: function(GlancesStats) {
return GlancesStats.getHelp();
},
config: function(GlancesStats) {
return GlancesStats.getConfig();
},
arguments: function(GlancesStats, $route) {
return GlancesStats.getArguments().then(function(arguments) {
var refreshTimeRoute = parseInt($route.current.params.refresh_time);
if (!isNaN(refreshTimeRoute) && refreshTimeRoute > 1) {
arguments.time = refreshTimeRoute;
}
.value('CONFIG', {})
.value('ARGUMENTS', {})
return arguments;
});
}
}
.config(function (hotkeysProvider) {
hotkeysProvider.useNgRoute = false;
hotkeysProvider.includeCheatSheet = false;
})
.run(function ($rootScope, GlancesStats) {
$rootScope.title = "Glances";
$rootScope.$on('data_refreshed', function (event, data) {
$rootScope.title = data.stats.system.hostname + ' - Glances';
});
$locationProvider.html5Mode(true);
})
.run(function($rootScope) {
$rootScope.title = "Glances";
GlancesStats.init();
});

7
glances/outputs/static/js/components/glances/component.js Normal file
View File

@ -0,0 +1,7 @@
'use strict';
glancesApp.component('glances', {
controller: GlancesController,
controllerAs: 'vm',
templateUrl: 'components/glances/view.html'
});

216
glances/outputs/static/js/components/glances/controller.js Normal file
View File

@ -0,0 +1,216 @@
'use strict';
function GlancesController($scope, GlancesStats, hotkeys, ARGUMENTS) {
var vm = this;
vm.dataLoaded = false;
vm.arguments = ARGUMENTS;
$scope.$on('data_refreshed', function (event, data) {
vm.hasGpu = data.stats.gpu.length > 0;
vm.dataLoaded = true;
});
// A => Enable/disable AMPs
hotkeys.add({
combo: 'A',
callback: function () {
ARGUMENTS.disable_amps = !ARGUMENTS.disable_amps;
}
});
// d => Show/hide disk I/O stats
hotkeys.add({
combo: 'd',
callback: function () {
ARGUMENTS.disable_diskio = !ARGUMENTS.disable_diskio;
}
});
// Q => Show/hide IRQ
hotkeys.add({
combo: 'Q',
callback: function () {
ARGUMENTS.enable_irq = !ARGUMENTS.enable_irq;
}
});
// f => Show/hide filesystem stats
hotkeys.add({
combo: 'f',
callback: function () {
ARGUMENTS.disable_fs = !ARGUMENTS.disable_fs;
}
});
// n => Show/hide network stats
hotkeys.add({
combo: 'n',
callback: function () {
ARGUMENTS.disable_network = !ARGUMENTS.disable_network;
}
});
// s => Show/hide sensors stats
hotkeys.add({
combo: 's',
callback: function () {
ARGUMENTS.disable_sensors = !ARGUMENTS.disable_sensors;
}
});
// 2 => Show/hide left sidebar
hotkeys.add({
combo: '2',
callback: function () {
ARGUMENTS.disable_left_sidebar = !ARGUMENTS.disable_left_sidebar;
}
});
// z => Enable/disable processes stats
hotkeys.add({
combo: 'z',
callback: function () {
ARGUMENTS.disable_process = !ARGUMENTS.disable_process;
}
});
// SLASH => Enable/disable short processes name
hotkeys.add({
combo: '/',
callback: function () {
ARGUMENTS.process_short_name = !ARGUMENTS.process_short_name;
}
});
// D => Enable/disable Docker stats
hotkeys.add({
combo: 'D',
callback: function () {
ARGUMENTS.disable_docker = !ARGUMENTS.disable_docker;
}
});
// b => Bytes or bits for network I/O
hotkeys.add({
combo: 'b',
callback: function () {
ARGUMENTS.byte = !ARGUMENTS.byte;
}
});
// 'B' => Switch between bit/s and IO/s for Disk IO
hotkeys.add({
combo: 'B',
callback: function () {
ARGUMENTS.diskio_iops = !ARGUMENTS.diskio_iops;
}
});
// l => Show/hide alert logs
hotkeys.add({
combo: 'l',
callback: function () {
ARGUMENTS.disable_alert = !ARGUMENTS.disable_alert;
}
});
// 1 => Global CPU or per-CPU stats
hotkeys.add({
combo: '1',
callback: function () {
ARGUMENTS.percpu = !ARGUMENTS.percpu;
}
});
// h => Show/hide this help screen
hotkeys.add({
combo: 'h',
callback: function () {
ARGUMENTS.help_tag = !ARGUMENTS.help_tag;
}
});
// T => View network I/O as combination
hotkeys.add({
combo: 'T',
callback: function () {
ARGUMENTS.network_sum = !ARGUMENTS.network_sum;
}
});
// U => View cumulative network I/O
hotkeys.add({
combo: 'U',
callback: function () {
ARGUMENTS.network_cumul = !ARGUMENTS.network_cumul;
}
});
// F => Show filesystem free space
hotkeys.add({
combo: 'F',
callback: function () {
ARGUMENTS.fs_free_space = !ARGUMENTS.fs_free_space;
}
});
// 3 => Enable/disable quick look plugin
hotkeys.add({
combo: '3',
callback: function () {
ARGUMENTS.disable_quicklook = !ARGUMENTS.disable_quicklook;
}
});
// 6 => Enable/disable mean gpu
hotkeys.add({
combo: '6',
callback: function () {
ARGUMENTS.meangpu = !ARGUMENTS.meangpu;
}
});
// G => Enable/disable gpu
hotkeys.add({
combo: 'G',
callback: function () {
ARGUMENTS.disable_gpu = !ARGUMENTS.disable_gpu;
}
});
hotkeys.add({
combo: '5',
callback: function () {
ARGUMENTS.disable_quicklook = !ARGUMENTS.disable_quicklook;
ARGUMENTS.disable_cpu = !ARGUMENTS.disable_cpu;
ARGUMENTS.disable_mem = !ARGUMENTS.disable_mem;
ARGUMENTS.disable_memswap = !ARGUMENTS.disable_memswap;
ARGUMENTS.disable_load = !ARGUMENTS.disable_load;
ARGUMENTS.disable_gpu = !ARGUMENTS.disable_gpu;
}
});
// I => Show/hide IP module
hotkeys.add({
combo: 'I',
callback: function () {
ARGUMENTS.disable_ip = !ARGUMENTS.disable_ip;
}
});
// P => Enable/disable ports module
hotkeys.add({
combo: 'P',
callback: function () {
ARGUMENTS.disable_ports = !ARGUMENTS.disable_ports;
}
});
// 'W' > Enable/Disable Wifi plugin
hotkeys.add({
combo: 'W',
callback: function () {
ARGUMENTS.disable_wifi = !ARGUMENTS.disable_wifi;
}
});
}

89
glances/outputs/static/js/components/glances/view.html Normal file
View File

@ -0,0 +1,89 @@
<div>
<div ng-if="!vm.dataLoaded" class="container-fluid" id="loading-page">
<div class="glances-logo"></div>
<div class="loader">Loading...</div>
</div>
<glances-help ng-if="vm.arguments.help_tag"></glances-help>
<div ng-if="vm.dataLoaded && !vm.arguments.help_tag" class="container-fluid">
<div class="top-plugin">
<div class="row">
<div class="col-sm-24">
<div class="pull-left">
<glances-plugin-system></glances-plugin-system>
</div>
<div class="pull-left">
<glances-plugin-ip></glances-plugin-ip>
</div>
<div class="pull-right">
<glances-plugin-uptime></glances-plugin-uptime>
</div>
</div>
<div class="row">
<div class="col-sm-24">
<div class="pull-left">
<glances-plugin-cloud></glances-plugin-cloud>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="hidden-xs hidden-sm hidden-md col-lg-6" ng-if="!vm.arguments.disable_quicklook">
<glances-plugin-quicklook></glances-plugin-quicklook>
</div>
<div class="col-sm-6 col-md-8 col-lg-6" ng-if="!vm.arguments.disable_cpu && !vm.arguments.percpu">
<glances-plugin-cpu></glances-plugin-cpu>
</div>
<div class="col-sm-12 col-md-8 col-lg-6" ng-if="!vm.arguments.disable_cpu && vm.arguments.percpu">
<glances-plugin-percpu></glances-plugin-percpu>
</div>
<div class="hidden-xs hidden-sm col-md-4 col-lg-3" ng-if="!vm.arguments.disable_gpu && vm.hasGpu">
<glances-plugin-gpu></glances-plugin-gpu>
</div>
<div class="col-sm-6 col-md-4 col-lg-3" ng-if="!vm.argumentsdisable_mem">
<glances-plugin-mem></glances-plugin-mem>
</div>
<div class="hidden-xs hidden-sm col-md-4 col-lg-3"
ng-if="!vm.arguments.disable_mem && !(!vm.arguments.disable_gpu && vm.hasGpu)">
<glances-plugin-mem-more></glances-plugin-mem-more>
</div>
<div class="col-sm-6 col-md-4 col-lg-3" ng-if="!vm.arguments.disable_memswap">
<glances-plugin-memswap></glances-plugin-memswap>
</div>
<div class="col-sm-6 col-md-4 col-lg-3" ng-if="!vm.arguments.disable_load">
<glances-plugin-load></glances-plugin-load>
</div>
</div>
<div class="row">
<div class="col-sm-6 sidebar" ng-if="!vm.arguments.disable_left_sidebar">
<div class="table">
<glances-plugin-network id="plugin-network" class="plugin table-row-group"
ng-if="!vm.arguments.disable_network"></glances-plugin-network>
<glances-plugin-wifi id="plugin-wifi" class="plugin table-row-group"
ng-if="!vm.arguments.disable_wifi"></glances-plugin-wifi>
<glances-plugin-ports id="plugin-ports" class="plugin table-row-group"
ng-if="!vm.arguments.disable_ports"></glances-plugin-ports>
<glances-plugin-diskio id="plugin-diskio" class="plugin table-row-group"
ng-if="!vm.arguments.disable_diskio"></glances-plugin-diskio>
<glances-plugin-fs id="plugin-fs" class="plugin table-row-group"
ng-if="!vm.arguments.disable_fs"></glances-plugin-fs>
<glances-plugin-irq id="plugin-irq" ng-if="vm.arguments.enable_irq"></glances-plugin-irq>
<glances-plugin-folders id="plugin-folders"
ng-if="!vm.arguments.disable_folders"></glances-plugin-folders>
<glances-plugin-raid id="plugin-raid" ng-if="!vm.arguments.raid"></glances-plugin-raid>
<glances-plugin-sensors id="plugin-sensors"
ng-if="!vm.arguments.disable_sensors"></glances-plugin-sensors>
</div>
</div>
<div class="col-sm-18">
<glances-plugin-docker ng-if="!vm.arguments.disable_docker"></glances-plugin-docker>
<glances-plugin-alert ng-if="!vm.arguments.disable_alert"></glances-plugin-alert>
<glances-plugin-process></glances-plugin-process>
</div>
</div>
</div>
</div>
</div>

7
glances/outputs/static/js/components/help/component.js Normal file
View File

@ -0,0 +1,7 @@
'use strict';
glancesApp.component('glancesHelp', {
controller: GlancesHelpController,
controllerAs: 'vm',
templateUrl: 'components/help/view.html'
});

9
glances/outputs/static/js/components/help/controller.js Normal file
View File

@ -0,0 +1,9 @@
'use strict';
function GlancesHelpController($http) {
var vm = this;
$http.get('api/2/help').then(function (response) {
vm.help = response.data;
});
}

79
glances/outputs/static/js/components/help/view.html Normal file
View File

@ -0,0 +1,79 @@
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 col-lg-24">{{vm.help.version}} {{vm.help.psutil_version}}</div>
</div>
<div class="row">&nbsp;</div>
<div class="row">
<div class="col-sm-12 col-lg-24">{{vm.help.configuration_file}}</div>
</div>
<div class="row">&nbsp;</div>
<div class="row">
<div class="col-sm-12 col-lg-6">{{vm.help.sort_auto}}</div>
<div class="col-sm-12 col-lg-6">{{vm.help.sort_network}}</div>
</div>
<div class="row">
<div class="col-sm-12 col-lg-6">{{vm.help.sort_cpu}}</div>
<div class="col-sm-12 col-lg-6">{{vm.help.show_hide_alert}}</div>
</div>
<div class="row">
<div class="col-sm-12 col-lg-6">{{vm.help.sort_mem}}</div>
<div class="col-sm-12 col-lg-6">{{vm.help.percpu}}</div>
</div>
<div class="row">
<div class="col-sm-12 col-lg-6">{{vm.help.sort_user}}</div>
<div class="col-sm-12 col-lg-6">{{vm.help.show_hide_ip}}</div>
</div>
<div class="row">
<div class="col-sm-12 col-lg-6">{{vm.help.sort_proc}}</div>
<div class="col-sm-12 col-lg-6">{{vm.help.enable_disable_docker}}</div>
</div>
<div class="row">
<div class="col-sm-12 col-lg-6">{{vm.help.sort_io}}</div>
<div class="col-sm-12 col-lg-6">{{vm.help.view_network_io_combination}}</div>
</div>
<div class="row">
<div class="col-sm-12 col-lg-6">{{vm.help.sort_cpu_times}}</div>
<div class="col-sm-12 col-lg-6">{{vm.help.view_cumulative_network}}</div>
</div>
<div class="row">
<div class="col-sm-12 col-lg-6">{{vm.help.show_hide_diskio}}</div>
<div class="col-sm-12 col-lg-6">{{vm.help.show_hide_filesytem_freespace}}</div>
</div>
<div class="row">
<div class="col-sm-12 col-lg-6">{{vm.help.show_hide_filesystem}}</div>
<div class="col-sm-12 col-lg-6">{{vm.help.show_hide_vm.help}}</div>
</div>
<div class="row">
<div class="col-sm-12 col-lg-6">{{vm.help.show_hide_network}}</div>
<div class="col-sm-12 col-lg-6">{{vm.help.diskio_iops}}</div>
</div>
<div class="row">
<div class="col-sm-12 col-lg-6">{{vm.help.show_hide_sensors}}</div>
<div class="col-sm-12 col-lg-6">{{vm.help.show_hide_top_menu}}</div>
</div>
<div class="row">
<div class="col-sm-12 col-lg-6">{{vm.help.show_hide_left_sidebar}}</div>
<div class="col-sm-12 col-lg-6">{{vm.help.show_hide_amp}}</div>
</div>
<div class="row">
<div class="col-sm-12 col-lg-6">{{vm.help.enable_disable_process_stats}}</div>
<div class="col-sm-12 col-lg-6">{{vm.help.show_hide_irq}}</div>
</div>
<div class="row">
<div class="col-sm-12 col-lg-6">{{vm.help.enable_disable_gpu}}</div>
<div class="col-sm-12 col-lg-6">{{vm.help.enable_disable_mean_gpu}}</div>
</div>
<div class="row">
<div class="col-sm-12 col-lg-6">{{vm.help.enable_disable_quick_look}}</div>
<div class="col-sm-12 col-lg-6"></div>
</div>
<div class="row">
<div class="col-sm-12 col-lg-6">{{vm.help.enable_disable_short_processname}}</div>
<div class="col-sm-12 col-lg-6"></div>
</div>
<div class="row">
<div class="col-sm-12 col-lg-6">{{vm.help.enable_disable_ports}}</div>
<div class="col-sm-12 col-lg-6"></div>
</div>
</div>

7
glances/outputs/static/js/components/plugin-alert/component.js Normal file
View File

@ -0,0 +1,7 @@
'use strict';
glancesApp.component('glancesPluginAlert', {
controller: GlancesPluginAlertController,
controllerAs: 'vm',
templateUrl: 'components/plugin-alert/view.html'
});

65
glances/outputs/static/js/components/plugin-alert/controller.js Normal file
View File

@ -0,0 +1,65 @@
'use strict';
function GlancesPluginAlertController($scope, favicoService) {
var vm = this;
var _alerts = [];
$scope.$on('data_refreshed', function (event, data) {
var alertStats = data.stats['alert'];
if (!_.isArray(alertStats)) {
alertStats = [];
}
_alerts = [];
for (var i = 0; i < alertStats.length; i++) {
var alertalertStats = alertStats[i];
var alert = {};
alert.name = alertalertStats[3];
alert.level = alertalertStats[2];
alert.begin = alertalertStats[0] * 1000;
alert.end = alertalertStats[1] * 1000;
alert.ongoing = alertalertStats[1] == -1;
alert.min = alertalertStats[6];
alert.mean = alertalertStats[5];
alert.max = alertalertStats[4];
if (!alert.ongoing) {
var duration = alert.end - alert.begin;
var seconds = parseInt((duration / 1000) % 60)
, minutes = parseInt((duration / (1000 * 60)) % 60)
, hours = parseInt((duration / (1000 * 60 * 60)) % 24);
alert.duration = _.padStart(hours, 2, '0') + ":" + _.padStart(minutes, 2, '0') + ":" + _.padStart(seconds, 2, '0');
}
_alerts.push(alert);
}
if (vm.hasOngoingAlerts()) {
favicoService.badge(vm.countOngoingAlerts());
} else {
favicoService.reset();
}
});
vm.hasAlerts = function () {
return _alerts.length > 0;
};
vm.getAlerts = function () {
return _alerts;
};
vm.count = function () {
return _alerts.length;
};
vm.hasOngoingAlerts = function () {
return _.filter(_alerts, {'ongoing': true}).length > 0;
};
vm.countOngoingAlerts = function () {
return _.filter(_alerts, {'ongoing': true}).length;
}
}

15
glances/outputs/static/js/components/plugin-alert/view.html Normal file
View File

@ -0,0 +1,15 @@
<section id="alerts">
<span class="title" ng-if="!vm.hasAlerts()">No warning or critical alert detected</span>
<span class="title" ng-if="vm.hasAlerts()">Warning or critical alerts (lasts {{vm.count()}} entries)</span>
</section>
<section id="alert" class="plugin">
<div class="table">
<div class="table-row" ng-repeat="alert in vm.getAlerts()">
<div class="table-cell text-left">
{{alert.begin | date : 'yyyy-MM-dd H:mm:ss'}} ({{ alert.ongoing ? 'ongoing' : alert.duration }}) - <span
ng-hide="alert.ongoing">{{alert.level}} on</span> <span class="{{ alert.level | lowercase }}">{{alert.name}}</span>
({{alert.max}})
</div>
</div>
</div>
</section>

7
glances/outputs/static/js/components/plugin-amps/component.js Normal file
View File

@ -0,0 +1,7 @@
'use strict';
glancesApp.component('glancesPluginAmps', {
controller: GlancesPluginAmpsController,
controllerAs: 'vm',
templateUrl: 'components/plugin-amps/view.html'
});

44
glances/outputs/static/js/components/plugin-amps/controller.js Normal file
View File

@ -0,0 +1,44 @@
'use strict';
function GlancesPluginAmpsController($scope, GlancesStats, favicoService) {
var vm = this;
vm.processes = [];
vm.$onInit = function () {
loadData(GlancesStats.getData());
};
$scope.$on('data_refreshed', function (event, data) {
loadData(data);
});
var loadData = function (data) {
var processes = data.stats['amps'];
this.processes = [];
angular.forEach(processes, function (process) {
if (process.result !== null) {
this.processes.push(process);
}
}, this);
}
vm.getDescriptionDecoration = function (process) {
var count = process.count;
var countMin = process.countmin;
var countMax = process.countmax;
var decoration = "ok";
if (count > 0) {
if ((countMin == null || count >= countMin) && (countMax == null || count <= countMax)) {
decoration = 'ok';
} else {
decoration = 'careful';
}
} else {
decoration = countMin == null ? 'ok' : 'critical';
}
return decoration;
}
}

9
glances/outputs/static/js/components/plugin-amps/view.html Normal file
View File

@ -0,0 +1,9 @@
<section id="amps" class="plugin">
<div class="table">
<div class="table-row" ng-repeat="process in vm.processes">
<div class="table-cell text-left" ng-class="vm.getDescriptionDecoration(process)">{{ process.name }}</div>
<div class="table-cell text-left">{{ process.count }}</div>
<div class="table-cell text-left process-result">{{ process.result }}</div>
</div>
</div>
</section>

7
glances/outputs/static/js/components/plugin-cloud/component.js Normal file
View File

@ -0,0 +1,7 @@
'use strict';
glancesApp.component('glancesPluginCloud', {
controller: GlancesPluginCloudController,
controllerAs: 'vm',
templateUrl: 'components/plugin-cloud/view.html'
});

25
glances/outputs/static/js/components/plugin-cloud/controller.js Normal file
View File

@ -0,0 +1,25 @@
'use strict';
function GlancesPluginCloudController($scope, GlancesStats) {
var vm = this;
vm.provider = null;
vm.instance = null;
vm.$onInit = function () {
loadData(GlancesStats.getData());
};
$scope.$on('data_refreshed', function (event, data) {
loadData(data);
});
var loadData = function (data) {
var stats = data.stats['cloud'];
if (stats['ami-id'] !== undefined) {
vm.provider = 'AWS EC2';
vm.instance = stats['instance-type'] + ' instance ' + stats['instance-id'] + ' (' + stats['region'] + ')';
}
}
}

3
glances/outputs/static/js/components/plugin-cloud/view.html Normal file
View File

@ -0,0 +1,3 @@
<section id="cloud">
<span class="title">{{ vm.provider }}</span> {{ vm.instance }}
</section>

7
glances/outputs/static/js/components/plugin-cpu/component.js Normal file
View File

@ -0,0 +1,7 @@
'use strict';
glancesApp.component('glancesPluginCpu', {
controller: GlancesPluginCpuController,
controllerAs: 'vm',
templateUrl: 'components/plugin-cpu/view.html'
});

65
glances/outputs/static/js/components/plugin-cpu/controller.js Normal file
View File

@ -0,0 +1,65 @@
'use strict';
function GlancesPluginCpuController($scope, GlancesStats) {
var vm = this;
var _view = {};
vm.total = null;
vm.user = null;
vm.system = null;
vm.idle = null;
vm.nice = null;
vm.irq = null;
vm.iowait = null;
vm.steal = null;
vm.ctx_switches = null;
vm.interrupts = null;
vm.soft_interrupts = null;
vm.syscalls = null;
vm.$onInit = function () {
loadData(GlancesStats.getData());
};
$scope.$on('data_refreshed', function (event, data) {
loadData(data);
});
var loadData = function (data) {
var stats = data.stats['cpu'];
_view = data.views['cpu'];
vm.total = stats.total;
vm.user = stats.user;
vm.system = stats.system;
vm.idle = stats.idle;
vm.nice = stats.nice;
vm.irq = stats.irq;
vm.iowait = stats.iowait;
vm.steal = stats.steal;
if (stats.ctx_switches) {
vm.ctx_switches = Math.floor(stats.ctx_switches / stats.time_since_update);
}
if (stats.interrupts) {
vm.interrupts = Math.floor(stats.interrupts / stats.time_since_update);
}
if (stats.soft_interrupts) {
vm.soft_interrupts = Math.floor(stats.soft_interrupts / stats.time_since_update);
}
if (stats.syscalls) {
vm.syscalls = Math.floor(stats.syscalls / stats.time_since_update);
}
}
this.getDecoration = function (value) {
if (_view[value] === undefined) {
return;
}
return _view[value].decoration.toLowerCase();
};
}

84
glances/outputs/static/js/components/plugin-cpu/view.html Normal file
View File

@ -0,0 +1,84 @@
<section id="cpu" class="plugin">
<div class="row">
<div class="col-sm-24 col-md-12 col-lg-8">
<div class="table">
<div class="table-row">
<div class="table-cell text-left title">CPU</div>
<div class="table-cell">{{ vm.total }}%</div>
</div>
<div class="table-row">
<div class="table-cell text-left">user:</div>
<div class="table-cell" ng-class="vm.getDecoration('user')">
{{ vm.user }}%
</div>
</div>
<div class="table-row">
<div class="table-cell text-left">system:</div>
<div class="table-cell" ng-class="vm.getDecoration('system')">
{{ vm.system }}%
</div>
</div>
<div class="table-row">
<div class="table-cell text-left">idle:</div>
<div class="table-cell">{{ vm.idle }}%</div>
</div>
</div>
</div>
<div class="hidden-xs hidden-sm col-md-12 col-lg-8">
<div class="table">
<div class="table-row" ng-show="vm.nice != undefined">
<div class="table-cell text-left">nice:</div>
<div class="table-cell">
{{ vm.nice }}%
</div>
</div>
<div class="table-row" ng-show="vm.irq != undefined">
<div class="table-cell text-left">irq:</div>
<div class="table-cell">
{{ vm.irq }}%
</div>
</div>
<div class="table-row" ng-show="vm.iowait != undefined">
<div class="table-cell text-left">iowait:</div>
<div class="table-cell" ng-class="vm.getDecoration('iowait')">
{{ vm.iowait }}%
</div>
</div>
<div class="table-row" ng-show="vm.steal != undefined">
<div class="table-cell text-left">steal:</div>
<div class="table-cell" ng-class="vm.getDecoration('steal')">
{{ vm.steal }}%
</div>
</div>
</div>
</div>
<div class="hidden-xs hidden-sm hidden-md col-lg-8">
<div class="table">
<div class="table-row" ng-if="vm.ctx_switches">
<div class="table-cell text-left">ctx_sw:</div>
<div class="table-cell" ng-class="vm.getDecoration('ctx_switches')">
{{ vm.ctx_switches }}
</div>
</div>
<div class="table-row" ng-if="vm.interrupts">
<div class="table-cell text-left">inter:</div>
<div class="table-cell">
{{ vm.interrupts }}
</div>
</div>
<div class="table-row" ng-if="vm.soft_interrupts">
<div class="table-cell text-left">sw_int:</div>
<div class="table-cell">
{{ vm.soft_interrupts }}
</div>
</div>
<div class="table-row" ng-if="!statsSystem.isLinux() && vm.syscalls">
<div class="table-cell text-left">syscal:</div>
<div class="table-cell">
{{ vm.syscalls }}
</div>
</div>
</div>
</div>
</div>
</section>

7
glances/outputs/static/js/components/plugin-diskio/component.js Normal file
View File

@ -0,0 +1,7 @@
'use strict';
glancesApp.component('glancesPluginDiskio', {
controller: GlancesPluginDiskioController,
controllerAs: 'vm',
templateUrl: 'components/plugin-diskio/view.html'
});

39
glances/outputs/static/js/components/plugin-diskio/controller.js Normal file
View File

@ -0,0 +1,39 @@
'use strict';
function GlancesPluginDiskioController($scope, $filter, GlancesStats, ARGUMENTS) {
var vm = this;
vm.arguments = ARGUMENTS;
vm.disks = [];
vm.$onInit = function () {
loadData(GlancesStats.getData());
};
$scope.$on('data_refreshed', function (event, data) {
loadData(data);
});
var loadData = function (data) {
var stats = data.stats['diskio'];
stats = $filter('orderBy')(stats, 'disk_name');
vm.disks = [];
for (var i = 0; i < stats.length; i++) {
var diskioData = stats[i];
var timeSinceUpdate = diskioData['time_since_update'];
vm.disks.push({
'name': diskioData['disk_name'],
'bitrate': {
'txps': $filter('bytes')(diskioData['read_bytes'] / timeSinceUpdate),
'rxps': $filter('bytes')(diskioData['write_bytes'] / timeSinceUpdate)
},
'count': {
'txps': $filter('bytes')(diskioData['read_count'] / timeSinceUpdate),
'rxps': $filter('bytes')(diskioData['write_count'] / timeSinceUpdate)
},
'alias': diskioData['alias'] !== undefined ? diskioData['alias'] : null
});
}
}
}

16
glances/outputs/static/js/components/plugin-diskio/view.html Normal file
View File

@ -0,0 +1,16 @@
<div class="table-row" ng-if="vm.disks.length > 0">
<div class="table-cell text-left title">DISK I/O</div>
<div class="table-cell" ng-show="!vm.arguments.diskio_iops">R/s</div>
<div class="table-cell" ng-show="!vm.arguments.diskio_iops">W/s</div>
<div class="table-cell" ng-show="vm.arguments.diskio_iops">IOR/s</div>
<div class="table-cell" ng-show="vm.arguments.diskio_iops">IOW/s</div>
</div>
<div class="table-row" ng-repeat="disk in vm.disks track by name">
<div class="table-cell text-left">{{(disk.alias ? disk.alias : disk.name) | min_size}}</div>
<div class="table-cell" ng-show="!vm.arguments.diskio_iops">{{disk.bitrate.txps }}</div>
<div class="table-cell" ng-show="!vm.arguments.diskio_iops">{{disk.bitrate.rxps }}</div>
<div class="table-cell" ng-show="vm.arguments.diskio_iops">{{disk.count.txps }}</div>
<div class="table-cell" ng-show="vm.arguments.diskio_iops">{{disk.count.rxps }}</div>
</div>

7
glances/outputs/static/js/components/plugin-docker/component.js Normal file
View File

@ -0,0 +1,7 @@
'use strict';
glancesApp.component('glancesPluginDocker', {
controller: GlancesPluginDockerController,
controllerAs: 'vm',
templateUrl: 'components/plugin-docker/view.html'
});

35
glances/outputs/static/js/services/plugins/docker.js → glances/outputs/static/js/components/plugin-docker/controller.js
View File

@ -1,19 +1,28 @@
glancesApp.service('GlancesPluginDocker', function(GlancesPlugin) {
'use strict';
var _pluginName = "docker";
this.containers = [];
this.version = null;
function GlancesPluginDockerController($scope, GlancesStats) {
var vm = this;
vm.containers = [];
vm.version = null;
this.setData = function(data, views) {
data = data[_pluginName];
vm.$onInit = function () {
loadData(GlancesStats.getData());
};
$scope.$on('data_refreshed', function (event, data) {
loadData(data);
});
var loadData = function (data) {
var stats = data.stats['docker'];
this.containers = [];
if(_.isEmpty(data)) {
if (_.isEmpty(stats)) {
return;
}
for (var i = 0; i < data['containers'].length; i++) {
var containerData = data['containers'][i];
for (var i = 0; i < stats['containers'].length; i++) {
var containerData = stats['containers'][i];
var container = {
'id': containerData.Id,
@ -31,9 +40,9 @@ glancesApp.service('GlancesPluginDocker', function(GlancesPlugin) {
'image': containerData.Image
};
this.containers.push(container);
vm.containers.push(container);
}
this.version = data['version']['Version'];
};
});
vm.version = stats['version']['Version'];
}
}

29
glances/outputs/static/js/components/plugin-docker/view.html Normal file
View File

@ -0,0 +1,29 @@
<section id="containers" class="plugin" ng-if="vm.containers.length">
<span class="title">CONTAINERS</span> {{ vm.containers.length }} (served by Docker {{ vm.version }})
<div class="table">
<div class="table-row">
<div class="table-cell text-left">Name</div>
<div class="table-cell">Status</div>
<div class="table-cell">CPU%</div>
<div class="table-cell">MEM</div>
<div class="table-cell">IOR/s</div>
<div class="table-cell">IOW/s</div>
<div class="table-cell">RX/s</div>
<div class="table-cell">TX/s</div>
<div class="table-cell text-left">Command</div>
</div>
<div class="table-row" ng-repeat="container in vm.containers">
<div class="table-cell text-left">{{ container.name }}</div>
<div class="table-cell" ng-class="container.status == 'Paused' ? 'careful' : 'ok'">{{ container.status }}
</div>
<div class="table-cell">{{ container.cpu | number:1 }}</div>
<div class="table-cell">{{ container.memory | bytes }}</div>
<div class="table-cell">{{ container.ior / container.io_time_since_update | bits }}</div>
<div class="table-cell">{{ container.iow / container.io_time_since_update | bits }}</div>
<div class="table-cell">{{ container.rx / container.net_time_since_update | bits }}</div>
<div class="table-cell">{{ container.tx / container.net_time_since_update | bits }}</div>
<div class="table-cell text-left">{{ container.command }}</div>
</div>
</div>
</section>

7
glances/outputs/static/js/components/plugin-folders/component.js Normal file
View File

@ -0,0 +1,7 @@
'use strict';
glancesApp.component('glancesPluginFolders', {
controller: GlancesPluginFsController,
controllerAs: 'vm',
templateUrl: 'components/plugin-folders/view.html'
});

34
glances/outputs/static/js/services/plugins/folders.js → glances/outputs/static/js/components/plugin-folders/controller.js
View File

@ -1,13 +1,23 @@
glancesApp.service('GlancesPluginFolders', function() {
var _pluginName = "folders";
this.folders = [];
'use strict';
this.setData = function(data, views) {
data = data[_pluginName];
this.folders = [];
function GlancesPluginFoldersController($scope, GlancesStats) {
var vm = this;
vm.folders = [];
for (var i = 0; i < data.length; i++) {
var folderData = data[i];
vm.$onInit = function () {
loadData(GlancesStats.getData());
};
$scope.$on('data_refreshed', function (event, data) {
loadData(data);
});
var loadData = function (data) {
var stats = data.stats['folders'];
vm.folders = [];
for (var i = 0; i < stats.length; i++) {
var folderData = stats[i];
var folder = {
'path': folderData['path'],
@ -17,11 +27,11 @@ glancesApp.service('GlancesPluginFolders', function() {
'critical': folderData['critical']
};
this.folders.push(folder);
vm.folders.push(folder);
}
};
}
this.getDecoration = function(folder) {
vm.getDecoration = function (folder) {
if (!Number.isInteger(folder.size)) {
return;
@ -37,4 +47,4 @@ glancesApp.service('GlancesPluginFolders', function() {
return 'ok';
};
});
}

8
glances/outputs/static/js/components/plugin-folders/view.html Normal file
View File

@ -0,0 +1,8 @@
<div class="table-row" ng-if="vm.folders.length > 0">
<div class="table-cell text-left title">FOLDERS</div>
<div class="table-cell">Size</div>
</div>
<div class="table-row" ng-repeat="folder in vm.folders">
<div class="table-cell text-left">{{ folder.path }}</div>
<div class="table-cell" ng-class="vm.getDecoration(folder)">{{ folder.size | bytes }}</div>
</div>

7
glances/outputs/static/js/components/plugin-fs/component.js Normal file
View File

@ -0,0 +1,7 @@
'use strict';
glancesApp.component('glancesPluginFs', {
controller: GlancesPluginFsController,
controllerAs: 'vm',
templateUrl: 'components/plugin-fs/view.html'
});

51
glances/outputs/static/js/components/plugin-fs/controller.js Normal file
View File

@ -0,0 +1,51 @@
'use strict';
function GlancesPluginFsController($scope, $filter, GlancesStats, ARGUMENTS) {
var vm = this;
var _view = {};
vm.arguments = ARGUMENTS;
vm.fileSystems = [];
vm.$onInit = function () {
loadData(GlancesStats.getData());
};
$scope.$on('data_refreshed', function (event, data) {
loadData(data);
});
var loadData = function (data) {
var stats = data.stats['fs'];
_view = data.views['fs'];
vm.fileSystems = [];
for (var i = 0; i < stats.length; i++) {
var fsData = stats[i];
var shortMountPoint = fsData['mnt_point'];
if (shortMountPoint.length > 9) {
shortMountPoint = '_' + fsData['mnt_point'].slice(-8);
}
vm.fileSystems.push(fs = {
'name': fsData['device_name'],
'mountPoint': fsData['mnt_point'],
'shortMountPoint': shortMountPoint,
'percent': fsData['percent'],
'size': fsData['size'],
'used': fsData['used'],
'free': fsData['free']
});
}
vm.fileSystems = $filter('orderBy')(vm.fileSystems, 'mnt_point');
};
vm.getDecoration = function (mountPoint, field) {
if (_view[mountPoint][field] == undefined) {
return;
}
return _view[mountPoint][field].decoration.toLowerCase();
};
}

18
glances/outputs/static/js/components/plugin-fs/view.html Normal file
View File

@ -0,0 +1,18 @@
<div class="table-row">
<div class="table-cell text-left title">FILE SYS</div>
<div class="table-cell">
<span ng-show="!vm.arguments.fs_free_space">Used</span>
<span ng-show="vm.arguments.fs_free_space">Free</span>
</div>
<div class="table-cell">Total</div>
</div>
<div class="table-row" ng-repeat="fs in vm.fileSystems">
<div class="table-cell text-left">{{ fs.shortMountPoint }} <span class="visible-lg-inline"
ng-show="fs.name.length <= 20">({{ fs.name }})<span>
</div>
<div class="table-cell" ng-class="vm.getDecoration(fs.mountPoint, 'used')">
<span ng-show="!vm.arguments.fs_free_space">{{ fs.used | bytes }}</span>
<span ng-show="vm.arguments.fs_free_space">{{ fs.free | bytes }}</span>
</div>
<div class="table-cell">{{ fs.size | bytes }}</div>
</div>

7
glances/outputs/static/js/components/plugin-gpu/component.js Normal file
View File

@ -0,0 +1,7 @@
'use strict';
glancesApp.component('glancesPluginGpu', {
controller: GlancesPluginGpuController,
controllerAs: 'vm',
templateUrl: 'components/plugin-gpu/view.html'
});

67
glances/outputs/static/js/components/plugin-gpu/controller.js Normal file
View File

@ -0,0 +1,67 @@
'use strict';
function GlancesPluginGpuController($scope, GlancesStats, ARGUMENTS) {
var vm = this;
vm.arguments = ARGUMENTS;
var _view = {};
vm.gpus = [];
vm.name = "GPU";
vm.mean = {};
vm.$onInit = function () {
loadData(GlancesStats.getData());
};
$scope.$on('data_refreshed', function (event, data) {
loadData(data);
});
var loadData = function (data) {
var stats = data.stats['gpu'];
_view = data.views['gpu'];
if (stats.length === 0) {
return;
}
vm.gpus = [];
vm.name = "GPU";
vm.mean = {
proc: null,
mem: null
};
var sameName = true;
for (var i = 0; i < stats.length; i++) {
var gpuData = stats[i];
var gpu = gpuData;
vm.mean.proc += gpu.proc;
vm.mean.mem += gpu.mem;
vm.gpus.push(gpu);
}
if (stats.length === 1) {
vm.name = stats[0].name;
} else if (sameName) {
vm.name = stats.length + ' GPU ' + stats[0].name;
}
vm.mean.proc = vm.mean.proc / stats.length;
vm.mean.mem = vm.mean.mem / stats.length;
}
vm.getDecoration = function (gpuId, value) {
if (_view[gpuId][value] == undefined) {
return;
}
return _view[gpuId][value].decoration.toLowerCase();
};
vm.getMeanDecoration = function (value) {
return vm.getDecoration(0, value);
};
}

32
glances/outputs/static/js/components/plugin-gpu/view.html Normal file
View File

@ -0,0 +1,32 @@
<section id="gpu" class="plugin">
<div class="gpu-name title">
{{ vm.name }}
</div>
<div class="table">
<div class="table-row" ng-if="arguments.meangpu || vm.gpus.length === 1">
<div class="table-cell text-left">proc:</div>
<div class="table-cell" ng-class="vm.getMeanDecoration('proc')" ng-if="vm.mean.proc">{{ vm.mean.proc |
number : 0 }}%
</div>
<div class="table-cell" ng-if="!vm.mean.proc">N/A</div>
</div>
<div class="table-row" ng-if="arguments.meangpu || vm.gpus.length === 1">
<div class="table-cell text-left">mem:</div>
<div class="table-cell" ng-class="vm.getMeanDecoration('mem')" ng-if="vm.mean.mem">{{ vm.mean.mem | number :
0 }}%
</div>
<div class="table-cell" ng-if="!vm.mean.mem">N/A</div>
</div>
<div class="table-row" ng-if="!arguments.meangpu && vm.gpus.length > 1" ng-repeat="gpu in vm.gpus">
<div class="table-cell text-left">
{{ gpu.gpu_id }}:
<span ng-class="vm.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="vm.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>
</section>

7
glances/outputs/static/js/components/plugin-ip/component.js Normal file
View File

@ -0,0 +1,7 @@
'use strict';
glancesApp.component('glancesPluginIp', {
controller: GlancesPluginIpController,
controllerAs: 'vm',
templateUrl: 'components/plugin-ip/view.html'
});

30
glances/outputs/static/js/components/plugin-ip/controller.js Normal file
View File

@ -0,0 +1,30 @@
'use strict';
function GlancesPluginIpController($scope, GlancesStats, ARGUMENTS) {
var vm = this;
vm.arguments = ARGUMENTS;
vm.address = null;
vm.gateway = null;
vm.mask = null;
vm.maskCidr = null;
vm.publicAddress = null;
vm.$onInit = function () {
loadData(GlancesStats.getData());
};
$scope.$on('data_refreshed', function (event, data) {
loadData(data);
});
var loadData = function (data) {
var ipStats = data.stats['ip'];
vm.address = ipStats.address;
vm.gateway = ipStats.gateway;
vm.mask = ipStats.mask;
vm.maskCidr = ipStats.mask_cidr;
vm.publicAddress = ipStats.public_address
}
}

4
glances/outputs/static/js/components/plugin-ip/view.html Normal file
View File

@ -0,0 +1,4 @@
<section id="ip" ng-if="vm.address != undefined && !vm.arguments.disable_ip">
&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>
</section>

7
glances/outputs/static/js/components/plugin-irq/component.js Normal file
View File

@ -0,0 +1,7 @@
'use strict';
glancesApp.component('glancesPluginIrq', {
controller: GlancesPluginIrqController,
controllerAs: 'vm',
templateUrl: 'components/plugin-irq/view.html'
});

30
glances/outputs/static/js/components/plugin-irq/controller.js Normal file
View File

@ -0,0 +1,30 @@
'use strict';
function GlancesPluginIrqController($scope, GlancesStats) {
var vm = this;
vm.irqs = [];
vm.$onInit = function () {
loadData(GlancesStats.getData());
};
$scope.$on('data_refreshed', function (event, data) {
loadData(data);
});
var loadData = function (data) {
var stats = data.stats['irq'];
vm.irqs = [];
for (var i = 0; i < stats.length; i++) {
var IrqData = stats[i];
var irq = {
'irq_line': IrqData['irq_line'],
'irq_rate': IrqData['irq_rate']
};
vm.irqs.push(irq);
}
}
}

4
glances/outputs/static/html/plugins/irq.html → glances/outputs/static/js/components/plugin-irq/view.html
View File

@ -1,9 +1,9 @@
<div class="table-row">
<div class="table-row" ng-if="vm.irqs.length > 0">
<div class="table-cell text-left title">IRQ</div>
<div class="table-cell"></div>
<div class="table-cell">Rate/s</div>
</div>
<div class="table-row" ng-repeat="irq in statsIrq.irqs">
<div class="table-row" ng-repeat="irq in vm.irqs">
<div class="table-cell text-left">{{irq.irq_line}}</div>
<div class="table-cell"></div>
<div class="table-cell"><span>{{irq.irq_rate}}</span></div>

7
glances/outputs/static/js/components/plugin-load/component.js Normal file
View File

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

37
glances/outputs/static/js/components/plugin-load/controller.js Normal file
View File

@ -0,0 +1,37 @@
'use strict';
function GlancesPluginLoadController($scope, GlancesStats) {
var vm = this;
var _view = {};
vm.cpucore = null;
vm.min1 = null;
vm.min5 = null;
vm.min15 = null;
vm.$onInit = function () {
loadData(GlancesStats.getData());
};
$scope.$on('data_refreshed', function (event, data) {
loadData(data);
});
var loadData = function (data) {
var stats = data.stats['load'];
_view = data.views['load'];
vm.cpucore = stats['cpucore'];
vm.min1 = stats['min1'];
vm.min5 = stats['min5'];
vm.min15 = stats['min15'];
}
this.getDecoration = function (value) {
if (_view[value] === undefined) {
return;
}
return _view[value].decoration.toLowerCase();
};
}

26
glances/outputs/static/js/components/plugin-load/view.html Normal file
View File

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

7
glances/outputs/static/js/components/plugin-mem-more/component.js Normal file
View File

@ -0,0 +1,7 @@
'use strict';
glancesApp.component('glancesPluginMemMore', {
controller: GlancesPluginMemMoreController,
controllerAs: 'vm',
templateUrl: 'components/plugin-mem-more/view.html'
});

27
glances/outputs/static/js/components/plugin-mem-more/controller.js Normal file
View File

@ -0,0 +1,27 @@
'use strict';
function GlancesPluginMemMoreController($scope, GlancesStats) {
var vm = this;
vm.active = null;
vm.inactive = null;
vm.buffers = null;
vm.cached = null;
vm.$onInit = function () {
loadData(GlancesStats.getData());
};
$scope.$on('data_refreshed', function (event, data) {
loadData(data);
});
var loadData = function (data) {
var stats = data.stats['mem'];
vm.active = stats['active'];
vm.inactive = stats['inactive'];
vm.buffers = stats['buffers'];
vm.cached = stats['cached'];
}
}

20
glances/outputs/static/js/components/plugin-mem-more/view.html Normal file
View File

@ -0,0 +1,20 @@
<section id="mem-more" class="plugin">
<div class="table">
<div class="table-row" ng-show="vm.active != undefined">
<div class="table-cell text-left">active:</div>
<div class="table-cell">{{ vm.active | bytes }}</div>
</div>
<div class="table-row" ng-show="vm.inactive != undefined">
<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>

7
glances/outputs/static/js/components/plugin-mem/component.js Normal file
View File

@ -0,0 +1,7 @@
'use strict';
glancesApp.component('glancesPluginMem', {
controller: GlancesPluginMemController,
controllerAs: 'vm',
templateUrl: 'components/plugin-mem/view.html'
});

37
glances/outputs/static/js/components/plugin-mem/controller.js Normal file
View File

@ -0,0 +1,37 @@
'use strict';
function GlancesPluginMemController($scope, GlancesStats) {
var vm = this;
var _view = {};
vm.percent = null;
vm.total = null;
vm.used = null;
vm.free = null;
vm.$onInit = function () {
loadData(GlancesStats.getData());
};
$scope.$on('data_refreshed', function (event, data) {
loadData(data);
});
var loadData = function (data) {
var stats = data.stats['mem'];
_view = data.views['mem'];
vm.percent = stats['percent'];
vm.total = stats['total'];
vm.used = stats['used'];
vm.free = stats['free'];
}
this.getDecoration = function (value) {
if (_view[value] === undefined) {
return;
}
return _view[value].decoration.toLowerCase();
};
}

22
glances/outputs/static/js/components/plugin-mem/view.html Normal file
View File

@ -0,0 +1,22 @@
<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>

7
glances/outputs/static/js/components/plugin-memswap/component.js Normal file
View File

@ -0,0 +1,7 @@
'use strict';
glancesApp.component('glancesPluginMemswap', {
controller: GlancesPluginMemswapController,
controllerAs: 'vm',
templateUrl: 'components/plugin-memswap/view.html'
});

37
glances/outputs/static/js/components/plugin-memswap/controller.js Normal file
View File

@ -0,0 +1,37 @@
'use strict';
function GlancesPluginMemswapController($scope, GlancesStats) {
var vm = this;
var _view = {};
vm.percent = null;
vm.total = null;
vm.used = null;
vm.free = null;
vm.$onInit = function () {
loadData(GlancesStats.getData());
};
$scope.$on('data_refreshed', function (event, data) {
loadData(data);
});
var loadData = function (data) {
var stats = data.stats['memswap'];
_view = data.views['memswap'];
vm.percent = stats['percent'];
vm.total = stats['total'];
vm.used = stats['used'];
vm.free = stats['free'];
}
this.getDecoration = function (value) {
if (_view[value] === undefined) {
return;
}
return _view[value].decoration.toLowerCase();
};
}

22
glances/outputs/static/js/components/plugin-memswap/view.html Normal file
View File

@ -0,0 +1,22 @@
<section id="memswap" class="plugin">
<div class="table">
<div class="table-row">
<div class="table-cell text-left title">SWAP</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 }}
</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>

7
glances/outputs/static/js/components/plugin-network/component.js Normal file
View File

@ -0,0 +1,7 @@
'use strict';
glancesApp.component('glancesPluginNetwork', {
controller: GlancesPluginNetworkController,
controllerAs: 'vm',
templateUrl: 'components/plugin-network/view.html'
});

39
glances/outputs/static/js/components/plugin-network/controller.js Normal file
View File

@ -0,0 +1,39 @@
'use strict';
function GlancesPluginNetworkController($scope, $filter, GlancesStats, ARGUMENTS) {
var vm = this;
vm.arguments = ARGUMENTS;
vm.networks = [];
vm.$onInit = function () {
loadData(GlancesStats.getData());
};
$scope.$on('data_refreshed', function (event, data) {
loadData(data);
});
var loadData = function (data) {
var networkStats = data.stats['network'];
vm.networks = [];
for (var i = 0; i < networkStats.length; i++) {
var networkData = networkStats[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');
}
}

40
glances/outputs/static/js/components/plugin-network/view.html Normal file
View File

@ -0,0 +1,40 @@
<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 track by network.interfaceName">
<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>

7
glances/outputs/static/js/components/plugin-percpu/component.js Normal file
View File

@ -0,0 +1,7 @@
'use strict';
glancesApp.component('glancesPluginPercpu', {
controller: GlancesPluginPercpuController,
controllerAs: 'vm',
templateUrl: 'components/plugin-percpu/view.html'
});

42
glances/outputs/static/js/components/plugin-percpu/controller.js Normal file
View File

@ -0,0 +1,42 @@
'use strict';
function GlancesPluginPercpuController($scope, GlancesStats, GlancesPluginHelper) {
var vm = this;
vm.cpus = [];
vm.$onInit = function () {
loadData(GlancesStats.getData());
};
$scope.$on('data_refreshed', function (event, data) {
loadData(data);
});
var loadData = function (data) {
var percpuStats = data.stats['percpu'];
vm.cpus = [];
for (var i = 0; i < percpuStats.length; i++) {
var cpuData = percpuStats[i];
vm.cpus.push({
'number': cpuData.cpu_number,
'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);
};
}

40
glances/outputs/static/js/components/plugin-percpu/view.html Normal file
View File

@ -0,0 +1,40 @@
<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 track by percpu.number">{{ 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 track by percpu.number"
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 track by percpu.number"
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 track by percpu.number">{{ percpu.idle }}%</div>
</div>
<div class="table-row" ng-if="vm.cpus[0].iowait">
<div class="table-cell text-left">iowait:</div>
<div class="table-cell" ng-repeat="percpu in vm.cpus track by percpu.number"
ng-class="vm.getSystemAlert(percpu)">
{{ percpu.iowait }}%
</div>
</div>
<div class="table-row" ng-if="vm.cpus[0].steal">
<div class="table-cell text-left">steal:</div>
<div class="table-cell" ng-repeat="percpu in vm.cpus track by percpu.number"
ng-class="vm.getSystemAlert(percpu)">
{{ percpu.steal }}%
</div>
</div>
</div>
</section>

7
glances/outputs/static/js/components/plugin-ports/component.js Normal file
View File

@ -0,0 +1,7 @@
'use strict';
glancesApp.component('glancesPluginPorts', {
controller: GlancesPluginPortsController,
controllerAs: 'vm',
templateUrl: 'components/plugin-ports/view.html'
});

39
glances/outputs/static/js/components/plugin-ports/controller.js Normal file
View File

@ -0,0 +1,39 @@
'use strict';
function GlancesPluginPortsController($scope, GlancesStats) {
var vm = this;
vm.ports = [];
vm.$onInit = function () {
loadData(GlancesStats.getData());
};
$scope.$on('data_refreshed', function (event, data) {
loadData(data);
});
var loadData = function (data) {
var stats = data.stats['ports'];
vm.ports = [];
angular.forEach(stats, function (port) {
vm.ports.push(port);
}, this);
}
vm.getDecoration = function (port) {
if (port.status === null) {
return 'careful';
}
if (port.status === false) {
return 'critical';
}
if (port.rtt_warning !== null && port.status > port.rtt_warning) {
return 'warning';
}
return 'ok';
};
}

12
glances/outputs/static/js/components/plugin-ports/view.html Normal file
View File

@ -0,0 +1,12 @@
<div class="table-row" ng-repeat="port in vm.ports">
<div class="table-cell text-left">{{(port.description ? port.description : port.host + ' ' + port.port) | min_size:
20}}
</div>
<div class="table-cell"></div>
<div ng-switch="port.status" ng-class="vm.getDecoration(port)" class="table-cell">
<span ng-switch-when="null">Scanning</span>
<span ng-switch-when="false">Timeout</span>
<span ng-switch-when="true">Open</span>
<span ng-switch-default>{{port.status * 1000.0 | number:0}}ms</span>
</div>
</div>

7
glances/outputs/static/js/components/plugin-process/component.js Normal file
View File

@ -0,0 +1,7 @@
'use strict';
glancesApp.component('glancesPluginProcess', {
controller: GlancesPluginProcessController,
controllerAs: 'vm',
templateUrl: 'components/plugin-process/view.html'
});

84
glances/outputs/static/js/components/plugin-process/controller.js Normal file
View File

@ -0,0 +1,84 @@
'use strict';
function GlancesPluginProcessController(ARGUMENTS, hotkeys) {
var vm = this;
vm.arguments = ARGUMENTS;
vm.sorter = {
column: "cpu_percent",
auto: true,
isReverseColumn: function (column) {
return !(column === 'username' || column === 'name');
},
getColumnLabel: function (column) {
if (_.isEqual(column, ['io_read', 'io_write'])) {
return 'io_counters';
} else {
return column;
}
}
};
// a => Sort processes automatically
hotkeys.add({
combo: 'a',
callback: function () {
vm.sorter.column = "cpu_percent";
vm.sorter.auto = true;
}
});
// c => Sort processes by CPU%
hotkeys.add({
combo: 'c',
callback: function () {
vm.sorter.column = "cpu_percent";
vm.sorter.auto = false;
}
});
// m => Sort processes by MEM%
hotkeys.add({
combo: 'm',
callback: function () {
vm.sorter.column = "memory_percent";
vm.sorter.auto = false;
}
});
// u => Sort processes by user
hotkeys.add({
combo: 'u',
callback: function () {
vm.sorter.column = "username";
vm.sorter.auto = false;
}
});
// p => Sort processes by name
hotkeys.add({
combo: 'p',
callback: function () {
vm.sorter.column = "name";
vm.sorter.auto = false;
}
});
// i => Sort processes by I/O rate
hotkeys.add({
combo: 'i',
callback: function () {
vm.sorter.column = ['io_read', 'io_write'];
vm.sorter.auto = false;
}
});
// t => Sort processes by time
hotkeys.add({
combo: 't',
callback: function () {
vm.sorter.column = "timemillis";
vm.sorter.auto = false;
}
});
}

10
glances/outputs/static/js/components/plugin-process/view.html Normal file
View File

@ -0,0 +1,10 @@
<div ng-if="!vm.arguments.disable_process">
<glances-plugin-processcount sorter="vm.sorter"></glances-plugin-processcount>
<div class="row" ng-if="!vm.arguments.disable_amps">
<div class="col-lg-18">
<glances-plugin-amps></glances-plugin-amps>
</div>
</div>
<glances-plugin-processlist sorter="vm.sorter"></glances-plugin-processlist>
</div>
<div ng-if="vm.arguments.disable_process">PROCESSES DISABLED (press 'z' to display)</div>

10
glances/outputs/static/js/components/plugin-processcount/component.js Normal file
View File

@ -0,0 +1,10 @@
'use strict';
glancesApp.component('glancesPluginProcesscount', {
controller: GlancesPluginProcesscountController,
controllerAs: 'vm',
bindings: {
sorter: '<'
},
templateUrl: 'components/plugin-processcount/view.html'
});

29
glances/outputs/static/js/components/plugin-processcount/controller.js Normal file
View File

@ -0,0 +1,29 @@
'use strict';
function GlancesPluginProcesscountController($scope, GlancesStats) {
var vm = this;
vm.total = null;
vm.running = null;
vm.sleeping = null;
vm.stopped = null;
vm.thread = null;
vm.$onInit = function () {
loadData(GlancesStats.getData());
};
$scope.$on('data_refreshed', function (event, data) {
loadData(data);
});
var loadData = function (data) {
var processcountStats = data.stats['processcount'];
vm.total = processcountStats['total'] || 0;
vm.running = processcountStats['running'] || 0;
vm.sleeping = processcountStats['sleeping'] || 0;
vm.stopped = processcountStats['stopped'] || 0;
vm.thread = processcountStats['thread'] || 0;
}
}

Some files were not shown because too many files have changed in this diff Show More