Files
cgrates/cmd/balancer/templates/status.html
Radu Ioan Fericean deaf2d244d memory graph working ok
2012-03-26 18:23:21 +03:00

141 lines
4.9 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CGRateS Status</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Describes the internal status of CGRateS server.">
<meta name="author" content="Radu Ioan Fericean">
<!-- Le styles -->
<link href="static/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
body {
padding-top: 60px;
padding-bottom: 40px;
}
</style>
<link href="static/css/bootstrap-responsive.min.css" rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">CGRateS</a>
<div class="nav-collapse">
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container">
<!-- Main hero unit for a primary marketing message or call to action -->
<div class="hero-unit">
<h1>Conected raters</h1>
<table id="rater-table" class="table table-striped">
{{range .}}
<tr><td>{{.}}</td></tr>
{{end}}
</table>
<p><a id="rater-refresh" href="#" class="btn btn-primary btn-large">Refresh</a></p>
</div>
<!-- Example row of columns -->
<div class="row">
<div class="span7">
<h2>Memory consumption (KB)</h2>
<div id="memory-container" style="width:600px;height:300px;"></div>
</div>
<div class="span5">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn" href="#">View details &raquo;</a></p>
</div>
</div>
<hr>
<footer>
<p>&copy; Radu Fericean 2012</p>
</footer>
</div> <!-- /container -->
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="static/js/jquery-1.7.1.min.js"></script>
<script src="static/js/bootstrap.min.js"></script>
<script src="static/js/jquery.flot.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
// we use an inline data source in the example, usually data would
// be fetched from a server
var data = [], totalPoints = 300;
var limit = [];
function getMemoryData() {
if (data.length >= totalPoints) {
data = data.slice(1);
limit = limit.slice(1);
}
$.get("/getmem", function(memValue){
memValue = memValue.split(" ");
now = new Date()
timeOffsetInHours = (now.getTimezoneOffset()/60) * (-1);
now.setHours(now.getHours() + timeOffsetInHours);
data.push([now.getTime(), memValue[0]]);
limit.push([now.getTime(), memValue[1]]);
});
return [data, limit];
}
// setup plot
var options = {
//series: { shadowSize: 0 }, // drawing is faster without shadows
yaxis: { min: 0},// max: 10000 },
xaxis: { mode: "time" }
};
getMemoryData()
var plot = $.plot($("#memory-container"), [ {label: "Current", data:data}, {label: "Footprint", data: limit} ], options);
function update() {
getMemoryData()
plot.setData([ {label: "Current", data:data}, {label: "Footprint", data: limit} ]);
// since the axes don't change, we don't need to call plot.setupGrid()
plot.setupGrid()
plot.draw();
setTimeout(update, 2000); //5 seconds
}
update();
$("#rater-refresh").click(function(){
$.get("/raters", function(raters){
$("tr", "#rater-table").remove()
console.log(raters);
for(var i=0; i<raters.length; i++){
$("#rater-table").append("<tr><td>" + raters[i] + "</td></tr>");
}
});
return false;
})
});
</script>
</body>
</html>