fix merge div/table

This commit is contained in:
Sylvain MOUQUET
2015-01-17 17:18:40 +01:00
parent fee8c06d28
commit bcd76e5536
4 changed files with 239 additions and 241 deletions

View File

@@ -2,245 +2,233 @@
<html ng-app="glancesApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Glances</title>
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<link rel="stylesheet" type="text/css" href="normalize.css" />
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="angular.min.js"></script>
<script src="app.js"></script>
<script src="variables.js"></script>
<script src="controllers.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Glances</title>
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<link rel="stylesheet" type="text/css" href="normalize.css" />
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="angular.min.js"></script>
<script src="app.js"></script>
<script src="variables.js"></script>
<script src="controllers.js"></script>
</head>
<body ng-controller="bodyController" ng-keydown="onKeyDown($event)">
<body ng-controller="bodyController">
<div ng-show="!result" class="container-fluid">Loading...</div>
<div ng-show="result" class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div class="pull-left">
<div ng-show="!result" class="container-fluid">Loading...</div>
<div ng-show="result" class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div class="pull-left">
<section id="system" class="plugin">
<span class="title">Refresh time&nbsp;</span> <span class="hidden-xs hidden-sm">{{refreshTime}}s
<button ng-click="refreshTime = refreshTime - 1" ng-disabled="refreshTime <= 1">-</button>
<button ng-click="refreshTime = refreshTime + 1">+</button>
</span> <span class="title">{{result["system"].hostname}}&nbsp;</span> <span class="hidden-xs hidden-sm">({{result["system"].os_name}} {{result["system"].os_version}} {{result["system"].platform}})</span>
</section>
</div>
<div class="pull-right">
<section id="uptime" class="plugin">
<span>Uptime: {{result["uptime"]}}</span>
</section>
</div>
</div>
</div>
<section id="system" class="plugin">
<span class="title">Refresh time&nbsp;</span> <span class="default hidden-xs hidden-sm">{{refreshTime}}s
<button ng-click="refreshTime = refreshTime - 1" ng-disabled="refreshTime == 1">-</button>
<button ng-click="refreshTime = refreshTime + 1">+</button>
</span> <span class="title">{{result["system"].hostname}}&nbsp;</span> <span class="default hidden-xs hidden-sm">({{result["system"].os_name}} {{result["system"].os_version}} {{result["system"].platform}})</span>
</section>
<div class="row">
<div class="col-sm-3">
<section id="cpu" class="plugin">
<div class="table">
<div class="table-row">
<div class="table-cell text-left title">CPU</div>
<div class="table-cell">{{result["cpu"].total}}%</div>
</div>
<div class="table-row">
<div class="table-cell text-left">user:</div>
<div class="table-cell" ng-class="getClass('cpu', 'cpu_user_', result['cpu'].user, 1)">
{{result["cpu"].user}}%
</div>
</div>
<div class="table-row">
<div class="table-cell text-left">system:</div>
<div class="table-cell" ng-class="getClass('cpu', 'cpu_system_', result['cpu'].system, 1)">
{{result["cpu"].system}}%
</div>
</div>
<div class="table-row">
<div class="table-cell text-left">idle:</div>
<div class="table-cell">{{result["cpu"].idle}}%</div>
</div>
</div>
</section>
</div>
<div class="col-sm-3 col-lg-2 col-lg-offset-1"></div>
<div class="col-sm-3 col-lg-3">
<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">{{result["mem"].percent}}%</div>
</div>
<div class="table-row">
<div class="table-cell text-left">total:</div>
<div class="table-cell">{{result["mem"].total | bytes:2}}</div>
</div>
<div class="table-row">
<div class="table-cell text-left">used:</div>
<div class="table-cell" ng-class="getClass('mem', 'mem_', result['mem'].percent, 1)">
{{result["mem"].used | bytes:2}}
</div>
</div>
<div class="table-row">
<div class="table-cell text-left">free:</div>
<div class="table-cell">{{result["mem"].free | bytes:2}}</div>
</div>
</div>
</section>
</div>
<div class="col-sm-3 col-lg-2 col-lg-offset-1">
<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">{{result["memswap"].percent}}%</div>
</div>
<div class="table-row">
<div class="table-cell text-left">total:</div>
<div class="table-cell">{{result["memswap"].total | bytes:2}}</div>
</div>
<div class="table-row">
<div class="table-cell text-left">used:</div>
<div class="table-cell" ng-class="getClass('memswap', 'memswap_', result['memswap'].percent, 1)">
{{result["memswap"].used | bytes:2}}
</div>
</div>
<div class="table-row">
<div class="table-cell text-left">free:</div>
<div class="table-cell">{{result["memswap"].free | bytes:2}}</div>
</div>
</div>
</section>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<section id="network" class="plugin" ng-show="show.network">
<div class="table">
<div class="table-row">
<div class="table-cell text-left title">NETWORK</div>
<div class="table-cell">Rx/s</div>
<div class="table-cell">Tx/s</div>
</div>
<div class="table-row" ng-repeat="network in result['network']">
<div class="table-cell text-left">{{network.interface_name | min_size}}</div>
<div class="table-cell">{{network.rx | bytes}}</div>
<div class="table-cell">{{network.tx | bytes}}</div>
</div>
</div>
</section>
</div>
<div class="pull-right">
<section id="uptime" class="plugin">
<span class="default">Uptime: {{result["uptime"]}}</span>
</section>
</div>
</div>
</div>
<section id="diskio" class="plugin" ng-show="show.diskio">
<div class="table">
<div class="table-row">
<div class="table-cell text-left title">DISK I/O</div>
<div class="table-cell">R/s</div>
<div class="table-cell">W/s</div>
</div>
<div class="table-row" ng-repeat="disk in result['diskio']">
<div class="table-cell text-left">{{disk.disk_name | min_size}}</div>
<div class="table-cell">{{disk.read_bytes | bytes}}</div>
<div class="table-cell">{{disk.write_bytes | bytes}}</div>
</div>
</div>
</section>
<section id="fs" class="plugin" ng-show="show.fs">
<div class="table">
<div class="table-row">
<div class="table-cell text-left title">FILE SYS</div>
<div class="table-cell">Used</div>
<div class="table-cell">Total</div>
</div>
<div class="table-row" ng-repeat="fs in result['fs']">
<div class="table-cell text-left">{{fs.mnt_point}} ({{fs.device_name}})</div>
<div class="table-cell" ng-class="getClass('fs', 'fs_', fs.percent, 0)">
{{fs.size - fs.free | bytes}}
</div>
<div class="table-cell">{{fs.size | bytes}}</div>
</div>
</div>
</section>
<section id="sensors" class="plugin" ng-show="show.sensors && result['sensors'].length > 0">
<div class="table">
<div class="table-row">
<div class="table-cell text-left title">SENSORS</div>
<div class="table-cell">&#176;C</div>
</div>
<div class="table-row" ng-repeat="sensor in result['sensors']">
<div class="table-cell text-left">{{sensor.label}}</td>
<div class="table-cell" ng-class="getClass('sensors', 'sensors_' + sensor.type + '_', sensor.value, 0)">{{sensor.value}}</td>
</div>
</div>
</section>
</div>
<div class="col-sm-9">
<section id="alert" class="plugin" ng-show="show.alert">
<div class="table">
<div class="table-row">
<div class="table-cell text-left title" ng-show="!result['alert'].length">No warning or critical alert detected</div>
<div class="table-cell text-left title" ng-repeat="alert in result['alert']">{{alert}}</div>
</div>
</div>
</section>
<div class="row">
<div class="col-sm-3">
<section id="cpu" class="plugin">
<table class="table">
<tbody>
<tr>
<td class="title">CPU</td>
<td class="default">{{result["cpu"].total}}%</td>
</tr>
<tr>
<td class="default">user:</td>
<td ng-class="getClass('cpu', 'cpu_user_', result['cpu'].user, 1)">{{result["cpu"].user}}%</td>
</tr>
<tr>
<td class="default">system:</td>
<td ng-class="getClass('cpu', 'cpu_system_', result['cpu'].system, 1)">{{result["cpu"].system}}%</td>
</tr>
<tr>
<td class="default">idle:</td>
<td class="default">{{result["cpu"].idle}}%</td>
</tr>
</tbody>
</table>
</section>
</div>
<div class="col-sm-3 col-lg-2 col-lg-offset-1"></div>
<div class="col-sm-3 col-lg-3">
<section id="mem" class="plugin">
<table class="table">
<tbody>
<tr>
<td class="title">MEM</td>
<td class="default">{{result["mem"].percent}}%</td>
</tr>
<tr>
<td class="default">total:</td>
<td class="default">{{result["mem"].total | bytes:2}}</td>
</tr>
<tr>
<td class="default">used:</td>
<td ng-class="getClass('mem', 'mem_', result['mem'].percent, 1)">{{result["mem"].used | bytes:2}}</td>
</tr>
<tr>
<td class="default">free:</td>
<td class="default">{{result["mem"].free | bytes:2}}</td>
</tr>
</tbody>
</table>
</section>
</div>
<div class="col-sm-3 col-lg-2 col-lg-offset-1">
<section id="memswap" class="plugin">
<table class="table">
<tbody>
<tr>
<td class="title">SWAP</td>
<td class="default">{{result["memswap"].percent}}%</td>
</tr>
<tr>
<td class="default">total:</td>
<td class="default">{{result["memswap"].total | bytes:2}}</td>
</tr>
<tr>
<td class="default">used:</td>
<td ng-class="getClass('memswap', 'memswap_', result['memswap'].percent, 1)">{{result["memswap"].used | bytes:2}}</td>
</tr>
<tr>
<td class="default">free:</td>
<td class="default">{{result["memswap"].free | bytes:2}}</td>
</tr>
</tbody>
</table>
</section>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<section id="network" class="plugin" ng-show="show.network">
<table class="table">
<tbody>
<tr>
<td class="title">NETWORK</td>
<td class="default">Rx/s</td>
<td class="default">Tx/s</td>
</tr>
<tr ng-repeat="network in result['network']">
<td class="default">{{network.interface_name | min_size}}}</td>
<td class="default" ng-if="networkSortByBytes">{{network.rx | bytes}}</td>
<td class="default" ng-if="networkSortByBytes">{{network.rx | bytes}}</td>
<td class="default" ng-if="!networkSortByBytes">{{network.rx | bits}}</td>
<td class="default" ng-if="!networkSortByBytes">{{network.rx | bits}}</td>
</tr>
</tbody>
</table>
</section>
<section id="processcount" class="plugin">
<span class="title">TASKS</span> {{result["processcount"].total}} ({{result["processcount"].thread}} thr), {{result["processcount"].running}} run,
{{result["processcount"].sleeping}} slp, {{result["processcount"].stopped}} oth <span ng-show="!predicate"> sorted automatically </span> <span ng-show="!predicate"> by cpu_percent, flat view </span>
</section>
<section id="diskio" class="plugin" ng-show="show.diskio">
<table class="table">
<tbody>
<tr>
<td class="title">DISK I/O</td>
<td class="default">R/s</td>
<td class="default">W/s</td>
</tr>
<tr ng-repeat="disk in result['diskio']">
<td class="default">{{disk.disk_name | min_size}}</td>
<td class="default">{{disk.read_bytes | bytes}}</td>
<td class="default">{{disk.write_bytes | bytes}}</td>
</tr>
</tbody>
</table>
</section>
<section id="fs" class="plugin" ng-show="show.fs">
<table class="table">
<tbody>
<tr>
<td class="title">FILE SYS</td>
<td class="default">Used</td>
<td class="default">Total</td>
</tr>
<tr ng-repeat="fs in result['fs']">
<td class="default">{{fs.mnt_point}} ({{fs.device_name}})</td>
<td ng-class="getClass('fs', 'fs_', fs.percent, 0)">{{fs.size - fs.free | bytes}}</td>
<td class="default">{{fs.size | bytes}}</td>
</tr>
</tbody>
</table>
</section>
<section id="sensors" class="plugin" ng-show="show.sensors && result['sensors'].length > 0">
<table class="table">
<tbody>
<tr>
<td class="title">SENSORS</td>
<td class="default">&#176;C</td>
</tr>
<tr ng-repeat="sensor in result['sensors']">
<td class="default">{{sensor.label}}</td>
<td ng-class="getClass('sensors', 'sensors_' + sensor.type + '_', sensor.value, 0)">{{sensor.value}}</td>
</tr>
</tbody>
</table>
</section>
</div>
<div class="col-sm-9">
<section id="alert" class="plugin" ng-show="show.alert">
<table class="table">
<tbody>
<tr>
<td class="title" ng-show="!result['alert'].length">No warning or critical alert detected</td>
<td class="title" ng-repeat="alert in result['alert']">{{alert}}</td>
</tr>
</tbody>
</table>
</section>
<div class="row">
<div class="col-sm-9"></div>
</div>
<section id="processcount" class="plugin">
<span class="title"> TASKS </span> <span class="default"> {{result["processcount"].total}} </span> <span class="default"> ({{result["processcount"].thread}} thr), </span> <span class="default"> {{result["processcount"].running}} run, </span> <span class="default">
{{result["processcount"].sleeping}} slp, </span> <span class="default"> {{result["processcount"].stopped}} oth </span>
</section>
<!-- <pre>Sorting predicate = {{predicate}}; reverse = {{reverse}}</pre>-->
<div class="row">
<div class="col-sm-9"></div>
</div>
<section id="processlist" class="plugin">
<table class="table">
<tbody>
<tr>
<td id="column_cpu_percent" ng-click="sortBy('cpu_percent')" class="sort sort_desc">CPU%</td>
<td id="column_memory_percent" ng-click="sortBy('memory_percent')" class="default">MEM%</td>
<td id="column_memvirt" ng-click="sortBy('memvirt')" class="default hidden-xs hidden-sm">VIRT</td>
<td id="column_memres" ng-click="sortBy('memres')" class="default hidden-xs hidden-sm">RES</td>
<td id="column_pid" ng-click="sortBy('pid')" class="default">PID</td>
<td id="column_username" ng-click="sortBy('username')" class="default">USER</td>
<td id="column_nice" ng-click="sortBy('nice')" class="default">NI</td>
<td id="column_status" ng-click="sortBy('status')" class="default">S</td>
<td id="column_timemillis" ng-click="sortBy('timemillis')" class="default hidden-xs hidden-sm">TIME+</td>
<td id="column_io_read" ng-click="sortBy('io_read')" class="default hidden-xs hidden-sm">IOR/s</td>
<td id="column_io_write" ng-click="sortBy('io_write')" class="default hidden-xs hidden-sm">IOW/s</td>
<td id="column_name" ng-click="sortBy('name')" class="default">Command</td>
</tr>
<tr ng-repeat="process in result['processlist'] | orderBy:sortColumn:!sortOrderAsc">
<td ng-class="getClass('processlist', 'processlist_cpu_', process.cpu_percent, 0)">{{process.cpu_percent | number:1}}</td>
<td ng-class="getClass('processlist', 'processlist_mem_', process.memory_percent, 0)">{{process.memory_percent | number:1}}</td>
<td class="default hidden-xs hidden-sm">{{process.memvirt | bytes:1}}</td>
<td class="default hidden-xs hidden-sm">{{process.memres | bytes:1}}</td>
<td class="default">{{process.pid}}</td>
<td class="default">{{process.username}}</td>
<td class="default">{{process.nice | exclamation}}</td>
<td class="status">{{process.status}}</td>
<td class="default hidden-xs hidden-sm">{{process.timeformatted}}</td>
<td class="default hidden-xs hidden-sm">{{process.io_read | bytes}}</td>
<td class="default hidden-xs hidden-sm">{{process.io_write | bytes}}</td>
<td class="default">{{process.name}}</td>
</tr>
</tbody>
</table>
</section>
</div>
</div>
</div>
<section id="processlist" class="plugin">
<div class="table">
<div class="table-row">
<div id="column_cpu_percent" ng-click="sortBy('cpu_percent')" class="sort sort_desc">CPU%</div>
<div id="column_memory_percent" ng-click="sortBy('memory_percent')" class="default">MEM%</div>
<div id="column_memvirt" ng-click="sortBy('memvirt')" class="default hidden-xs hidden-sm">VIRT</div>
<div id="column_memres" ng-click="sortBy('memres')" class="default hidden-xs hidden-sm">RES</div>
<div id="column_pid" ng-click="sortBy('pid')" class="default">PID</div>
<div id="column_username" ng-click="sortBy('username')" class="default">USER</div>
<div id="column_nice" ng-click="sortBy('nice')" class="default">NI</div>
<div id="column_status" ng-click="sortBy('status')" class="default">S</div>
<div id="column_timemillis" ng-click="sortBy('timemillis')" class="default hidden-xs hidden-sm">TIME+</div>
<div id="column_io_read" ng-click="sortBy('io_read')" class="default hidden-xs hidden-sm">IOR/s</div>
<div id="column_io_write" ng-click="sortBy('io_write')" class="default hidden-xs hidden-sm">IOW/s</div>
<div id="column_name" ng-click="sortBy('name')" class="default">Command</div>
</div>
<div class="table-row" ng-repeat="process in result['processlist'] | orderBy:predicate:reverse">
<div class="table-cell" ng-class="getClass('processlist', 'processlist_cpu_', process.cpu_percent, 0)">{{process.cpu_percent | number:1}}</div>
<div class="table-cell" ng-class="getClass('processlist', 'processlist_mem_', process.memory_percent, 0)">{{process.memory_percent | number:1}}</div>
<div class="table-cell hidden-xs hidden-sm">{{process.memvirt | bytes:1}}</div>
<div class="table-cell hidden-xs hidden-sm">{{process.memres | bytes:1}}</div>
<div class="table-cell">{{process.pid}}</div>
<div class="table-cell text-left">{{process.username}}</div>
<div class="table-cell">{{process.nice | exclamation}}</div>
<div class="table-cell status">{{process.status}}</div>
<div class="table-cell hidden-xs hidden-sm">{{process.timeformatted}}</div>
<div class="table-cell hidden-xs hidden-sm">{{process.io_read | bytes}}</div>
<div class="table-cell hidden-xs hidden-sm">{{process.io_write | bytes}}</div>
<div class="table-cell text-left">{{process.name}}</div>
</div>
</div>
</section>
</div>
</div>
</div>
</body>
</html>
</html>

View File

@@ -150,10 +150,18 @@ class GlancesBottle(object):
return statval
else:
path = "~/glances/"
if is_windows:
if is_windows:
path = "D:\\glances\\"
f = open(path + "debug.json")
return f.read()
filepath = path + "debug.json"
if os.path.exists(filepath):
logger.debug("File exists : {0}.".format(filepath))
f = open(path + "debug.json")
return f.read()
logger.warn("File does not exist : {0}.".format(filepath))
return ""
def _api(self, plugin):
"""

View File

@@ -29,7 +29,10 @@ body {
.sort{
font-weight: bold;
}
.sort:after{
.sort_asc:after {
content: '\25B2'
}
.sort_desc:after {
content: '\25BC'
}
.text-right {

View File

@@ -35,15 +35,15 @@ glancesApp.filter('bytes', function() {
glancesApp.filter('bits', function() {
return function (bits, precision) {
if (isNaN(parseFloat(bits)) || !isFinite(bits) || bits == 0){
return '0bit';
return '0b';
}
var units = ['bit', 'kbit', 'Mbit', 'Gbit', 'Tbit', 'Pbit'],
var units = ['b', 'kb', 'Mb', 'Gb', 'Tb', 'Pb'],
number = Math.floor(Math.log(bits) / Math.log(1000));
return (bits / Math.pow(1000, Math.floor(number))).toFixed(precision) + units[number];
}
});
glancesApp.controller('bodyController', [ '$scope', '$http', '$interval', '$q', function($scope, $http, $interval, $q) { //$routeParams
glancesApp.controller('bodyController', [ '$scope', '$http', '$interval', '$q', function($scope, $http, $interval, $q) {
$scope.limitSuffix = ['critical', 'careful', 'warning']
$scope.refreshTime = 3
@@ -61,8 +61,7 @@ glancesApp.controller('bodyController', [ '$scope', '$http', '$interval', '$q',
}
$scope.networkSortByBytes = false
/*
$scope.init_refresh_time = function() {
/*$scope.init_refresh_time = function() {
if ($routeParams != undefined && $routeParams.refresh_time != undefined) {
var new_refresh_time = parseInt($routeParams.refresh_time)
if (new_refres_time >= 1) {