Add an end-to-end example to test GATD

lab11 · May 31, 2014 · f715d9d · f715d9d
1 parent 0d23f54
commit f715d9d
Show file tree

Hide file tree

Showing 17 changed files with 3,638 additions and 104 deletions.
diff --git a/example/.gitignore b/example/.gitignore
@@ -0,0 +1 @@
+computer_stats_udp_source.conf
diff --git a/example/README.md b/example/README.md
@@ -0,0 +1,12 @@
+End-to-End Example
+==================
+
+After you have GATD set up, you can use this example to verify that everything
+is working correctly. Computer usage stats is a data source that reports basic
+statistics of the machine it's running on (cpu usage, memory usage, etc).
+Be sure to configure the computer stats source
+(`computer_stats_udp_source.conf.example -> computer_stats_udp_source`) with the
+correct information for your GATD install.
+
+See `web/` directory for an example website that displays the output of the
+computer usage statistics.
diff --git a/...es/computer_stats_udp_source.conf.example → ...le/computer_stats_udp_source.conf.example b/...es/computer_stats_udp_source.conf.example → ...le/computer_stats_udp_source.conf.example
diff --git a/sources/computer_stats_udp_source.py → example/computer_stats_udp_source.py b/sources/computer_stats_udp_source.py → example/computer_stats_udp_source.py
diff --git a/example/web/.gitignore b/example/web/.gitignore
@@ -0,0 +1 @@
+bower_components
diff --git a/example/web/README.md b/example/web/README.md
@@ -0,0 +1,20 @@
+Website Example
+===============
+
+GATD leverages socket.io for streaming data and we use some libraries for
+graphing (flot, jquery, underscore). You can use [bower](http://bower.io/) to
+install all of these automatically, simply run:
+
+`bower install`
+
+Then, edit the `computer_usage.html` set the `GATD_HOSTNAME` and
+`COMP_USAGE_PROFILE_ID` variables (they are at the beginning of the `onload`
+function, around line 185).
+
+Next, run a local webserver to serve the page:
+
+`python3 -m http.server 8000` or `python2 -m SimpleHTTPServer 8000`
+
+In a browser, go to <http://localhost:8000/computer_usage.html>. If everything's
+working, you should see a checkbox for your machine at the bottom of the page,
+check it and watch the data!
diff --git a/example/web/bower.json b/example/web/bower.json
@@ -0,0 +1,27 @@
+{
+  "name": "gatd",
+  "version": "0.1.0",
+  "homepage": "https://github.com/bradjc/gatd",
+  "authors": [
+    "Brad Campbell <[email protected]>"
+  ],
+  "description": "Versatile data collection service that supports real time streaming and data archival.",
+  "keywords": [
+    "data"
+  ],
+  "license": "MIT",
+  "private": true,
+  "dependencies": {
+    "flot": ">= 0.8.2",
+	"jquery": ">= 1.10.2",
+	"jquery.ui": ">= 1.10.4",
+	"socket.io-client": "= 0.9.16",
+	"underscore": ">= 1.5.2",
+	"jsIP": ">= 0.1.2",
+	"leaflet": ">= 0.7.1",
+	"bignumber.js": ">= 1.3.0",
+	"threejs": null,
+	"d3": ">= 3.4.5",
+	"bootstrap": null
+  }
+}
diff --git a/example/web/computer_usage.html b/example/web/computer_usage.html
@@ -0,0 +1,233 @@
+<html>
+<head>
+	<link rel="shortcut icon" type="image/x-icon" href="/images/favicon.ico" />
+	<script src="/bower_components/socket.io-client/dist/socket.io.min.js"></script>
+	<!-- bower is sometimes inconsistent about whether the 'dist' is here, just grab both, one will fail -->
+	<script src="/bower_components/jquery/dist/jquery.min.js"></script>
+	<script src="/bower_components/jquery/jquery.min.js"></script>
+	<script src="/bower_components/underscore/underscore.js"></script>
+	<script>WEB_SOCKET_SWF_LOCATION='/bower_components/socket.io-client/dist/WebSocketMain.swf'</script>
+	<link href="/bower_components/bootstrap/dist/css/bootstrap.min.css" media="all" rel="stylesheet" type="text/css" />
+	<link href="/bower_components/bootstrap/dist/css/bootstrap-theme.min.css" media="all" rel="stylesheet" type="text/css" />
+	<link href="/css/base.css" media="all" rel="stylesheet" type="text/css" />
+
+
+<script src="js/jquery.flot.custom-0.8.2.js"></script>
+<script src="bower_components/flot/jquery.flot.time.js"></script>
+<script src="js/jquery.grapher.js"></script>
+
+
+	<title>
+GATD - Computer Usage Statistics
+</title>
+
+
+</head>
+
+<body>
+
+
+	<div class="navbar navbar-default navbar-fixed-top" role="navigation">
+		<div class="container">
+			<div class="navbar-header page-title">
+				<div class="hidden-xs">
+				Computer Usage Statistics
+				</div>
+				<div class="visible-xs">
+					<div class="row">
+						<div class="col-xs-2">
+							<a href="http://www.eecs.umich.edu/cse/">
+								<img src="/images/michigan.png" height="35px" style="margin:4px 0 0 10px;"/>
+							</a>
+						</div>
+						<div class="col-xs-8">
+							<div class="text-center">
+								Computer Usage Stats
+							</div>
+						</div>
+						<div class="col-xs-2">
+							<a href="http://lab11.eecs.umich.edu">
+								<img src="/images/lab11_50px.jpg" height="35px" style="margin:4px 10px 0px 0;"/>
+							</a>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="navbar-right hidden-xs" style="margin:8px 0 0 20px;">
+				<a href="http://www.eecs.umich.edu/cse/">
+					<img src="/images/michigan.png" height="35px" />
+				</a>
+			</div>
+			<div class="nav navbar-nav navbar-right hidden-xs" style="margin:8px 0 0 20px;">
+				<a href="http://lab11.eecs.umich.edu">
+					<img src="/images/lab11_50px.jpg" height="35px" />
+				</a>
+			</div>
+		</div>
+	</div>
+
+
+
+	<div class="container">
+		<div class="page-header">
+			<h1> 
+Computer Usage Statistics
+ <small> 
+What's your computer doing?
+ </small></h1>
+		</div>
+
+<p>
+The graph shows the runtime statistics of various computers.
+</p>
+
+	</div>
+
+
+
+<div class="container">
+	<div class="well well-clear">
+		<div class="row">
+			<div class="col-lg-10 col-xs-12">
+				<div id="graph" style="width:100%;height:500px;margin-left:auto;margin-right:auto;"></div>
+			</div>
+			<div class="col-lg-2 col-xs-12">
+				<div id="graph_key"></div>
+			</div>
+		</div>
+	</div>
+
+	<div class="well">
+		<h3>Machines reporting usage data:</h3>
+		<div id="hostname_select">
+			<ul style="list-style-type:none;">
+			</ul>
+		</div>
+	</div>
+</div>
+
+<script type="text/javascript">
+
+var socket;
+var hostnames = {};
+var g;
+var active_hostnames = [];
+
+var keep_hostnames_for = 900000;
+
+function sanitize_hostname (h) {
+	return h.replace(/[^a-zA-Z0-9]./g, "");
+}
+
+function remove_old_hostnames () {
+	timenow = new Date().getTime();
+
+	for (h in hostnames) {
+		if (hostnames[h] + keep_hostnames_for < timenow) {
+			delete hostnames[h];
+		}
+	}
+}
+
+function display_hostnames () {
+	for (h in hostnames) {
+		if ($("#hostname_select ul #check_" + sanitize_hostname(h)).length == 0) {
+			add_checkbox(h);
+		}
+	}
+}
+
+function add_checkbox(name) {
+	var container = $('#hostname_select ul');
+
+	sname = sanitize_hostname(name);
+	var html = '<li><input type="checkbox" id="check_'+sname+'" value="'+name+'" /> <label for="check_'+sname+'">'+name+'</label></li>';
+	container.append($(html));
+	$("#hostname_select input[type='checkbox']").change(update_active_hostnames);
+}
+
+function update_active_hostnames () {
+	active_hostnames.splice(0, active_hostnames.length);
+	$("#hostname_select input[type='checkbox']").each(function () {
+		if ($(this).prop('checked')) {
+			active_hostnames.push($(this).attr('value'));
+		} else {
+			g.removeSeries($(this).attr('value'));
+		}
+	});
+	g.update();
+}
+
+function toggle_hostname (name) {
+	for (var i=0; i<active_hostnames.length; i++) {
+		if (active_hostnames[i] == name) {
+			active_hostnames.splice(i, 1);
+			g.removeSeries(name);
+			g.update();
+			return;
+		}
+	}
+	active_hostnames.push(name);
+}
+
+function hostname_is_active (name) {
+	for (var i=0; i<active_hostnames.length; i++) {
+		if (active_hostnames[i] == name) {
+			return true;
+		}
+	}
+	return false;
+}
+
+
+
+
+onload = function() {
+	alert('GATD_HOSTNAME not set!');
+	var GATD_HOSTNAME = 'localhost'
+	alert('COMP_USAGE_PROFILE_ID not set!');
+	var COMP_USAGE_PROFILE_ID = 'XXXXXXXXXX';
+
+	socket = io.connect(GATD_HOSTNAME+':8082/stream');
+
+	socket.on('connect', function (data) {
+		var query = {profile_id: COMP_USAGE_PROFILE_ID};
+		socket.emit('query', query);
+	});
+
+	socket.on('data', function (data) {
+		hostnames[data['hostname']] = data['time'];
+
+		remove_old_hostnames();
+		display_hostnames();
+
+		if (hostname_is_active(data['hostname'])) {
+			pdw = {};
+			pd  = {};
+			pd['cpu_usage']       = [data['time']-14400000, data['cpu_usage']];
+			pd['disk_usage']      = [data['time']-14400000, data['disk_usage']];
+			pd['memory_usage']    = [data['time']-14400000, data['memory_usage']];
+			if (_.has(data, 'network_sent') && _.has(data, 'network_receive')) {
+				pd['network_sent']    = [data['time']-14400000, data['network_sent']];
+				pd['network_receive'] = [data['time']-14400000, data['network_receive']];
+			}
+			pdw = {name: data['hostname'], data:pd};
+			g.addData(pdw);
+			g.update();
+		}
+	});
+
+
+	g = $.grapher($("#graph"), {legend: {show: true, container: $("#graph_key")}});
+
+
+
+}
+</script>
+
+
+
+
+
+</body>
+</html>
diff --git a/example/web/css/base.css b/example/web/css/base.css
@@ -0,0 +1,14 @@
+body {
+	padding-top: 70px;
+}
+.page-title {
+	padding-top: 3px;
+	font-size: 28px;
+	font-weight: bold;
+	color: #0892D0;
+}
+
+.well-clear {
+	background-image: none;
+	background-color: transparent;
+}
diff --git a/example/web/images/lab11_50px.jpg b/example/web/images/lab11_50px.jpg
diff --git a/example/web/images/michigan.png b/example/web/images/michigan.png