Gitiles
Code Review Sign In
asterix-gerrit.ics.uci.edu / asterixdb / 20afdc32ca833177889ac767e1dccbe3eeb37e79 / . / asterix-app / src / main / resources / feed / dashboard.html
blob: 5538705f57da58ec5a4b64326e11bd3368cf117c [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) {
ramangrover2920afdc32013-08-07 17:18:53 -0700[diff] [blame^]39 var report = data["value"];
40 var tputArray = report.split("|");
41 var covered = 0;
42 var totalTput = 0;
43 for( var i = 0; i < tputArray.length; i ++){
44 ingestionTimeSeries[i].append(data["time"], tputArray[i]);
45 covered++;
46 totalTput += parseInt(tputArray[i]);
47 }
48 for( var j = covered; j < numIngestionNodes; j++){
49 ingestionTimeSeries[j].append(data["time"], 0);
50 }
51 ingestionTimeSeries[numIngestionNodes].append(data["time"], totalTput);
ramangrover2975b73552013-08-06 10:31:04 -0700[diff] [blame]52 }
53
54 function myYRangeFunction(range) {
55 var min = 0;
56 var max = 5000;
57 return {min: min, max: max};
58 }
59
ramangrover2920afdc32013-08-07 17:18:53 -0700[diff] [blame^]60 function initTimeline(ingestLocations) {
ramangrover2975b73552013-08-06 10:31:04 -0700[diff] [blame]61
ramangrover2920afdc32013-08-07 17:18:53 -0700[diff] [blame^]62 document.write("<i>" + "Feed Ingestion" + "<i>");
63 document.write("<br />" + "Ingestion Locations: " + ingestLocations);
64 document.write("<br />" + "Compute Locations: " + computeLocations);
65 document.write("<br />" + "Storage Locations: " + storageLocations);
66 document.write("<br />" + "Ingestion Policy: " + ingestionPolicy);
67 document.write("<br />" + "Active since" + activeSince);
68 document.write("<br />");
69 document.write("<br />");
70
71 for( var i = 0; i < numIngestionNodes; i++){
72 graphNames[i] = ingestionNodes[i];
73 }
74
75 if(numIngestionNodes > 1){
76 graphNames[numIngestionNodes] = "IngestionThroughput";
77 drawCanvas(graphNames[numIngestionNodes]);
78 ingestionTimeSeries[numIngestionNodes] = new TimeSeries();
79 drawChart(graphNames[numIngestionNodes], ingestionTimeSeries[numIngestionNodes]);
80 }
81
82 for( var j = 0; j < numIngestionNodes; j++){
83 drawCanvas(graphNames[j]);
84 ingestionTimeSeries[j] = new TimeSeries();
85 drawChart(graphNames[j], ingestionTimeSeries[j]);
86 }
ramangrover2975b73552013-08-06 10:31:04 -0700[diff] [blame]87 }
ramangrover2920afdc32013-08-07 17:18:53 -0700[diff] [blame^]88
89 function drawCanvas(chartName) {
90 document.write("<br />");
91 document.write("<br />");
92 document.write("<i>" + chartName + "</i>");
93 document.write("<br />");
94 document.write("<canvas id="+ "\"" + chartName + "\"" + " " + "width=\"500\" height=\"250\"></canvas>");
95 }
96
97 function drawChart(chartName, ingestionTimeSeries) {
98 var ingestionChart = new SmoothieChart({ minValue:0, millisPerPixel: 20, grid: { strokeStyle: '#555555', lineWidth: 1, millisPerLine: 1000, verticalSections: 4 }});
99 ingestionChart.addTimeSeries(ingestionTimeSeries, seriesOptions);
100 ingestionChart.streamTo(document.getElementById(chartName, 500));
101 }
102
103 initTimeline(ingestLocations);
ramangrover2975b73552013-08-06 10:31:04 -0700[diff] [blame]104 });
ramangrover29a04696c2013-07-31 21:50:38 -0700[diff] [blame]105 </script>
ramangrover29c996e282013-08-03 14:36:45 -0700[diff] [blame]106 </head>
ramangrover2920afdc32013-08-07 17:18:53 -0700[diff] [blame^]107 <body></body>
ramangrover29a04696c2013-07-31 21:50:38 -0700[diff] [blame]108</html>
ramangrover2975b73552013-08-06 10:31:04 -0700[diff] [blame]109