mirror of
https://github.com/nicolargo/glances.git
synced 2024-12-22 16:51:35 +03:00
Merge pull request #1103 from notFloran/webui-move-to-components
[WIP] Refactoring of the WebUI
This commit is contained in:
Nicolas Hennion
GitHub
commit
949d29a472
@ -296,8 +296,9 @@ Examples of use:
|
|||||||
if WINDOWS:
|
if WINDOWS:
|
||||||
args.webserver = True
|
args.webserver = True
|
||||||
|
|
||||||
# In web server mode
|
# In web server mode, defaul refresh time: 5 sec
|
||||||
if args.webserver:
|
if args.webserver:
|
||||||
|
args.time = 5
|
||||||
args.process_short_name = True
|
args.process_short_name = True
|
||||||
|
|
||||||
# Server or client login/password
|
# Server or client login/password
|
||||||
|
|||||||
@ -30,7 +30,7 @@ from glances.timer import Timer
|
|||||||
from glances.logger import logger
|
from glances.logger import logger
|
||||||
|
|
||||||
try:
|
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:
|
except ImportError:
|
||||||
logger.critical('Bottle module not found. Glances cannot start in web server mode.')
|
logger.critical('Bottle module not found. Glances cannot start in web server mode.')
|
||||||
sys.exit(2)
|
sys.exit(2)
|
||||||
@ -72,6 +72,9 @@ class GlancesBottle(object):
|
|||||||
# Path where the statics files are stored
|
# Path where the statics files are stored
|
||||||
self.STATIC_PATH = os.path.join(os.path.dirname(os.path.realpath(__file__)), 'static/public')
|
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):
|
def load_config(self, config):
|
||||||
"""Load the outputs section of the configuration file."""
|
"""Load the outputs section of the configuration file."""
|
||||||
# Limit the number of processes to display in the WebUI
|
# Limit the number of processes to display in the WebUI
|
||||||
@ -153,11 +156,15 @@ class GlancesBottle(object):
|
|||||||
|
|
||||||
def _index(self, refresh_time=None):
|
def _index(self, refresh_time=None):
|
||||||
"""Bottle callback for index.html (/) file."""
|
"""Bottle callback for index.html (/) file."""
|
||||||
|
|
||||||
|
if refresh_time is None:
|
||||||
|
refresh_time = self.args.time
|
||||||
|
|
||||||
# Update the stat
|
# Update the stat
|
||||||
self.__update__()
|
self.__update__()
|
||||||
|
|
||||||
# Display
|
# Display
|
||||||
return static_file("index.html", root=self.STATIC_PATH)
|
return template("index.html", refresh_time=refresh_time)
|
||||||
|
|
||||||
def _resource(self, filepath):
|
def _resource(self, filepath):
|
||||||
"""Bottle callback for resources files."""
|
"""Bottle callback for resources files."""
|
||||||
|
|||||||
@ -31,11 +31,22 @@ static
|
|||||||
|
|
|
|
||||||
|--- css
|
|--- css
|
||||||
|
|
|
|
||||||
|--- html
|
|
||||||
|
|
|
||||||
|--- images
|
|--- images
|
||||||
|
|
|
|
||||||
|--- js
|
|--- js
|
||||||
|
|
|
|
||||||
|--- public # path where builds are put
|
|--- public # path where builds are put
|
||||||
|
|
|
||||||
|
|--- templates (bottle)
|
||||||
```
|
```
|
||||||
|
|
||||||
|
## Data
|
||||||
|
|
||||||
|
Each plugin receives the data in the following format:
|
||||||
|
|
||||||
|
* stats
|
||||||
|
* views
|
||||||
|
* isBsd
|
||||||
|
* isLinux
|
||||||
|
* isMac
|
||||||
|
* isWindows
|
||||||
|
|||||||
@ -3,8 +3,15 @@
|
|||||||
"private": true,
|
"private": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"angular": "^1.5.8",
|
"angular": "^1.5.8",
|
||||||
"angular-route": "^1.5.8",
|
|
||||||
"lodash": "^4.13.1",
|
"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"
|
||||||
|
]
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -106,16 +106,16 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* Plugins */
|
/* Plugins */
|
||||||
#processlist .table-cell {
|
#processlist-plugin .table-cell {
|
||||||
padding: 0px 5px 0px 5px;
|
padding: 0px 5px 0px 5px;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
#containers .table-cell {
|
#containers-plugin .table-cell {
|
||||||
padding: 0px 10px 0px 10px;
|
padding: 0px 10px 0px 10px;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
#quicklook .progress {
|
#quicklook-plugin .progress {
|
||||||
margin-bottom: 0px;
|
margin-bottom: 0px;
|
||||||
min-width: 100px;
|
min-width: 100px;
|
||||||
background-color: #000;
|
background-color: #000;
|
||||||
@ -123,25 +123,25 @@ body {
|
|||||||
border-radius: 0px;
|
border-radius: 0px;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
}
|
}
|
||||||
#quicklook .progress-bar-ok {
|
#quicklook-plugin .progress-bar-ok {
|
||||||
background-color: #3E7B04;
|
background-color: #3E7B04;
|
||||||
}
|
}
|
||||||
#quicklook .progress-bar-careful {
|
#quicklook-plugin .progress-bar-careful {
|
||||||
background-color: #295183;
|
background-color: #295183;
|
||||||
}
|
}
|
||||||
#quicklook .progress-bar-warning {
|
#quicklook-plugin .progress-bar-warning {
|
||||||
background-color: #5D4062;
|
background-color: #5D4062;
|
||||||
}
|
}
|
||||||
#quicklook .progress-bar-critical {
|
#quicklook-plugin .progress-bar-critical {
|
||||||
background-color: #A30000;
|
background-color: #A30000;
|
||||||
}
|
}
|
||||||
#quicklook .cpu-name {
|
#quicklook-plugin .cpu-name {
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
#amps .process-result {
|
#amps-plugin .process-result {
|
||||||
max-width: 300px;
|
max-width: 300px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
white-space: pre-wrap;
|
white-space: pre-wrap;
|
||||||
@ -149,7 +149,7 @@ body {
|
|||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
|
|
||||||
#gpu .gpu-name {
|
#gpu-plugin .gpu-name {
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|||||||
@ -21,7 +21,7 @@ gulp.task('copy', function() {
|
|||||||
gulp.src('./images/*.png')
|
gulp.src('./images/*.png')
|
||||||
.pipe(gulp.dest('./public/images'));
|
.pipe(gulp.dest('./public/images'));
|
||||||
|
|
||||||
gulp.src('favicon.ico')
|
gulp.src('./images/favicon.ico')
|
||||||
.pipe(gulp.dest('./public'));
|
.pipe(gulp.dest('./public'));
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -41,8 +41,8 @@ gulp.task('build-js', function() {
|
|||||||
});
|
});
|
||||||
|
|
||||||
gulp.task('template', function () {
|
gulp.task('template', function () {
|
||||||
return gulp.src('./html/plugins/*.html')
|
return gulp.src('./js/components/**/*.html')
|
||||||
.pipe(templateCache('templates.js', {'root': 'plugins/', 'module': 'glancesApp'}))
|
.pipe(templateCache('templates.js', {'root': 'components/', 'module': 'glancesApp'}))
|
||||||
.pipe(rename({suffix: '.min'}))
|
.pipe(rename({suffix: '.min'}))
|
||||||
.pipe(gulp.dest('./public/js'));
|
.pipe(gulp.dest('./public/js'));
|
||||||
});
|
});
|
||||||
|
|||||||
@ -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"> </div>
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-sm-12 col-lg-24">{{help.configuration_file}}</div>
|
|
||||||
</div>
|
|
||||||
<div class="row"> </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>
|
|
||||||
@ -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>
|
|
||||||
@ -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>
|
|
||||||
@ -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 +0,0 @@
|
|||||||
<span class="title">{{ statsCloud.getProvider() }}</span> {{ statsCloud.getInstance() }}
|
|
||||||
@ -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>
|
|
||||||
@ -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>
|
|
||||||
@ -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>
|
|
||||||
@ -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>
|
|
||||||
@ -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>
|
|
||||||
@ -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 +0,0 @@
|
|||||||
- <span class="title">IP</span> <span>{{ statsIp.address }}/{{ statsIp.maskCidr }}</span> <span ng-if="statsIp.publicAddress" class="title">Pub</span> <span>{{ statsIp.publicAddress }}</span>
|
|
||||||
@ -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>
|
|
||||||
@ -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>
|
|
||||||
@ -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>
|
|
||||||
@ -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>
|
|
||||||
@ -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>
|
|
||||||
@ -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>
|
|
||||||
@ -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>
|
|
||||||
@ -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>
|
|
||||||
@ -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>
|
|
||||||
@ -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 }}%;">
|
|
||||||
|
|
||||||
</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 }}%;">
|
|
||||||
|
|
||||||
</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 }}%;">
|
|
||||||
|
|
||||||
</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 }}%;">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="table-cell">
|
|
||||||
{{ statsQuicklook.swap }}%
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
@ -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>
|
|
||||||
@ -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 +0,0 @@
|
|||||||
<span>Uptime: {{ statsUptime.uptime }}</span>
|
|
||||||
@ -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>
|
|
||||||
@ -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>
|
|
||||||
|
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 4.2 KiB |
@ -1,31 +1,19 @@
|
|||||||
var glancesApp = angular.module('glancesApp', ['ngRoute'])
|
var glancesApp = angular.module('glancesApp', ['glances.config', 'cfp.hotkeys'])
|
||||||
|
|
||||||
.config(function($routeProvider, $locationProvider) {
|
.value('CONFIG', {})
|
||||||
$routeProvider.when('/:refresh_time?', {
|
.value('ARGUMENTS', {})
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
return arguments;
|
.config(function (hotkeysProvider) {
|
||||||
});
|
hotkeysProvider.useNgRoute = false;
|
||||||
}
|
hotkeysProvider.includeCheatSheet = false;
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
$locationProvider.html5Mode(true);
|
|
||||||
})
|
})
|
||||||
.run(function($rootScope) {
|
|
||||||
|
.run(function ($rootScope, GlancesStats) {
|
||||||
$rootScope.title = "Glances";
|
$rootScope.title = "Glances";
|
||||||
|
|
||||||
|
$rootScope.$on('data_refreshed', function (event, data) {
|
||||||
|
$rootScope.title = data.stats.system.hostname + ' - Glances';
|
||||||
|
});
|
||||||
|
|
||||||
|
GlancesStats.init();
|
||||||
});
|
});
|
||||||
|
|||||||
@ -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
216
glances/outputs/static/js/components/glances/controller.js
Normal 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
89
glances/outputs/static/js/components/glances/view.html
Normal 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
7
glances/outputs/static/js/components/help/component.js
Normal 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
9
glances/outputs/static/js/components/help/controller.js
Normal 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
79
glances/outputs/static/js/components/help/view.html
Normal 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"> </div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm-12 col-lg-24">{{vm.help.configuration_file}}</div>
|
||||||
|
</div>
|
||||||
|
<div class="row"> </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>
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
'use strict';
|
||||||
|
|
||||||
|
glancesApp.component('glancesPluginAlert', {
|
||||||
|
controller: GlancesPluginAlertController,
|
||||||
|
controllerAs: 'vm',
|
||||||
|
templateUrl: 'components/plugin-alert/view.html'
|
||||||
|
});
|
||||||
@ -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
15
glances/outputs/static/js/components/plugin-alert/view.html
Normal 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>
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
'use strict';
|
||||||
|
|
||||||
|
glancesApp.component('glancesPluginAmps', {
|
||||||
|
controller: GlancesPluginAmpsController,
|
||||||
|
controllerAs: 'vm',
|
||||||
|
templateUrl: 'components/plugin-amps/view.html'
|
||||||
|
});
|
||||||
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -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>
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
'use strict';
|
||||||
|
|
||||||
|
glancesApp.component('glancesPluginCloud', {
|
||||||
|
controller: GlancesPluginCloudController,
|
||||||
|
controllerAs: 'vm',
|
||||||
|
templateUrl: 'components/plugin-cloud/view.html'
|
||||||
|
});
|
||||||
@ -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'] + ')';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
<section id="cloud">
|
||||||
|
<span class="title">{{ vm.provider }}</span> {{ vm.instance }}
|
||||||
|
</section>
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
'use strict';
|
||||||
|
|
||||||
|
glancesApp.component('glancesPluginCpu', {
|
||||||
|
controller: GlancesPluginCpuController,
|
||||||
|
controllerAs: 'vm',
|
||||||
|
templateUrl: 'components/plugin-cpu/view.html'
|
||||||
|
});
|
||||||
@ -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
84
glances/outputs/static/js/components/plugin-cpu/view.html
Normal 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>
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
'use strict';
|
||||||
|
|
||||||
|
glancesApp.component('glancesPluginDiskio', {
|
||||||
|
controller: GlancesPluginDiskioController,
|
||||||
|
controllerAs: 'vm',
|
||||||
|
templateUrl: 'components/plugin-diskio/view.html'
|
||||||
|
});
|
||||||
@ -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
16
glances/outputs/static/js/components/plugin-diskio/view.html
Normal 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>
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
'use strict';
|
||||||
|
|
||||||
|
glancesApp.component('glancesPluginDocker', {
|
||||||
|
controller: GlancesPluginDockerController,
|
||||||
|
controllerAs: 'vm',
|
||||||
|
templateUrl: 'components/plugin-docker/view.html'
|
||||||
|
});
|
||||||
@ -1,19 +1,28 @@
|
|||||||
glancesApp.service('GlancesPluginDocker', function(GlancesPlugin) {
|
'use strict';
|
||||||
|
|
||||||
var _pluginName = "docker";
|
function GlancesPluginDockerController($scope, GlancesStats) {
|
||||||
this.containers = [];
|
var vm = this;
|
||||||
this.version = null;
|
vm.containers = [];
|
||||||
|
vm.version = null;
|
||||||
|
|
||||||
this.setData = function(data, views) {
|
vm.$onInit = function () {
|
||||||
data = data[_pluginName];
|
loadData(GlancesStats.getData());
|
||||||
|
};
|
||||||
|
|
||||||
|
$scope.$on('data_refreshed', function (event, data) {
|
||||||
|
loadData(data);
|
||||||
|
});
|
||||||
|
|
||||||
|
var loadData = function (data) {
|
||||||
|
var stats = data.stats['docker'];
|
||||||
this.containers = [];
|
this.containers = [];
|
||||||
|
|
||||||
if(_.isEmpty(data)) {
|
if (_.isEmpty(stats)) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
for (var i = 0; i < data['containers'].length; i++) {
|
for (var i = 0; i < stats['containers'].length; i++) {
|
||||||
var containerData = data['containers'][i];
|
var containerData = stats['containers'][i];
|
||||||
|
|
||||||
var container = {
|
var container = {
|
||||||
'id': containerData.Id,
|
'id': containerData.Id,
|
||||||
@ -31,9 +40,9 @@ glancesApp.service('GlancesPluginDocker', function(GlancesPlugin) {
|
|||||||
'image': containerData.Image
|
'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
29
glances/outputs/static/js/components/plugin-docker/view.html
Normal 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>
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
'use strict';
|
||||||
|
|
||||||
|
glancesApp.component('glancesPluginFolders', {
|
||||||
|
controller: GlancesPluginFsController,
|
||||||
|
controllerAs: 'vm',
|
||||||
|
templateUrl: 'components/plugin-folders/view.html'
|
||||||
|
});
|
||||||
@ -1,13 +1,23 @@
|
|||||||
glancesApp.service('GlancesPluginFolders', function() {
|
'use strict';
|
||||||
var _pluginName = "folders";
|
|
||||||
this.folders = [];
|
|
||||||
|
|
||||||
this.setData = function(data, views) {
|
function GlancesPluginFoldersController($scope, GlancesStats) {
|
||||||
data = data[_pluginName];
|
var vm = this;
|
||||||
this.folders = [];
|
vm.folders = [];
|
||||||
|
|
||||||
for (var i = 0; i < data.length; i++) {
|
vm.$onInit = function () {
|
||||||
var folderData = data[i];
|
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 = {
|
var folder = {
|
||||||
'path': folderData['path'],
|
'path': folderData['path'],
|
||||||
@ -17,11 +27,11 @@ glancesApp.service('GlancesPluginFolders', function() {
|
|||||||
'critical': folderData['critical']
|
'critical': folderData['critical']
|
||||||
};
|
};
|
||||||
|
|
||||||
this.folders.push(folder);
|
vm.folders.push(folder);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
};
|
|
||||||
|
|
||||||
this.getDecoration = function(folder) {
|
vm.getDecoration = function (folder) {
|
||||||
|
|
||||||
if (!Number.isInteger(folder.size)) {
|
if (!Number.isInteger(folder.size)) {
|
||||||
return;
|
return;
|
||||||
@ -37,4 +47,4 @@ glancesApp.service('GlancesPluginFolders', function() {
|
|||||||
|
|
||||||
return 'ok';
|
return 'ok';
|
||||||
};
|
};
|
||||||
});
|
}
|
||||||
@ -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>
|
||||||
@ -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
51
glances/outputs/static/js/components/plugin-fs/controller.js
Normal 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
18
glances/outputs/static/js/components/plugin-fs/view.html
Normal 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>
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
'use strict';
|
||||||
|
|
||||||
|
glancesApp.component('glancesPluginGpu', {
|
||||||
|
controller: GlancesPluginGpuController,
|
||||||
|
controllerAs: 'vm',
|
||||||
|
templateUrl: 'components/plugin-gpu/view.html'
|
||||||
|
});
|
||||||
@ -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
32
glances/outputs/static/js/components/plugin-gpu/view.html
Normal 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>
|
||||||
@ -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
30
glances/outputs/static/js/components/plugin-ip/controller.js
Normal 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
4
glances/outputs/static/js/components/plugin-ip/view.html
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
<section id="ip" ng-if="vm.address != undefined && !vm.arguments.disable_ip">
|
||||||
|
- <span class="title">IP</span> <span>{{ vm.address }}/{{ vm.maskCidr }}</span> <span
|
||||||
|
ng-if="vm.publicAddress" class="title">Pub</span> <span>{{ vm.publicAddress }}</span>
|
||||||
|
</section>
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
'use strict';
|
||||||
|
|
||||||
|
glancesApp.component('glancesPluginIrq', {
|
||||||
|
controller: GlancesPluginIrqController,
|
||||||
|
controllerAs: 'vm',
|
||||||
|
templateUrl: 'components/plugin-irq/view.html'
|
||||||
|
});
|
||||||
@ -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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -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 text-left title">IRQ</div>
|
||||||
<div class="table-cell"></div>
|
<div class="table-cell"></div>
|
||||||
<div class="table-cell">Rate/s</div>
|
<div class="table-cell">Rate/s</div>
|
||||||
</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 text-left">{{irq.irq_line}}</div>
|
||||||
<div class="table-cell"></div>
|
<div class="table-cell"></div>
|
||||||
<div class="table-cell"><span>{{irq.irq_rate}}</span></div>
|
<div class="table-cell"><span>{{irq.irq_rate}}</span></div>
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
'use strict';
|
||||||
|
|
||||||
|
glancesApp.component('glancesPluginLoad', {
|
||||||
|
controller: GlancesPluginLoadController,
|
||||||
|
controllerAs: 'vm',
|
||||||
|
templateUrl: 'components/plugin-load/view.html'
|
||||||
|
});
|
||||||
@ -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
26
glances/outputs/static/js/components/plugin-load/view.html
Normal 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>
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
'use strict';
|
||||||
|
|
||||||
|
glancesApp.component('glancesPluginMemMore', {
|
||||||
|
controller: GlancesPluginMemMoreController,
|
||||||
|
controllerAs: 'vm',
|
||||||
|
templateUrl: 'components/plugin-mem-more/view.html'
|
||||||
|
});
|
||||||
@ -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'];
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -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>
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
'use strict';
|
||||||
|
|
||||||
|
glancesApp.component('glancesPluginMem', {
|
||||||
|
controller: GlancesPluginMemController,
|
||||||
|
controllerAs: 'vm',
|
||||||
|
templateUrl: 'components/plugin-mem/view.html'
|
||||||
|
});
|
||||||
@ -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
22
glances/outputs/static/js/components/plugin-mem/view.html
Normal 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>
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
'use strict';
|
||||||
|
|
||||||
|
glancesApp.component('glancesPluginMemswap', {
|
||||||
|
controller: GlancesPluginMemswapController,
|
||||||
|
controllerAs: 'vm',
|
||||||
|
templateUrl: 'components/plugin-memswap/view.html'
|
||||||
|
});
|
||||||
@ -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();
|
||||||
|
};
|
||||||
|
}
|
||||||
@ -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>
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
'use strict';
|
||||||
|
|
||||||
|
glancesApp.component('glancesPluginNetwork', {
|
||||||
|
controller: GlancesPluginNetworkController,
|
||||||
|
controllerAs: 'vm',
|
||||||
|
templateUrl: 'components/plugin-network/view.html'
|
||||||
|
});
|
||||||
@ -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');
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -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>
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
'use strict';
|
||||||
|
|
||||||
|
glancesApp.component('glancesPluginPercpu', {
|
||||||
|
controller: GlancesPluginPercpuController,
|
||||||
|
controllerAs: 'vm',
|
||||||
|
templateUrl: 'components/plugin-percpu/view.html'
|
||||||
|
});
|
||||||
@ -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
40
glances/outputs/static/js/components/plugin-percpu/view.html
Normal 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>
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
'use strict';
|
||||||
|
|
||||||
|
glancesApp.component('glancesPluginPorts', {
|
||||||
|
controller: GlancesPluginPortsController,
|
||||||
|
controllerAs: 'vm',
|
||||||
|
templateUrl: 'components/plugin-ports/view.html'
|
||||||
|
});
|
||||||
@ -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
12
glances/outputs/static/js/components/plugin-ports/view.html
Normal 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>
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
'use strict';
|
||||||
|
|
||||||
|
glancesApp.component('glancesPluginProcess', {
|
||||||
|
controller: GlancesPluginProcessController,
|
||||||
|
controllerAs: 'vm',
|
||||||
|
templateUrl: 'components/plugin-process/view.html'
|
||||||
|
});
|
||||||
@ -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;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
@ -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>
|
||||||
@ -0,0 +1,10 @@
|
|||||||
|
'use strict';
|
||||||
|
|
||||||
|
glancesApp.component('glancesPluginProcesscount', {
|
||||||
|
controller: GlancesPluginProcesscountController,
|
||||||
|
controllerAs: 'vm',
|
||||||
|
bindings: {
|
||||||
|
sorter: '<'
|
||||||
|
},
|
||||||
|
templateUrl: 'components/plugin-processcount/view.html'
|
||||||
|
});
|
||||||
@ -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
Loading…
Reference in New Issue
Block a user