From 8c9597cb3996c9c7a77f5484fdb3859677b8b492 Mon Sep 17 00:00:00 2001
From: Bernerd Schaefer <bj.schaefer@gmail.com>
Date: Fri, 12 Apr 2013 10:39:15 +0200
Subject: [PATCH] Render legend in a similar style to labels

---
 web/static/css/graph.css | 12 +++++++++++-
 web/static/js/graph.js   | 25 ++++++++++---------------
 2 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/web/static/css/graph.css b/web/static/css/graph.css
index 2a82fa885..32840e5a3 100644
--- a/web/static/css/graph.css
+++ b/web/static/css/graph.css
@@ -27,7 +27,7 @@ svg {
   padding: 0.5em;
 }
 
-.graph .detail .item.active .labels {
+.labels {
   font-size: 11px;
   line-height: 11px;
 }
@@ -39,3 +39,13 @@ svg {
   height: 10px;
   margin: 2px 2px 0 8px;
  }
+
+ .legend.rickshaw_legend {
+   width: auto;
+ }
+
+ .legend.rickshaw_legend .line {
+   padding-bottom: 10px;
+   clear: none;
+   float: left;
+ }
diff --git a/web/static/js/graph.js b/web/static/js/graph.js
index d717518b9..7921ab7eb 100644
--- a/web/static/js/graph.js
+++ b/web/static/js/graph.js
@@ -288,16 +288,18 @@ Prometheus.Graph.prototype.submitQuery = function() {
   });
 };
 
-Prometheus.Graph.prototype.metricToTsName = function(labels) {
-  var tsName = labels["name"] + "{";
+Prometheus.Graph.prototype.renderLabels = function(labels) {
   var labelStrings = [];
   for (label in labels) {
     if (label != "name") {
-      labelStrings.push(label + "='" + labels[label] + "'");
+      labelStrings.push("<strong>"+label + "</strong>: " + labels[label]);
     }
   }
-  tsName += labelStrings.join(",") + "}";
-  return tsName;
+  return labels = "<div class='labels'>"+ labelStrings.join("<br>") + "</div>";
+}
+
+Prometheus.Graph.prototype.metricToTsName = function(labels) {
+  return labels["name"] + "<br>" + this.renderLabels(labels);
 };
 
 Prometheus.Graph.prototype.parseValue = function(value) {
@@ -373,21 +375,14 @@ Prometheus.Graph.prototype.updateGraph = function(reloadGraph) {
     graph: self.rickshawGraph,
     formatter: function(series, x, y) {
       var swatch = '<span class="detail_swatch" style="background-color: ' + series.color + '"></span>';
-      var content = swatch + series.labels["name"] + ": <strong>" + parseInt(y) + '</strong><br>';
-      var labelStrings = []
-      for (label in series.labels) {
-        if (label != "name") {
-          labelStrings.push("<strong>"+label + "</strong>: " + series.labels[label]);
-        }
-      }
-      var labels = "<div class='labels'>"+ labelStrings.join("<br>") + "</div>";
-      return content + labels;
+      var content = swatch + series.labels["name"] + ": <strong>" + y + '</strong><br>';
+      return content + self.renderLabels(series.labels);
     }
   });
 
   var legend = new Rickshaw.Graph.Legend({
     element: self.legend[0],
-    graph: self.rickshawGraph
+    graph: self.rickshawGraph,
   });
 
   var highlighter = new Rickshaw.Graph.Behavior.Series.Highlight( {