horrible graphs

api/server.py

@@ -38,6 +38,13 @@ class HTTPException(Exception):
 		self.code = code
 		self.body = body
 
+BASE_HEADERS = [
+	('Access-Control-Allow-Origin', '*'),
+	('Access-Control-Allow-Headers', 'X-Requested-With, X-Request'),
+]
+DEFAULT_HEADERS = BASE_HEADERS + [('Content-type', 'application/json')]
+ERROR_HEADERS = BASE_HEADERS + [('Content-type', 'text/plain')]
+
 def application(environ, start_response):
 	try:
 		split = environ['PATH_INFO'][1:].split('/')
@@ -54,7 +61,7 @@ def application(environ, start_response):
 			handler = handlers.get(split[2])
 			if handler:
 				body = json.dumps(handler(split, query, environ))
-				start_response('200 OK', [('Content-type', 'application/json')])
+				start_response('200 OK', DEFAULT_HEADERS)
 				return [body]
 			else:
 				print 'no handler for', split
@@ -63,11 +70,11 @@ def application(environ, start_response):
 		raise HTTPException(404, 'unhandled path: ' + environ['PATH_INFO'])
 	except HTTPException as e:
 		response = '%d %s' % (e.code, httplib.responses[e.code])
-		start_response(response, [('Content-type', 'text/plain')])
+		start_response(response, ERROR_HEADERS)
 		return [e.body]
 	except:
 		traceback.print_exc()
-		start_response('500 Internal Server Error', [('Content-type', 'text/plain')])
+		start_response('500 Internal Server Error', ERROR_HEADERS)
 		return ['ruh roh']
 
 def get_data(split, query, environ):

web/server.py

@@ -72,6 +72,11 @@ class LogoutHandler(BaseHandler):
 		self.clear_all_cookies()
 		self.redirect('/')
 
+class StatsHandler(BaseHandler):
+	@tornado.gen.coroutine
+	def get(self):
+		self.render('stats.html')
+
 class CSSHandler(tornado.web.RequestHandler):
 	def get(self, css_path):
 		css_path = os.path.join(os.path.dirname(__file__), 'static', css_path) + '.ccss'
@@ -86,6 +91,7 @@ if __name__ == '__main__':
 			(r'/register', RegisterHandler),
 			(r'/login', LoginHandler),
 			(r'/logout', LogoutHandler),
+			(r'/stats', StatsHandler),
 			(r'/(css/.+)\.css', CSSHandler),
 		],
 		template_path=os.path.join(os.path.dirname(__file__), 'templates'),

web/static/css/stats.ccss

@@ -0,0 +1,2 @@
+#graphs > div:
+	display: inline-block

web/static/js/stats.js

@@ -0,0 +1,67 @@
+window.addEvent('domready', function() {
+	'use strict';
+
+	new Request.JSON({
+		'url': 'http://localhost:8892/v1/1/data/1?start=2014-04-17&end=2014-04-18',
+		'onSuccess': graph_stats,
+	}).get();
+
+	function graph_stats(data) {
+		Object.each(data, function(fields, date) {
+			if (fields == null)
+				return;
+			Object.each(fields, function(subfields, field) {
+				if (field == 'disk')
+					return;
+				graph_stat(field, subfields);
+			});
+		});
+	}
+
+	var colors = {
+		'cpu': {
+			'idle': '#3aa',
+			'user': '#33a',
+			'system': '#aa3',
+		},
+		'mem': {
+			'used': '#a33',
+			'buffers': '#3aa',
+			'cached': '#33a',
+		},
+		'net': {
+			'bytes_recv': '#33a',
+			'bytes_sent': '#3a3',
+		},
+	};
+	function graph_stat(field, data) {
+		var series = [];
+		Object.each(data, function(array, k) {
+			array = array.map(function(val, i) {
+				return {'x': i, 'y': val};
+			})
+			var serie = {
+				'name': field + '.' + k,
+				'data': array,
+				'color': colors[field][k] || '#111',
+			};
+			series.push(serie);
+		});
+		var graph_div = new Element('div');
+		var legend_div = new Element('div');
+		var graph = new Rickshaw.Graph({
+			'element': graph_div,
+			'width': 500,
+			'height': 200,
+			'renderer': 'area',
+			'stroke': true,
+			'series': series,
+		});
+		var legend = new Rickshaw.Graph.Legend({
+			'graph': graph,
+			'element': legend_div,
+		});
+		graph.render();
+		$('graphs').adopt(graph_div, legend_div, new Element('br'));
+	}
+});

web/templates/stats.html

@@ -0,0 +1,15 @@
+{% extends "base.html" %}
+
+{% block js %}
+	<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.5/d3.js"></script>
+	<script src="//cdnjs.cloudflare.com/ajax/libs/rickshaw/1.4.6/rickshaw.js"></script>
+	<script src="/static/js/stats.js"></script>
+{% end %}
+{% block css %}
+	<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/rickshaw/1.4.6/rickshaw.css">
+	<link rel="stylesheet" href="/css/stats.css">
+{% end %}
+
+{% block main %}
+	<div id="graphs"></div>
+{% end %}