Gitiles
Code Review Sign In
asterix-gerrit.ics.uci.edu / asterixdb / 5a465a014512f4a053b8c4c936fe2775b43f135f / . / asterix-app / src / main / resources / feed / dashboard.html
blob: d82c23c9110656e772efb9104c6c6ab4b7a29f6b [file] [log] [blame]
Till Westmann5b431ca2015-10-01 19:16:11 -0700[diff] [blame]1<!--
2 ! Licensed to the Apache Software Foundation (ASF) under one
3 ! or more contributor license agreements. See the NOTICE file
4 ! distributed with this work for additional information
5 ! regarding copyright ownership. The ASF licenses this file
6 ! to you under the Apache License, Version 2.0 (the
7 ! "License"); you may not use this file except in compliance
8 ! with the License. You may obtain a copy of the License at
9 !
10 ! http://www.apache.org/licenses/LICENSE-2.0
11 !
12 ! Unless required by applicable law or agreed to in writing,
13 ! software distributed under the License is distributed on an
14 ! "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
15 ! KIND, either express or implied. See the License for the
16 ! specific language governing permissions and limitations
17 ! under the License.
18 !-->
19
ramangrover29a04696c2013-07-31 21:50:38 -0700[diff] [blame]20<html>
21 <head>
ramangrover2975b73552013-08-06 10:31:04 -0700[diff] [blame]22 <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]23 <script type="text/javascript" src="/webui/static/js/smoothie.js"></script>
ramangrover29a04696c2013-07-31 21:50:38 -0700[diff] [blame]24 <script type="text/javascript">
ramangrover2975b73552013-08-06 10:31:04 -0700[diff] [blame]25 $(document).ready(function() {
26 var feedSeries = new TimeSeries();
ramangrover29a41d4182013-09-09 10:48:20 -0700[diff] [blame]27 var state = "ACTIVE";
ramangrover2920afdc32013-08-07 17:18:53 -0700[diff] [blame]28 var dataverse = "%s";
29 var dataset = "%s";
30 var feed = "%s";
31 var ingestLocations = "%s";
32 var computeLocations = "%s";
33 var storageLocations = "%s";
34 var ingestionPolicy = "%s";
35 var activeSince = "%s";
36 var targetUrl = "/feed/data?dataverse=" + dataverse + "&dataset=" + dataset + "&feed=" + feed;
ramangrover29a04696c2013-07-31 21:50:38 -0700[diff] [blame]37
ramangrover2920afdc32013-08-07 17:18:53 -0700[diff] [blame]38
39 var ingestionNodes = ingestLocations.split(",");
40 var numIngestionNodes = ingestionNodes.length;
41 var seriesOptions = { strokeStyle: 'rgba(0, 255, 0, 1)', fillStyle: 'rgba(0, 255, 0, 0.2)', lineWidth: 4 };
42 var ingestionTimeSeries = new Array();
43 var graphNames = new Array();
44
45 $.ajaxSetup({ cache: false });
ramangrover29a41d4182013-09-09 10:48:20 -0700[diff] [blame]46 setInterval(fetchFeedReport, 5000);
ramangrover2975b73552013-08-06 10:31:04 -0700[diff] [blame]47 function fetchFeedReport() {
48 $.ajax({
ramangrover2920afdc32013-08-07 17:18:53 -0700[diff] [blame]49 url: '/feed/data?dataverse=' + dataverse + '&dataset=' + dataset + '&feed=' + feed,
ramangrover2975b73552013-08-06 10:31:04 -0700[diff] [blame]50 method: 'GET',
51 dataType: 'json',
52 success: onFeedReportReceived
53 });
54 }
ramangrover2940636ee2013-08-04 22:05:49 -0700[diff] [blame]55
ramangrover2975b73552013-08-06 10:31:04 -0700[diff] [blame]56
57 function onFeedReportReceived(data) {
ramangrover29a41d4182013-09-09 10:48:20 -0700[diff] [blame]58 var status = data["status"];
59 if(status == ("ended")){
60 ingestLocations = " ";
61 computeLocations = " ";
62 storageLocations = " ";
63 ingestionPolicy = " ";
64 state = "INACTIVE";
ramangrover292d3f6dd2013-08-14 17:14:27 -0700[diff] [blame]65 document.location.reload(true);
66 } else {
ramangrover29a41d4182013-09-09 10:48:20 -0700[diff] [blame]67 var type = data["type"];
68 if (type == ("reload")) {
69 ingestLocations = data["ingestLocations"];
70 computeLocations = data["computeLocations"];
71 storageLocations = data["storageLocations"];
72 document.location.reload(true);
73 } else {
74 var report = data["value"];
75 var tputArray = report.split("|");
76 var covered = 0;
77 var totalTput = 0;
78 for( var i = 0; i < tputArray.length-1; i ++){
79 ingestionTimeSeries[i].append(data["time"], tputArray[i]);
80 covered++;
81 totalTput += parseInt(tputArray[i]);
82 }
83 for( var j = covered; j < numIngestionNodes; j++){
84 ingestionTimeSeries[j].append(data["time"], 0);
85 }
86 ingestionTimeSeries[numIngestionNodes].append(data["time"], totalTput);
87 }
ramangrover292d3f6dd2013-08-14 17:14:27 -0700[diff] [blame]88 }
ramangrover2975b73552013-08-06 10:31:04 -0700[diff] [blame]89 }
90
91 function myYRangeFunction(range) {
92 var min = 0;
93 var max = 5000;
94 return {min: min, max: max};
95 }
96
ramangrover2920afdc32013-08-07 17:18:53 -0700[diff] [blame]97 function initTimeline(ingestLocations) {
ramangrover2975b73552013-08-06 10:31:04 -0700[diff] [blame]98
ramangrover29206f4072013-08-15 14:24:31 -0700[diff] [blame]99 document.write("<i>" + "Feed Ingestion" + " " + "<i>");
ramangrover29d9702ac2013-09-14 19:14:39 -0700[diff] [blame]100 document.write("<br />" + "Ingestion Locations: " + ingestLocations.replace(",",", "));
101 document.write("<br />" + "Compute Locations: " + computeLocations.replace(",",", "));
102 document.write("<br />" + "Storage Locations: " + storageLocations.replace(",",", "));
ramangrover2920afdc32013-08-07 17:18:53 -0700[diff] [blame]103 document.write("<br />" + "Ingestion Policy: " + ingestionPolicy);
ramangrover29a41d4182013-09-09 10:48:20 -0700[diff] [blame]104 document.write("<br />" + "Status: " + state);
ramangrover2920afdc32013-08-07 17:18:53 -0700[diff] [blame]105 document.write("<br />");
106 document.write("<br />");
107
108 for( var i = 0; i < numIngestionNodes; i++){
ramangrover292d3f6dd2013-08-14 17:14:27 -0700[diff] [blame]109 graphNames[i] = "Partition " + i;
ramangrover2920afdc32013-08-07 17:18:53 -0700[diff] [blame]110 }
111
112 if(numIngestionNodes > 1){
113 graphNames[numIngestionNodes] = "IngestionThroughput";
114 drawCanvas(graphNames[numIngestionNodes]);
115 ingestionTimeSeries[numIngestionNodes] = new TimeSeries();
116 drawChart(graphNames[numIngestionNodes], ingestionTimeSeries[numIngestionNodes]);
117 }
118
119 for( var j = 0; j < numIngestionNodes; j++){
120 drawCanvas(graphNames[j]);
121 ingestionTimeSeries[j] = new TimeSeries();
122 drawChart(graphNames[j], ingestionTimeSeries[j]);
123 }
ramangrover2975b73552013-08-06 10:31:04 -0700[diff] [blame]124 }
ramangrover2920afdc32013-08-07 17:18:53 -0700[diff] [blame]125
126 function drawCanvas(chartName) {
127 document.write("<br />");
128 document.write("<br />");
129 document.write("<i>" + chartName + "</i>");
130 document.write("<br />");
131 document.write("<canvas id="+ "\"" + chartName + "\"" + " " + "width=\"500\" height=\"250\"></canvas>");
132 }
133
134 function drawChart(chartName, ingestionTimeSeries) {
ramangrover29a41d4182013-09-09 10:48:20 -0700[diff] [blame]135 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]136 ingestionChart.addTimeSeries(ingestionTimeSeries, seriesOptions);
137 ingestionChart.streamTo(document.getElementById(chartName, 500));
138 }
139
140 initTimeline(ingestLocations);
ramangrover2975b73552013-08-06 10:31:04 -0700[diff] [blame]141 });
ramangrover29a04696c2013-07-31 21:50:38 -0700[diff] [blame]142 </script>
ramangrover29c996e282013-08-03 14:36:45 -0700[diff] [blame]143 </head>
ramangrover2920afdc32013-08-07 17:18:53 -0700[diff] [blame]144 <body></body>
ramangrover29a04696c2013-07-31 21:50:38 -0700[diff] [blame]145</html>
ramangrover2975b73552013-08-06 10:31:04 -0700[diff] [blame]146