
<H2>Server Status</H2>
<center>
<table>
	<tr><td></td><td></td></tr>
	<tr>
		<td>
			<fieldset><legend>CPU</legend> 
				<div id="cpu_chart" style="width: 400px; height: 200px;"></div>
			</fieldset>
		</td>
		<td>
			<fieldset><legend>Memory</legend> 
				<div id="mem_chart" style="width: 400px; height: 200px;"></div>
			</fieldset>
		</td>
	</tr>
	<tr>
		<td>
			<fieldset><legend>Network</legend> 
				<div id="net_chart" style="width: 400px; height: 200px;"></div>
			</fieldset>
		</td>
		<td>
			<fieldset><legend>HDD</legend> 
				<div id="hdd_chart" style="width: 400px; height: 200px;"></div>
			</fieldset>
		</td>
	</tr>
</table>
</center>

<script language="javascript" type="text/javascript"> 
var MAX_POINTS = 20;
var index = 0;
var cpu_data = [];
var mem_data = [];
var mem_max = 0;
var swap_data = [];

$(function () {     
	update();
});
function update(){
	$.ajax({
        type: "GET",
		url: "ServerStatus",
		dataType: "xml",
		success: function(data) {
			update_cpu(data);
			update_mem(data);
			update_net(data);
			update_hdd(data);

			index++;
		}
	});
	setTimeout('update()', 2000);
}
//***************** CPU ***********************
function update_cpu(data){	
	$(data).find("cpu").each(function() {
		$(this).find("core").each(function() {
			var cpu_nr = parseInt($(this).attr("id"));
			if(cpu_data.length < (cpu_nr+1))
				cpu_data.push( [] );
			cpu_data[cpu_nr].push( [index, $(this).attr("load")] );
			if(index>MAX_POINTS)
				cpu_data[cpu_nr].shift();
		});
	});

	var datasets = [];
	for(i=0; i<cpu_data.length ;i++){
		datasets[i] = { 
	   	   	label: "Cpu"+i, 
	   	   	data: cpu_data[i], 
	   	   	lines: { show: true }, 
	   	   	points: { show: true } 
   	   	};
	}
   	var options = { 
   		   	legend: { position: "ne" }, 
   		   	xaxis: { ticks: [] }, 
   		   	yaxis: { ticks: [0,20,40,60,80,100] } 
	};
   	$.plot($("#cpu_chart"), datasets, options);
}
//***************** Memory ********************
function update_mem(data){
	$(data).find("memory").each(function() {
		mem_data.push( [index, $(this).attr("used")] );
		mem_max = $(this).attr("total");
	});
	$(data).find("swap").each(function() {
		swap_data.push( [index, $(this).attr("used")] );
	});
	if(index>MAX_POINTS){
		mem_data.shift();
		swap_data.shift();
	}

	var datasets = [{ 
   	   	//label: "Mem", 
   	   	data: mem_data, 
   	 	color: "rgb(200, 20, 30)",
    	threshold: { below: mem_max*0.9, color: "rgb(30, 180, 20)" },
   	   	lines: { show: true, fill: true }
   	   	//points: { show: true } 
  	},{
  		label: "Swap", 
   	   	data: swap_data, 
   		lines: { show: true, fill: true }
   	   	//points: { show: true } 
  	}];
   	var options = { 
   		   	legend: { position: "ne" }, 
   		   	xaxis: { ticks: [] }, 
   		   	yaxis: { ticks: 6, max: mem_max, min: 0 } 
	};
   	$.plot($("#mem_chart"), datasets, options);
}
//***************** NETWORK *******************
function update_net(data){	

}
//***************** HDD ***********************
function update_hdd(data){
	var i = 0;
	hdd_data = [[],[]];
	hdd_names = [];
	$(data).find("hdd").each(function() {
		$(this).find("disk").each(function() {
			hdd_names.push( $(this).attr("name")+"( "+$(this).attr("free")+" GB free)" );
			var used = parseFloat($(this).attr("used"));
			var total = parseFloat($(this).attr("total"));
			hdd_data[0].push( [i, (used/total)*100] );
			hdd_data[1].push( [i, 100-((used/total)*100)] );
			i += 2;		
		});
	});

	var datasets = [{ 
   	   	data: hdd_data[0], 
   	   	bars: { show: true },
	  	color: "rgb(200, 20, 30)",
	  	stack: true
  	},{
  		data: hdd_data[1], 
   	   	bars: { show: true },
	  	color: "rgb(30, 180, 20)",
	  	stack: true
  	}];
   	var options = { 
   		   	xaxis: { ticks: [] }, 
   		   	yaxis: { ticks: [0,20,40,60,80,100] } 
	};
   	var plot = $.plot($("#hdd_chart"), datasets, options);

   	for(i=0; i<hdd_names.length ;i++){
   		o = plot.pointOffset({ x: i*2, y: 100});
   		$("#hdd_chart").append('<div style="position: absolute; left: '+(o.left + 4)+'px; top: '+o.top+'px; color: #666; font-size: 10px; font-weight: bold;">'+hdd_names[i]+'</div>');
   	}
}
</script>
