mirror of
https://github.com/YunoHost/yunohost-admin.git
synced 2024-09-03 20:06:15 +02:00
Monitor: first draft, with tabular data.
This commit is contained in:
opi
parent
e582a4d7ce
commit
3a9bd7feff
2 changed files with 293 additions and 0 deletions
73
js/app.js
73
js/app.js
|
|
@ -231,6 +231,7 @@ app = Sammy('#main', function (sam) {
|
|||
*
|
||||
*/
|
||||
sam.get('#/', function (c) {
|
||||
|
||||
// Show development note
|
||||
c.flash('info', '<b>You are using a development version.</b><br />' +
|
||||
'Please note that you can use the <a href="https://doc.yunohost.org/#/moulinette" target="_blank">moulinette</a> if you want to access to more YunoHost\'s features.');
|
||||
|
|
@ -241,6 +242,7 @@ app = Sammy('#main', function (sam) {
|
|||
{name: "Domains", path: '#/domains'},
|
||||
{name: "Applications", path: '#/apps'},
|
||||
{name: "Services", path: '#/services'},
|
||||
{name: "Monitoring", path: '#/monitor'},
|
||||
]};
|
||||
|
||||
c.view('home', data);
|
||||
|
|
@ -566,6 +568,77 @@ app = Sammy('#main', function (sam) {
|
|||
});
|
||||
|
||||
|
||||
/**
|
||||
* Monitor
|
||||
*
|
||||
*/
|
||||
|
||||
//
|
||||
sam.get('#/monitor', function (c) {
|
||||
monitorData = {}
|
||||
|
||||
// Put this function elswere ?
|
||||
function bytesToSize(bytes) {
|
||||
var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
|
||||
if (bytes == 0) return 'n/a';
|
||||
var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
|
||||
return Math.round(bytes / Math.pow(1024, i), 2) + ' ' + sizes[[i]];
|
||||
};
|
||||
|
||||
// Why this method ?
|
||||
c.api('/monitor/update-stats', function(data) { // ?
|
||||
|
||||
c.api('/monitor/system', function(data) {
|
||||
monitorData.system = data;
|
||||
|
||||
// Convert byte to human readable string
|
||||
$.each(monitorData.system.memory, function(k,v) {
|
||||
monitorData.system.memory[k].free = bytesToSize(v.free);
|
||||
monitorData.system.memory[k].used = bytesToSize(v.used);
|
||||
monitorData.system.memory[k].total = bytesToSize(v.total);
|
||||
});
|
||||
|
||||
c.api('/monitor/disk', function(data) {
|
||||
monitorData.disk = data;
|
||||
|
||||
// Convert byte to human readable string
|
||||
$.each(monitorData.disk, function(k,v) {
|
||||
monitorData.disk[k].filesystem.avail = bytesToSize(v.filesystem.avail);
|
||||
monitorData.disk[k].filesystem.size = bytesToSize(v.filesystem.size);
|
||||
monitorData.disk[k].filesystem.used = bytesToSize(v.filesystem.used);
|
||||
monitorData.disk[k].io.read_bytes = bytesToSize(v.io.read_bytes);
|
||||
monitorData.disk[k].io.write_bytes = bytesToSize(v.io.write_bytes);
|
||||
});
|
||||
|
||||
c.api('/monitor/network', function(data) {
|
||||
monitorData.network = data;
|
||||
|
||||
// Remove useless interface
|
||||
delete monitorData.network.usage.lo;
|
||||
|
||||
// Convert byte to human readable string
|
||||
$.each(monitorData.network.usage, function(k,v) {
|
||||
monitorData.network.usage[k].cx = bytesToSize(v.cx);
|
||||
monitorData.network.usage[k].cumulative_cx = bytesToSize(v.cumulative_cx);
|
||||
monitorData.network.usage[k].rx = bytesToSize(v.rx);
|
||||
monitorData.network.usage[k].cumulative_rx = bytesToSize(v.cumulative_rx);
|
||||
monitorData.network.usage[k].tx = bytesToSize(v.tx);
|
||||
monitorData.network.usage[k].cumulative_tx = bytesToSize(v.cumulative_tx);
|
||||
});
|
||||
|
||||
|
||||
c.view('monitor', monitorData);
|
||||
});
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
}, 'POST', {period: 'day'});
|
||||
});
|
||||
|
||||
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
|
|
|||
220
views/monitor.ms
Normal file
220
views/monitor.ms
Normal file
|
|
@ -0,0 +1,220 @@
|
|||
<div class="pull-left">
|
||||
<a href="#/" class="btn btn-default slide back"><span class="glyphicon glyphicon-chevron-left"></span> Menu</a>
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
<div class="view-title">Monitoring</div>
|
||||
<div class="br"></div>
|
||||
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<h2 class="panel-title"><span class="glyphicon glyphicon-info-sign"></span> Infos</h2>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<ul class="list-unstyled">
|
||||
<li><b>Hostname: </b>{{system.infos.hostname}}</li>
|
||||
<li><b>OS: </b>{{system.infos.os_name}} - {{system.infos.linux_distro}} ({{system.infos.os_version}} {{system.infos.platform}})</li>
|
||||
<li><b>Uptime: </b>{{system.uptime}}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel-group" id="accordion">
|
||||
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<h2 class="panel-title">
|
||||
<span class="glyphicon glyphicon-cog"></span>
|
||||
<a data-toggle="collapse" data-parent="#accordion" href="#system">System</a>
|
||||
</h2>
|
||||
</div>
|
||||
<div id="system" class="panel-collapse collapse">
|
||||
<div class="panel-body row">
|
||||
|
||||
<div class="col-md-4">
|
||||
<h3>Memory</h3>
|
||||
<h4>RAM</h4>
|
||||
<table class="table table-condensed">
|
||||
<tr>
|
||||
<td>Used</td>
|
||||
<td>{{system.memory.ram.used}} ({{system.memory.ram.percent}} %)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Free</td>
|
||||
<td>{{system.memory.ram.free}}</td>
|
||||
</tr>
|
||||
<tr class="active">
|
||||
<td>Total</td>
|
||||
<td>{{system.memory.ram.total}}</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<h4>Swap</h4>
|
||||
<table class="table table-condensed">
|
||||
<tr>
|
||||
<td>Used</td>
|
||||
<td>{{system.memory.swap.used}} ({{system.memory.swap.percent}} %)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Free</td>
|
||||
<td>{{system.memory.swap.free}}</td>
|
||||
</tr>
|
||||
<tr class="active">
|
||||
<td>Total</td>
|
||||
<td>{{system.memory.swap.total}}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<h3>CPU Load</h3>
|
||||
<table class="table table-condensed">
|
||||
<tr>
|
||||
<td>1 min</td>
|
||||
<td>{{system.cpu.load.min1}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5 min</td>
|
||||
<td>{{system.cpu.load.min5}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>15 min</td>
|
||||
<td>{{system.cpu.load.min15}}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<h3>Process</h3>
|
||||
<table class="table table-condensed">
|
||||
<tr>
|
||||
<td>Running</td>
|
||||
<td>{{system.process.running}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sleeping</td>
|
||||
<td>{{system.process.sleeping}}</td>
|
||||
</tr>
|
||||
<tr class="active">
|
||||
<td>Total</td>
|
||||
<td>{{system.process.total}}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<h2 class="panel-title">
|
||||
<span class="glyphicon glyphicon-cloud"></span>
|
||||
<a data-toggle="collapse" data-parent="#accordion" href="#network">Network</a>
|
||||
</h2>
|
||||
</div>
|
||||
<div id="network" class="panel-collapse collapse">
|
||||
<div class="panel-body">
|
||||
<b>Public IP: </b>{{network.infos.public_ip}}
|
||||
<br>
|
||||
<b>Gateway: </b>{{network.infos.gateway}}
|
||||
|
||||
<h3>Local IP</h3>
|
||||
<table class="table table-condensed">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Interface</th>
|
||||
<th>IPv4</th>
|
||||
<th>IPv6</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{#each network.infos.local_ip}}
|
||||
<tr>
|
||||
<td>{{@key}}</td>
|
||||
{{#this}}
|
||||
<td>{{.}}</td>
|
||||
{{/this}}
|
||||
</tr>
|
||||
{{/each}}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3>Usage</h3>
|
||||
{{#each network.usage}}
|
||||
<h4>
|
||||
{{@key}}
|
||||
<small>Time since update: {{time_since_update}}</small>
|
||||
</h4>
|
||||
<table class="table table-condensed">
|
||||
<tr>
|
||||
<td>Cx</td>
|
||||
<td>{{cx}}</td>
|
||||
<td>{{cumulative_cx}} (cumulative)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Rx</td>
|
||||
<td>{{rx}}</td>
|
||||
<td>{{cumulative_rx}} (cumulative)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tx</td>
|
||||
<td>{{tx}}</td>
|
||||
<td>{{cumulative_tx}} (cumulative)</td>
|
||||
</tr>
|
||||
</table>
|
||||
{{/each}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<h2 class="panel-title">
|
||||
<span class="glyphicon glyphicon-hdd"></span>
|
||||
<a data-toggle="collapse" data-parent="#accordion" href="#disk">Disk</a>
|
||||
</h2>
|
||||
</div>
|
||||
<div id="disk" class="panel-collapse collapse">
|
||||
<div class="panel-body">
|
||||
{{#each disk}}
|
||||
<h3>{{@key}}</h3>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<h4>Filesystem</h4>
|
||||
<table class="table table-condensed">
|
||||
<tr>
|
||||
<td>FS Type</td><td>{{ filesystem.fs_type }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Mount point</td><td>{{ filesystem.mnt_point }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Size</td><td>{{ filesystem.size }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Used</td><td>{{ filesystem.used }}</td>
|
||||
</tr>
|
||||
<tr class="active">
|
||||
<td>Available</td><td>{{ filesystem.avail }}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<h4>I/O <small>Time since update: {{ io.time_since_update }}</small></h4>
|
||||
<table class="table table-condensed">
|
||||
<tr>
|
||||
<td>Read</td><td>{{ io.read_bytes }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Write</td><td>{{ io.write_bytes }}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div><!-- .panel-group -->
|
||||
|
||||
|
||||
</div>
|
||||
Loading…
Reference in a new issue