Gitiles
Code Review Sign In
asterix-gerrit.ics.uci.edu / asterixdb / 206f407749191db4c9e33f08fd4dbd3ea58e84c4 / . / asterix-app / src / main / resources / feed / dashboard.html
blob: 97a8576f762f4453aa70ed81f768c90229f1f343 [file] [log] [blame]
ramangrover29a04696c2013-07-31 21:50:38 -0700[diff] [blame]1<html>
2 <head>
ramangrover2975b73552013-08-06 10:31:04 -0700[diff] [blame]3 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
ramangrover29a04696c2013-07-31 21:50:38 -0700[diff] [blame]4 <script type="text/javascript" src="/webui/static/js/smoothie.js"></script>
ramangrover29a04696c2013-07-31 21:50:38 -0700[diff] [blame]5 <script type="text/javascript">
ramangrover2975b73552013-08-06 10:31:04 -0700[diff] [blame]6 $(document).ready(function() {
7 var feedSeries = new TimeSeries();
ramangrover2920afdc32013-08-07 17:18:53 -0700[diff] [blame]8
9 var dataverse = "%s";
10 var dataset = "%s";
11 var feed = "%s";
12 var ingestLocations = "%s";
13 var computeLocations = "%s";
14 var storageLocations = "%s";
15 var ingestionPolicy = "%s";
16 var activeSince = "%s";
17 var targetUrl = "/feed/data?dataverse=" + dataverse + "&dataset=" + dataset + "&feed=" + feed;
ramangrover29a04696c2013-07-31 21:50:38 -0700[diff] [blame]18
ramangrover2920afdc32013-08-07 17:18:53 -0700[diff] [blame]19
20 var ingestionNodes = ingestLocations.split(",");
21 var numIngestionNodes = ingestionNodes.length;
22 var seriesOptions = { strokeStyle: 'rgba(0, 255, 0, 1)', fillStyle: 'rgba(0, 255, 0, 0.2)', lineWidth: 4 };
23 var ingestionTimeSeries = new Array();
24 var graphNames = new Array();
25
26 $.ajaxSetup({ cache: false });
27 setInterval(fetchFeedReport, 500);
ramangrover2975b73552013-08-06 10:31:04 -0700[diff] [blame]28 function fetchFeedReport() {
29 $.ajax({
ramangrover2920afdc32013-08-07 17:18:53 -0700[diff] [blame]30 url: '/feed/data?dataverse=' + dataverse + '&dataset=' + dataset + '&feed=' + feed,
ramangrover2975b73552013-08-06 10:31:04 -0700[diff] [blame]31 method: 'GET',
32 dataType: 'json',
33 success: onFeedReportReceived
34 });
35 }
ramangrover2940636ee2013-08-04 22:05:49 -0700[diff] [blame]36
ramangrover2975b73552013-08-06 10:31:04 -0700[diff] [blame]37
38 function onFeedReportReceived(data) {
ramangrover292d3f6dd2013-08-14 17:14:27 -0700[diff] [blame]39 var type = data["type"];
40 if (type == ("reload")) {
41 ingestLocations = data["ingestLocations"];
42 computeLocations = data["computeLocations"];
43 storageLocations = data["storageLocations"];
44 document.location.reload(true);
45 } else {
ramangrover2920afdc32013-08-07 17:18:53 -0700[diff] [blame]46 var report = data["value"];
47 var tputArray = report.split("|");
48 var covered = 0;
49 var totalTput = 0;
ramangrover29ff745502013-08-09 17:20:26 -0700[diff] [blame]50 for( var i = 0; i < tputArray.length-1; i ++){
ramangrover2920afdc32013-08-07 17:18:53 -0700[diff] [blame]51 ingestionTimeSeries[i].append(data["time"], tputArray[i]);
52 covered++;
53 totalTput += parseInt(tputArray[i]);
54 }
55 for( var j = covered; j < numIngestionNodes; j++){
56 ingestionTimeSeries[j].append(data["time"], 0);
57 }
58 ingestionTimeSeries[numIngestionNodes].append(data["time"], totalTput);
ramangrover292d3f6dd2013-08-14 17:14:27 -0700[diff] [blame]59 }
ramangrover2975b73552013-08-06 10:31:04 -0700[diff] [blame]60 }
61
62 function myYRangeFunction(range) {
63 var min = 0;
64 var max = 5000;
65 return {min: min, max: max};
66 }
67
ramangrover2920afdc32013-08-07 17:18:53 -0700[diff] [blame]68 function initTimeline(ingestLocations) {
ramangrover2975b73552013-08-06 10:31:04 -0700[diff] [blame]69
ramangrover29206f4072013-08-15 14:24:31 -0700[diff] [blame^]70 document.write("<i>" + "Feed Ingestion" + " " + "<i>");
71 document.write("<br />" + "Ingestion Locations: " + ingestLocations);
ramangrover2920afdc32013-08-07 17:18:53 -0700[diff] [blame]72 document.write("<br />" + "Compute Locations: " + computeLocations);
73 document.write("<br />" + "Storage Locations: " + storageLocations);
74 document.write("<br />" + "Ingestion Policy: " + ingestionPolicy);
75 document.write("<br />" + "Active since" + activeSince);
76 document.write("<br />");
77 document.write("<br />");
78
79 for( var i = 0; i < numIngestionNodes; i++){
ramangrover292d3f6dd2013-08-14 17:14:27 -0700[diff] [blame]80 graphNames[i] = "Partition " + i;
ramangrover2920afdc32013-08-07 17:18:53 -0700[diff] [blame]81 }
82
83 if(numIngestionNodes > 1){
84 graphNames[numIngestionNodes] = "IngestionThroughput";
85 drawCanvas(graphNames[numIngestionNodes]);
86 ingestionTimeSeries[numIngestionNodes] = new TimeSeries();
87 drawChart(graphNames[numIngestionNodes], ingestionTimeSeries[numIngestionNodes]);
88 }
89
90 for( var j = 0; j < numIngestionNodes; j++){
91 drawCanvas(graphNames[j]);
92 ingestionTimeSeries[j] = new TimeSeries();
93 drawChart(graphNames[j], ingestionTimeSeries[j]);
94 }
ramangrover2975b73552013-08-06 10:31:04 -0700[diff] [blame]95 }
ramangrover2920afdc32013-08-07 17:18:53 -0700[diff] [blame]96
97 function drawCanvas(chartName) {
98 document.write("<br />");
99 document.write("<br />");
100 document.write("<i>" + chartName + "</i>");
101 document.write("<br />");
102 document.write("<canvas id="+ "\"" + chartName + "\"" + " " + "width=\"500\" height=\"250\"></canvas>");
103 }
104
105 function drawChart(chartName, ingestionTimeSeries) {
ramangrover29206f4072013-08-15 14:24:31 -0700[diff] [blame^]106 var ingestionChart = new SmoothieChart({ minValue:0, millisPerPixel: 20, grid: { strokeStyle: '#555555', lineWidth: 1, millisPerLine: 1000, verticalSections: 10 }});
ramangrover2920afdc32013-08-07 17:18:53 -0700[diff] [blame]107 ingestionChart.addTimeSeries(ingestionTimeSeries, seriesOptions);
108 ingestionChart.streamTo(document.getElementById(chartName, 500));
109 }
110
111 initTimeline(ingestLocations);
ramangrover2975b73552013-08-06 10:31:04 -0700[diff] [blame]112 });
ramangrover29a04696c2013-07-31 21:50:38 -0700[diff] [blame]113 </script>
ramangrover29c996e282013-08-03 14:36:45 -0700[diff] [blame]114 </head>
ramangrover2920afdc32013-08-07 17:18:53 -0700[diff] [blame]115 <body></body>
ramangrover29a04696c2013-07-31 21:50:38 -0700[diff] [blame]116</html>
ramangrover2975b73552013-08-06 10:31:04 -0700[diff] [blame]117