diff options
Diffstat (limited to 'modules-available/systemstatus/templates/systeminfo.html')
-rw-r--r-- | modules-available/systemstatus/templates/systeminfo.html | 115 |
1 files changed, 115 insertions, 0 deletions
diff --git a/modules-available/systemstatus/templates/systeminfo.html b/modules-available/systemstatus/templates/systeminfo.html new file mode 100644 index 00000000..ed4a1532 --- /dev/null +++ b/modules-available/systemstatus/templates/systeminfo.html @@ -0,0 +1,115 @@ +<div> + {{lang_uptimeOS}}: {{uptime}} +</div> + +<div class="slx-storechart"> + <b>{{lang_cpuLoad}}</b> + {{#cpuLoadOk}} + <div id="circles-cpuload"></div> + <div>{{lang_average}}: {{cpuLoad}}%</div> + <div>{{lang_onlyOS}}: {{cpuSystem}}%</div> + <div>{{lang_logicCPUs}}: {{cpuCount}}</div> + {{/cpuLoadOk}} + {{^cpuLoadOk}} + {{lang_notDetermined}} + {{/cpuLoadOk}} +</div> + +<div class="slx-storechart"> + <b>{{lang_ramUsage}}</b> + {{#memTotal}} + <div id="circles-mem"></div> + <div>{{lang_total}}: {{memTotal}}</div> + <div>{{lang_free}}: {{memFree}}</div> + {{/memTotal}} + {{^memTotal}} + {{lang_notDetermined}} + {{/memTotal}} +</div> + +<div class="slx-storechart"> + <b>{{lang_swapUsage}}</b> + {{#memTotal}} + <div id="circles-swap"></div> + <div>{{lang_total}}: {{swapTotal}}</div> + <div>{{lang_occupied}}: {{swapUsed}}</div> + {{/memTotal}} + {{^memTotal}} + {{lang_notDetermined}} + {{/memTotal}} +</div> + +<div class="clearfix"></div> + +{{#swapWarning}} +<div> + <b>{{lang_attention}}</b> {{lang_swapWarning}} +</div> +{{/swapWarning}} + +<script type="text/javascript"> + {{#cpuLoadOk}} + var cpuCircle = Circles.create({ + id: 'circles-cpuload', + radius: 60, + value: {{{cpuLoad}}}, + maxValue: 100, + width: 10, + text: function(value){return value + '%'; }, + colors: ['#dbc', '#33f'], + duration: 400, + wrpClass: 'circles-wrp', + textClass: 'circles-text' + }); + var lastCpuTotal = {{CpuTotal}}; + var lastCpuIdle = {{CpuIdle}}; + var lastCpuPercent = {{cpuLoad}}; + {{/cpuLoadOk}} + {{#memTotal}} + var memCircle = Circles.create({ + id: 'circles-mem', + radius: 60, + value: {{{memPercent}}}, + maxValue: 100, + width: 10, + text: function(value){return value + '%'; }, + colors: ['#dbc', '#33f'], + duration: 400, + wrpClass: 'circles-wrp', + textClass: 'circles-text' + }); + var swapCircle = Circles.create({ + id: 'circles-swap', + radius: 60, + value: {{{swapPercent}}}, + maxValue: 100, + width: 10, + text: function(value){return value + '%'; }, + colors: ['#dbc', '#f33'], + duration: 400, + wrpClass: 'circles-wrp', + textClass: 'circles-text' + }); + {{/memTotal}} + function updateSystem() { + if (!cpuCircle && !memCircle) return; + $.post('?do=SystemStatus&action=SysPoll', { token: TOKEN }, function(data) { + if (memCircle && data.MemPercent) memCircle.update(data.MemPercent); + if (swapCircle && data.SwapPercent) swapCircle.update(data.SwapPercent); + if (cpuCircle && data.CpuIdle) { + var total = data.CpuTotal - lastCpuTotal; + var load = total - (data.CpuIdle - lastCpuIdle); + var percent = Math.round(100 * load / total); + cpuCircle.update(percent, Math.abs(percent - lastCpuPercent) < 5 ? 0 : 250); + lastCpuTotal = data.CpuTotal; + lastCpuIdle = data.CpuIdle; + lastCpuPercent = percent; + } + }, 'json').fail(function(data) { + console.log(data); + }).always(function() { + setTimeout(updateSystem, 1200); + }); + } + setTimeout(updateSystem, 1000); +</script> |