blob: 4967169dd9f3b28254e2dcb1ffe8298435248554 [file] [log] [blame]
Siobhan Tullycf04fb62014-01-11 11:25:57 -05001{% extends "admin/base.html" %}
2{% load admin_static %}
3
Siobhan Tully90040c22014-01-13 23:47:24 -05004{% block content %}
Scott Baker771819b2014-03-19 22:10:17 -07005<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables.css">
6<link rel="stylesheet" type="text/css" href="{% static 'suit/css/suit.css' %}" media="all">
7<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables_themeroller.css">
8<link rel="stylesheet" type="text/css" href="{% static 'planetstack.css' %}" media="all">
9<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
Siobhan Tullye18b3442014-02-23 14:23:34 -050010
Siobhan Tullye18b3442014-02-23 14:23:34 -050011<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
12<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
13
Siobhan Tullye18b3442014-02-23 14:23:34 -050014
Scott Baker771819b2014-03-19 22:10:17 -070015<!-- no need to include jquery here as it's already included by base.html. Including it multiple times will break mtuity statistics. -->
16<!-- src="http://code.jquery.com/jquery-1.9.1.js" -->
17
18<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
19<script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
20<script type="text/javascript" src="{% static 'log4javascript-1.4.6/log4javascript.js' %}"></script>
21<script src="{% static 'js/Leaflet.MakiMarkers.js' %}" > </script>
22
23<script>
24 $(function() {
Scott Bakercd013972014-03-27 10:42:16 -070025 $( "#hometabs" ).tabs({active: 0, //event: "mouseover"
Scott Baker771819b2014-03-19 22:10:17 -070026 //collapsible: true
27 });
28 });
29</script>
Siobhan Tullye18b3442014-02-23 14:23:34 -050030<script>
Siobhan Tully06d2c032014-02-23 23:48:52 -050031
Scott Baker771819b2014-03-19 22:10:17 -070032function confirmDialog(title,msg) {
33 var dialog = $('<div>'+msg+'</div>');
34 var def = $.Deferred();
35
36 $(dialog).dialog({
37 resizable: false,
38 title: title,
39 autoOpen: true,
40 modal: true,
41 dialogClass: "dashboard-hpc-sliver",
42 buttons: {
43 'OK': function() {
44 def.resolve();
45 log.debug("Chose to add a sliver");
46 $( this ).dialog( "close" );
47 },
48 'Cancel': function() {
49 def.reject();
50 $( this ).dialog( "close" );
51 }
52 },
53 close: {
54 }
55 });
56 return def.promise();
57}
58
59 </script>
60
Scott Bakercd013972014-03-27 10:42:16 -070061<!-- <div id="hometabs" class="inner-center-column ui-tabs ui-widget ui-widget-content ui-corner-all"> -->
62<div id="hometabs" >
63 <ul id="suit_form_tabs" class="nav nav-tabs nav-tabs-suit" data-tab-prefix="suit-tab">
64 <li><a href="#tabs-1">Developer View</a></li>
Scott Baker771819b2014-03-19 22:10:17 -070065 <li><a href="#tabs-2">CDN Operations </a></li>
66 <li><a href="#tabs-3">Historical</a></li>
Scott Bakercd013972014-03-27 10:42:16 -070067 <li><a href="#tabs-4">Slice Interactions</a></li>
68 <li><a href="#tabs-5">Tenant</a></li>
Scott Baker771819b2014-03-19 22:10:17 -070069 </ul>
70<div id="tabs-1">
71</div>
72<div id="tabs-2">
73 <div id="HPCDashboard">
74 <h1>CDN Operations View</h1>
75 <span id="hpcSummary">
76 <span class="summary-attr"><b>Active Slivers:</b> <span id="active-slivers-value"> </span> </span>
77 <span class="summary-attr"><b>Overall Throughput:</b> <span id="overall-throughput-value"> </span> </span>
78 <span class="summary-attr-util"><b>Average CPU Utilization:</b> <span id="cpu-utilization-value"> </span> </span>
79 </span>
80 <div id="map-us" ></div>
81 <div style="line-height: 30%"><br></div><table border=0><tr>
82 <td>Least Loaded&nbsp;&nbsp;</td>
83 <td bgcolor="#0000FF" width=40>&nbsp;</td>
84 <td bgcolor="#00FFFF" width=40>&nbsp;</td>
85 <td bgcolor="#00FF00" width=40>&nbsp;</td>
86 <td bgcolor="#FFFF00" width=40>&nbsp;</td>
87 <td bgcolor="#FF0000" width=40>&nbsp;</td>
88 <td>&nbsp;&nbsp;Most Loaded</td>
89 </tr></table>
90 </div>
91</div>
92<div id="tabs-3">
93{% include "/opt/planetstack/templates/admin/dashboard/hpc_historical.html" %}
94</div>
Scott Bakercd013972014-03-27 10:42:16 -070095<div id="tabs-4">
96{% include "/opt/planetstack/templates/admin/dashboard/slice_interactions.html" %}
97</div>
98<div id="tabs-5">
Scott Baker537d8232014-04-08 23:40:56 -070099{% include "/opt/planetstack/templates/admin/dashboard/tenant.html" %}
Scott Bakercd013972014-03-27 10:42:16 -0700100</div>
Scott Baker771819b2014-03-19 22:10:17 -0700101</div>
102
Scott Bakercd013972014-03-27 10:42:16 -0700103<div id="confirmNodeAdded" title="Added Node to Site"><p>Added Node to Site</p></div>
104<div id="confirmNodeRemoved" title="Removed Node from Site"><p>Added Node to Site</p></div>
Scott Baker771819b2014-03-19 22:10:17 -0700105<script>
106var oTable;
Siobhan Tullye18b3442014-02-23 14:23:34 -0500107var consoleAppender = new log4javascript.BrowserConsoleAppender();
108var patternLayout = new log4javascript.PatternLayout("%d{HH:mm:ss,SSS} %l{s:l} %-5p - %m{1}%n");
109consoleAppender.setLayout(patternLayout);
110
Scott Baker771819b2014-03-19 22:10:17 -0700111//var log = log4javascript.getDefaultLogger();
Siobhan Tullye18b3442014-02-23 14:23:34 -0500112var log = log4javascript.getRootLogger();
113log.addAppender(consoleAppender);
Scott Baker771819b2014-03-19 22:10:17 -0700114log.setLevel(log4javascript.Level.ERROR);
115
116function updateUserSliceTable(){
117 log.debug("Should grab user slice info");
118 jQuery.ajax({
119 async:true,
120 dataType: 'json',
121 url: '/hpcdashuserslices',
122 success: function(data){
123 log.info("Got Data back for User SliceTable");
124 //parseData(data);
125 //createUserSliceTable(data);
126 setTimeout(function () { updateUserSliceTable() }, 5000);
127 },
128 error: function(data){
129 log.debug("COULDNT GET DATA BACK");
130 setTimeout(function () { updateUserSliceTable() }, 5000);
131 }
132 });
133}
134
135function createUserSliceTable(data) {
136 log.debug("Creating User Slice Table");
137
138 //Add check for #dynamicusersliceinfo_filter label-> input having focus here
139
140 $('#tabs-1').html( '<table cellpadding="0" cellspacing="0" border="0" class="display" id="dynamicusersliceinfo"></table>' );
141 var actualEntries = [];
142 log.debug(data['userSliceInfo']['rows'][0]['slicename']);
143
144 var rows = data['userSliceInfo']['rows'];
145 for (row in rows) {
146 log.debug(row[0]);
147 slicename = rows[row]['slicename'];
148 sliceid = rows[row]['sliceid'];
149 role = rows[row]['role'];
150 slivercount = rows[row]['slivercount'];
151 sitecount = rows[row]['sitecount'];
152 actualEntries.push(['<a href="http://{{request.get_host}}/admin/core/slice/' + sliceid + '">' + slicename + '</a>',
153 role, slivercount, sitecount]);
154 }
155 oTable = $('#dynamicusersliceinfo').dataTable( {
156 "bJQueryUI": true,
157 "aaData": actualEntries ,
158 "bStateSave": true,
159 "aoColumns": [
160 { "sTitle": "Slice" },
161 { "sTitle": "Privilege" , sClass: "alignCenter"},
162 { "sTitle": "Number of Slivers" , sClass: "alignCenter"},
163 { "sTitle": "Number of Sites" , sClass: "alignCenter"},
164 ]
165 } );
166
167 // If the filter had focus, reapply here
168
169 setTimeout(function() {
170 jQuery.ajax({
171 url: '/hpcdashuserslices',
172 dataType: 'json',
173 success: function(data){ createUserSliceTable(data); },
174 complete: function(){ },
175 });
176 }, 10000);
177}
178
179function initTable(){
180 log.debug("Initializing Table")
181 jQuery.ajax({
182 url: '/hpcdashuserslices',
183 dataType: 'json',
184 success: function(data){ createUserSliceTable(data); },
185 complete: function(){
186 }
187 });
188 updateUserSliceTable();
189}
190
191
192initTable();
193
Scott Bakercd013972014-03-27 10:42:16 -0700194$( "#confirmNodeAdded" ).dialog({ autoOpen: false,
195 modal: true,
196 buttons: {
197 Ok: function() {
198 $( this ).dialog( "close" );
199 }
200 }});
201$( "#confirmNodeRemoved" ).dialog({ autoOpen: false });
Siobhan Tullye18b3442014-02-23 14:23:34 -0500202
Siobhan Tullye18b3442014-02-23 14:23:34 -0500203L.Map = L.Map.extend({
204 openPopup: function(popup) {
205 this._popup = popup;
206
207 return this.addLayer(popup).fire('popupopen', {
208 popup: this._popup
209 });
210 }
211});
212
213
214//Iterate through data and find the max/min coordinates to include all of our points to start
215var map = L.map('map-us'); //.setView([0, 0], 1);
Scott Baker771819b2014-03-19 22:10:17 -0700216map.scrollWheelZoom.disable();
Siobhan Tullye18b3442014-02-23 14:23:34 -0500217
Scott Baker771819b2014-03-19 22:10:17 -0700218//
219// Great tiles, but starting to occasionally see 403 errors on certain tiles causing grey out effect
220//L.tileLayer('http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png', {
221//
222// Swapping out cloudmade tiles to openstreetmap - too many grey tiles showing
223L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
Siobhan Tullye18b3442014-02-23 14:23:34 -0500224 maxZoom: 18,
225 attribution: 'Test'
226}).addTo(map);
227
228var arrayOfLatLngs = [];
Scott Baker771819b2014-03-19 22:10:17 -0700229var mapData = {{ cdnData|safe }};
230log.debug( mapData );
Siobhan Tullye18b3442014-02-23 14:23:34 -0500231
Scott Baker771819b2014-03-19 22:10:17 -0700232for ( var key in mapData ) {
233 arrayOfLatLngs.push([mapData[key]['lat'],mapData[key]['long']]);
234 log.debug( arrayOfLatLngs );
Siobhan Tullye18b3442014-02-23 14:23:34 -0500235
Scott Baker771819b2014-03-19 22:10:17 -0700236 mapData[key]['marker'] = L.marker([mapData[key]['lat'], mapData[key]['long']], {icon: getIcon(mapData[key]['numNodes'], mapData[key]['numHPCSlivers'], 0, mapData[key]['hot']) });
237 mapData[key]['marker'].addTo(map).bindPopup(setPopupVals(key, mapData[key]));
Siobhan Tullye18b3442014-02-23 14:23:34 -0500238
239}
240var bounds = new L.LatLngBounds(arrayOfLatLngs);
241map.fitBounds(bounds);
242
243var popup = L.popup();
244
Siobhan Tully06d2c032014-02-23 23:48:52 -0500245
246function setPopupVals (site, siteData) {
247 var retVal = '<span class="SiteDetail"><b>' + site + '</b></span>' +
248 '</br><a href="' + siteData['siteUrl'] + '">' + siteData['siteUrl'] + '</a>' +
Scott Baker771819b2014-03-19 22:10:17 -0700249 '</br><b>HPC Slivers: </b>' + siteData['numHPCSlivers'] +
250 '</br><b>Total Nodes: </b>' + siteData['numNodes'] +
251// '</br><b>Hot: </b>' + Math.round(siteData['hot']*100) +
252 '</br><b>Measured Load: </b>' + siteData['load'] + '%' +
253 '<span id="addSlivers"></br><a href="#" id="addHPCSliver" data-site="' + site + '" data-availNodes="' + siteData['numNodes'] +'">Add HPC Slivers</a> </span>' +
254 '<span id="remSlivers"><a href="#" id="remHPCSliver" data-site="' + site + '">Remove HPC Slivers</a> </span>';
Siobhan Tully06d2c032014-02-23 23:48:52 -0500255
256 return retVal;
257}
Siobhan Tully06d2c032014-02-23 23:48:52 -0500258
Scott Baker771819b2014-03-19 22:10:17 -0700259$('#map-us').on('click', '#remHPCSliver', function() {
260
261 $.ajax({
262 url : '/dashboardaddorremsliver/',
263 dataType : 'json',
264 data: {site: $(this).data('site'),
265 actionToDo: "rem",
266 csrfmiddlewaretoken: "{{ csrf_token }}", // < here
267 state:"inactive" },
268 type : 'POST',
269 //success: function(response)
270 //{
271 // alert("Successfully posted request to REMOVE sliver");
272 //},
273 complete:function(){
Scott Bakercd013972014-03-27 10:42:16 -0700274 confirmDialog("Info","Removed an HPC Sliver from Site ");
Scott Baker771819b2014-03-19 22:10:17 -0700275 },
276 //error:function (xhr, textStatus, thrownError){
277 // alert("Could not request to remove HPC Sliver");
278 //}
279 });
280});
281
282$('#map-us').on('click', '#addHPCSliver', function() {
283
284 $.ajax({
285 url : '/dashboardaddorremsliver/',
286 dataType : 'json',
287 data: {site: $(this).data('site'),
288 actionToDo: "add",
289 csrfmiddlewaretoken: "{{ csrf_token }}", // < here
290 state:"inactive" },
291 type : 'POST',
292 success: function(response)
293 {
Scott Bakercd013972014-03-27 10:42:16 -0700294 //alert("Successfully posted request to add sliver");
Scott Baker771819b2014-03-19 22:10:17 -0700295 },
296 complete:function()
297 {
Scott Bakercd013972014-03-27 10:42:16 -0700298 confirmDialog("Info","Added an HPC Sliver to Site ");
Scott Baker771819b2014-03-19 22:10:17 -0700299 },
300 //error:function (xhr, textStatus, thrownError){
301 // alert("error doing something");
302 //}
303 });
304 // confirmDialog("Add HPC Slivers","Add some HPC Slivers to site " + $(this).data('site'));
305});
306
307function getIcon(numNodes, numHPCSlivers, currentBW, hot) {
308 //var colorChoices = ["#007FFF", "#0000FF", "#7f00ff", "#FF00FF", "#FF007F", "#FF0000"];
309 var colorChoices = ["#0000FF", "#00FFFF", "#00FF00", "#FFFF00", "#FF0000"];
310
311 var ratio = hot * 100; //(numHPCSlivers/numNodes) * 100;
Siobhan Tully06d2c032014-02-23 23:48:52 -0500312 var numColors = colorChoices.length;
313 var colorBands = 100/numColors;
314
315 //Algorithm for color tone should consider the number of available nodes
316 // on the site, and then how much the current dedicated nodes are impacted
317 //var iconColor = 0;
Scott Baker771819b2014-03-19 22:10:17 -0700318 var iconColor = colorChoices.length-1;
Siobhan Tully06d2c032014-02-23 23:48:52 -0500319 for (colorBand = 0; colorBand < numColors; colorBand ++) {
320 if (ratio < colorBands * colorBand+1) {
321 iconColor = colorBand
322 break;
323 }
324 }
Scott Baker771819b2014-03-19 22:10:17 -0700325
326 if (numHPCSlivers < 1) {
327 iconColor = "#7F7F7F";
328 } else {
329 iconColor = colorChoices[iconColor];
330 }
331
332 var icon = L.MakiMarkers.icon({icon: "star-stroked", color: iconColor , size: "s"});
Siobhan Tully06d2c032014-02-23 23:48:52 -0500333 return icon;
334}
335
336function updateMaps() {
Scott Baker771819b2014-03-19 22:10:17 -0700337 log.debug("Attempting to update Maps");
Siobhan Tully06d2c032014-02-23 23:48:52 -0500338 $.ajax({
339 url : '/hpcdashboard',
340 dataType : 'json',
341 type : 'GET',
342 success: function(newData)
343 {
Scott Baker771819b2014-03-19 22:10:17 -0700344 log.debug("Successfully got data back...");
345 log.debug(newData);
346 log.debug("Still have old data too");
347 log.debug(mapData);
Siobhan Tully06d2c032014-02-23 23:48:52 -0500348 updateMapData(newData);
349 }
350});
Scott Baker771819b2014-03-19 22:10:17 -0700351 setTimeout(updateMaps, 30000)
Siobhan Tully06d2c032014-02-23 23:48:52 -0500352
353}
354
355function updateMapData(newData) {
356 for ( site in newData ) {
357 var isNewSite = false;
358 //check to see if the site is new or not
Scott Baker771819b2014-03-19 22:10:17 -0700359 if (site in mapData) {
360 log.debug("Site " + site + " already mapped");
Siobhan Tully06d2c032014-02-23 23:48:52 -0500361 //take ownership of marker
Scott Baker771819b2014-03-19 22:10:17 -0700362 newData[site]['marker'] = mapData[site]['marker'];
363 delete mapData[site];
364 newData[site]['marker'].setIcon(getIcon(newData[site]['numNodes'], newData[site]['numHPCSlivers'], 0, newData[site]['hot']));
Siobhan Tully06d2c032014-02-23 23:48:52 -0500365 // workaround, markers currently don't have a setPopup Content method -- so have to grab object directly
366 newData[site]['marker']._popup.setContent(setPopupVals(site, newData[site]));
367 }
368 else {
369 isNewSite = true;
Scott Baker771819b2014-03-19 22:10:17 -0700370 log.debug("New Site detected: " + site);
Siobhan Tully06d2c032014-02-23 23:48:52 -0500371 newData[site]['marker'] = L.marker([newData[site]['lat'], newData[site]['long']],
Scott Baker771819b2014-03-19 22:10:17 -0700372 {icon: getIcon(newData[site]['numNodes'], newData[site]['numHPCSlivers'], 0, newData[site]['hot']) });
Siobhan Tully06d2c032014-02-23 23:48:52 -0500373 newData[site]['marker'].addTo(map).bindPopup(setPopupVals(site, newData[site])); //.openPopup();
Scott Baker771819b2014-03-19 22:10:17 -0700374 log.debug("Should have added the new site");
Siobhan Tully06d2c032014-02-23 23:48:52 -0500375
376 }
377 }
378
379 // Anything still in data needs to be removed since it is no longer a valid site
Scott Baker771819b2014-03-19 22:10:17 -0700380 for (remSite in mapData) {
Siobhan Tully06d2c032014-02-23 23:48:52 -0500381 log.warn("Site: " + remSite + " is no longer valid, removing from map");
382 map.removeLayer(data[remSite]['marker']);
383 }
Scott Baker771819b2014-03-19 22:10:17 -0700384 mapData = newData;
Siobhan Tully06d2c032014-02-23 23:48:52 -0500385}
386
Siobhan Tullye18b3442014-02-23 14:23:34 -0500387function onMapClick(e) {
388 popup
389 .setLatLng(e.latlng)
390 .setContent("You clicked the map at " + e.latlng.toString())
391 .openOn(map);
392}
393
Siobhan Tully06d2c032014-02-23 23:48:52 -0500394setTimeout(updateMaps, 5000)
395
Scott Baker771819b2014-03-19 22:10:17 -0700396// from stackexchange
397function setInnerText (elementId, text) {
398 var element;
399 if (document.getElementById) {
400 element = document.getElementById(elementId);
401 } else if (document.all) {
402 element = document.all[elementId];
403 }
404 if (element) {
405 if (typeof element.textContent != 'undefined') {
406 element.textContent = text;
407 } else if (typeof element.innerText != 'undefined') {
408 element.innerText = text;
409 } else if (typeof element.removeChild != 'undefined') {
410 while (element.hasChildNodes()) {
411 element.removeChild(element.lastChild);
412 }
413 element.appendChild(document.createTextNode(text)) ;
414 }
415 }
416}
417
418function updateLabelData(summaryData) {
419 setInnerText("active-slivers-value", summaryData["total_slivers"]);
420 setInnerText("overall-throughput-value", (summaryData["total_bandwidth"]*8/1024/1024/1024).toFixed(2) + " Gbps");
421 setInnerText("cpu-utilization-value", summaryData["average_cpu"] + "%");
422}
423
424function updateLabels() {
425 log.debug("Attempting to update Labels");
426 $.ajax({
427 url : '/hpcsummary',
428 dataType : 'json',
429 type : 'GET',
430 success: function(newData)
431 {
432 updateLabelData(newData);
433 }
434});
435 setTimeout(updateLabels, 30000)
436
437}
438
439setTimeout(updateLabels, 5000)
440
441
Siobhan Tullye18b3442014-02-23 14:23:34 -0500442</script>
Siobhan Tully90040c22014-01-13 23:47:24 -0500443{% endblock %}