mirror of
https://github.com/prometheus/prometheus.git
synced 2024-12-26 06:04:05 -08:00
Make graphs linkable, object-oriented, and multiple per page.
This commit is contained in:
Julius Volz
parent
33b34d71a4
commit
040f9751f2
|
|
@ -7,13 +7,12 @@ body {
|
||||||
background-color: #eee;
|
background-color: #eee;
|
||||||
}
|
}
|
||||||
|
|
||||||
#chart_container {
|
.graph_container {
|
||||||
font-family: Arial, Helvetica, sans-serif;
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
#chart {
|
.graph {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 80%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
svg {
|
svg {
|
||||||
|
|
@ -21,7 +20,7 @@ svg {
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#legend {
|
.legend {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
margin: 0 0 0 0px;
|
margin: 0 0 0 0px;
|
||||||
|
|
@ -35,11 +34,7 @@ input:not([type=submit]):not([type=file]):not([type=button]) {
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
input:focus {
|
.grouping_box {
|
||||||
border:solid 2px #73A6FF;
|
|
||||||
}
|
|
||||||
|
|
||||||
.grouping-box {
|
|
||||||
position: relative;
|
position: relative;
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
margin: 2px;
|
margin: 2px;
|
||||||
|
|
|
||||||
|
|
@ -11,43 +11,57 @@
|
||||||
<script src="http://code.shutterstock.com/rickshaw/vendor/d3.min.js"></script>
|
<script src="http://code.shutterstock.com/rickshaw/vendor/d3.min.js"></script>
|
||||||
<script src="http://code.shutterstock.com/rickshaw/vendor/d3.layout.min.js"></script>
|
<script src="http://code.shutterstock.com/rickshaw/vendor/d3.layout.min.js"></script>
|
||||||
<script src="http://code.shutterstock.com/rickshaw/rickshaw.min.js"></script>
|
<script src="http://code.shutterstock.com/rickshaw/rickshaw.min.js"></script>
|
||||||
<script src="js/rickshaw.js"></script>
|
|
||||||
|
<!-- copy all these JSen to our own location -->
|
||||||
|
<script src="https://raw.github.com/wycats/handlebars.js/1.0.rc.2/dist/handlebars.js"></script>
|
||||||
|
|
||||||
|
<script src="js/graph.js"></script>
|
||||||
|
|
||||||
|
<script id="graph_template" type="text/x-handlebars-template">
|
||||||
|
<div id="graph_wrapper{{id}}">
|
||||||
|
<div class="grouping_box">
|
||||||
|
<form action="/api/query_range" method="GET" class="query_form">
|
||||||
|
<label for="expr{{id}}">Expression:</label>
|
||||||
|
<input type="text" name="expr" id="expr{{id}}" size="80" value="{{expr}}"><br>
|
||||||
|
|
||||||
|
<label for="range_input{{id}}">Range:</label>
|
||||||
|
<input type="button" value="-" name="dec_range">
|
||||||
|
<input type="text" name="range_input" id="range_input{{id}}" size="5" value="{{range_input}}">
|
||||||
|
<input type="hidden" name="range">
|
||||||
|
<input type="button" value="+" name="inc_range">
|
||||||
|
|
||||||
|
<label for="end{{id}}">End:</label>
|
||||||
|
<input type="button" value="<<" name="dec_end">
|
||||||
|
<input type="text" name="end" id="end{{id}}" value="{{end}}">
|
||||||
|
<input type="button" value=">>" name="inc_end">
|
||||||
|
|
||||||
|
<label for="step_input{{id}}">Resolution (s):</label>
|
||||||
|
<input type="text" name="step_input" id="step_input{{id}}" value="{{step_input}}" size="4">
|
||||||
|
<input type="hidden" name="step">
|
||||||
|
|
||||||
|
<input type="checkbox" name="stacked" id="stacked{{id}}" {{stacked_checked}}>
|
||||||
|
<label for="stacked{{id}}">Stacked</label>
|
||||||
|
|
||||||
|
<input type="submit" value="Graph" name="submit">
|
||||||
|
|
||||||
|
<img src="img/ajax-loader.gif" class="spinner" alt="ajax_spinner">
|
||||||
|
|
||||||
|
<div class="eval_stats"></div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<div class="grouping_box">
|
||||||
|
<div class="graph_container">
|
||||||
|
<div class="graph"></div>
|
||||||
|
<div class="legend"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</script>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div class="grouping-box">
|
<div id="graph_container">
|
||||||
<form action="/api/query_range" method="GET" id="query_form">
|
|
||||||
<label for="expr">Expression:</label>
|
|
||||||
<input type="text" name="expr" id="expr" size="80"><br>
|
|
||||||
|
|
||||||
<label for="range">Range:</label>
|
|
||||||
<input type="button" value="-" id="dec_range">
|
|
||||||
<input type="text" name="range_input" id="range_input" size="5" value="1h">
|
|
||||||
<input type="hidden" name="range" id="range">
|
|
||||||
<input type="button" value="+" id="inc_range">
|
|
||||||
|
|
||||||
<label for="end">End:</label>
|
|
||||||
<input type="text" name="end" id="end">
|
|
||||||
|
|
||||||
<label for="step_input">Resolution (s):</label>
|
|
||||||
<input type="text" name="step_input" id="step_input" value="" size="4">
|
|
||||||
<input type="hidden" name="step" id="step">
|
|
||||||
|
|
||||||
<input type="checkbox" name="stacked" id="stacked" value="1">
|
|
||||||
<label for="stacked">Stacked</label>
|
|
||||||
|
|
||||||
<input type="submit" value="Graph" id="graph_submit">
|
|
||||||
|
|
||||||
<img src="img/ajax-loader.gif" id="spinner" alt="ajax-spinner">
|
|
||||||
|
|
||||||
<div id="eval_stats"></div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
<div class="grouping-box">
|
|
||||||
<div id="chart_container">
|
|
||||||
<div id="chart"></div>
|
|
||||||
<div id="legend"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div><input type="button" value="Add Graph" id="add_graph"></div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
337
static/js/graph.js
Normal file
337
static/js/graph.js
Normal file
|
|
@ -0,0 +1,337 @@
|
||||||
|
// Graph options we might want:
|
||||||
|
// Grid off/on
|
||||||
|
// Stacked off/on
|
||||||
|
// Area off/on
|
||||||
|
// Legend position
|
||||||
|
// Short link
|
||||||
|
// Graph title
|
||||||
|
// Palette
|
||||||
|
// Background
|
||||||
|
// Enable tooltips
|
||||||
|
// width/height
|
||||||
|
// Axis options
|
||||||
|
// Y-Range min/max
|
||||||
|
// (X-Range min/max)
|
||||||
|
// X-Axis format
|
||||||
|
// Y-Axis format
|
||||||
|
// Y-Axis title
|
||||||
|
// X-Axis title
|
||||||
|
// Log scale
|
||||||
|
|
||||||
|
var Prometheus = Prometheus || {};
|
||||||
|
var graphs = [];
|
||||||
|
|
||||||
|
Prometheus.Graph = function(element, options) {
|
||||||
|
this.el = element;
|
||||||
|
this.options = options;
|
||||||
|
this.changeHandler = null;
|
||||||
|
this.rickshawGraph = null;
|
||||||
|
this.data = [];
|
||||||
|
|
||||||
|
this.initialize();
|
||||||
|
};
|
||||||
|
|
||||||
|
Prometheus.Graph.timeFactors = {
|
||||||
|
"y": 60 * 60 * 24 * 365,
|
||||||
|
"w": 60 * 60 * 24 * 7,
|
||||||
|
"d": 60 * 60 * 24,
|
||||||
|
"h": 60 * 60,
|
||||||
|
"m": 60,
|
||||||
|
"s": 1
|
||||||
|
};
|
||||||
|
|
||||||
|
Prometheus.Graph.stepValues = [
|
||||||
|
"1s", "10s", "1m", "5m", "15m", "30m", "1h", "2h", "6h", "12h", "1d", "2d",
|
||||||
|
"1w", "2w", "4w", "8w", "1y", "2y"
|
||||||
|
];
|
||||||
|
|
||||||
|
Prometheus.Graph.numGraphs = 0;
|
||||||
|
|
||||||
|
Prometheus.Graph.prototype.initialize = function() {
|
||||||
|
var self = this;
|
||||||
|
self.id = Prometheus.Graph.numGraphs++;
|
||||||
|
|
||||||
|
// Set default options.
|
||||||
|
self.options['id'] = self.id;
|
||||||
|
self.options['range_input'] = self.options['range_input'] || "1h";
|
||||||
|
self.options['stacked_checked'] = self.options['stacked'] ? "checked" : "";
|
||||||
|
|
||||||
|
// Draw graph controls and container from Handlebars template.
|
||||||
|
var source = $("#graph_template").html();
|
||||||
|
var template = Handlebars.compile(source);
|
||||||
|
var graphHtml = template(self.options);
|
||||||
|
self.el.append(graphHtml);
|
||||||
|
|
||||||
|
// Get references to all the interesting elements in the graph container and
|
||||||
|
// bind event handlers.
|
||||||
|
var graphWrapper = self.el.find("#graph_wrapper" + self.id);
|
||||||
|
self.queryForm = graphWrapper.find(".query_form");
|
||||||
|
self.expr = graphWrapper.find("input[name=expr]");
|
||||||
|
self.rangeInput = self.queryForm.find("input[name=range_input]");
|
||||||
|
self.stacked = self.queryForm.find("input[name=stacked]");
|
||||||
|
|
||||||
|
self.graph = graphWrapper.find(".graph");
|
||||||
|
self.legend = graphWrapper.find(".legend");
|
||||||
|
self.spinner = graphWrapper.find(".spinner");
|
||||||
|
self.evalStats = graphWrapper.find(".eval_stats");
|
||||||
|
|
||||||
|
self.stacked.change(function() { self.updateGraph(); });
|
||||||
|
self.queryForm.submit(function() { self.submitQuery(); return false; });
|
||||||
|
self.spinner.hide();
|
||||||
|
|
||||||
|
self.queryForm.find("input[name=inc_range]").click(function() { self.increaseRange(); });
|
||||||
|
self.queryForm.find("input[name=dec_range]").click(function() { self.decreaseRange(); });
|
||||||
|
self.expr.focus(); // TODO: move to external Graph method.
|
||||||
|
|
||||||
|
if (self.expr.val()) {
|
||||||
|
self.submitQuery();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
Prometheus.Graph.prototype.onChange = function(handler) {
|
||||||
|
this.changeHandler = handler;
|
||||||
|
};
|
||||||
|
|
||||||
|
Prometheus.Graph.prototype.getOptions = function(handler) {
|
||||||
|
var self = this;
|
||||||
|
var options = {};
|
||||||
|
|
||||||
|
var optionInputs = [
|
||||||
|
"expr",
|
||||||
|
"range_input",
|
||||||
|
"end",
|
||||||
|
"step_input",
|
||||||
|
"stacked"
|
||||||
|
];
|
||||||
|
|
||||||
|
self.queryForm.find("input").each(function(index, element) {
|
||||||
|
var name = element.name;
|
||||||
|
if ($.inArray(name, optionInputs) >= 0) {
|
||||||
|
if (name == "stacked") {
|
||||||
|
options[name] = element.checked;
|
||||||
|
} else {
|
||||||
|
options[name] = element.value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return options;
|
||||||
|
};
|
||||||
|
|
||||||
|
Prometheus.Graph.prototype.parseRange = function(rangeText) {
|
||||||
|
var rangeRE = new RegExp("^([0-9]+)([ywdhms]+)$");
|
||||||
|
var matches = rangeText.match(rangeRE);
|
||||||
|
if (matches.length != 3) {
|
||||||
|
return 60;
|
||||||
|
}
|
||||||
|
var value = parseInt(matches[1]);
|
||||||
|
var unit = matches[2];
|
||||||
|
return value * Prometheus.Graph.timeFactors[unit];
|
||||||
|
};
|
||||||
|
|
||||||
|
Prometheus.Graph.prototype.increaseRange = function() {
|
||||||
|
var self = this;
|
||||||
|
var rangeSeconds = self.parseRange(self.rangeInput.val());
|
||||||
|
for (var i = 0; i < Prometheus.Graph.stepValues.length; i++) {
|
||||||
|
if (rangeSeconds < self.parseRange(Prometheus.Graph.stepValues[i])) {
|
||||||
|
self.rangeInput.val(Prometheus.Graph.stepValues[i]);
|
||||||
|
if (self.expr.val()) {
|
||||||
|
self.submitQuery();
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
Prometheus.Graph.prototype.decreaseRange = function() {
|
||||||
|
var self = this;
|
||||||
|
var rangeSeconds = self.parseRange(self.rangeInput.val());
|
||||||
|
for (var i = Prometheus.Graph.stepValues.length - 1; i >= 0; i--) {
|
||||||
|
if (rangeSeconds > self.parseRange(Prometheus.Graph.stepValues[i])) {
|
||||||
|
self.rangeInput.val(Prometheus.Graph.stepValues[i]);
|
||||||
|
if (self.expr.val()) {
|
||||||
|
self.submitQuery();
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
Prometheus.Graph.prototype.submitQuery = function() {
|
||||||
|
var self = this;
|
||||||
|
|
||||||
|
self.spinner.show();
|
||||||
|
self.evalStats.empty();
|
||||||
|
|
||||||
|
var startTime = new Date().getTime();
|
||||||
|
|
||||||
|
var rangeSeconds = self.parseRange(self.rangeInput.val());
|
||||||
|
self.queryForm.find("input[name=range]").val(rangeSeconds);
|
||||||
|
var resolution = self.queryForm.find("input[name=step_input]").val() || Math.max(Math.floor(rangeSeconds / 250), 1);
|
||||||
|
self.queryForm.find("input[name=step]").val(resolution);
|
||||||
|
|
||||||
|
$.ajax({
|
||||||
|
method: self.queryForm.attr("method"),
|
||||||
|
url: self.queryForm.attr("action"),
|
||||||
|
dataType: "json",
|
||||||
|
data: self.queryForm.serialize(),
|
||||||
|
success: function(json, textStatus) {
|
||||||
|
if (json.Type == "error") {
|
||||||
|
alert(json.Value);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
self.data = self.transformData(json);
|
||||||
|
if (self.data.length == 0) {
|
||||||
|
alert("No datapoints found.");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
self.updateGraph(true);
|
||||||
|
},
|
||||||
|
error: function() {
|
||||||
|
alert("Error executing query!");
|
||||||
|
},
|
||||||
|
complete: function() {
|
||||||
|
var duration = new Date().getTime() - startTime;
|
||||||
|
self.evalStats.html("Load time: " + duration + "ms, resolution: " + resolution + "s");
|
||||||
|
self.spinner.hide();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
Prometheus.Graph.prototype.metricToTsName = function(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) {
|
||||||
|
if (value == "NaN" || value == "Inf" || value == "-Inf") {
|
||||||
|
return 0; // TODO: what should we really do here?
|
||||||
|
} else {
|
||||||
|
return parseFloat(value)
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
Prometheus.Graph.prototype.transformData = function(json) {
|
||||||
|
self = this;
|
||||||
|
var palette = new Rickshaw.Color.Palette();
|
||||||
|
if (json.Type != "matrix") {
|
||||||
|
alert("Result is not of matrix type! Please enter a correct expression.");
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
var data = json.Value.map(function(ts) {
|
||||||
|
return {
|
||||||
|
name: self.metricToTsName(ts.Metric),
|
||||||
|
data: ts.Values.map(function(value) {
|
||||||
|
return {
|
||||||
|
x: value.Timestamp,
|
||||||
|
y: self.parseValue(value.Value)
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
color: palette.color()
|
||||||
|
};
|
||||||
|
});
|
||||||
|
Rickshaw.Series.zeroFill(data);
|
||||||
|
return data;
|
||||||
|
};
|
||||||
|
|
||||||
|
Prometheus.Graph.prototype.showGraph = function() {
|
||||||
|
var self = this;
|
||||||
|
self.rickshawGraph = new Rickshaw.Graph({
|
||||||
|
element: self.graph[0],
|
||||||
|
height: 800,
|
||||||
|
renderer: (self.stacked.is(":checked") ? "stack" : "line"),
|
||||||
|
interpolation: "linear",
|
||||||
|
series: self.data
|
||||||
|
});
|
||||||
|
|
||||||
|
var xAxis = new Rickshaw.Graph.Axis.Time({ graph: self.rickshawGraph });
|
||||||
|
|
||||||
|
var yAxis = new Rickshaw.Graph.Axis.Y({
|
||||||
|
graph: self.rickshawGraph,
|
||||||
|
tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
|
||||||
|
});
|
||||||
|
|
||||||
|
self.rickshawGraph.render();
|
||||||
|
};
|
||||||
|
|
||||||
|
Prometheus.Graph.prototype.updateGraph = function(reloadGraph) {
|
||||||
|
var self = this;
|
||||||
|
if (self.data.length == 0) { return; }
|
||||||
|
if (self.rickshawGraph == null || reloadGraph) {
|
||||||
|
self.graph.empty();
|
||||||
|
self.legend.empty();
|
||||||
|
self.showGraph();
|
||||||
|
} else {
|
||||||
|
self.rickshawGraph.configure({
|
||||||
|
renderer: (self.stacked.is(":checked") ? "stack" : "line"),
|
||||||
|
interpolation: "linear",
|
||||||
|
series: self.data
|
||||||
|
});
|
||||||
|
self.rickshawGraph.render();
|
||||||
|
}
|
||||||
|
|
||||||
|
var hoverDetail = new Rickshaw.Graph.HoverDetail({
|
||||||
|
graph: self.rickshawGraph
|
||||||
|
});
|
||||||
|
|
||||||
|
var legend = new Rickshaw.Graph.Legend({
|
||||||
|
element: self.legend[0],
|
||||||
|
graph: self.rickshawGraph
|
||||||
|
});
|
||||||
|
|
||||||
|
var shelving = new Rickshaw.Graph.Behavior.Series.Toggle({
|
||||||
|
graph: self.rickshawGraph,
|
||||||
|
legend: legend
|
||||||
|
});
|
||||||
|
|
||||||
|
self.changeHandler();
|
||||||
|
};
|
||||||
|
|
||||||
|
function parseGraphOptionsFromUrl() {
|
||||||
|
var hashOptions = window.location.hash.slice(1);
|
||||||
|
if (!hashOptions) {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
var optionsJSON = decodeURIComponent(window.location.hash.slice(1));
|
||||||
|
return JSON.parse(optionsJSON);
|
||||||
|
}
|
||||||
|
|
||||||
|
function storeGraphOptionsInUrl(options) {
|
||||||
|
var allGraphsOptions = [];
|
||||||
|
for (var i = 0; i < graphs.length; i++) {
|
||||||
|
allGraphsOptions.push(graphs[i].getOptions());
|
||||||
|
console.log(graphs[i].id);
|
||||||
|
console.log(graphs[i].getOptions());
|
||||||
|
}
|
||||||
|
var optionsJSON = JSON.stringify(allGraphsOptions);
|
||||||
|
window.location.hash = encodeURIComponent(optionsJSON);
|
||||||
|
}
|
||||||
|
|
||||||
|
function addGraph(options) {
|
||||||
|
var graph = new Prometheus.Graph($("#graph_container"), options);
|
||||||
|
graphs.push(graph);
|
||||||
|
graph.onChange(function() {
|
||||||
|
storeGraphOptionsInUrl();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function init() {
|
||||||
|
jQuery.ajaxSetup({
|
||||||
|
cache: false
|
||||||
|
});
|
||||||
|
|
||||||
|
var options = parseGraphOptionsFromUrl();
|
||||||
|
for (var i = 0; i < options.length; i++) {
|
||||||
|
addGraph(options[i]);
|
||||||
|
}
|
||||||
|
|
||||||
|
$("#add_graph").click(function() { addGraph({}); });
|
||||||
|
}
|
||||||
|
|
||||||
|
$(init);
|
||||||
|
|
@ -1,212 +0,0 @@
|
||||||
// Graph options we might want:
|
|
||||||
// Grid off/on
|
|
||||||
// Stacked off/on
|
|
||||||
// Area off/on
|
|
||||||
// Legend position
|
|
||||||
// Short link
|
|
||||||
// Graph title
|
|
||||||
// Palette
|
|
||||||
// Background
|
|
||||||
// Enable tooltips
|
|
||||||
// width/height
|
|
||||||
// Axis options
|
|
||||||
// Y-Range min/max
|
|
||||||
// (X-Range min/max)
|
|
||||||
// X-Axis format
|
|
||||||
// Y-Axis format
|
|
||||||
// Y-Axis title
|
|
||||||
// X-Axis title
|
|
||||||
// Log scale
|
|
||||||
|
|
||||||
var graph = null;
|
|
||||||
var data = [];
|
|
||||||
|
|
||||||
var timeFactors = {
|
|
||||||
"y": 60 * 60 * 24 * 365,
|
|
||||||
"w": 60 * 60 * 24 * 7,
|
|
||||||
"d": 60 * 60 * 24,
|
|
||||||
"h": 60 * 60,
|
|
||||||
"m": 60,
|
|
||||||
"s": 1
|
|
||||||
};
|
|
||||||
|
|
||||||
var steps = ["1s", "10s", "1m", "5m", "15m", "30m", "1h", "2h", "6h", "12h",
|
|
||||||
"1d", "2d", "1w", "2w", "4w", "8w", "1y", "2y"];
|
|
||||||
|
|
||||||
function parseRange(rangeText) {
|
|
||||||
var rangeRE = new RegExp("^([0-9]+)([ywdhms]+)$");
|
|
||||||
var matches = rangeText.match(rangeRE);
|
|
||||||
if (matches.length != 3) {
|
|
||||||
return 60;
|
|
||||||
}
|
|
||||||
var value = parseInt(matches[1]);
|
|
||||||
var unit = matches[2];
|
|
||||||
return value * timeFactors[unit];
|
|
||||||
}
|
|
||||||
|
|
||||||
function increaseRange() {
|
|
||||||
var rangeSeconds = parseRange($("#range_input").val());
|
|
||||||
for (var i = 0; i < steps.length; i++) {
|
|
||||||
if (rangeSeconds < parseRange(steps[i])) {
|
|
||||||
$("#range_input").val(steps[i]);
|
|
||||||
submitQuery();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function decreaseRange() {
|
|
||||||
var rangeSeconds = parseRange($("#range_input").val());
|
|
||||||
for (var i = steps.length - 1; i >= 0; i--) {
|
|
||||||
if (rangeSeconds > parseRange(steps[i])) {
|
|
||||||
$("#range_input").val(steps[i]);
|
|
||||||
submitQuery();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function submitQuery() {
|
|
||||||
$("#spinner").show();
|
|
||||||
$("#eval_stats").empty();
|
|
||||||
|
|
||||||
var form = $("#query_form");
|
|
||||||
var startTime = new Date().getTime();
|
|
||||||
|
|
||||||
var rangeSeconds = parseRange($("#range_input").val());
|
|
||||||
$("#range").val(rangeSeconds);
|
|
||||||
var resolution = $("#step_input").val() || Math.max(Math.floor(rangeSeconds / 250), 1);
|
|
||||||
$("#step").val(resolution);
|
|
||||||
|
|
||||||
$.ajax({
|
|
||||||
method: form.attr("method"),
|
|
||||||
url: form.attr("action"),
|
|
||||||
dataType: "json",
|
|
||||||
data: form.serialize(),
|
|
||||||
success: function(json, textStatus) {
|
|
||||||
if (json.Type == "error") {
|
|
||||||
alert(json.Value);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
data = transformData(json);
|
|
||||||
if (data.length == 0) {
|
|
||||||
alert("No datapoints found.");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
updateGraph(true);
|
|
||||||
},
|
|
||||||
error: function() {
|
|
||||||
alert("Error executing query!");
|
|
||||||
},
|
|
||||||
complete: function() {
|
|
||||||
var duration = new Date().getTime() - startTime;
|
|
||||||
$("#eval_stats").html("Load time: " + duration + "ms, resolution: " + resolution + "s");
|
|
||||||
$("#spinner").hide();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
function metricToTsName(labels) {
|
|
||||||
var tsName = labels["name"] + "{";
|
|
||||||
var labelStrings = [];
|
|
||||||
for (label in labels) {
|
|
||||||
if (label != "name") {
|
|
||||||
labelStrings.push(label + "='" + labels[label] + "'");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
tsName += labelStrings.join(",") + "}";
|
|
||||||
return tsName;
|
|
||||||
}
|
|
||||||
|
|
||||||
function parseValue(value) {
|
|
||||||
if (value == "NaN" || value == "Inf" || value == "-Inf") {
|
|
||||||
return 0; // TODO: what should we really do here?
|
|
||||||
} else {
|
|
||||||
return parseFloat(value)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function transformData(json) {
|
|
||||||
var palette = new Rickshaw.Color.Palette();
|
|
||||||
if (json.Type != "matrix") {
|
|
||||||
alert("Result is not of matrix type! Please enter a correct expression.");
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
var data = json.Value.map(function(ts) {
|
|
||||||
return {
|
|
||||||
name: metricToTsName(ts.Metric),
|
|
||||||
data: ts.Values.map(function(value) {
|
|
||||||
return {
|
|
||||||
x: value.Timestamp,
|
|
||||||
y: parseValue(value.Value)
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
color: palette.color()
|
|
||||||
};
|
|
||||||
});
|
|
||||||
Rickshaw.Series.zeroFill(data);
|
|
||||||
return data;
|
|
||||||
}
|
|
||||||
|
|
||||||
function showGraph() {
|
|
||||||
graph = new Rickshaw.Graph({
|
|
||||||
element: document.querySelector("#chart"),
|
|
||||||
height: 800,
|
|
||||||
renderer: ($("#stacked").is(":checked") ? "stack" : "line"),
|
|
||||||
interpolation: "linear",
|
|
||||||
series: data
|
|
||||||
});
|
|
||||||
|
|
||||||
var x_axis = new Rickshaw.Graph.Axis.Time({ graph: graph });
|
|
||||||
|
|
||||||
var y_axis = new Rickshaw.Graph.Axis.Y({
|
|
||||||
graph: graph,
|
|
||||||
tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
|
|
||||||
});
|
|
||||||
|
|
||||||
graph.render();
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateGraph(reloadGraph) {
|
|
||||||
if (graph == null || reloadGraph) {
|
|
||||||
$("#chart").empty();
|
|
||||||
$("#legend").empty();
|
|
||||||
showGraph();
|
|
||||||
} else {
|
|
||||||
graph.configure({
|
|
||||||
renderer: ($("#stacked").is(":checked") ? "stack" : "line"),
|
|
||||||
interpolation: "linear",
|
|
||||||
series: data
|
|
||||||
});
|
|
||||||
graph.render();
|
|
||||||
}
|
|
||||||
|
|
||||||
var hoverDetail = new Rickshaw.Graph.HoverDetail({
|
|
||||||
graph: graph
|
|
||||||
});
|
|
||||||
|
|
||||||
var legend = new Rickshaw.Graph.Legend({
|
|
||||||
element: document.querySelector("#legend"),
|
|
||||||
graph: graph
|
|
||||||
});
|
|
||||||
|
|
||||||
var shelving = new Rickshaw.Graph.Behavior.Series.Toggle({
|
|
||||||
graph: graph,
|
|
||||||
legend: legend
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function init() {
|
|
||||||
jQuery.ajaxSetup({
|
|
||||||
cache: false
|
|
||||||
});
|
|
||||||
$("#spinner").hide();
|
|
||||||
$("#query_form").submit(submitQuery);
|
|
||||||
$("#inc_range").click(increaseRange);
|
|
||||||
$("#dec_range").click(decreaseRange);
|
|
||||||
$("#stacked").change(updateGraph);
|
|
||||||
$("#expr").focus();
|
|
||||||
}
|
|
||||||
|
|
||||||
$(init);
|
|
||||||
Loading…
Reference in a new issue