blob: 8f0702f59c1235ec06b60f0ce4264197ab8c77d9 [file] [log] [blame]
Scott Baker771819b2014-03-19 22:10:17 -07001
2 <script type="text/javascript" src="//www.google.com/jsapi"></script>
Scott Baker6d5ea4c2014-04-21 00:35:40 -07003 <link rel="stylesheet" href="/static/hpc_historical.css">
Scott Baker771819b2014-03-19 22:10:17 -07004 <script type="text/javascript">
5 google.load('visualization', '1', {'packages' : ['controls','table','corechart','geochart']});
6 </script>
Scott Baker6d5ea4c2014-04-21 00:35:40 -07007
Scott Baker771819b2014-03-19 22:10:17 -07008 <script type="text/javascript">
Scott Baker771819b2014-03-19 22:10:17 -07009
Scott Baker6d5ea4c2014-04-21 00:35:40 -070010 var options = {
Scott Bakercdd2c822014-04-23 20:07:08 -070011 width: 600,
12 height: 400,
13 showRowNumber: false,
14 pages: true,
15 numRows: 9,
16 backgroundColor: "black"
17 };
18
19 // ask django for a data source URL to use for the graphs
20
21 function updateDataSourceUrl() {
22 var sliceName = $("#historical_slicename :selected").text();
23 var queryString = "/analytics/bigquery/?timeBucket=600&maxAge=86400&sum=@bytes_sent&avg=@cpu&groupBy=Time,city,@hostname,@site&slice=" + sliceName;
24
25 $.ajax({
26 url: queryString,
27 dataType: 'json',
28 type: 'GET',
29 success: function (newData) {
30 sendAndDraw(newData["dataSourceUrl"])
31 }
32 });
33 }
34
35 TIME_COL = 0;
36 BANDWIDTH_COL = 2;
37 CPU_COL = 1;
38 CITY_COL = 3;
39 NODE_COL = 4;
40 SITE_COL = 5;
41
42 google.setOnLoadCallback(function () {
43 $('#historical_slicename').change(function()
44 {
45 updateDataSourceUrl();
46 });
47
48 updateDataSourceUrl();
49 });
50
51 function showSiteTimeAgg(dt) {
52 var lineChart = new google.visualization.ChartWrapper({
53 'chartType': 'LineChart',
54 'containerId': 'chart-site-time',
55 'options': {
56 'width': 320,
57 'height': 300,
58 'title': 'Network-wide usage',
59 'pages': true,
60 'numRows': 9
61 },
62 'view': {
63 'columns': [0, 1, 2]
64 }
65 });
66 lineChart.setDataTable(dt);
67 lineChart.draw();
68 }
69
70 function showSiteAgg(dt) {
71 var barChart = new google.visualization.ChartWrapper({
72 'chartType': 'ColumnChart',
73 'containerId': 'chart-site-agg',
74 'options': {
75 'width': 670,
76 'height': 300,
77 'title': 'Site-wise usage',
78 'pages': true,
79 'numRows': 9
80 },
81 'view': {
82 'columns': [1, 2, 3]
83 }
84 });
85 barChart.setDataTable(dt);
86 barChart.draw();
87 var geoChart = new google.visualization.ChartWrapper({
88 'chartType': 'GeoChart',
89 'containerId': 'chart-geo',
90 'options': {
91 'width': 320,
92 'height': 300,
93 'displayMode': 'markers',
94 'region': '021',
95 'title': 'Usage map',
96 colorAxis: {
97 colors: ['green', 'purple', 'red']
98 }
99 },
100 'view': {
101 'columns': [0, 2, 3]
102 }
103 });
104 geoChart.setDataTable(dt);
105 geoChart.draw();
106
107/* var histogram = new google.visualization.ChartWrapper({
108 'chartType': 'Histogram',
109 'containerId': 'chart-histo',
110 'options': {
111 'width': 300,
112 'height': 300,
113 },
114 'title': 'Sites by load',
115 'view': {
116 'columns': [1, 2]
117 }
118 });
119 histogram.setDataTable(dt);
120 histogram.draw(); */
121
122 }
123
124 function handleResponse(response) {
125 var timeSlider = new google.visualization.ControlWrapper({
126 'controlType': 'DateRangeFilter',
127 'containerId': 'control1',
128 'options': {
129 'filterColumnLabel': 'Time',
130 ui: {
131 ticks: 10,
132 step: "minute"
133 }
134 }
135 });
136
137 var categoryPicker = new google.visualization.ControlWrapper({
138 'controlType': 'CategoryFilter',
139 'allowMultiple': true,
140 'containerId': 'control2',
141 'options': {
142 'filterColumnLabel': 'site',
143 'ui': {
144 'labelStacking': 'vertical',
145 'allowTyping': false
146 }
147 }
148 });
149
150 var proxy = new google.visualization.ChartWrapper({
151 'chartType': 'Table',
152 'containerId': 'chart7',
153 'options': {
154 'width': 800,
155 'height': 300,
156 pageSize: 5,
157 page: 'enable',
158 'legend': 'none',
159 'title': 'Nodes'
160 },
161 'view': {
162 'columns': [0, 1, 2, 3, 4, 5]
163 }
164 });
165
166 function avg_bandwidth(arr) {
Scott Baker6d5ea4c2014-04-21 00:35:40 -0700167 var ret = 0;
168 for (var i = 0; i < arr.length; i++) {
169 ret+=arr[i]*8.0/1024.0/1024.0/1024.0;
170 }
171 if (arr.length==0) {
172 return 0;
173 }
174 return ret/arr.length;
Scott Bakercdd2c822014-04-23 20:07:08 -0700175 }
176
177 function sum_bytes_sent_as_bw(arr) {
Scott Baker6d5ea4c2014-04-21 00:35:40 -0700178 var ret = 0;
179 for (var i = 0; i < arr.length; i++) {
180 ret+=arr[i]*8.0/1024.0/1024.0/1024.0;
181 }
182 return ret/60.0;
Scott Bakercdd2c822014-04-23 20:07:08 -0700183 }
184
185 function sum_bytes_sent_as_GB(arr) {
Scott Baker6d5ea4c2014-04-21 00:35:40 -0700186 var ret = 0;
187 for (var i = 0; i < arr.length; i++) {
188 ret+=arr[i]/1024.0/1024.0/1024.0;
189 }
190 return ret;
Scott Bakercdd2c822014-04-23 20:07:08 -0700191 }
192
193 function fixDate2(unixDate) {
194 // not completely sure why we have to do this, as the data was in
195 // javascript Date() objects to start with. If we don't do it,
196 // then the horizontal axis will be blank.
Scott Baker6d5ea4c2014-04-21 00:35:40 -0700197 return new Date(unixDate);
Scott Bakercdd2c822014-04-23 20:07:08 -0700198 }
199
200 var format0dp = new google.visualization.NumberFormat({fractionDigits:0});
201 var format2dp = new google.visualization.NumberFormat({fractionDigits:2});
202
203 // Create a group for charts that will have a horizontal axis that is
204 // time.
205
206 google.visualization.events.addListener(proxy, 'ready', function () {
207 var dt = proxy.getDataTable();
208 var groupedData1 = google.visualization.data.group(dt, [{
Scott Baker6d5ea4c2014-04-21 00:35:40 -0700209 column: TIME_COL,
210 type: 'datetime',
211 modifier: fixDate2,
Scott Bakercdd2c822014-04-23 20:07:08 -0700212 }], [{
213 column: CPU_COL,
214 type: 'number',
215 label: "avg cpu",
216 aggregation: google.visualization.data.avg
217 }, {
218 column: BANDWIDTH_COL,
219 type: 'number',
220 label: "Gbps",
221 aggregation: sum_bytes_sent_as_bw
222 }]);
223
224 format0dp.format(groupedData1,1);
225 format2dp.format(groupedData1,2);
226
227 showSiteTimeAgg(groupedData1);
228 });
229
230 // Create a group for charts that will have a horizontal axis that is
231 // city or site.
232
233 google.visualization.events.addListener(proxy, 'ready', function () {
234 var dt = proxy.getDataTable();
235 var groupedData0 = google.visualization.data.group(dt, [CITY_COL, SITE_COL], [{
236 column: CPU_COL,
237 type: 'number',
238 label: 'avg cpu',
239 aggregation: google.visualization.data.avg
240 }, {
241 column: BANDWIDTH_COL,
242 type: 'number',
243 label: "GB sent",
244 aggregation: sum_bytes_sent_as_GB
245 }]);
246
247 format0dp.format(groupedData0,2);
248 format2dp.format(groupedData0,3);
249
250 showSiteAgg(groupedData0);
251 });
252
253 data = response.getDataTable();
254 new google.visualization.Dashboard(document.getElementById('dashboard')).
255 // Establish bindings, declaring the both the slider and the category
256 // picker will drive both charts.
257 bind([categoryPicker, timeSlider], [proxy]).
258 // Draw the entire dashboard.
259 draw(data);
260
261 }
262
263 function sendAndDraw(queryString) {
264 query = new google.visualization.Query(queryString)
265 query && query.abort();
266 query.send(function (response) {
267 handleResponse(response);
268 });
Scott Baker6d5ea4c2014-04-21 00:35:40 -0700269 }
Scott Baker771819b2014-03-19 22:10:17 -0700270
271 </script>
Scott Baker6d5ea4c2014-04-21 00:35:40 -0700272 <div id="dashboard" class="graph_container">
273 <div class="row">
274 <span><b>Slice Name:</b></span>
275 <span><select id="historical_slicename">
276 {% for slice in userSliceInfo %}
277 <option value="{{ slice.slicename }}">{{ slice.slicename }}</option>
278 {% endfor %}
279 </select></span>
280 </div>
281 <div class="row" dstyle="background-color:red">
282 <div class="col-md-12">
Scott Baker771819b2014-03-19 22:10:17 -0700283 <div class="col-md-4" id="control2"></div>
284 <div class="col-md-4" id="control1"></div>
285 <!--<div class="col-md-4" id="control3"></div>-->
286 </div>
287 </div>
Scott Baker6d5ea4c2014-04-21 00:35:40 -0700288 <div class="row" dstyle="background-color:green">
289 <div class="col-md-12">
290 <div class="col-md-fullgraph" id="chart-site-agg" dstyle="background-color:pink">
Scott Baker771819b2014-03-19 22:10:17 -0700291 </div>
Scott Baker771819b2014-03-19 22:10:17 -0700292 </div>
293 </div>
Scott Baker6d5ea4c2014-04-21 00:35:40 -0700294 <div class="row" dstyle="background-color:blue">
295 <div class="col-md-12">
296 <div class="col-md-halfgraph" id="chart-site-time" dstyle="background-color:orange">
Scott Baker771819b2014-03-19 22:10:17 -0700297 </div>
Scott Baker6d5ea4c2014-04-21 00:35:40 -0700298 <div class="col-md-halfgraph" id="chart-geo" dstyle="background-color:yellow">
Scott Baker771819b2014-03-19 22:10:17 -0700299 </div>
300 </div>
301 </div>
302 </div>
303 <div id="chart7" style="display:none"></div>