From 564633ecbcd8e532d6b156bb9c2ab5921f5bed80 Mon Sep 17 00:00:00 2001 From: Bernerd Schaefer Date: Thu, 11 Apr 2013 18:17:33 +0200 Subject: [PATCH 1/8] Render graph labels vertically This helps to make the timeseries with many labels fit on the screen. --- web/static/css/graph.css | 19 ++++++++++++++++++- web/static/js/graph.js | 15 ++++++++++++++- 2 files changed, 32 insertions(+), 2 deletions(-) diff --git a/web/static/css/graph.css b/web/static/css/graph.css index 0e2718cca..2a82fa885 100644 --- a/web/static/css/graph.css +++ b/web/static/css/graph.css @@ -9,7 +9,6 @@ body { .graph { position: relative; min-height: 400px; - overflow-x: hidden; } svg { @@ -22,3 +21,21 @@ svg { vertical-align: top; margin: 0 0 0 0px; } + +.graph .detail .item.active { + line-height: 1.4em; + padding: 0.5em; +} + +.graph .detail .item.active .labels { + font-size: 11px; + line-height: 11px; +} + +.graph .detail .item .detail_swatch { + float: right; + display: inline-block; + width: 10px; + height: 10px; + margin: 2px 2px 0 8px; + } diff --git a/web/static/js/graph.js b/web/static/js/graph.js index 4a6163d85..4ed17dbe7 100644 --- a/web/static/js/graph.js +++ b/web/static/js/graph.js @@ -318,6 +318,7 @@ Prometheus.Graph.prototype.transformData = function(json) { var data = json.Value.map(function(ts) { return { name: self.metricToTsName(ts.Metric), + labels: ts.Metric, data: ts.Values.map(function(value) { return { x: value.Timestamp, @@ -369,7 +370,19 @@ Prometheus.Graph.prototype.updateGraph = function(reloadGraph) { } var hoverDetail = new Rickshaw.Graph.HoverDetail({ - graph: self.rickshawGraph + graph: self.rickshawGraph, + formatter: function(series, x, y) { + var swatch = ''; + var content = swatch + series.labels["name"] + ": " + parseInt(y) + '
'; + var labelStrings = [] + for (label in series.labels) { + if (label != "name") { + labelStrings.push(""+label + ": " + series.labels[label]); + } + } + var labels = "
"+ labelStrings.join("
") + "
"; + return content + labels; + } }); var legend = new Rickshaw.Graph.Legend({ From a7ec43189a897e7713a20991868944dddbc41044 Mon Sep 17 00:00:00 2001 From: Bernerd Schaefer Date: Thu, 11 Apr 2013 18:21:00 +0200 Subject: [PATCH 2/8] Hovering over legend items highlights series in graph --- web/static/js/graph.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/web/static/js/graph.js b/web/static/js/graph.js index 4ed17dbe7..d717518b9 100644 --- a/web/static/js/graph.js +++ b/web/static/js/graph.js @@ -390,6 +390,11 @@ Prometheus.Graph.prototype.updateGraph = function(reloadGraph) { graph: self.rickshawGraph }); + var highlighter = new Rickshaw.Graph.Behavior.Series.Highlight( { + graph: self.rickshawGraph, + legend: legend + }); + var shelving = new Rickshaw.Graph.Behavior.Series.Toggle({ graph: self.rickshawGraph, legend: legend From 8c9597cb3996c9c7a77f5484fdb3859677b8b492 Mon Sep 17 00:00:00 2001 From: Bernerd Schaefer Date: Fri, 12 Apr 2013 10:39:15 +0200 Subject: [PATCH 3/8] 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(""+label + ": " + labels[label]); } } - tsName += labelStrings.join(",") + "}"; - return tsName; + return labels = "
"+ labelStrings.join("
") + "
"; +} + +Prometheus.Graph.prototype.metricToTsName = function(labels) { + return labels["name"] + "
" + 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 = ''; - var content = swatch + series.labels["name"] + ": " + parseInt(y) + '
'; - var labelStrings = [] - for (label in series.labels) { - if (label != "name") { - labelStrings.push(""+label + ": " + series.labels[label]); - } - } - var labels = "
"+ labelStrings.join("
") + "
"; - return content + labels; + var content = swatch + series.labels["name"] + ": " + y + '
'; + 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( { From 461e02d2b8cc227200c5b35ea0fa741263ffa2e0 Mon Sep 17 00:00:00 2001 From: Bernerd Schaefer Date: Fri, 12 Apr 2013 10:39:37 +0200 Subject: [PATCH 4/8] Flip hover detail to prevent going off the screen --- web/static/css/graph.css | 11 +++++++++++ web/static/js/graph.js | 14 +++++++++++++- 2 files changed, 24 insertions(+), 1 deletion(-) diff --git a/web/static/css/graph.css b/web/static/css/graph.css index 32840e5a3..062036409 100644 --- a/web/static/css/graph.css +++ b/web/static/css/graph.css @@ -22,6 +22,17 @@ svg { margin: 0 0 0 0px; } +.graph .detail .item.flipped { + right: 10px; +} + +.graph .detail .item.flipped:before { + content: "\25b8"; + left: auto; + right: 1px; + font-size: 0.8em; +} + .graph .detail .item.active { line-height: 1.4em; padding: 0.5em; diff --git a/web/static/js/graph.js b/web/static/js/graph.js index 7921ab7eb..a921bd00c 100644 --- a/web/static/js/graph.js +++ b/web/static/js/graph.js @@ -377,7 +377,19 @@ Prometheus.Graph.prototype.updateGraph = function(reloadGraph) { var swatch = ''; var content = swatch + series.labels["name"] + ": " + y + '
'; return content + self.renderLabels(series.labels); - } + }, + onRender: function() { + var width = this.graph.width; + var element = jQuery(this.element); + + jQuery(".item", element).each(function() { + if ($(this).outerWidth() + element.offset().left > width) { + $(this).addClass("flipped") + } else { + $(this).removeClass("flipped") + } + }) + }, }); var legend = new Rickshaw.Graph.Legend({ From 43dc377bee2ea547b595d8c3f6f87beb4f2d620d Mon Sep 17 00:00:00 2001 From: Bernerd Schaefer Date: Fri, 12 Apr 2013 11:59:49 +0200 Subject: [PATCH 5/8] Flip x_label when it would render off-page --- web/static/css/graph.css | 4 ++++ web/static/js/graph.js | 8 ++++++++ 2 files changed, 12 insertions(+) diff --git a/web/static/css/graph.css b/web/static/css/graph.css index 062036409..927d12bfe 100644 --- a/web/static/css/graph.css +++ b/web/static/css/graph.css @@ -22,6 +22,10 @@ svg { margin: 0 0 0 0px; } +.graph .detail .x_label.flipped { + right: 0; +} + .graph .detail .item.flipped { right: 10px; } diff --git a/web/static/js/graph.js b/web/static/js/graph.js index a921bd00c..7c93e8216 100644 --- a/web/static/js/graph.js +++ b/web/static/js/graph.js @@ -382,6 +382,14 @@ Prometheus.Graph.prototype.updateGraph = function(reloadGraph) { var width = this.graph.width; var element = jQuery(this.element); + jQuery(".x_label", element).each(function() { + if ($(this).outerWidth() + element.offset().left > width) { + $(this).addClass("flipped") + } else { + $(this).removeClass("flipped") + } + }) + jQuery(".item", element).each(function() { if ($(this).outerWidth() + element.offset().left > width) { $(this).addClass("flipped") From 953334a4f797eed78379f7c58a8c58f1d8639056 Mon Sep 17 00:00:00 2001 From: Bernerd Schaefer Date: Fri, 12 Apr 2013 13:41:53 +0200 Subject: [PATCH 6/8] Reformat and add semicolons to graph.js --- web/static/js/graph.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/web/static/js/graph.js b/web/static/js/graph.js index 7c93e8216..cb0f2ee54 100644 --- a/web/static/js/graph.js +++ b/web/static/js/graph.js @@ -292,10 +292,10 @@ Prometheus.Graph.prototype.renderLabels = function(labels) { var labelStrings = []; for (label in labels) { if (label != "name") { - labelStrings.push(""+label + ": " + labels[label]); + labelStrings.push("" + label + ": " + labels[label]); } } - return labels = "
"+ labelStrings.join("
") + "
"; + return labels = "
" + labelStrings.join("
") + "
"; } Prometheus.Graph.prototype.metricToTsName = function(labels) { @@ -384,17 +384,17 @@ Prometheus.Graph.prototype.updateGraph = function(reloadGraph) { jQuery(".x_label", element).each(function() { if ($(this).outerWidth() + element.offset().left > width) { - $(this).addClass("flipped") + $(this).addClass("flipped"); } else { - $(this).removeClass("flipped") + $(this).removeClass("flipped"); } }) jQuery(".item", element).each(function() { if ($(this).outerWidth() + element.offset().left > width) { - $(this).addClass("flipped") + $(this).addClass("flipped"); } else { - $(this).removeClass("flipped") + $(this).removeClass("flipped"); } }) }, From 442a6d2b1134a1b08be094d56e178c2ce516b265 Mon Sep 17 00:00:00 2001 From: Bernerd Schaefer Date: Fri, 12 Apr 2013 13:43:53 +0200 Subject: [PATCH 7/8] Use $ instead of jQuery --- web/static/js/exprBrowser.js | 2 +- web/static/js/graph.js | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/web/static/js/exprBrowser.js b/web/static/js/exprBrowser.js index ec04036a9..4917f8310 100644 --- a/web/static/js/exprBrowser.js +++ b/web/static/js/exprBrowser.js @@ -17,7 +17,7 @@ function submitQuery() { } function bindHandlers() { - jQuery.ajaxSetup({ + $.ajaxSetup({ cache: false }); $("#queryForm").submit(submitQuery); diff --git a/web/static/js/graph.js b/web/static/js/graph.js index cb0f2ee54..f319868b1 100644 --- a/web/static/js/graph.js +++ b/web/static/js/graph.js @@ -380,9 +380,9 @@ Prometheus.Graph.prototype.updateGraph = function(reloadGraph) { }, onRender: function() { var width = this.graph.width; - var element = jQuery(this.element); + var element = $(this.element); - jQuery(".x_label", element).each(function() { + $(".x_label", element).each(function() { if ($(this).outerWidth() + element.offset().left > width) { $(this).addClass("flipped"); } else { @@ -390,7 +390,7 @@ Prometheus.Graph.prototype.updateGraph = function(reloadGraph) { } }) - jQuery(".item", element).each(function() { + $(".item", element).each(function() { if ($(this).outerWidth() + element.offset().left > width) { $(this).addClass("flipped"); } else { @@ -457,7 +457,7 @@ function addGraph(options) { } function init() { - jQuery.ajaxSetup({ + $.ajaxSetup({ cache: false }); From 72bd5854850d0a53ad6074408a7c022087083f98 Mon Sep 17 00:00:00 2001 From: Bernerd Schaefer Date: Mon, 15 Apr 2013 10:04:09 +0200 Subject: [PATCH 8/8] Revert style change to legend items --- web/static/css/graph.css | 10 ---------- web/static/js/graph.js | 10 +++++++++- 2 files changed, 9 insertions(+), 11 deletions(-) diff --git a/web/static/css/graph.css b/web/static/css/graph.css index 927d12bfe..8d72325b9 100644 --- a/web/static/css/graph.css +++ b/web/static/css/graph.css @@ -54,13 +54,3 @@ 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 f319868b1..296b3729a 100644 --- a/web/static/js/graph.js +++ b/web/static/js/graph.js @@ -299,7 +299,15 @@ Prometheus.Graph.prototype.renderLabels = function(labels) { } Prometheus.Graph.prototype.metricToTsName = function(labels) { - return labels["name"] + "
" + this.renderLabels(labels); + var tsName = labels["name"] + "{"; + var labelStrings = []; + for (label in labels) { + if (label != "name") { + labelStrings.push(label + "='" + labels[label] + "'"); + } + } + tsName += labelStrings.join(",") + "}"; + return tsName; }; Prometheus.Graph.prototype.parseValue = function(value) {