moos3/gist:563793

## gistfile1.txt
<!DOCTYPE html>
<html>
	<head>
		<script src="./jquery/jquery.min.js"></script>
		<script src="./underscore/underscore-min.js"></script>
		<style type="text/css" media="all">
			@import "./style.css";
		</style>
		<script src="./RGraph-1/libraries/RGraph.common.js" ></script>
		<script src="./RGraph-1/libraries/RGraph.bar.js" ></script>
		<script src="./RGraph-1/libraries/RGraph.line.js" ></script>
		<script src="./RGraph-1/libraries/RGraph.pie.js" ></script>
		<script src="./RGraph-1/libraries/RGraph.funnel.js" ></script>
		<script type="text/javascript" src="./swfobject.js"></script>
		<script type="text/javascript" src="./FABridge.js"></script>
		<script type="text/javascript" src="./web_socket.js"></script>
		<script>
			// This is for websocket-js
			WebSocket.__swfLocation = "./WebSocketMain.swf";
			function drawCharts(data) {
				var bar = new RGraph.Bar('bar', data);
				bar.Set('chart.title', 'CPU usage');
				bar.Set('chart.grouping', 'stacked');
				bar.Set('chart.gutter', 30);
				bar.Set('chart.key', ['user', 'sys']);
				bar.Set('chart.variant', '3d');
				bar.Set('chart.ymax', 100);
				bar.Set('chart.text.color', 'black');
				bar.Set('chart.colors', ['blue','orange']);
				bar.Set('chart.strokecolor', 'rgba(0,0,0,0)');
				RGraph.Clear(bar.canvas);
				bar.Draw();
			}
			// webSocket is referenced from the HTML-elements, so it has to stay
			// in the global scope.
			var webSocket;
			function ready() {
				var stats_array = new Array(10);
				var stats_row = _.template('<tr id ="row_<%= number %>"> \
					<td id="date_<%= number %>">&nbsp;</td>\
					<td id="kbt_<%= number %>"></td>\
					<td id="tps_<%= number %>"></td>\
					<td id="mbs_<%= number %>"></td>\
					<td id="us_<%= number %>"></td>\
					<td id="sy_<%= number %>"></td>\
					<td id="total_<%= number %>"></td>\
					<td id="id_<%= number %>"></td>\
					<td id="m1_<%= number %>"></td>\
					<td id="m5_<%= number %>"></td>\
					<td id="m15_<%= number %>"></td>\
				</tr>');
				for (var i=0; i < stats_array.length; i++) {
					$('#stats_table').append(stats_row({number : i}));
				};
				var out = $('#out');
				var stats_div = $('#stats');
				drawCharts([])
				webSocket = new WebSocket('ws://localhost:9000/iostat');
				webSocket.onopen = function() {
					out.html('Connection opened.<br>');
				};
				webSocket.onmessage = function(event) {
					stats = event.data;
					data = JSON.parse(stats);
					stats_array.unshift(data);
					stats_array.pop();
					for (var i=0; i < stats_array.length; i++) {
						if (stats_array[i]) {
							var cpu_total = stats_array[i].cpu.sy + stats_array[i].cpu.us
							$('#date_'  + i).html(stats_array[i].date);
							$('#kbt_'   + i).html(stats_array[i].disk.kbt);
							$('#tps_'   + i).html(stats_array[i].disk.tps);
							$('#mbs_'   + i).html(stats_array[i].disk.mbs);
							$('#us_'    + i).html(stats_array[i].cpu.us);
							$('#sy_'    + i).html(stats_array[i].cpu.sy);
							$('#total_' + i).html(cpu_total);
							$('#id_'    + i).html(stats_array[i].cpu.id);
							$('#m1_'    + i).html(stats_array[i].load_average.m1);
							$('#m5_'    + i).html(stats_array[i].load_average.m5);
							$('#m15_'   + i).html(stats_array[i].load_average.m15);
							if (cpu_total > 90) {
								$('#row_' + i).css(
								{
									'background-color' : 'red',
									'font-weight' : 'bolder'
								})
								}else{
								$('#row_' + i).css({
									'background-color' : null,
									'font-weight' : null
								});
							};
						};
						var total_array = [];
						for (var j=0; j < stats_array.length; j++) {
							if (stats_array[j]) {
								total_array[j] = [stats_array[j].cpu.us, stats_array[j].cpu.sy]
								}else{
								total_array[j] = [0,0]
							};
						};
						drawCharts(total_array.reverse());
					};
				};
				webSocket.onclose = function() {
					out.html('Connection closed.<br>');
				};
			};
		</script>
	</head>
	<body onload="ready();">
		<input type="button" value="Start"
		onclick="webSocket.send(0);">
		<input type="button" value="Close connection"
		onclick="webSocket.close();">
		<table id="stats_table" border="1" cellspacing="0" cellpadding="0">
			<tr>
				<th colspan="1"></th>
				<th colspan="3">disk0</th>
				<th colspan="4">cpu</th>
				<th colspan="3">load average</th>
				<tr>
					<tr>
						<th width="200">Time</th>
						<th width="50">KB/t</th>
						<th>tps</th>
						<th>MB/s</th>
						<th>us</th>
						<th>sy</th>
						<th>total</th>
						<th>id</th>
						<th>1m</th>
						<th>5m</th>
						<th>15m</th>
					</tr>
				</table>
				<div id="stats">
				</div>
				<div id="out"></div>
				<canvas id="bar" width="480" height="200">
				<div style="border: 2px dashed red; width: 475px; height: 300px; color: red; background-color: #fee; text-align: center; padding: 5px; padding-top: 90px"></div>
				</canvas>
			</body>
		</html>
	<!DOCTYPE html>
	<html>
	<head>
	<script src="./jquery/jquery.min.js"></script>
	<script src="./underscore/underscore-min.js"></script>
	<style type="text/css" media="all">
	@import "./style.css";
	</style>
	<script src="./RGraph-1/libraries/RGraph.common.js" ></script>
	<script src="./RGraph-1/libraries/RGraph.bar.js" ></script>
	<script src="./RGraph-1/libraries/RGraph.line.js" ></script>
	<script src="./RGraph-1/libraries/RGraph.pie.js" ></script>
	<script src="./RGraph-1/libraries/RGraph.funnel.js" ></script>
	<script type="text/javascript" src="./swfobject.js"></script>
	<script type="text/javascript" src="./FABridge.js"></script>
	<script type="text/javascript" src="./web_socket.js"></script>
	<script>
	// This is for websocket-js
	WebSocket.__swfLocation = "./WebSocketMain.swf";
	function drawCharts(data) {
	var bar = new RGraph.Bar('bar', data);
	bar.Set('chart.title', 'CPU usage');
	bar.Set('chart.grouping', 'stacked');
	bar.Set('chart.gutter', 30);
	bar.Set('chart.key', ['user', 'sys']);
	bar.Set('chart.variant', '3d');
	bar.Set('chart.ymax', 100);
	bar.Set('chart.text.color', 'black');
	bar.Set('chart.colors', ['blue','orange']);
	bar.Set('chart.strokecolor', 'rgba(0,0,0,0)');
	RGraph.Clear(bar.canvas);
	bar.Draw();
	}
	// webSocket is referenced from the HTML-elements, so it has to stay
	// in the global scope.
	var webSocket;
	function ready() {
	var stats_array = new Array(10);
	var stats_row = _.template('<tr id ="row_<%= number %>"> \
	<td id="date_<%= number %>"> </td>\
	<td id="kbt_<%= number %>"></td>\
	<td id="tps_<%= number %>"></td>\
	<td id="mbs_<%= number %>"></td>\
	<td id="us_<%= number %>"></td>\
	<td id="sy_<%= number %>"></td>\
	<td id="total_<%= number %>"></td>\
	<td id="id_<%= number %>"></td>\
	<td id="m1_<%= number %>"></td>\
	<td id="m5_<%= number %>"></td>\
	<td id="m15_<%= number %>"></td>\
	</tr>');
	for (var i=0; i < stats_array.length; i++) {
	$('#stats_table').append(stats_row({number : i}));
	};
	var out = $('#out');
	var stats_div = $('#stats');
	drawCharts([])
	webSocket = new WebSocket('ws://localhost:9000/iostat');
	webSocket.onopen = function() {
	out.html('Connection opened.<br>');
	};
	webSocket.onmessage = function(event) {
	stats = event.data;
	data = JSON.parse(stats);
	stats_array.unshift(data);
	stats_array.pop();
	for (var i=0; i < stats_array.length; i++) {
	if (stats_array[i]) {
	var cpu_total = stats_array[i].cpu.sy + stats_array[i].cpu.us
	$('#date_' + i).html(stats_array[i].date);
	$('#kbt_' + i).html(stats_array[i].disk.kbt);
	$('#tps_' + i).html(stats_array[i].disk.tps);
	$('#mbs_' + i).html(stats_array[i].disk.mbs);
	$('#us_' + i).html(stats_array[i].cpu.us);
	$('#sy_' + i).html(stats_array[i].cpu.sy);
	$('#total_' + i).html(cpu_total);
	$('#id_' + i).html(stats_array[i].cpu.id);
	$('#m1_' + i).html(stats_array[i].load_average.m1);
	$('#m5_' + i).html(stats_array[i].load_average.m5);
	$('#m15_' + i).html(stats_array[i].load_average.m15);
	if (cpu_total > 90) {
	$('#row_' + i).css(
	{
	'background-color' : 'red',
	'font-weight' : 'bolder'
	})
	}else{
	$('#row_' + i).css({
	'background-color' : null,
	'font-weight' : null
	});
	};
	};
	var total_array = [];
	for (var j=0; j < stats_array.length; j++) {
	if (stats_array[j]) {
	total_array[j] = [stats_array[j].cpu.us, stats_array[j].cpu.sy]
	}else{
	total_array[j] = [0,0]
	};
	};
	drawCharts(total_array.reverse());
	};
	};
	webSocket.onclose = function() {
	out.html('Connection closed.<br>');
	};
	};
	</script>
	</head>
	<body onload="ready();">
	<input type="button" value="Start"
	onclick="webSocket.send(0);">
	<input type="button" value="Close connection"
	onclick="webSocket.close();">
	<table id="stats_table" border="1" cellspacing="0" cellpadding="0">
	<tr>
	<th colspan="1"></th>
	<th colspan="3">disk0</th>
	<th colspan="4">cpu</th>
	<th colspan="3">load average</th>
	<tr>
	<tr>
	<th width="200">Time</th>
	<th width="50">KB/t</th>
	<th>tps</th>
	<th>MB/s</th>
	<th>us</th>
	<th>sy</th>
	<th>total</th>
	<th>id</th>
	<th>1m</th>
	<th>5m</th>
	<th>15m</th>
	</tr>
	</table>
	<div id="stats">
	</div>
	<div id="out"></div>
	<canvas id="bar" width="480" height="200">
	<div style="border: 2px dashed red; width: 475px; height: 300px; color: red; background-color: #fee; text-align: center; padding: 5px; padding-top: 90px"></div>
	</canvas>
	</body>
	</html>