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 $( "#hometabs" ).tabs({active: 0, //event: "mouseover"
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="hometabs" class="inner-center-column ui-tabs ui-widget ui-widget-content ui-corner-all"> -->
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>
65 <li><a href="#tabs-2">CDN Operations </a></li>
66 <li><a href="#tabs-3">Historical</a></li>
67 <li><a href="#tabs-4">Slice Interactions</a></li>
68 <li><a href="#tabs-5">Tenant</a></li>
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>
80 <div id="map-us" ></div>
81 <div style="line-height: 30%"><br></div><table border=0><tr>
82 <td>Least Loaded </td>
83 <td bgcolor="#0000FF" width=40> </td>
84 <td bgcolor="#00FFFF" width=40> </td>
85 <td bgcolor="#00FF00" width=40> </td>
86 <td bgcolor="#FFFF00" width=40> </td>
87 <td bgcolor="#FF0000" width=40> </td>
88 <td> Most Loaded</td>
93 {% include "/opt/planetstack/templates/admin/dashboard/hpc_historical.html" %}
96 {% include "/opt/planetstack/templates/admin/dashboard/slice_interactions.html" %}
103 <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>
107 var consoleAppender = new log4javascript.BrowserConsoleAppender();
108 var patternLayout = new log4javascript.PatternLayout("%d{HH:mm:ss,SSS} %l{s:l} %-5p - %m{1}%n");
109 consoleAppender.setLayout(patternLayout);
111 //var log = log4javascript.getDefaultLogger();
112 var log = log4javascript.getRootLogger();
113 log.addAppender(consoleAppender);
114 log.setLevel(log4javascript.Level.ERROR);
116 function updateUserSliceTable(){
117 log.debug("Should grab user slice info");
121 url: '/hpcdashuserslices',
122 success: function(data){
123 log.info("Got Data back for User SliceTable");
125 //createUserSliceTable(data);
126 setTimeout(function () { updateUserSliceTable() }, 5000);
128 error: function(data){
129 log.debug("COULDNT GET DATA BACK");
130 setTimeout(function () { updateUserSliceTable() }, 5000);
135 function createUserSliceTable(data) {
136 log.debug("Creating User Slice Table");
138 //Add check for #dynamicusersliceinfo_filter label-> input having focus here
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']);
144 var rows = data['userSliceInfo']['rows'];
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]);
155 oTable = $('#dynamicusersliceinfo').dataTable( {
157 "aaData": actualEntries ,
160 { "sTitle": "Slice" },
161 { "sTitle": "Privilege" , sClass: "alignCenter"},
162 { "sTitle": "Number of Slivers" , sClass: "alignCenter"},
163 { "sTitle": "Number of Sites" , sClass: "alignCenter"},
167 // If the filter had focus, reapply here
169 setTimeout(function() {
171 url: '/hpcdashuserslices',
173 success: function(data){ createUserSliceTable(data); },
174 complete: function(){ },
179 function initTable(){
180 log.debug("Initializing Table")
182 url: '/hpcdashuserslices',
184 success: function(data){ createUserSliceTable(data); },
185 complete: function(){
188 updateUserSliceTable();
194 $( "#confirmNodeAdded" ).dialog({ autoOpen: false,
198 $( this ).dialog( "close" );
201 $( "#confirmNodeRemoved" ).dialog({ autoOpen: false });
203 L.Map = L.Map.extend({
204 openPopup: function(popup) {
207 return this.addLayer(popup).fire('popupopen', {
214 //Iterate through data and find the max/min coordinates to include all of our points to start
215 var map = L.map('map-us'); //.setView([0, 0], 1);
216 map.scrollWheelZoom.disable();
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', {
222 // Swapping out cloudmade tiles to openstreetmap - too many grey tiles showing
223 L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
228 var arrayOfLatLngs = [];
229 var mapData = {{ cdnData|safe }};
230 log.debug( mapData );
232 for ( var key in mapData ) {
233 arrayOfLatLngs.push([mapData[key]['lat'],mapData[key]['long']]);
234 log.debug( arrayOfLatLngs );
236 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]));
240 var bounds = new L.LatLngBounds(arrayOfLatLngs);
241 map.fitBounds(bounds);
243 var popup = L.popup();
246 function setPopupVals (site, siteData) {
247 var retVal = '<span class="SiteDetail"><b>' + site + '</b></span>' +
248 '</br><a href="' + siteData['siteUrl'] + '">' + siteData['siteUrl'] + '</a>' +
249 '</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>';
259 $('#map-us').on('click', '#remHPCSliver', function() {
262 url : '/dashboardaddorremsliver/',
264 data: {site: $(this).data('site'),
266 csrfmiddlewaretoken: "{{ csrf_token }}", // < here
269 //success: function(response)
271 // alert("Successfully posted request to REMOVE sliver");
274 confirmDialog("Info","Removed an HPC Sliver from Site ");
276 //error:function (xhr, textStatus, thrownError){
277 // alert("Could not request to remove HPC Sliver");
282 $('#map-us').on('click', '#addHPCSliver', function() {
285 url : '/dashboardaddorremsliver/',
287 data: {site: $(this).data('site'),
289 csrfmiddlewaretoken: "{{ csrf_token }}", // < here
292 success: function(response)
294 //alert("Successfully posted request to add sliver");
298 confirmDialog("Info","Added an HPC Sliver to Site ");
300 //error:function (xhr, textStatus, thrownError){
301 // alert("error doing something");
304 // confirmDialog("Add HPC Slivers","Add some HPC Slivers to site " + $(this).data('site'));
307 function getIcon(numNodes, numHPCSlivers, currentBW, hot) {
308 //var colorChoices = ["#007FFF", "#0000FF", "#7f00ff", "#FF00FF", "#FF007F", "#FF0000"];
309 var colorChoices = ["#0000FF", "#00FFFF", "#00FF00", "#FFFF00", "#FF0000"];
311 var ratio = hot * 100; //(numHPCSlivers/numNodes) * 100;
312 var numColors = colorChoices.length;
313 var colorBands = 100/numColors;
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
318 var iconColor = colorChoices.length-1;
319 for (colorBand = 0; colorBand < numColors; colorBand ++) {
320 if (ratio < colorBands * colorBand+1) {
321 iconColor = colorBand
326 if (numHPCSlivers < 1) {
327 iconColor = "#7F7F7F";
329 iconColor = colorChoices[iconColor];
332 var icon = L.MakiMarkers.icon({icon: "star-stroked", color: iconColor , size: "s"});
336 function updateMaps() {
337 log.debug("Attempting to update Maps");
339 url : '/hpcdashboard',
342 success: function(newData)
344 log.debug("Successfully got data back...");
346 log.debug("Still have old data too");
348 updateMapData(newData);
351 setTimeout(updateMaps, 30000)
355 function updateMapData(newData) {
356 for ( site in newData ) {
357 var isNewSite = false;
358 //check to see if the site is new or not
359 if (site in mapData) {
360 log.debug("Site " + site + " already mapped");
361 //take ownership of marker
362 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']));
365 // 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]));
370 log.debug("New Site detected: " + site);
371 newData[site]['marker'] = L.marker([newData[site]['lat'], newData[site]['long']],
372 {icon: getIcon(newData[site]['numNodes'], newData[site]['numHPCSlivers'], 0, newData[site]['hot']) });
373 newData[site]['marker'].addTo(map).bindPopup(setPopupVals(site, newData[site])); //.openPopup();
374 log.debug("Should have added the new site");
379 // Anything still in data needs to be removed since it is no longer a valid site
380 for (remSite in mapData) {
381 log.warn("Site: " + remSite + " is no longer valid, removing from map");
382 map.removeLayer(data[remSite]['marker']);
387 function onMapClick(e) {
390 .setContent("You clicked the map at " + e.latlng.toString())
394 setTimeout(updateMaps, 5000)
396 // from stackexchange
397 function setInnerText (elementId, text) {
399 if (document.getElementById) {
400 element = document.getElementById(elementId);
401 } else if (document.all) {
402 element = document.all[elementId];
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);
413 element.appendChild(document.createTextNode(text)) ;
418 function 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"] + "%");
424 function updateLabels() {
425 log.debug("Attempting to update Labels");
430 success: function(newData)
432 updateLabelData(newData);
435 setTimeout(updateLabels, 30000)
439 setTimeout(updateLabels, 5000)