blob: 97a8576f762f4453aa70ed81f768c90229f1f343 [file] [log] [blame]
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="/webui/static/js/smoothie.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var feedSeries = new TimeSeries();
var dataverse = "%s";
var dataset = "%s";
var feed = "%s";
var ingestLocations = "%s";
var computeLocations = "%s";
var storageLocations = "%s";
var ingestionPolicy = "%s";
var activeSince = "%s";
var targetUrl = "/feed/data?dataverse=" + dataverse + "&dataset=" + dataset + "&feed=" + feed;
var ingestionNodes = ingestLocations.split(",");
var numIngestionNodes = ingestionNodes.length;
var seriesOptions = { strokeStyle: 'rgba(0, 255, 0, 1)', fillStyle: 'rgba(0, 255, 0, 0.2)', lineWidth: 4 };
var ingestionTimeSeries = new Array();
var graphNames = new Array();
$.ajaxSetup({ cache: false });
setInterval(fetchFeedReport, 500);
function fetchFeedReport() {
$.ajax({
url: '/feed/data?dataverse=' + dataverse + '&dataset=' + dataset + '&feed=' + feed,
method: 'GET',
dataType: 'json',
success: onFeedReportReceived
});
}
function onFeedReportReceived(data) {
var type = data["type"];
if (type == ("reload")) {
ingestLocations = data["ingestLocations"];
computeLocations = data["computeLocations"];
storageLocations = data["storageLocations"];
document.location.reload(true);
} else {
var report = data["value"];
var tputArray = report.split("|");
var covered = 0;
var totalTput = 0;
for( var i = 0; i < tputArray.length-1; i ++){
ingestionTimeSeries[i].append(data["time"], tputArray[i]);
covered++;
totalTput += parseInt(tputArray[i]);
}
for( var j = covered; j < numIngestionNodes; j++){
ingestionTimeSeries[j].append(data["time"], 0);
}
ingestionTimeSeries[numIngestionNodes].append(data["time"], totalTput);
}
}
function myYRangeFunction(range) {
var min = 0;
var max = 5000;
return {min: min, max: max};
}
function initTimeline(ingestLocations) {
document.write("<i>" + "Feed Ingestion" + " " + "<i>");
document.write("<br />" + "Ingestion Locations: " + ingestLocations);
document.write("<br />" + "Compute Locations: " + computeLocations);
document.write("<br />" + "Storage Locations: " + storageLocations);
document.write("<br />" + "Ingestion Policy: " + ingestionPolicy);
document.write("<br />" + "Active since" + activeSince);
document.write("<br />");
document.write("<br />");
for( var i = 0; i < numIngestionNodes; i++){
graphNames[i] = "Partition " + i;
}
if(numIngestionNodes > 1){
graphNames[numIngestionNodes] = "IngestionThroughput";
drawCanvas(graphNames[numIngestionNodes]);
ingestionTimeSeries[numIngestionNodes] = new TimeSeries();
drawChart(graphNames[numIngestionNodes], ingestionTimeSeries[numIngestionNodes]);
}
for( var j = 0; j < numIngestionNodes; j++){
drawCanvas(graphNames[j]);
ingestionTimeSeries[j] = new TimeSeries();
drawChart(graphNames[j], ingestionTimeSeries[j]);
}
}
function drawCanvas(chartName) {
document.write("<br />");
document.write("<br />");
document.write("<i>" + chartName + "</i>");
document.write("<br />");
document.write("<canvas id="+ "\"" + chartName + "\"" + " " + "width=\"500\" height=\"250\"></canvas>");
}
function drawChart(chartName, ingestionTimeSeries) {
var ingestionChart = new SmoothieChart({ minValue:0, millisPerPixel: 20, grid: { strokeStyle: '#555555', lineWidth: 1, millisPerLine: 1000, verticalSections: 10 }});
ingestionChart.addTimeSeries(ingestionTimeSeries, seriesOptions);
ingestionChart.streamTo(document.getElementById(chartName, 500));
}
initTimeline(ingestLocations);
});
</script>
</head>
<body></body>
</html>