mudhorn/prometheus
1
0
Fork 0
mirror of https://github.com/prometheus/prometheus.git synced 2024-09-20 07:47:31 -07:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

Render legend in a similar style to labels

Browse source
This commit is contained in:
Bernerd Schaefer 2013-04-12 10:39:15 +02:00
parent a7ec43189a
commit 8c9597cb39
2 changed files with 21 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
web/static/css/graph.css
View file

@ -27,7 +27,7 @@ svg {
padding: 0.5em; padding: 0.5em;
} }
.graph .detail .item.active .labels { .labels {
font-size: 11px; font-size: 11px;
line-height: 11px; line-height: 11px;
} }
@ -39,3 +39,13 @@ svg {
height: 10px; height: 10px;
margin: 2px 2px 0 8px; margin: 2px 2px 0 8px;
} }
.legend.rickshaw_legend {
width: auto;
}
.legend.rickshaw_legend .line {
padding-bottom: 10px;
clear: none;
float: left;
}

25
web/static/js/graph.js
View file

@ -288,16 +288,18 @@ Prometheus.Graph.prototype.submitQuery = function() {
}); });
}; };
Prometheus.Graph.prototype.metricToTsName = function(labels) { Prometheus.Graph.prototype.renderLabels = function(labels) {
var tsName = labels["name"] + "{";
var labelStrings = []; var labelStrings = [];
for (label in labels) { for (label in labels) {
if (label != "name") { if (label != "name") {
labelStrings.push(label + "='" + labels[label] + "'"); labelStrings.push("<strong>"+label + "</strong>: " + labels[label]);
} }
} }
tsName += labelStrings.join(",") + "}"; return labels = "<div class='labels'>"+ labelStrings.join("<br>") + "</div>";
return tsName; }
Prometheus.Graph.prototype.metricToTsName = function(labels) {
return labels["name"] + "<br>" + this.renderLabels(labels);
}; };
Prometheus.Graph.prototype.parseValue = function(value) { Prometheus.Graph.prototype.parseValue = function(value) {
@ -373,21 +375,14 @@ Prometheus.Graph.prototype.updateGraph = function(reloadGraph) {
graph: self.rickshawGraph, graph: self.rickshawGraph,
formatter: function(series, x, y) { formatter: function(series, x, y) {
var swatch = '<span class="detail_swatch" style="background-color: ' + series.color + '"></span>'; var swatch = '<span class="detail_swatch" style="background-color: ' + series.color + '"></span>';
var content = swatch + series.labels["name"] + ": <strong>" + parseInt(y) + '</strong><br>'; var content = swatch + series.labels["name"] + ": <strong>" + y + '</strong><br>';
var labelStrings = [] return content + self.renderLabels(series.labels);
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 legend = new Rickshaw.Graph.Legend({ var legend = new Rickshaw.Graph.Legend({
element: self.legend[0], element: self.legend[0],
graph: self.rickshawGraph graph: self.rickshawGraph,
}); });
var highlighter = new Rickshaw.Graph.Behavior.Series.Highlight( { var highlighter = new Rickshaw.Graph.Behavior.Series.Highlight( {