1 {% extends "admin/base.html" %}
2 {% load admin_static %}
5 <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">
11 <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>
15 <!-- 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" -->
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>
25 $( "#tabs" ).tabs({active: 0
32 function confirmDialog(title,msg) {
33 var dialog = $('<div>'+msg+'</div>');
34 var def = $.Deferred();
41 dialogClass: "dashboard-hpc-sliver",
45 log.debug("Chose to add a sliver");
46 $( this ).dialog( "close" );
48 'Cancel': function() {
50 $( this ).dialog( "close" );
61 <div id="tabs" class="inner-center-column ui-tabs ui-widget ui-widget-content ui-corner-all">
62 <ul id="suit_form_tabs" class="nav nav-tabs nav-tabs-suit">
63 <li class="active"><a href="#tabs-1">Developer View</a></li>
64 <li><a href="#tabs-2">CDN Operations </a></li>
65 <li><a href="#tabs-3">Historical</a></li>
66 <li><a href="#tabs-3">Tenant</a></li>
71 <div id="HPCDashboard">
72 <h1>CDN Operations View</h1>
73 <span id="hpcSummary">
74 <span class="summary-attr"><b>Active Slivers:</b> <span id="active-slivers-value"> </span> </span>
75 <span class="summary-attr"><b>Overall Throughput:</b> <span id="overall-throughput-value"> </span> </span>
76 <span class="summary-attr-util"><b>Average CPU Utilization:</b> <span id="cpu-utilization-value"> </span> </span>
78 <div id="map-us" ></div>
79 <div style="line-height: 30%"><br></div><table border=0><tr>
80 <td>Least Loaded </td>
81 <td bgcolor="#0000FF" width=40> </td>
82 <td bgcolor="#00FFFF" width=40> </td>
83 <td bgcolor="#00FF00" width=40> </td>
84 <td bgcolor="#FFFF00" width=40> </td>
85 <td bgcolor="#FF0000" width=40> </td>
86 <td> Most Loaded</td>
91 {% include "/opt/planetstack/templates/admin/dashboard/hpc_historical.html" %}
97 var consoleAppender = new log4javascript.BrowserConsoleAppender();
98 var patternLayout = new log4javascript.PatternLayout("%d{HH:mm:ss,SSS} %l{s:l} %-5p - %m{1}%n");
99 consoleAppender.setLayout(patternLayout);
101 //var log = log4javascript.getDefaultLogger();
102 var log = log4javascript.getRootLogger();
103 log.addAppender(consoleAppender);
104 log.setLevel(log4javascript.Level.ERROR);
106 function updateUserSliceTable(){
107 log.debug("Should grab user slice info");
111 url: '/hpcdashuserslices',
112 success: function(data){
113 log.info("Got Data back for User SliceTable");
115 //createUserSliceTable(data);
116 setTimeout(function () { updateUserSliceTable() }, 5000);
118 error: function(data){
119 log.debug("COULDNT GET DATA BACK");
120 setTimeout(function () { updateUserSliceTable() }, 5000);
125 function createUserSliceTable(data) {
126 log.debug("Creating User Slice Table");
128 //Add check for #dynamicusersliceinfo_filter label-> input having focus here
130 $('#tabs-1').html( '<table cellpadding="0" cellspacing="0" border="0" class="display" id="dynamicusersliceinfo"></table>' );
131 var actualEntries = [];
132 log.debug(data['userSliceInfo']['rows'][0]['slicename']);
134 var rows = data['userSliceInfo']['rows'];
137 slicename = rows[row]['slicename'];
138 sliceid = rows[row]['sliceid'];
139 role = rows[row]['role'];
140 slivercount = rows[row]['slivercount'];
141 sitecount = rows[row]['sitecount'];
142 actualEntries.push(['<a href="http://{{request.get_host}}/admin/core/slice/' + sliceid + '">' + slicename + '</a>',
143 role, slivercount, sitecount]);
145 oTable = $('#dynamicusersliceinfo').dataTable( {
147 "aaData": actualEntries ,
150 { "sTitle": "Slice" },
151 { "sTitle": "Privilege" , sClass: "alignCenter"},
152 { "sTitle": "Number of Slivers" , sClass: "alignCenter"},
153 { "sTitle": "Number of Sites" , sClass: "alignCenter"},
157 // If the filter had focus, reapply here
159 setTimeout(function() {
161 url: '/hpcdashuserslices',
163 success: function(data){ createUserSliceTable(data); },
164 complete: function(){ },
169 function initTable(){
170 log.debug("Initializing Table")
172 url: '/hpcdashuserslices',
174 success: function(data){ createUserSliceTable(data); },
175 complete: function(){
178 updateUserSliceTable();
184 //$( "#dialogadd" ).dialog({ autoOpen: false });
185 //$( "#remSliverdialog" ).dialog({ autoOpen: false });
187 L.Map = L.Map.extend({
188 openPopup: function(popup) {
191 return this.addLayer(popup).fire('popupopen', {
198 //Iterate through data and find the max/min coordinates to include all of our points to start
199 var map = L.map('map-us'); //.setView([0, 0], 1);
200 map.scrollWheelZoom.disable();
203 // Great tiles, but starting to occasionally see 403 errors on certain tiles causing grey out effect
204 //L.tileLayer('http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png', {
206 // Swapping out cloudmade tiles to openstreetmap - too many grey tiles showing
207 L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
212 var arrayOfLatLngs = [];
213 var mapData = {{ cdnData|safe }};
214 log.debug( mapData );
216 for ( var key in mapData ) {
217 arrayOfLatLngs.push([mapData[key]['lat'],mapData[key]['long']]);
218 log.debug( arrayOfLatLngs );
220 mapData[key]['marker'] = L.marker([mapData[key]['lat'], mapData[key]['long']], {icon: getIcon(mapData[key]['numNodes'], mapData[key]['numHPCSlivers'], 0, mapData[key]['hot']) });
221 mapData[key]['marker'].addTo(map).bindPopup(setPopupVals(key, mapData[key]));
224 var bounds = new L.LatLngBounds(arrayOfLatLngs);
225 map.fitBounds(bounds);
227 var popup = L.popup();
230 function setPopupVals (site, siteData) {
231 var retVal = '<span class="SiteDetail"><b>' + site + '</b></span>' +
232 '</br><a href="' + siteData['siteUrl'] + '">' + siteData['siteUrl'] + '</a>' +
233 '</br><b>HPC Slivers: </b>' + siteData['numHPCSlivers'] +
234 '</br><b>Total Nodes: </b>' + siteData['numNodes'] +
235 // '</br><b>Hot: </b>' + Math.round(siteData['hot']*100) +
236 '</br><b>Measured Load: </b>' + siteData['load'] + '%' +
237 '<span id="addSlivers"></br><a href="#" id="addHPCSliver" data-site="' + site + '" data-availNodes="' + siteData['numNodes'] +'">Add HPC Slivers</a> </span>' +
238 '<span id="remSlivers"><a href="#" id="remHPCSliver" data-site="' + site + '">Remove HPC Slivers</a> </span>';
243 $('#map-us').on('click', '#remHPCSliver', function() {
246 url : '/dashboardaddorremsliver/',
248 data: {site: $(this).data('site'),
250 csrfmiddlewaretoken: "{{ csrf_token }}", // < here
253 //success: function(response)
255 // alert("Successfully posted request to REMOVE sliver");
258 alert("Successfully posted request to REMOVE sliver");
260 //error:function (xhr, textStatus, thrownError){
261 // alert("Could not request to remove HPC Sliver");
266 $('#map-us').on('click', '#addHPCSliver', function() {
269 url : '/dashboardaddorremsliver/',
271 data: {site: $(this).data('site'),
273 csrfmiddlewaretoken: "{{ csrf_token }}", // < here
276 success: function(response)
278 alert("Successfully posted request to add sliver");
282 alert("Successfully posted request to add sliver");
284 //error:function (xhr, textStatus, thrownError){
285 // alert("error doing something");
288 // confirmDialog("Add HPC Slivers","Add some HPC Slivers to site " + $(this).data('site'));
291 function getIcon(numNodes, numHPCSlivers, currentBW, hot) {
292 //var colorChoices = ["#007FFF", "#0000FF", "#7f00ff", "#FF00FF", "#FF007F", "#FF0000"];
293 var colorChoices = ["#0000FF", "#00FFFF", "#00FF00", "#FFFF00", "#FF0000"];
295 var ratio = hot * 100; //(numHPCSlivers/numNodes) * 100;
296 var numColors = colorChoices.length;
297 var colorBands = 100/numColors;
299 //Algorithm for color tone should consider the number of available nodes
300 // on the site, and then how much the current dedicated nodes are impacted
302 var iconColor = colorChoices.length-1;
303 for (colorBand = 0; colorBand < numColors; colorBand ++) {
304 if (ratio < colorBands * colorBand+1) {
305 iconColor = colorBand
310 if (numHPCSlivers < 1) {
311 iconColor = "#7F7F7F";
313 iconColor = colorChoices[iconColor];
316 var icon = L.MakiMarkers.icon({icon: "star-stroked", color: iconColor , size: "s"});
320 function updateMaps() {
321 log.debug("Attempting to update Maps");
323 url : '/hpcdashboard',
326 success: function(newData)
328 log.debug("Successfully got data back...");
330 log.debug("Still have old data too");
332 updateMapData(newData);
335 setTimeout(updateMaps, 30000)
339 function updateMapData(newData) {
340 for ( site in newData ) {
341 var isNewSite = false;
342 //check to see if the site is new or not
343 if (site in mapData) {
344 log.debug("Site " + site + " already mapped");
345 //take ownership of marker
346 newData[site]['marker'] = mapData[site]['marker'];
347 delete mapData[site];
348 newData[site]['marker'].setIcon(getIcon(newData[site]['numNodes'], newData[site]['numHPCSlivers'], 0, newData[site]['hot']));
349 // workaround, markers currently don't have a setPopup Content method -- so have to grab object directly
350 newData[site]['marker']._popup.setContent(setPopupVals(site, newData[site]));
354 log.debug("New Site detected: " + site);
355 newData[site]['marker'] = L.marker([newData[site]['lat'], newData[site]['long']],
356 {icon: getIcon(newData[site]['numNodes'], newData[site]['numHPCSlivers'], 0, newData[site]['hot']) });
357 newData[site]['marker'].addTo(map).bindPopup(setPopupVals(site, newData[site])); //.openPopup();
358 log.debug("Should have added the new site");
363 // Anything still in data needs to be removed since it is no longer a valid site
364 for (remSite in mapData) {
365 log.warn("Site: " + remSite + " is no longer valid, removing from map");
366 map.removeLayer(data[remSite]['marker']);
371 function onMapClick(e) {
374 .setContent("You clicked the map at " + e.latlng.toString())
378 setTimeout(updateMaps, 5000)
380 // from stackexchange
381 function setInnerText (elementId, text) {
383 if (document.getElementById) {
384 element = document.getElementById(elementId);
385 } else if (document.all) {
386 element = document.all[elementId];
389 if (typeof element.textContent != 'undefined') {
390 element.textContent = text;
391 } else if (typeof element.innerText != 'undefined') {
392 element.innerText = text;
393 } else if (typeof element.removeChild != 'undefined') {
394 while (element.hasChildNodes()) {
395 element.removeChild(element.lastChild);
397 element.appendChild(document.createTextNode(text)) ;
402 function updateLabelData(summaryData) {
403 setInnerText("active-slivers-value", summaryData["total_slivers"]);
404 setInnerText("overall-throughput-value", (summaryData["total_bandwidth"]*8/1024/1024/1024).toFixed(2) + " Gbps");
405 setInnerText("cpu-utilization-value", summaryData["average_cpu"] + "%");
408 function updateLabels() {
409 log.debug("Attempting to update Labels");
414 success: function(newData)
416 updateLabelData(newData);
419 setTimeout(updateLabels, 30000)
423 setTimeout(updateLabels, 5000)