提交 57eaefc3 编写于 作者: N nclsHart 提交者: Nicolargo

complete rewriting of the Web UI using bootstrap

fixes #461, #366 and #417
上级 b4fd8241
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="refresh" content="{{refresh_time}}">
<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="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="modernizr.custom.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div class="pull-left">
% include('plugin_text', plugin_name="system", stats=stats['system'])
</div>
<div class="pull-right">
% include('plugin_text', plugin_name="uptime", stats=stats['uptime'])
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
% include('plugin_table', plugin_name="cpu", stats=stats['cpu'])
</div>
<div class="col-sm-3 col-lg-2 col-lg-offset-1">
% include('plugin_table', plugin_name="load", stats=stats['load'])
</div>
<div class="col-sm-3 col-lg-3">
% include('plugin_table', plugin_name="mem", stats=stats['mem'])
</div>
<div class="col-sm-3 col-lg-2 col-lg-offset-1">
% include('plugin_table', plugin_name="memswap", stats=stats['memswap'])
</div>
</div>
<div class="row">
<div class="col-sm-3">
% include('plugin_table', plugin_name="network", stats=stats['network'])
% include('plugin_table', plugin_name="diskio", stats=stats['diskio'])
% include('plugin_table', plugin_name="fs", stats=stats['fs'])
% include('plugin_table', plugin_name="sensors", stats=stats['sensors'])
</div>
<div class="col-sm-9">
% include('plugin_table', plugin_name="alert", stats=stats['alert'])
% include('plugin_text', plugin_name="processcount", stats=stats['processcount'])
<div class="row">
<div class="col-sm-9">
% include('plugin_table', plugin_name="monitor", stats=stats['monitor'])
</div>
</div>
% include('plugin_table', plugin_name="processlist", stats=stats['processlist'])
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
</body>
<footer>
</footer>
</html>
\ No newline at end of file
<!DOCTYPE HTML><html>
<head>
<meta http-equiv="refresh" content="{{refresh_time}}">
<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="stylesheet" type="text/css" href="normalize.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="modernizr.custom.js"></script>
</head>
<body>
% if stats['msgdict'] != []:
<section id="{{ plugin_name }}" class="plugin">
<table class="table">
<tbody>
<tr>
% for msg in stats['msgdict']:
% if msg['msg'].startswith('\n'):
</tr>
<tr>
% else:
% if stats['display']:
% if plugin_name == 'processlist':
% if not msg['splittable'] or msg['splittable'] and msg['decoration'] == 'PROCESS':
<td class="{{ msg['decoration'].lower() }}">
{{ msg['msg'] }}
</td>
% end
% else:
<td class="{{ msg['decoration'].lower() }} {{ 'hidden-xs hidden-sm' if msg['optional'] else '' }}">
{{ msg['msg'] }}
</td>
% end
% end
% end
% end
</tr>
</tbody>
</table>
</section>
% end
\ No newline at end of file
% if stats['msgdict'] != []:
<section id="{{ plugin_name }}" class="plugin">
% for msg in stats['msgdict']:
% if stats['display']:
<span class="{{ msg['decoration'].lower() }} {{ 'hidden-xs hidden-sm' if msg['optional'] else '' }}">
{{ msg['msg'] }}
</span>
% end
% end
</section>
% end
\ No newline at end of file
......@@ -56,27 +56,6 @@ class GlancesBottle(object):
# Path where the statics files are stored
self.STATIC_PATH = os.path.join(os.path.dirname(os.path.realpath(__file__)), 'static')
# Define the style (CSS) list (hash table) for stats
self.__style_list = {
'DEFAULT': '',
'UNDERLINE': 'underline',
'BOLD': 'bold',
'SORT': 'sort',
'OK': 'ok',
'FILTER': 'filter',
'TITLE': 'title',
'CAREFUL': 'careful',
'WARNING': 'warning',
'CRITICAL': 'critical',
'OK_LOG': 'ok_log',
'CAREFUL_LOG': 'careful_log',
'WARNING_LOG': 'warning_log',
'CRITICAL_LOG': 'critical_log',
'NICE': 'nice',
'STATUS': 'status',
'PROCESS': ''
}
def _route(self):
"""Define route."""
self._app.route('/', method="GET", callback=self._index)
......@@ -269,78 +248,23 @@ class GlancesBottle(object):
stats: Stats database to display
"""
html = template('header', refresh_time=refresh_time)
html += '<header>'
html += self.display_plugin('system', self.stats.get_plugin('system').get_stats_display(args=self.args))
html += self.display_plugin('uptime', self.stats.get_plugin('uptime').get_stats_display(args=self.args))
html += '</header>'
html += template('newline')
html += '<section>'
html += self.display_plugin('cpu', self.stats.get_plugin('cpu').get_stats_display(args=self.args))
load_msg = self.stats.get_plugin('load').get_stats_display(args=self.args)
if load_msg['msgdict'] != []:
# Load is not available on all OS
# Only display if stat is available
html += self.display_plugin('load', load_msg)
html += self.display_plugin('mem', self.stats.get_plugin('mem').get_stats_display(args=self.args))
html += self.display_plugin('memswap', self.stats.get_plugin('memswap').get_stats_display(args=self.args))
html += '</section>'
html += template('newline')
html += '<div>'
html += '<aside id="lefttstats">'
html += self.display_plugin('network', self.stats.get_plugin('network').get_stats_display(args=self.args))
html += self.display_plugin('diskio', self.stats.get_plugin('diskio').get_stats_display(args=self.args))
html += self.display_plugin('fs', self.stats.get_plugin('fs').get_stats_display(args=self.args))
html += self.display_plugin('raid', self.stats.get_plugin('raid').get_stats_display(args=self.args))
html += self.display_plugin('sensors', self.stats.get_plugin('sensors').get_stats_display(args=self.args))
html += '</aside>'
html += '<section id="rightstats">'
html += self.display_plugin('alert', self.stats.get_plugin('alert').get_stats_display(args=self.args))
html += self.display_plugin('processcount', self.stats.get_plugin('processcount').get_stats_display(args=self.args))
html += self.display_plugin('monitor', self.stats.get_plugin('monitor').get_stats_display(args=self.args))
html += self.display_plugin('processlist', self.stats.get_plugin('processlist').get_stats_display(args=self.args))
html += '</section>'
html += '</div>'
html += template('newline')
html += template('footer')
return html
def display_plugin(self, plugin_name, plugin_stats):
"""Generate the Bottle template for the plugin_stats."""
# Template header
tpl = """ \
%#Template for Bottle
"""
tpl += '<article class="plugin" id="%s">' % plugin_name
tpl += '<div id="table">'
tpl += '<div class="row">'
for m in plugin_stats['msgdict']:
# New line
if m['msg'].startswith('\n'):
tpl += '</div>'
tpl += '<div class="row">'
continue
if plugin_name == 'processlist' and m['splittable']:
# Processlist: Display first 20 chars of the process name
if m['msg'].split(' ', 1)[0] != '':
tpl += '<span class="cell" id="%s">&nbsp;%s</span>' % \
(self.__style_list[m['decoration']],
m['msg'].split(' ', 1)[0].replace(' ', '&nbsp;')[:20])
elif m['optional']:
# Manage optional stats (responsive design)
tpl += '<span class="cell hide" id="%s">%s</span>' % \
(self.__style_list[m['decoration']], m['msg'].replace(' ', '&nbsp;'))
else:
# Display stat
tpl += '<span class="cell" id="%s">%s</span>' % \
(self.__style_list[m['decoration']], m['msg'].replace(' ', '&nbsp;'))
tpl += '</div>'
tpl += '</div>'
tpl += """ \
</article>
%#End Template for Bottle
"""
return template(tpl)
stats = {
'system': self.stats.get_plugin('system').get_stats_display(args=self.args),
'uptime': self.stats.get_plugin('uptime').get_stats_display(args=self.args),
'cpu': self.stats.get_plugin('cpu').get_stats_display(args=self.args),
'load': self.stats.get_plugin('load').get_stats_display(args=self.args),
'mem': self.stats.get_plugin('mem').get_stats_display(args=self.args),
'memswap': self.stats.get_plugin('memswap').get_stats_display(args=self.args),
'network': self.stats.get_plugin('network').get_stats_display(args=self.args),
'diskio': self.stats.get_plugin('diskio').get_stats_display(args=self.args),
'fs': self.stats.get_plugin('fs').get_stats_display(args=self.args),
'raid': self.stats.get_plugin('raid').get_stats_display(args=self.args),
'sensors': self.stats.get_plugin('sensors').get_stats_display(args=self.args),
'alert': self.stats.get_plugin('alert').get_stats_display(args=self.args),
'processcount': self.stats.get_plugin('processcount').get_stats_display(args=self.args),
'monitor': self.stats.get_plugin('monitor').get_stats_display(args=self.args),
'processlist': self.stats.get_plugin('processlist').get_stats_display(args=self.args)
}
return template('base', refresh_time=refresh_time, stats=stats)
/*!
* Bootstrap v3.3.1 (http://getbootstrap.com)
* Copyright 2011-2014 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
/*!
* Generated using the Bootstrap Customizer (http://getbootstrap.com/customize/?id=ef7da19b0162dfe4a82a)
* Config saved to config.json and https://gist.github.com/ef7da19b0162dfe4a82a
*//*! normalize.css v3.0.2 | MIT License | git.io/normalize */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}html{font-size:10px;-webkit-tap-highlight-color:rgba(0,0,0,0)}body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;line-height:1.42857143;color:#333;background-color:#fff}input,button,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit}a{color:#337ab7;text-decoration:none}a:hover,a:focus{color:#23527c;text-decoration:underline}a:focus{outline:thin dotted;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}figure{margin:0}img{vertical-align:middle}.img-responsive{display:block;max-width:100%;height:auto}.img-rounded{border-radius:6px}.img-thumbnail{padding:4px;line-height:1.42857143;background-color:#fff;border:1px solid #ddd;border-radius:4px;-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out;display:inline-block;max-width:100%;height:auto}.img-circle{border-radius:50%}hr{margin-top:20px;margin-bottom:20px;border:0;border-top:1px solid #eee}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.sr-only-focusable:active,.sr-only-focusable:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}.container{margin-right:auto;margin-left:auto;padding-left:15px;padding-right:15px}@media (min-width:768px){.container{width:750px}}@media (min-width:992px){.container{width:970px}}@media (min-width:1200px){.container{width:1170px}}.container-fluid{margin-right:auto;margin-left:auto;padding-left:15px;padding-right:15px}.row{margin-left:-15px;margin-right:-15px}.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12{position:relative;min-height:1px;padding-left:15px;padding-right:15px}.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12{float:left}.col-xs-12{width:100%}.col-xs-11{width:91.66666667%}.col-xs-10{width:83.33333333%}.col-xs-9{width:75%}.col-xs-8{width:66.66666667%}.col-xs-7{width:58.33333333%}.col-xs-6{width:50%}.col-xs-5{width:41.66666667%}.col-xs-4{width:33.33333333%}.col-xs-3{width:25%}.col-xs-2{width:16.66666667%}.col-xs-1{width:8.33333333%}.col-xs-pull-12{right:100%}.col-xs-pull-11{right:91.66666667%}.col-xs-pull-10{right:83.33333333%}.col-xs-pull-9{right:75%}.col-xs-pull-8{right:66.66666667%}.col-xs-pull-7{right:58.33333333%}.col-xs-pull-6{right:50%}.col-xs-pull-5{right:41.66666667%}.col-xs-pull-4{right:33.33333333%}.col-xs-pull-3{right:25%}.col-xs-pull-2{right:16.66666667%}.col-xs-pull-1{right:8.33333333%}.col-xs-pull-0{right:auto}.col-xs-push-12{left:100%}.col-xs-push-11{left:91.66666667%}.col-xs-push-10{left:83.33333333%}.col-xs-push-9{left:75%}.col-xs-push-8{left:66.66666667%}.col-xs-push-7{left:58.33333333%}.col-xs-push-6{left:50%}.col-xs-push-5{left:41.66666667%}.col-xs-push-4{left:33.33333333%}.col-xs-push-3{left:25%}.col-xs-push-2{left:16.66666667%}.col-xs-push-1{left:8.33333333%}.col-xs-push-0{left:auto}.col-xs-offset-12{margin-left:100%}.col-xs-offset-11{margin-left:91.66666667%}.col-xs-offset-10{margin-left:83.33333333%}.col-xs-offset-9{margin-left:75%}.col-xs-offset-8{margin-left:66.66666667%}.col-xs-offset-7{margin-left:58.33333333%}.col-xs-offset-6{margin-left:50%}.col-xs-offset-5{margin-left:41.66666667%}.col-xs-offset-4{margin-left:33.33333333%}.col-xs-offset-3{margin-left:25%}.col-xs-offset-2{margin-left:16.66666667%}.col-xs-offset-1{margin-left:8.33333333%}.col-xs-offset-0{margin-left:0}@media (min-width:768px){.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12{float:left}.col-sm-12{width:100%}.col-sm-11{width:91.66666667%}.col-sm-10{width:83.33333333%}.col-sm-9{width:75%}.col-sm-8{width:66.66666667%}.col-sm-7{width:58.33333333%}.col-sm-6{width:50%}.col-sm-5{width:41.66666667%}.col-sm-4{width:33.33333333%}.col-sm-3{width:25%}.col-sm-2{width:16.66666667%}.col-sm-1{width:8.33333333%}.col-sm-pull-12{right:100%}.col-sm-pull-11{right:91.66666667%}.col-sm-pull-10{right:83.33333333%}.col-sm-pull-9{right:75%}.col-sm-pull-8{right:66.66666667%}.col-sm-pull-7{right:58.33333333%}.col-sm-pull-6{right:50%}.col-sm-pull-5{right:41.66666667%}.col-sm-pull-4{right:33.33333333%}.col-sm-pull-3{right:25%}.col-sm-pull-2{right:16.66666667%}.col-sm-pull-1{right:8.33333333%}.col-sm-pull-0{right:auto}.col-sm-push-12{left:100%}.col-sm-push-11{left:91.66666667%}.col-sm-push-10{left:83.33333333%}.col-sm-push-9{left:75%}.col-sm-push-8{left:66.66666667%}.col-sm-push-7{left:58.33333333%}.col-sm-push-6{left:50%}.col-sm-push-5{left:41.66666667%}.col-sm-push-4{left:33.33333333%}.col-sm-push-3{left:25%}.col-sm-push-2{left:16.66666667%}.col-sm-push-1{left:8.33333333%}.col-sm-push-0{left:auto}.col-sm-offset-12{margin-left:100%}.col-sm-offset-11{margin-left:91.66666667%}.col-sm-offset-10{margin-left:83.33333333%}.col-sm-offset-9{margin-left:75%}.col-sm-offset-8{margin-left:66.66666667%}.col-sm-offset-7{margin-left:58.33333333%}.col-sm-offset-6{margin-left:50%}.col-sm-offset-5{margin-left:41.66666667%}.col-sm-offset-4{margin-left:33.33333333%}.col-sm-offset-3{margin-left:25%}.col-sm-offset-2{margin-left:16.66666667%}.col-sm-offset-1{margin-left:8.33333333%}.col-sm-offset-0{margin-left:0}}@media (min-width:992px){.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12{float:left}.col-md-12{width:100%}.col-md-11{width:91.66666667%}.col-md-10{width:83.33333333%}.col-md-9{width:75%}.col-md-8{width:66.66666667%}.col-md-7{width:58.33333333%}.col-md-6{width:50%}.col-md-5{width:41.66666667%}.col-md-4{width:33.33333333%}.col-md-3{width:25%}.col-md-2{width:16.66666667%}.col-md-1{width:8.33333333%}.col-md-pull-12{right:100%}.col-md-pull-11{right:91.66666667%}.col-md-pull-10{right:83.33333333%}.col-md-pull-9{right:75%}.col-md-pull-8{right:66.66666667%}.col-md-pull-7{right:58.33333333%}.col-md-pull-6{right:50%}.col-md-pull-5{right:41.66666667%}.col-md-pull-4{right:33.33333333%}.col-md-pull-3{right:25%}.col-md-pull-2{right:16.66666667%}.col-md-pull-1{right:8.33333333%}.col-md-pull-0{right:auto}.col-md-push-12{left:100%}.col-md-push-11{left:91.66666667%}.col-md-push-10{left:83.33333333%}.col-md-push-9{left:75%}.col-md-push-8{left:66.66666667%}.col-md-push-7{left:58.33333333%}.col-md-push-6{left:50%}.col-md-push-5{left:41.66666667%}.col-md-push-4{left:33.33333333%}.col-md-push-3{left:25%}.col-md-push-2{left:16.66666667%}.col-md-push-1{left:8.33333333%}.col-md-push-0{left:auto}.col-md-offset-12{margin-left:100%}.col-md-offset-11{margin-left:91.66666667%}.col-md-offset-10{margin-left:83.33333333%}.col-md-offset-9{margin-left:75%}.col-md-offset-8{margin-left:66.66666667%}.col-md-offset-7{margin-left:58.33333333%}.col-md-offset-6{margin-left:50%}.col-md-offset-5{margin-left:41.66666667%}.col-md-offset-4{margin-left:33.33333333%}.col-md-offset-3{margin-left:25%}.col-md-offset-2{margin-left:16.66666667%}.col-md-offset-1{margin-left:8.33333333%}.col-md-offset-0{margin-left:0}}@media (min-width:1200px){.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12{float:left}.col-lg-12{width:100%}.col-lg-11{width:91.66666667%}.col-lg-10{width:83.33333333%}.col-lg-9{width:75%}.col-lg-8{width:66.66666667%}.col-lg-7{width:58.33333333%}.col-lg-6{width:50%}.col-lg-5{width:41.66666667%}.col-lg-4{width:33.33333333%}.col-lg-3{width:25%}.col-lg-2{width:16.66666667%}.col-lg-1{width:8.33333333%}.col-lg-pull-12{right:100%}.col-lg-pull-11{right:91.66666667%}.col-lg-pull-10{right:83.33333333%}.col-lg-pull-9{right:75%}.col-lg-pull-8{right:66.66666667%}.col-lg-pull-7{right:58.33333333%}.col-lg-pull-6{right:50%}.col-lg-pull-5{right:41.66666667%}.col-lg-pull-4{right:33.33333333%}.col-lg-pull-3{right:25%}.col-lg-pull-2{right:16.66666667%}.col-lg-pull-1{right:8.33333333%}.col-lg-pull-0{right:auto}.col-lg-push-12{left:100%}.col-lg-push-11{left:91.66666667%}.col-lg-push-10{left:83.33333333%}.col-lg-push-9{left:75%}.col-lg-push-8{left:66.66666667%}.col-lg-push-7{left:58.33333333%}.col-lg-push-6{left:50%}.col-lg-push-5{left:41.66666667%}.col-lg-push-4{left:33.33333333%}.col-lg-push-3{left:25%}.col-lg-push-2{left:16.66666667%}.col-lg-push-1{left:8.33333333%}.col-lg-push-0{left:auto}.col-lg-offset-12{margin-left:100%}.col-lg-offset-11{margin-left:91.66666667%}.col-lg-offset-10{margin-left:83.33333333%}.col-lg-offset-9{margin-left:75%}.col-lg-offset-8{margin-left:66.66666667%}.col-lg-offset-7{margin-left:58.33333333%}.col-lg-offset-6{margin-left:50%}.col-lg-offset-5{margin-left:41.66666667%}.col-lg-offset-4{margin-left:33.33333333%}.col-lg-offset-3{margin-left:25%}.col-lg-offset-2{margin-left:16.66666667%}.col-lg-offset-1{margin-left:8.33333333%}.col-lg-offset-0{margin-left:0}}.clearfix:before,.clearfix:after,.container:before,.container:after,.container-fluid:before,.container-fluid:after,.row:before,.row:after{content:" ";display:table}.clearfix:after,.container:after,.container-fluid:after,.row:after{clear:both}.center-block{display:block;margin-left:auto;margin-right:auto}.pull-right{float:right !important}.pull-left{float:left !important}.hide{display:none !important}.show{display:block !important}.invisible{visibility:hidden}.text-hide{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0}.hidden{display:none !important;visibility:hidden !important}.affix{position:fixed}@-ms-viewport{width:device-width}.visible-xs,.visible-sm,.visible-md,.visible-lg{display:none !important}.visible-xs-block,.visible-xs-inline,.visible-xs-inline-block,.visible-sm-block,.visible-sm-inline,.visible-sm-inline-block,.visible-md-block,.visible-md-inline,.visible-md-inline-block,.visible-lg-block,.visible-lg-inline,.visible-lg-inline-block{display:none !important}@media (max-width:767px){.visible-xs{display:block !important}table.visible-xs{display:table}tr.visible-xs{display:table-row !important}th.visible-xs,td.visible-xs{display:table-cell !important}}@media (max-width:767px){.visible-xs-block{display:block !important}}@media (max-width:767px){.visible-xs-inline{display:inline !important}}@media (max-width:767px){.visible-xs-inline-block{display:inline-block !important}}@media (min-width:768px) and (max-width:991px){.visible-sm{display:block !important}table.visible-sm{display:table}tr.visible-sm{display:table-row !important}th.visible-sm,td.visible-sm{display:table-cell !important}}@media (min-width:768px) and (max-width:991px){.visible-sm-block{display:block !important}}@media (min-width:768px) and (max-width:991px){.visible-sm-inline{display:inline !important}}@media (min-width:768px) and (max-width:991px){.visible-sm-inline-block{display:inline-block !important}}@media (min-width:992px) and (max-width:1199px){.visible-md{display:block !important}table.visible-md{display:table}tr.visible-md{display:table-row !important}th.visible-md,td.visible-md{display:table-cell !important}}@media (min-width:992px) and (max-width:1199px){.visible-md-block{display:block !important}}@media (min-width:992px) and (max-width:1199px){.visible-md-inline{display:inline !important}}@media (min-width:992px) and (max-width:1199px){.visible-md-inline-block{display:inline-block !important}}@media (min-width:1200px){.visible-lg{display:block !important}table.visible-lg{display:table}tr.visible-lg{display:table-row !important}th.visible-lg,td.visible-lg{display:table-cell !important}}@media (min-width:1200px){.visible-lg-block{display:block !important}}@media (min-width:1200px){.visible-lg-inline{display:inline !important}}@media (min-width:1200px){.visible-lg-inline-block{display:inline-block !important}}@media (max-width:767px){.hidden-xs{display:none !important}}@media (min-width:768px) and (max-width:991px){.hidden-sm{display:none !important}}@media (min-width:992px) and (max-width:1199px){.hidden-md{display:none !important}}@media (min-width:1200px){.hidden-lg{display:none !important}}.visible-print{display:none !important}@media print{.visible-print{display:block !important}table.visible-print{display:table}tr.visible-print{display:table-row !important}th.visible-print,td.visible-print{display:table-cell !important}}.visible-print-block{display:none !important}@media print{.visible-print-block{display:block !important}}.visible-print-inline{display:none !important}@media print{.visible-print-inline{display:inline !important}}.visible-print-inline-block{display:none !important}@media print{.visible-print-inline-block{display:inline-block !important}}@media print{.hidden-print{display:none !important}}
\ No newline at end of file
......@@ -2,162 +2,93 @@ body {
background: black;
color: #BBB;
font-family: "Lucida Sans Typewriter", "Lucida Console", Monaco, "Bitstream Vera Sans Mono", monospace;
font-size: 100%;
}
header,footer,
article,section,
hgroup,nav,
figure,div,aside {
display: block;
.plugin {
margin-bottom: 20px;
}
section {
text-align: justify;
}
section > article {
display: inline-block;
vertical-align: top;
*display: inline;
zoom: 1;
}
section:after {
content: "";
.plugin table {
width: 100%;
display: inline-block;
}
aside {
float: left;
margin-right: 2%;
}
div#newline{
clear: both;
height: 1em;
.plugin table tr td:not(:first-child) {
text-align: right;
}
#underline{
.underline{
text-decoration: underline
}
#bold{
.bold{
font-weight: bold;
}
#sort{
.sort{
font-weight: bold;
}
#sort:after{
.sort:after{
content: '\25BC'
}
/*Theme*/
#title{
.text-right {
text-align: right;
}
/* Theme */
.title{
font-weight: bold;
color: white;
}
#table {
display: table;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
}
#ok {
.ok {
color: green;
}
#filter {
.filter {
color: cyan;
}
#ok_log {
.ok_log {
background-color: green;
color: white;
}
#careful {
.careful {
color: blueviolet;
}
#careful_log {
.careful_log {
background-color: blueviolet;
color: white;
}
#warning {
.warning {
color: orange;
}
#warning_log {
.warning_log {
background-color: orange;
color: white;
}
#critical {
.critical {
color: red;
}
#critical_log {
.critical_log {
background-color: red;
color: white;
}
#nice {
.nice {
color: magenta;
}
#status {
.status {
color: green;
}
/*Plugins*/
#system {
float: left;
}
#uptime {
float: right;
}
#cpu {}
#load {}
#mem {}
#memswap {}
#leftstats {}
#network {
margin-bottom: 1em;
}
#diskio {
margin-bottom: 1em;
}
#fs {
margin-bottom: 1em;
}
#raid {
margin-bottom: 1em;
}
#sensors {}
#rightstats {}
#alert {
display: block;
}
#processcount {
display: block;
margin: 1em;
.process {
color: green;
}
#monitor {
display: block;
margin: 1em;
/* Plugins */
#cpu table tr td:nth-child(3),
#mem table tr td:nth-child(3),
#monitor table tr td:nth-child(3) {
text-align: left;
padding-left: 20px;
}
#processlist {}
/*
article#processlist>div>div>span:last-child {
visibility: hidden;
#processlist table tr td {
padding: 0px 5px 0px 5px;
white-space: nowrap;
text-align: right;
}
*/
#now {}
/*Responsive design*/
@media only screen and (max-width: 1600px) {
body { font-size:90%; }
}
@media only screen and (max-width: 1280px) {
body { font-size:80%; }
}
@media only screen and (max-width: 1024px) {
body { font-size:80%; }
#processlist .hide { display: none; }
}
@media only screen and (max-width: 768px) {
body { font-size:70%; }
aside { margin-right: 1%; }
.hide { display: none; }
}
@media only screen and (max-width: 480px) {
body { font-size:60%; }
aside { margin-right: 1%; }
.hide { display: none; }
}
#processlist table tr td:nth-child(6),
#processlist table tr td:nth-child(12) {
text-align: left;
}
\ No newline at end of file
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册