path: root/modules-available/systemstatus/templates/systeminfo.html

<div>{{lang_uptimeOS}}: <b>{{uptime}}</b></div>
<div>{{lang_distribution}}: <b>{{distribution}}</b></div>
<div>{{lang_kernel}}: <b>{{kernel}}</b></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">
	(function () {
		var hiddenProp;
		if (typeof document.hidden !== "undefined") { // Opera 12.10 and Firefox 18 and later support
			hiddenProp = "hidden";
		} else if (typeof document.msHidden !== "undefined") {
			hiddenProp = "msHidden";
		} else if (typeof document.webkitHidden !== "undefined") {
			hiddenProp = "webkitHidden";
		} else {
			hiddenProp = null;
		}

		{{#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 $cpu = $(cpuCircle._el);
			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;
			if (!$cpu.is(':visible') || (hiddenProp && document[hiddenProp])) {
				setTimeout(updateSystem, 2500);
				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>