RepoMirrors
/
prometheus
mirror of https://github.com/prometheus/prometheus
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

General graphing improvements and frontend whitespace cleanups.

This commit is contained in:
Julius Volz 2013-01-17 23:46:43 +01:00
parent c21450a089
commit cbffb18748
2 changed files with 201 additions and 143 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
static/graph.html
View File

@ -1,55 +1,53 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="en">
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Prometheus Expression Browser</title> <title>Prometheus Expression Browser</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/jquery-ui.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/jquery-ui.min.js"></script>
<link type="text/css" rel="stylesheet" href="css/prometheus.css">
<link type="text/css" rel="stylesheet" href="http://code.shutterstock.com/rickshaw/rickshaw.min.css"> <link type="text/css" rel="stylesheet" href="http://code.shutterstock.com/rickshaw/rickshaw.min.css">
<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> <script src="js/rickshaw.js"></script>
<style>
#chart_container {
position: relative;
font-family: Arial, Helvetica, sans-serif;
}
#chart {
position: relative;
left: 40px;
}
#y_axis {
position: absolute;
top: 0;
bottom: 0;
width: 40px;
}
#legend {
display: inline-block;
vertical-align: top;
margin: 0 0 0 10px;
}
</style>
</head> </head>
<body> <body>
<form action="/api/query_range" method="GET" id="queryForm"> <div class="grouping-box">
Expression: <input type="text" name="expr" id="expr" size="100"><br> <form action="/api/query_range" method="GET" id="query_form">
Range: <input type="number" name="range" id="range" value="60"> <label for="expr">Expression:</label>
End: <input type="number" name="end" id="end"> <input type="text" name="expr" id="expr" size="80"><br>
Resolution (s): <input type="text" name="step" step="5">
<input type="submit" value="Graph" id="graph_submit"> <label for="range">Range:</label>
<img src="img/ajax-loader.gif" id="spinner"> <input type="button" value="-" id="dec_range">
<div id="load_time"></div> <input type="text" name="range_input" id="range_input" size="5" value="1h">
</form> <input type="hidden" name="range" id="range">
<div id="chart_container"> <input type="button" value="+" id="inc_range">
<div id="y_axis"></div>
<div id="chart"></div> <label for="end">End:</label>
<div id="legend"></div> <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>
</body> </body>
</html> </html>

272
static/js/rickshaw.js
View File

@ -1,147 +1,207 @@
var url = "http://juliusv.com:9090/api/query?expr=targets_healthy_scrape_latency_ms%5B'10m'%5D&json=JSON"; // Graph options we might want:
// Grid off/on
// Graph options // Stacked off/on
// Grid off/on // Area off/on
// Stacked off/on // Legend position
// Area off/on // Short link
// Legend position // Graph title
// Short link // Palette
// Graph title // Background
// Palette // Enable tooltips
// Background // width/height
// Enable tooltips // Axis options
// width/height // Y-Range min/max
// Axis options // (X-Range min/max)
// Y-Range min/max // X-Axis format
// (X-Range min/max) // Y-Axis format
// X-Axis format // Y-Axis title
// Y-Axis format // X-Axis title
// Y-Axis title // Log scale
// X-Axis title
// Log scale
var graph = null; var graph = null;
var data = []; 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() { function submitQuery() {
$("#spinner").show(); $("#spinner").show();
$("#load_time").empty(); $("#eval_stats").empty();
var form = $("#queryForm");
var form = $("#query_form");
var startTime = new Date().getTime(); 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({ $.ajax({
method: form.attr("method"), method: form.attr("method"),
url: form.attr("action"), url: form.attr("action"),
dataType: "json", dataType: "json",
data: form.serialize(), data: form.serialize(),
success: function(json, textStatus) { success: function(json, textStatus) {
data = transformData(json); data = transformData(json);
if (data.length == 0) { if (data.length == 0) {
alert("No datapoints found."); alert("No datapoints found.");
return; return;
}
graph = null;
$("#chart").empty();
$("#legend").empty();
$("#y_axis").empty();
showGraph();
},
error: function() {
alert("Error executing query!");
},
complete: function() {
var duration = new Date().getTime() - startTime;
$("#load_time").html("Load time: " + duration + "ms");
$("#spinner").hide();
} }
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; return false;
} }
function metricToTsName(labels) { function metricToTsName(labels) {
var tsName = labels["name"] + "{"; 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(label + "='" + labels[label] + "'");
} }
} }
tsName += labelStrings.join(",") + "}"; tsName += labelStrings.join(",") + "}";
return tsName; return tsName;
} }
function parseValue(value) { function parseValue(value) {
if (value == "NaN") { if (value == "NaN" || value == "Inf" || value == "-Inf") {
return 0; // TODO: what to do here? return 0; // TODO: what should we really do here?
} else { } else {
return parseFloat(value) return parseFloat(value)
} }
} }
function transformData(json) { function transformData(json) {
var palette = new Rickshaw.Color.Palette(); var palette = new Rickshaw.Color.Palette();
if (json.Type != "matrix") { if (json.Type != "matrix") {
alert("Result is not of matrix type!"); alert("Result is not of matrix type! Please enter a correct expression.");
return []; 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)
} }
var data = json.Value.map(function(ts) { }),
return { color: palette.color()
name: metricToTsName(ts.Metric), };
data: ts.Values.map(function(value) { });
return { Rickshaw.Series.zeroFill(data);
x: value.Timestamp, return data;
y: parseValue(value.Value)
}
}),
color: palette.color()
};
var metricStr = ts['name'];
});
return data;
} }
function showGraph() { function showGraph() {
graph = new Rickshaw.Graph( { graph = new Rickshaw.Graph({
element: document.querySelector("#chart"), element: document.querySelector("#chart"),
width: 1200, height: 800,
height: 800, renderer: ($("#stacked").is(":checked") ? "stack" : "line"),
renderer: 'line', interpolation: "linear",
series: data series: data
} ); });
//graph.configure({offset: 'wiggle'});
var x_axis = new Rickshaw.Graph.Axis.Time( { graph: graph } ); var x_axis = new Rickshaw.Graph.Axis.Time({ graph: graph });
var y_axis = new Rickshaw.Graph.Axis.Y( { var y_axis = new Rickshaw.Graph.Axis.Y({
element: document.querySelector("#y_axis"), graph: graph,
graph: graph, tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
orientation: 'left', });
tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
} );
var legend = new Rickshaw.Graph.Legend( { graph.render();
element: document.querySelector('#legend'), }
graph: graph
} );
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(); graph.render();
}
var hoverDetail = new Rickshaw.Graph.HoverDetail( { var hoverDetail = new Rickshaw.Graph.HoverDetail({
graph: graph graph: graph
} ); });
var shelving = new Rickshaw.Graph.Behavior.Series.Toggle( { var legend = new Rickshaw.Graph.Legend({
graph: graph, element: document.querySelector("#legend"),
legend: legend graph: graph
} ); });
var shelving = new Rickshaw.Graph.Behavior.Series.Toggle({
graph: graph,
legend: legend
});
} }
function init() { function init() {
jQuery.ajaxSetup({ jQuery.ajaxSetup({
cache: false cache: false
}); });
$("#spinner").hide(); $("#spinner").hide();
$("#queryForm").submit(submitQuery); $("#query_form").submit(submitQuery);
$("#inc_range").click(increaseRange);
$("#dec_range").click(decreaseRange);
$("#stacked").change(updateGraph);
$("#expr").focus(); $("#expr").focus();
} }