From 7e93da67f9d90ac76abf63c25d0a397993add0da Mon Sep 17 00:00:00 2001
From: "James E. Blair" <jeblair@openstack.org>
Date: Fri, 23 Aug 2013 19:10:23 -0700
Subject: [PATCH] Add sparklines to pipeline headers

http://en.wikipedia.org/wiki/Sparkline

Change-Id: Ibeef433d57376d256939ecc7a60eff27e03b98b9
---
 .../openstack_project/files/zuul/status.js    | 39 +++++++++++++++++--
 1 file changed, 36 insertions(+), 3 deletions(-)

diff --git a/modules/openstack_project/files/zuul/status.js b/modules/openstack_project/files/zuul/status.js
index 2bef9fa65e..b0b6d54e5d 100644
--- a/modules/openstack_project/files/zuul/status.js
+++ b/modules/openstack_project/files/zuul/status.js
@@ -1,4 +1,4 @@
-// Copyright 2012 OpenStack Foundation
+// Copyright 2012-2013 OpenStack Foundation
 //
 // Licensed under the Apache License, Version 2.0 (the "License"); you may
 // not use this file except in compliance with the License. You may obtain
@@ -73,14 +73,37 @@ function count_changes(pipeline) {
     return count;
 }
 
+function get_sparkline_url(pipeline_name) {
+    if (!(pipeline_name in window.zuul_sparkline_urls)) {
+	window.zuul_sparkline_urls[pipeline_name] = $.fn.graphite.geturl({
+	    url: "http://graphite.openstack.org/render/",
+	    from: "-8hours",
+	    width: 100,
+	    height: 16,
+	    margin: 0,
+	    hideLegend: true,
+	    hideAxes: true,
+	    hideGrid: true,
+	    target: [
+		"color(stats.gauges.zuul.pipeline."+pipeline_name+".current_changes, '6b8182')",
+	    ],
+	});
+    }
+    return window.zuul_sparkline_urls[pipeline_name];
+}
+
 function format_pipeline(data) {
     var count = count_changes(data);
     var html = '<div class="pipeline"><h3 class="subhead">'+
         data['name'];
+
+    html += '<span class="count"><img src="' + get_sparkline_url(data['name']);
+    html += '" title="8 hour history of changes in pipeline"/>';
+
     if (count > 0) {
-        html += ' <span class="count">(' + count + ')</span>';
+        html += ' (' + count + ')';
     }
-    html += '</h3>';
+    html += '</span></h3>';
     if (data['description'] != null) {
         html += '<p>'+data['description']+'</p>';
     }
@@ -241,10 +264,20 @@ function update_graphs() {
             img.src = newimg.src;
         });
     });
+
+    $.each(window.zuul_sparkline_urls, function(name, url) {
+        var newimg = new Image();
+        var parts = url.split('#');
+        newimg.src = parts[0] + '#' + new Date().getTime();
+        $(newimg).load(function (x) {
+	    window.zuul_sparkline_urls[name] = newimg.src;
+        });
+    });
 }
 
 $(function() {
     window.zuul_graph_update_count = 0;
+    window.zuul_sparkline_urls = {};
     update_timeout();
 
     $(document).on({