mudhorn/prometheus
1
0
Fork 0
mirror of https://github.com/prometheus/prometheus.git synced 2024-11-10 07:34:04 -08:00
Code Issues Actions 3 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;
}
.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;
}

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

@ -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( {