mirror of https://github.com/nicolargo/glances
Add additionnal file for HTML output
parent
f6f69d475c
commit
67fdbe9520
|
@ -0,0 +1,130 @@
|
|||
/*
|
||||
Reset the sheet
|
||||
*/
|
||||
|
||||
* { margin: 0; padding: 0; }
|
||||
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
|
||||
[hidden] { display: none; }
|
||||
|
||||
/*
|
||||
Colors table
|
||||
* bg: background color
|
||||
* fg: foreground color
|
||||
*/
|
||||
|
||||
.bgmain { background: transparent; }
|
||||
.fgmain { color: #FFFFFF; }
|
||||
|
||||
.bghost { background: transparent; }
|
||||
.fghost { color: #E3D7BF; font-size: 50px; text-shadow: 1px 1px 1px #e88860, 2px 2px 1px #e88860, 3px 3px 1px #e88860, 3px 3px 1px #0c0d0d, 4px 4px 3px #0c0d0d;}
|
||||
|
||||
.bgsystem { background: transparent; }
|
||||
.fgsystem { color: #E88860; text-shadow: 1px 1px 1px #000; }
|
||||
|
||||
.bgcpu { background: transparent; }
|
||||
.fgcpu { color: #3C8AAD; }
|
||||
|
||||
.bgload { background: transparent; }
|
||||
.fgload { color: #3C8AAD; }
|
||||
|
||||
.bgmem { background: transparent; }
|
||||
.fgmem { color: #3C8AAD; }
|
||||
|
||||
.bgcdefault { background: transparent; }
|
||||
.fgcdefault { color: #FFFFFF; }
|
||||
.bgcok { background: #60AC39; }
|
||||
.fgcok { color: #FFFFFF; }
|
||||
.bgccareful { background: #6039AC; }
|
||||
.fgccareful { color: #FFFFFF; }
|
||||
.bgcwarning { background: #FFAA00; }
|
||||
.fgcwarning { color: #FFFFFF; }
|
||||
.bgcritical { background: #D92626; }
|
||||
.fgcritical { color: #FFFFFF; }
|
||||
|
||||
/*
|
||||
Main
|
||||
*/
|
||||
|
||||
html {
|
||||
background-image: url('../img/bg.png');
|
||||
font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;
|
||||
}
|
||||
html, button, input, select, textarea { font-family: sans-serif; }
|
||||
body { margin: 0; font-size: 1em; line-height: 1.4; }
|
||||
::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
|
||||
::selection { background: #fe57a1; color: #fff; text-shadow: none; }
|
||||
|
||||
/* Tables */
|
||||
|
||||
table{
|
||||
font-family: 'Trebuchet MS', sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
border-collapse: separate;
|
||||
}
|
||||
|
||||
thead th{
|
||||
padding:10px;
|
||||
border:1px solid #3C8AAD;
|
||||
-webkit-border-top-left-radius:5px;
|
||||
-webkit-border-top-right-radius:5px;
|
||||
-moz-border-radius:5px 5px 0px 0px;
|
||||
border-top-left-radius:5px;
|
||||
border-top-right-radius:5px;
|
||||
}
|
||||
|
||||
thead th:empty{
|
||||
background:transparent;
|
||||
border:none;
|
||||
}
|
||||
|
||||
tfoot td{
|
||||
font-size:16px;
|
||||
text-align:center;
|
||||
padding:10px 0px;
|
||||
}
|
||||
|
||||
tfoot th{
|
||||
}
|
||||
|
||||
tbody td{
|
||||
width: 80px;
|
||||
padding:10px;
|
||||
text-align:center;
|
||||
border:1px solid #3C8AAD;
|
||||
-moz-border-radius:2px;
|
||||
-webkit-border-radius:2px;
|
||||
border-radius:2px;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
|
||||
header {
|
||||
text-align: center;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
/* Main */
|
||||
|
||||
#main {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* First line stats: CLM (CPU, LOAD, MEM) */
|
||||
|
||||
#clm {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#cpu, #load, #mem {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
#cpu, #load {
|
||||
margin-right: 50px;
|
||||
}
|
||||
|
||||
|
||||
/* Footer */
|
|
@ -0,0 +1,39 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
{% block head %}
|
||||
<meta charset="utf-8">
|
||||
<title>{% block title %}Glances{% endblock %}</title>
|
||||
<link rel="stylesheet" href="{% block css %}css/base.css{% endblock %}">
|
||||
{% endblock %}
|
||||
<meta http-equiv="refresh" content="{{ refresh }}" />
|
||||
</head>
|
||||
|
||||
<body class="bgmain fgmain">
|
||||
|
||||
<header>
|
||||
{% block header %}{% endblock %}
|
||||
</header>
|
||||
|
||||
<section id="main">
|
||||
<section id="clm">
|
||||
<article id="cpu">
|
||||
{% block cpu %}{% endblock %}
|
||||
</article>
|
||||
<article id="load">
|
||||
{% block load %}{% endblock %}
|
||||
</article>
|
||||
<article id="mem">
|
||||
{% block mem %}{% endblock %}
|
||||
</article>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
{% block footer %}{% endblock %}
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
|
@ -0,0 +1,98 @@
|
|||
{% extends "base.html" %}
|
||||
|
||||
{% block css %}css/default.css{% endblock %}
|
||||
|
||||
{% block header %}
|
||||
<h1 class="bghost fghost">Glances running on {{ host.hostname }}</h1>
|
||||
<h2 class="bgsystem fgsystem">{{ system.os_name }} {{ system.platform }} {{ system.os_version }}</h2>
|
||||
{% endblock %}
|
||||
|
||||
{% block cpu %}
|
||||
{% if cpu is defined %}
|
||||
<table >
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col" class="bgcpu fgcpu"></th>
|
||||
<th scope="col" class="bgcpu fgcpu">Cpu <small>{{ (cpu.user + cpu.kernel + cpu.nice)|round(1) }}%</small></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="bgcpu fgcpu">User</td>
|
||||
<td class="{{ cpu.user_color }}">{{ cpu.user|round(1) }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="bgcpu fgcpu">Kernel</td>
|
||||
<td class="{{ cpu.kernel_color }}">{{ cpu.kernel|round(1) }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="bgcpu fgcpu">Nice</td>
|
||||
<td class="{{ cpu.nice_color }}">{{ cpu.nice|round(1) }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
{% block load %}
|
||||
{% if (load is defined) and (core is defined) %}
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col" class="bgload fgload"></th>
|
||||
<th scope="col" class="bgload fgload">Load <small>{{ core }}-Core</small></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="bgload fgload">1 min</td>
|
||||
<td class="{{ load.min1_color }}">{{ load.min1|round(2) }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="bgload fgload">5 mins</td>
|
||||
<td class="{{ load.min5_color }}">{{ load.min5|round(2) }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="bgload fgload">15 mins</td>
|
||||
<td class="{{ load.min15_color }}">{{ load.min15|round(2) }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
{% block mem %}
|
||||
{% if (mem is defined) and (memswap is defined) %}
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col" class="bgmem fgmem"></th>
|
||||
<th scope="col" class="bgmem fgmem">Mem</th>
|
||||
<th scope="col" class="bgmem fgmem">Swap</th>
|
||||
<th scope="col" class="bgmem fgmem">Real</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="bgmem fgmem">Total</td>
|
||||
<td>{{ mem.total|filesizeformat(binary = true) }}</td>
|
||||
<td>{{ memswap.total|filesizeformat(binary = true) }}</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="bgmem fgmem">Used</td>
|
||||
<td>{{ mem.used|filesizeformat(binary = true) }}</td>
|
||||
<td class="{{ memswap.used_color }}">{{ memswap.used|filesizeformat(binary = true) }}</td>
|
||||
<td class="{{ mem.used_color }}">{{ (mem.used-mem.cache)|filesizeformat(binary = true) }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="bgmem fgmem">Free</td>
|
||||
<td>{{ mem.free|filesizeformat(binary = true) }}</td>
|
||||
<td>{{ memswap.free|filesizeformat(binary = true) }}</td>
|
||||
<td>{{ (mem.free+mem.cache)|filesizeformat(binary = true) }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
Binary file not shown.
After Width: | Height: | Size: 20 KiB |
Loading…
Reference in New Issue