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