Julius Volz
13 years ago
parent
ebabaa46f4
commit
2c8595f96e
@ -0,0 +1,55 @@ |
||||
<!DOCTYPE html> |
||||
<html> |
||||
<head> |
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> |
||||
<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/jqueryui/1.8.15/jquery-ui.min.js"></script> |
||||
|
||||
|
||||
<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.layout.min.js"></script> |
||||
<script src="http://code.shutterstock.com/rickshaw/rickshaw.min.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> |
||||
|
||||
<body> |
||||
<form action="/api/query_range" method="GET" id="queryForm"> |
||||
Expression: <input type="text" name="expr" id="expr" size="100"><br> |
||||
Range: <input type="number" name="range" id="range" value="60"> |
||||
End: <input type="number" name="end" id="end"> |
||||
Resolution (s): <input type="text" name="step" step="5"> |
||||
<input type="submit" value="Graph" id="graph_submit"> |
||||
<img src="img/ajax-loader.gif" id="spinner"> |
||||
<div id="load_time"></div> |
||||
</form> |
||||
<div id="chart_container"> |
||||
<div id="y_axis"></div> |
||||
<div id="chart"></div> |
||||
<div id="legend"></div> |
||||
</div> |
||||
</body> |
||||
</html> |
||||
|
After Width: | Height: | Size: 847 B |
@ -0,0 +1,21 @@ |
||||
<!DOCTYPE html> |
||||
<html> |
||||
<head> |
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> |
||||
<title>Prometheus Expression Browser</title> |
||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> |
||||
<script src="js/exprBrowser.js"></script> |
||||
</head> |
||||
|
||||
<body> |
||||
<form action="/api/query" method="GET" id="queryForm"> |
||||
<input type="text" name="expr" size="100"> |
||||
<input type="checkbox" name="json" id="json" value="JSON"><label for="json">JSON</label> |
||||
<input type="submit" value="Evaluate"> |
||||
</form> |
||||
<hr> |
||||
<pre> |
||||
<div id="result"></div> |
||||
</pre> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,26 @@ |
||||
function submitQuery() { |
||||
var form = $("#queryForm"); |
||||
|
||||
$.ajax({ |
||||
method: form.attr("method"), |
||||
url: form.attr("action"), |
||||
dataType: "html", |
||||
data: form.serialize(), |
||||
success: function(data, textStatus) { |
||||
$("#result").text(data); |
||||
}, |
||||
error: function() { |
||||
alert("Error executing query!"); |
||||
}, |
||||
}); |
||||
return false; |
||||
} |
||||
|
||||
function bindHandlers() { |
||||
jQuery.ajaxSetup({ |
||||
cache: false |
||||
}); |
||||
$("#queryForm").submit(submitQuery); |
||||
} |
||||
|
||||
$(bindHandlers); |
||||
@ -0,0 +1,148 @@ |
||||
var url = "http://juliusv.com:9090/api/query?expr=targets_healthy_scrape_latency_ms%5B'10m'%5D&json=JSON"; |
||||
|
||||
// Graph options
|
||||
// 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 = []; |
||||
|
||||
function submitQuery() { |
||||
$("#spinner").show(); |
||||
$("#load_time").empty(); |
||||
var form = $("#queryForm"); |
||||
var startTime = new Date().getTime(); |
||||
|
||||
$.ajax({ |
||||
method: form.attr("method"), |
||||
url: form.attr("action"), |
||||
dataType: "json", |
||||
data: form.serialize(), |
||||
success: function(json, textStatus) { |
||||
data = transformData(json); |
||||
if (data.length == 0) { |
||||
alert("No datapoints found."); |
||||
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(); |
||||
} |
||||
}); |
||||
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") { |
||||
return 0; // TODO: what to 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!"); |
||||
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() |
||||
}; |
||||
var metricStr = ts['name']; |
||||
}); |
||||
return data; |
||||
} |
||||
|
||||
function showGraph() { |
||||
graph = new Rickshaw.Graph( { |
||||
element: document.querySelector("#chart"), |
||||
width: 1200, |
||||
height: 800, |
||||
renderer: 'line', |
||||
series: data |
||||
} ); |
||||
//graph.configure({offset: 'wiggle'});
|
||||
|
||||
var x_axis = new Rickshaw.Graph.Axis.Time( { graph: graph } ); |
||||
|
||||
var y_axis = new Rickshaw.Graph.Axis.Y( { |
||||
element: document.querySelector("#y_axis"), |
||||
graph: graph, |
||||
orientation: 'left', |
||||
tickFormat: Rickshaw.Fixtures.Number.formatKMBT, |
||||
} ); |
||||
|
||||
var legend = new Rickshaw.Graph.Legend( { |
||||
element: document.querySelector('#legend'), |
||||
graph: graph |
||||
} ); |
||||
|
||||
graph.render(); |
||||
|
||||
var hoverDetail = new Rickshaw.Graph.HoverDetail( { |
||||
graph: graph |
||||
} ); |
||||
|
||||
var shelving = new Rickshaw.Graph.Behavior.Series.Toggle( { |
||||
graph: graph, |
||||
legend: legend |
||||
} ); |
||||
} |
||||
|
||||
function init() { |
||||
jQuery.ajaxSetup({ |
||||
cache: false |
||||
}); |
||||
$("#spinner").hide(); |
||||
$("#queryForm").submit(submitQuery); |
||||
$("#expr").focus(); |
||||
} |
||||
|
||||
$(init); |
||||
Loading…
Reference in new issue