planetstack/templates/admin/dashboard/cdnoperations.html

   1     <div id="HPCDashboard">
   2     <h1>CDN Operations View</h1>
   3     <span id="hpcSummary">
   4         <span class="summary-attr"><b>Allocated Slivers:</b> <span id="active-slivers-value"> </span> </span>
   5         <span class="summary-attr"><b>CDN Bandwidth:</b> <span id="overall-throughput-value"> </span>  </span>
   6         <span class="summary-attr-util"><b>CDN Load:</b> <span id="cpu-utilization-value"> </span>  </span>
   7     </span>
   8     <div id="map-us" ></div>
   9     <div style="line-height: 30%"><br></div><table border=0><tr>
  10     <td>Least Loaded&nbsp;&nbsp;</td>
  11     <td bgcolor="#0000FF" width=40>&nbsp;</td>
  12     <td bgcolor="#00FFFF" width=40>&nbsp;</td>
  13     <td bgcolor="#00FF00" width=40>&nbsp;</td>
  14     <td bgcolor="#FFFF00" width=40>&nbsp;</td>
  15     <td bgcolor="#FF0000" width=40>&nbsp;</td>
  16     <td>&nbsp;&nbsp;Most Loaded</td>
  17     </tr></table>
  18     </div>
  19
  20     <div id="confirmNodeAdded" title="Added Node to Site"><p>Added Node to Site</p></div>
  21     <div id="confirmNodeRemoved" title="Removed Node from Site"><p>Added Node to Site</p></div>
  22
  23 <script>
  24 $( "#confirmNodeAdded" ).dialog({ autoOpen: false,
  25                     modal: true,
  26                     buttons: {
  27                         Ok: function() {
  28                            $( this ).dialog( "close" );
  29                         }
  30                     }});
  31 $( "#confirmNodeRemoved" ).dialog({ autoOpen: false });
  32
  33 L.Map = L.Map.extend({
  34     openPopup: function(popup) {
  35         this._popup = popup;
  36
  37         return this.addLayer(popup).fire('popupopen', {
  38             popup: this._popup
  39         });
  40     }
  41 });
  42
  43
  44 //Iterate through data and find the max/min coordinates to include all of our points to start
  45 var map = L.map('map-us'); //.setView([0, 0], 1);
  46 map.scrollWheelZoom.disable();
  47
  48 //
  49 // Great tiles, but starting to occasionally see 403 errors on certain tiles causing grey out effect
  50 //L.tileLayer('http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png', {
  51 //
  52 // Swapping out cloudmade tiles to openstreetmap - too many grey tiles showing
  53 L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  54     maxZoom: 18,
  55     attribution: 'Test'
  56 }).addTo(map);
  57
  58 var arrayOfLatLngs = [];
  59 var mapData = {{ cdnData|safe }};
  60 log.debug( mapData );
  61
  62 for ( var key in mapData ) {
  63     arrayOfLatLngs.push([mapData[key]['lat'],mapData[key]['long']]);
  64     log.debug( arrayOfLatLngs );
  65
  66     mapData[key]['marker'] = L.marker([mapData[key]['lat'], mapData[key]['long']], {icon: getIcon(mapData[key]['numNodes'], mapData[key]['numHPCSlivers'], 0, mapData[key]['hot']) });
  67     mapData[key]['marker'].addTo(map).bindPopup(setPopupVals(key, mapData[key]));
  68
  69 }
  70 var bounds = new L.LatLngBounds(arrayOfLatLngs);
  71 map.fitBounds(bounds);
  72
  73 var popup = L.popup();
  74
  75
  76 function setPopupVals (site, siteData) {
  77     var retVal = '<span class="SiteDetail"><b>' + site + '</b></span>' +
  78                    '</br><a href="' + siteData['siteUrl'] + '">' + siteData['siteUrl'] + '</a>' +
  79                    '</br><b>HPC Slivers: </b>' + siteData['numHPCSlivers'] +
  80                    '</br><b>Total Nodes: </b>' + siteData['numNodes'] +
  81 //                   '</br><b>Hot: </b>' + Math.round(siteData['hot']*100) +
  82                    '</br><b>Measured Load: </b>' + siteData['load'] + '%' +
  83                    '<span id="addSlivers"></br><a href="#" id="addHPCSliver" data-site="' + site + '" data-availNodes="' + siteData['numNodes'] +'">Add HPC Slivers</a> </span>' +
  84                    '<span id="remSlivers"><a href="#" id="remHPCSliver" data-site="' + site + '">Remove HPC Slivers</a> </span>';
  85
  86    return retVal;
  87 }
  88
  89 $('#map-us').on('click', '#remHPCSliver', function() {
  90
  91     $.ajax({
  92         url : '/dashboardaddorremsliver/',
  93         dataType : 'json',
  94         data: {site: $(this).data('site'),
  95                actionToDo: "rem",
  96                csrfmiddlewaretoken: "{{ csrf_token }}",   // < here
  97                state:"inactive" },
  98         type : 'POST',
  99         //success: function(response)
 100         //{
 101          //   alert("Successfully posted request to REMOVE sliver");
 102         //},
 103         complete:function(){
 104             confirmDialog("Info","Removed an HPC Sliver from Site ");
 105         },
 106         //error:function (xhr, textStatus, thrownError){
 107          //   alert("Could not request to remove HPC Sliver");
 108         //}
 109     });
 110 });
 111
 112 $('#map-us').on('click', '#addHPCSliver', function() {
 113
 114     $.ajax({
 115         url : '/dashboardaddorremsliver/',
 116         dataType : 'json',
 117         data: {site: $(this).data('site'),
 118                actionToDo: "add",
 119                csrfmiddlewaretoken: "{{ csrf_token }}",   // < here
 120                state:"inactive" },
 121         type : 'POST',
 122         success: function(response)
 123         {
 124             //alert("Successfully posted request to add sliver");
 125         },
 126         complete:function()
 127         {
 128             confirmDialog("Info","Added an HPC Sliver to Site ");
 129         },
 130         //error:function (xhr, textStatus, thrownError){
 131          //   alert("error doing something");
 132         //}
 133     });
 134   //  confirmDialog("Add HPC Slivers","Add some HPC Slivers to site " + $(this).data('site'));
 135 });
 136
 137 function getIcon(numNodes, numHPCSlivers, currentBW, hot) {
 138     //var colorChoices = ["#007FFF", "#0000FF", "#7f00ff", "#FF00FF", "#FF007F", "#FF0000"];
 139     var colorChoices = ["#0000FF", "#00FFFF", "#00FF00", "#FFFF00", "#FF0000"];
 140
 141     var ratio = hot * 100; //(numHPCSlivers/numNodes) * 100;
 142     var numColors = colorChoices.length;
 143     var colorBands = 100/numColors;
 144
 145     //Algorithm for color tone should consider the number of available nodes
 146     // on the site, and then how much the current dedicated nodes are impacted
 147     //var iconColor = 0;
 148     var iconColor = colorChoices.length-1;
 149     for (colorBand = 0; colorBand < numColors; colorBand ++) {
 150         if (ratio < colorBands * colorBand+1) {
 151             iconColor = colorBand
 152             break;
 153         }
 154     }
 155
 156     if (numHPCSlivers < 1) {
 157         iconColor = "#7F7F7F";
 158     } else {
 159         iconColor = colorChoices[iconColor];
 160     }
 161
 162     var icon = L.MakiMarkers.icon({icon: "star-stroked", color: iconColor , size: "s"});
 163     return icon;
 164 }
 165
 166 function updateMaps() {
 167     log.debug("Attempting to update Maps");
 168     $.ajax({
 169     url : '/hpcdashboard',
 170     dataType : 'json',
 171     type : 'GET',
 172     success: function(newData)
 173     {
 174         log.debug("Successfully got data back...");
 175         log.debug(newData);
 176         log.debug("Still have old data too");
 177         log.debug(mapData);
 178         updateMapData(newData);
 179     }
 180 });
 181     setTimeout(updateMaps, 30000)
 182
 183 }
 184
 185 function updateMapData(newData) {
 186     for ( site in newData ) {
 187         var isNewSite = false;
 188         //check to see if the site is new or not
 189         if (site in mapData) {
 190             log.debug("Site " + site + " already mapped");
 191             //take ownership of marker
 192             newData[site]['marker'] = mapData[site]['marker'];
 193             delete mapData[site];
 194             newData[site]['marker'].setIcon(getIcon(newData[site]['numNodes'], newData[site]['numHPCSlivers'],  0, newData[site]['hot']));
 195             // workaround, markers currently don't have a setPopup Content method -- so have to grab object directly
 196             newData[site]['marker']._popup.setContent(setPopupVals(site, newData[site]));
 197         }
 198         else {
 199             isNewSite = true;
 200             log.debug("New Site detected: " + site);
 201             newData[site]['marker'] = L.marker([newData[site]['lat'], newData[site]['long']],
 202                                               {icon: getIcon(newData[site]['numNodes'], newData[site]['numHPCSlivers'],  0, newData[site]['hot']) });
 203             newData[site]['marker'].addTo(map).bindPopup(setPopupVals(site, newData[site])); //.openPopup();
 204             log.debug("Should have added the new site");
 205
 206         }
 207     }
 208
 209     // Anything still in data needs to be removed since it is no longer a valid site
 210     for (remSite in mapData) {
 211         log.warn("Site: " + remSite + " is no longer valid, removing from map");
 212         map.removeLayer(data[remSite]['marker']);
 213     }
 214     mapData = newData;
 215 }
 216
 217 function onMapClick(e) {
 218     popup
 219     .setLatLng(e.latlng)
 220     .setContent("You clicked the map at " + e.latlng.toString())
 221     .openOn(map);
 222 }
 223
 224 setTimeout(updateMaps, 5000)
 225
 226 // from stackexchange
 227 function setInnerText (elementId, text) {
 228     var element;
 229     if (document.getElementById) {
 230         element = document.getElementById(elementId);
 231     } else if (document.all) {
 232         element = document.all[elementId];
 233     }
 234     if (element) {
 235         if (typeof element.textContent != 'undefined') {
 236             element.textContent = text;
 237         } else if (typeof element.innerText != 'undefined') {
 238             element.innerText = text;
 239         } else if (typeof element.removeChild != 'undefined') {
 240             while (element.hasChildNodes()) {
 241                 element.removeChild(element.lastChild);
 242             }
 243             element.appendChild(document.createTextNode(text)) ;
 244         }
 245     }
 246 }
 247
 248 function updateLabelData(summaryData) {
 249     setInnerText("active-slivers-value", summaryData["total_slivers"]);
 250     setInnerText("overall-throughput-value", (summaryData["total_bandwidth"]*8/1024/1024/1024).toFixed(2) + " Gbps");
 251     setInnerText("cpu-utilization-value", summaryData["average_cpu"] + "%");
 252 }
 253
 254 function updateLabels() {
 255     log.debug("Attempting to update Labels");
 256     $.ajax({
 257     url : '/hpcsummary',
 258     dataType : 'json',
 259     type : 'GET',
 260     success: function(newData)
 261     {
 262         updateLabelData(newData);
 263     }
 264 });
 265     setTimeout(updateLabels, 30000)
 266
 267 }
 268
 269 setTimeout(updateLabels, 5000)
 270
 271
 272 </script>