| <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: " + computeLocations); |
| 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: 4 }}); |
| ingestionChart.addTimeSeries(ingestionTimeSeries, seriesOptions); |
| ingestionChart.streamTo(document.getElementById(chartName, 500)); |
| } |
| |
| initTimeline(ingestLocations); |
| }); |
| </script> |
| </head> |
| <body></body> |
| </html> |
| |