blob: 7446ae52ec313126871d3d1453e67bb898bed847 [file] [log] [blame]
Scott Baker771819b2014-03-19 22:10:17 -07001
2 <script type="text/javascript" src="//www.google.com/jsapi"></script>
3 <link rel="stylesheet" href="/static/hpc_historical.css">
4 <script type="text/javascript">
5 google.load('visualization', '1', {'packages' : ['controls','table','corechart','geochart']});
6 </script>
7
8 <script type="text/javascript">
9var queryString = encodeURIComponent("SELECT MINUTE(time) as Time, city, s8 as Node, REGEXP_REPLACE(s8,r'node[0-9]+\.(.*)\.vicci\.org',r'\\1') as Site, AVG(i0) as Cpu, AVG(i1) as Requests FROM [vicci.demoevents] WHERE i0 is not null AND s8 contains 'vicci.org' and not city IN ('princeton','Unknown') and city is not null GROUP BY Time,city,Site,Node ORDER BY Time;");
10 var serverPart = "http://cloud-scrutiny.appspot.com/command?action=send_query&force=ColumnChart&q="
11 var dataSourceUrl = serverPart + queryString;
12 var query;
13
14 var options = {
15 width: 600,
16 height: 400,
17 showRowNumber: false,
18 pages:true,
19 numRows:9,
20 backgroundColor: "black"
21 };
22
23google.setOnLoadCallback(function() { sendAndDraw(dataSourceUrl); });
24
25function showNodeAgg(dt) {
26 var tab = new google.visualization.ChartWrapper({
27 'chartType': 'Table',
28 'containerId': 'chart3',
29 'options': {
30 'width': 300,
31 'height': 300,
32 'title': 'Network-wide usage',
33 'page': 'enable',
34 'pageSize': 10
35 },
36 'view': {'columns': [0, 1, 2]}
37 });
38
39 tab.setDataTable(dt);
40 tab.draw();
41}
42
43function showSiteTimeAgg(dt) {
44 var lineChart = new google.visualization.ChartWrapper({
45 'chartType': 'LineChart',
46 'containerId': 'chart4',
47 'options': {
48 'width': 300,
49 'height': 300,
50 'title': 'Network-wide usage',
51 'pages': true,
52 'numRows': 9
53 },
54 'view': {'columns': [0, 1, 2]}
55 });
56 lineChart.setDataTable(dt);
57 lineChart.draw();
58 /*
59 var scatterChart = new google.visualization.ChartWrapper({
60 'chartType': 'ScatterChart',
61 'containerId': 'chart5',
62 'options': {
63 'width': 300,
64 'height': 300,
65 },
66 // from the 'data' DataTable.
67 'view': {'columns': [1, 2]}
68 });
69 scatterChart.setDataTable(dt);
70 scatterChart.draw();*/
71}
72function showSiteAgg(dt) {
73 var barChart = new google.visualization.ChartWrapper({
74 'chartType': 'ColumnChart',
75 'containerId': 'chart1',
76 'options': {
77 'width': 300,
78 'height': 300,
79 'title': 'Site-wise usage',
80 'pages': true,
81 'numRows': 9
82 },
83 // Instruct the piechart to use colums 0 (Name) and 3 (Donuts Eaten)
84 // from the 'data' DataTable.
85 'view': {'columns': [1, 2, 3]}
86 });
87 barChart.setDataTable(dt);
88 barChart.draw();
89 var geoChart = new google.visualization.ChartWrapper({
90 'chartType': 'GeoChart',
91 'containerId': 'chart2',
92 'options': {
93 'width': 300,
94 'height': 300,
95 'displayMode': 'markers',
96 'region':'021',
97 'title': 'Usage map',
98 colorAxis: {colors: ['green', 'purple', 'red']}
99 },
100 // Instruct the piechart to use colums 0 (Name) and 3 (Donuts Eaten)
101 // from the 'data' DataTable.
102 'view': {'columns': [0, 2,3]}
103 });
104 geoChart.setDataTable(dt);
105 geoChart.draw();
106
107 var histogram = new google.visualization.ChartWrapper({
108 'chartType': 'Histogram',
109 'containerId': 'chart6',
110 'options': {
111 'width': 300,
112 'height': 300,
113 },
114 'title': 'Sites by load',
115 // Instruct the piechart to use colums 0 (Name) and 3 (Donuts Eaten)
116 // from the 'data' DataTable.
117 'view': {'columns': [1, 2]}
118 });
119 histogram.setDataTable(dt);
120 histogram.draw();
121
122}
123
124function handleResponse(response) {
125var supportedClasses = {
126 'Table':google.visualization.Table,
127 'LineChart':google.visualization.LineChart,
128 'ScatterChart':google.visualization.ScatterChart,
129 'ColumnChart':google.visualization.ColumnChart,
130 'GeoChart':google.visualization.GeoChart,
131 'PieChart':google.visualization.PieChart,
132 'Histogram':google.visualization.Histogram
133 };
134
135 /*var slider2 = new google.visualization.ControlWrapper({
136 'controlType': 'NumberRangeFilter',
137 'containerId': 'control3',
138 'options': {
139 'filterColumnLabel': 'Cpu',
140 minValue: 0,
141 maxValue: 100,
142 ui: { ticks: 10}
143 }
144 });*/
145
146 var timeSlider = new google.visualization.ControlWrapper({
147 'controlType': 'NumberRangeFilter',
148 'containerId': 'control1',
149 'options': {
150 'filterColumnLabel': 'Time',
151 ui: { ticks: 10}
152 }
153 });
154
155 // Define a bar chart
156 var barChart = new google.visualization.ChartWrapper({
157 'chartType': 'BarChart',
158 'containerId': 'chart1',
159 'options': {
160 'width': 400,
161 'height': 300,
162 'hAxis': {'minValue': 0, 'maxValue': 60},
163 'chartArea': {top: 0, right: 0, bottom: 0}
164 }
165 });
166
167 var categoryPicker = new google.visualization.ControlWrapper({
168 'controlType': 'CategoryFilter',
169 'allowMultiple': true,
170 'containerId': 'control2',
171 'options': {
172 'filterColumnLabel': 'Site',
173 'ui': {
174 'labelStacking': 'vertical',
175 'allowTyping': false
176 }
177 }
178 });
179 //var container = document.getElementById('datatable');
180 //var table = new google.visualization.LineChart(container);
181 //var table = new google.visualization.ColumnChart(container);
182
183 var proxy = new google.visualization.ChartWrapper({
184 'chartType': 'Table',
185 'containerId': 'chart7',
186 'options': {
187 'width': 800,
188 'height': 300,
189 pageSize:5,
190 page:'enable',
191 'legend': 'none',
192 'title': 'Nodes'
193 },
194 // Instruct the piechart to use colums 0 (Name) and 3 (Donuts Eaten)
195 // from the 'data' DataTable.
196 'view': {'columns': [0,1,2,3,4,5]}
197 });
198
199 function core_sum(arr) {
200 var ret = 0;
201 for (var i = 0; i < arr.length; i++) {
202 ret+=arr[i]/1000;
203 }
204 return ret;
205 }
206
207 function scaled_sum(arr) {
208 var ret = 0;
209 for (var i = 0; i < arr.length; i++) {
210 ret+=arr[i]/1000;
211 }
212 return ret;
213 }
214
215 function count_uniq(arr) {
216 var counts = {};
217 var ret = 0;
218 console.log('Starting ret '+ret);
219 for (var i = 0; i < arr.length; i++) {
220 if (!counts[arr[i]]) ret+=1;
221 counts[arr[i]] = 1;
222 }
223 return ret;
224 }
225 google.visualization.events.addListener(proxy, 'ready', function () {
226 // 0 - time 1 - city 2 - node 3 - site 4 - cpu 5 - bytes
227 var dt = proxy.getDataTable();
228 var groupedData1 = google.visualization.data.group(dt, [0], [{
229 column: 4,
230 type: 'number',
231 label: dt.getColumnLabel(4),
232 aggregation: google.visualization.data.sum
233 },{
234 column: 5,
235 type: 'number',
236 label: dt.getColumnLabel(5),
237 aggregation: google.visualization.data.sum
238 }]);
239
240 showSiteTimeAgg(groupedData1);
241 });
242
243 /*google.visualization.events.addListener(proxy, 'ready', function () {
244 // 0 - time 1 - city 2 - node 3 - site 4 - cpu 5 - bytes
245 var dt = proxy.getDataTable();
246 var groupedData0 = google.visualization.data.group(dt, [2], [{
247 column: 4,
248 type: 'number',
249 label: dt.getColumnLabel(4),
250 aggregation: google.visualization.data.sum
251 },{
252 column: 5,
253 type: 'number',
254 label: dt.getColumnLabel(5),
255 aggregation: google.visualization.data.sum
256 }]);
257 // after grouping, the data will be sorted by column 0, then 1, then 2
258 // if you want a different order, you have to re-sort
259 showNodeAgg(groupedData0);
260 });*/
261
262 google.visualization.events.addListener(proxy, 'ready', function () {
263 // 0 - time 1 - city 2 - node 3 - site 4 - cpu 5 - bytes
264 var dt = proxy.getDataTable();
265 var groupedData0 = google.visualization.data.group(dt, [1,3], [{
266 column: 4,
267 type: 'number',
268 label: 'Cores',
269 aggregation: core_sum
270 },{
271 column: 5,
272 type: 'number',
273 label: dt.getColumnLabel(5),
274 aggregation: scaled_sum
275 }]);
276 // after grouping, the data will be sorted by column 0, then 1, then 2
277 // if you want a different order, you have to re-sort
278 showSiteAgg(groupedData0);
279 });
280
281 data = response.getDataTable();
282 new google.visualization.Dashboard(document.getElementById('dashboard')).
283 // Establish bindings, declaring the both the slider and the category
284 // picker will drive both charts.
285 bind([categoryPicker,timeSlider], [proxy]).
286 // Draw the entire dashboard.
287 draw(data);
288
289}
290function sendAndDraw(queryString) {
291 query = new google.visualization.Query(queryString)
292 query && query.abort();
293 query.send(function(response) {handleResponse(response);});
294}
295
296
297 </script>
298 <div id="dashboard" class="container">
299 <div class="row">
300 <div class="col-md-8">
301 <div class="col-md-4" id="control2"></div>
302 <div class="col-md-4" id="control1"></div>
303 <!--<div class="col-md-4" id="control3"></div>-->
304 </div>
305 </div>
306 <div class="row">
307 <div class="col-md-8">
308 <div class="col-md-4" id="chart1">
309 </div>
310 <div class="col-md-4" id="chart2">
311 </div>
312 <!--
313 <div class="col-md-4" id="chart3">
314 </div>-->
315 </div>
316 </div>
317 <div class="row">
318 <div class="col-md-8">
319 <div class="col-md-4" id="chart4">
320 </div>
321 <!--
322 <div class="col-md-4" id="chart5">
323 </div>-->
324 <div class="col-md-4" id="chart6">
325 </div>
326 </div>
327 </div>
328 </div>
329 <div id="chart7" style="display:none"></div>