Gitiles
Code Review Sign In
asterix-gerrit.ics.uci.edu / asterixdb / 13e2becf3a5ecd89bc70605d8ebe304b06e27bcc / . / asterix-app / src / main / resources / feed / dashboard.html
blob: 805f8ea7a20adcbaad786e197d5ce756ea9a27f4 [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();
ramangrover29a41d4182013-09-09 10:48:20 -0700[diff] [blame]8 var state = "ACTIVE";
ramangrover2920afdc32013-08-07 17:18:53 -0700[diff] [blame]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 });
ramangrover29a41d4182013-09-09 10:48:20 -0700[diff] [blame]27 setInterval(fetchFeedReport, 5000);
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) {
ramangrover29a41d4182013-09-09 10:48:20 -0700[diff] [blame]39 var status = data["status"];
40 if(status == ("ended")){
41 ingestLocations = " ";
42 computeLocations = " ";
43 storageLocations = " ";
44 ingestionPolicy = " ";
45 state = "INACTIVE";
ramangrover292d3f6dd2013-08-14 17:14:27 -0700[diff] [blame]46 document.location.reload(true);
47 } else {
ramangrover29a41d4182013-09-09 10:48:20 -0700[diff] [blame]48 var type = data["type"];
49 if (type == ("reload")) {
50 ingestLocations = data["ingestLocations"];
51 computeLocations = data["computeLocations"];
52 storageLocations = data["storageLocations"];
53 document.location.reload(true);
54 } else {
55 var report = data["value"];
56 var tputArray = report.split("|");
57 var covered = 0;
58 var totalTput = 0;
59 for( var i = 0; i < tputArray.length-1; i ++){
60 ingestionTimeSeries[i].append(data["time"], tputArray[i]);
61 covered++;
62 totalTput += parseInt(tputArray[i]);
63 }
64 for( var j = covered; j < numIngestionNodes; j++){
65 ingestionTimeSeries[j].append(data["time"], 0);
66 }
67 ingestionTimeSeries[numIngestionNodes].append(data["time"], totalTput);
68 }
ramangrover292d3f6dd2013-08-14 17:14:27 -0700[diff] [blame]69 }
ramangrover2975b73552013-08-06 10:31:04 -0700[diff] [blame]70 }
71
72 function myYRangeFunction(range) {
73 var min = 0;
74 var max = 5000;
75 return {min: min, max: max};
76 }
77
ramangrover2920afdc32013-08-07 17:18:53 -0700[diff] [blame]78 function initTimeline(ingestLocations) {
ramangrover2975b73552013-08-06 10:31:04 -0700[diff] [blame]79
ramangrover29206f4072013-08-15 14:24:31 -0700[diff] [blame]80 document.write("<i>" + "Feed Ingestion" + " " + "<i>");
ramangrover29d9702ac2013-09-14 19:14:39 -0700[diff] [blame]81 document.write("<br />" + "Ingestion Locations: " + ingestLocations.replace(",",", "));
82 document.write("<br />" + "Compute Locations: " + computeLocations.replace(",",", "));
83 document.write("<br />" + "Storage Locations: " + storageLocations.replace(",",", "));
ramangrover2920afdc32013-08-07 17:18:53 -0700[diff] [blame]84 document.write("<br />" + "Ingestion Policy: " + ingestionPolicy);
ramangrover29a41d4182013-09-09 10:48:20 -0700[diff] [blame]85 document.write("<br />" + "Status: " + state);
ramangrover2920afdc32013-08-07 17:18:53 -0700[diff] [blame]86 document.write("<br />");
87 document.write("<br />");
88
89 for( var i = 0; i < numIngestionNodes; i++){
ramangrover292d3f6dd2013-08-14 17:14:27 -0700[diff] [blame]90 graphNames[i] = "Partition " + i;
ramangrover2920afdc32013-08-07 17:18:53 -0700[diff] [blame]91 }
92
93 if(numIngestionNodes > 1){
94 graphNames[numIngestionNodes] = "IngestionThroughput";
95 drawCanvas(graphNames[numIngestionNodes]);
96 ingestionTimeSeries[numIngestionNodes] = new TimeSeries();
97 drawChart(graphNames[numIngestionNodes], ingestionTimeSeries[numIngestionNodes]);
98 }
99
100 for( var j = 0; j < numIngestionNodes; j++){
101 drawCanvas(graphNames[j]);
102 ingestionTimeSeries[j] = new TimeSeries();
103 drawChart(graphNames[j], ingestionTimeSeries[j]);
104 }
ramangrover2975b73552013-08-06 10:31:04 -0700[diff] [blame]105 }
ramangrover2920afdc32013-08-07 17:18:53 -0700[diff] [blame]106
107 function drawCanvas(chartName) {
108 document.write("<br />");
109 document.write("<br />");
110 document.write("<i>" + chartName + "</i>");
111 document.write("<br />");
112 document.write("<canvas id="+ "\"" + chartName + "\"" + " " + "width=\"500\" height=\"250\"></canvas>");
113 }
114
115 function drawChart(chartName, ingestionTimeSeries) {
ramangrover29a41d4182013-09-09 10:48:20 -0700[diff] [blame]116 var ingestionChart = new SmoothieChart({ timestampFormatter:SmoothieChart.timeFormatter, interpolation:'linear', minValue:0, millisPerPixel: 20, grid: { strokeStyle: '#555555', lineWidth: 1, millisPerLine: 1000, verticalSections: 10 }});
ramangrover2920afdc32013-08-07 17:18:53 -0700[diff] [blame]117 ingestionChart.addTimeSeries(ingestionTimeSeries, seriesOptions);
118 ingestionChart.streamTo(document.getElementById(chartName, 500));
119 }
120
121 initTimeline(ingestLocations);
ramangrover2975b73552013-08-06 10:31:04 -0700[diff] [blame]122 });
ramangrover29a04696c2013-07-31 21:50:38 -0700[diff] [blame]123 </script>
ramangrover29c996e282013-08-03 14:36:45 -0700[diff] [blame]124 </head>
ramangrover2920afdc32013-08-07 17:18:53 -0700[diff] [blame]125 <body></body>
ramangrover29a04696c2013-07-31 21:50:38 -0700[diff] [blame]126</html>
ramangrover2975b73552013-08-06 10:31:04 -0700[diff] [blame]127