1 <div id="HPCDashboard">
2 <h1>CDN Operations View</h1>
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>
8 <div id="map-us" ></div>
9 <div style="line-height: 30%"><br></div><table border=0><tr>
10 <td>Least Loaded </td>
11 <td bgcolor="#0000FF" width=40> </td>
12 <td bgcolor="#00FFFF" width=40> </td>
13 <td bgcolor="#00FF00" width=40> </td>
14 <td bgcolor="#FFFF00" width=40> </td>
15 <td bgcolor="#FF0000" width=40> </td>
16 <td> Most Loaded</td>
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>
24 $( "#confirmNodeAdded" ).dialog({ autoOpen: false,
28 $( this ).dialog( "close" );
31 $( "#confirmNodeRemoved" ).dialog({ autoOpen: false });
33 L.Map = L.Map.extend({
34 openPopup: function(popup) {
37 return this.addLayer(popup).fire('popupopen', {
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();
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', {
52 // Swapping out cloudmade tiles to openstreetmap - too many grey tiles showing
53 L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
58 var arrayOfLatLngs = [];
59 var mapData = {{ cdnData|safe }};
62 for ( var key in mapData ) {
63 arrayOfLatLngs.push([mapData[key]['lat'],mapData[key]['long']]);
64 log.debug( arrayOfLatLngs );
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]));
70 var bounds = new L.LatLngBounds(arrayOfLatLngs);
71 map.fitBounds(bounds);
73 var popup = L.popup();
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>';
89 $('#map-us').on('click', '#remHPCSliver', function() {
92 url : '/dashboardaddorremsliver/',
94 data: {site: $(this).data('site'),
96 csrfmiddlewaretoken: "{{ csrf_token }}", // < here
100 confirmDialog("Info","Removed an HPC Sliver from Site ");
102 error:function (xhr, textStatus, thrownError){
103 errorDialog("Error", textStatus + " " + xhr.responseText);
108 $('#map-us').on('click', '#addHPCSliver', function() {
111 url : '/dashboardaddorremsliver/',
113 data: {site: $(this).data('site'),
115 csrfmiddlewaretoken: "{{ csrf_token }}", // < here
118 success: function(response)
120 confirmDialog("Info","Added an HPC Sliver to Site ");
122 error:function (xhr, textStatus, thrownError){
123 errorDialog("Error", textStatus + " " + xhr.responseText);
128 function getIcon(numNodes, numHPCSlivers, currentBW, hot) {
129 //var colorChoices = ["#007FFF", "#0000FF", "#7f00ff", "#FF00FF", "#FF007F", "#FF0000"];
130 var colorChoices = ["#0000FF", "#00FFFF", "#00FF00", "#FFFF00", "#FF0000"];
132 var ratio = hot * 100; //(numHPCSlivers/numNodes) * 100;
133 var numColors = colorChoices.length;
134 var colorBands = 100/numColors;
136 //Algorithm for color tone should consider the number of available nodes
137 // on the site, and then how much the current dedicated nodes are impacted
139 var iconColor = colorChoices.length-1;
140 for (colorBand = 0; colorBand < numColors; colorBand ++) {
141 if (ratio < colorBands * colorBand+1) {
142 iconColor = colorBand
147 if (numHPCSlivers < 1) {
148 iconColor = "#7F7F7F";
150 iconColor = colorChoices[iconColor];
153 var icon = L.MakiMarkers.icon({icon: "star-stroked", color: iconColor , size: "s"});
157 function updateMaps() {
158 log.debug("Attempting to update Maps");
160 url : '/hpcdashboard',
163 success: function(newData)
165 log.debug("Successfully got data back...");
167 log.debug("Still have old data too");
169 updateMapData(newData);
172 setTimeout(updateMaps, 30000)
176 function updateMapData(newData) {
177 for ( site in newData ) {
178 var isNewSite = false;
179 //check to see if the site is new or not
180 if (site in mapData) {
181 log.debug("Site " + site + " already mapped");
182 //take ownership of marker
183 newData[site]['marker'] = mapData[site]['marker'];
184 delete mapData[site];
185 newData[site]['marker'].setIcon(getIcon(newData[site]['numNodes'], newData[site]['numHPCSlivers'], 0, newData[site]['hot']));
186 // workaround, markers currently don't have a setPopup Content method -- so have to grab object directly
187 newData[site]['marker']._popup.setContent(setPopupVals(site, newData[site]));
191 log.debug("New Site detected: " + site);
192 newData[site]['marker'] = L.marker([newData[site]['lat'], newData[site]['long']],
193 {icon: getIcon(newData[site]['numNodes'], newData[site]['numHPCSlivers'], 0, newData[site]['hot']) });
194 newData[site]['marker'].addTo(map).bindPopup(setPopupVals(site, newData[site])); //.openPopup();
195 log.debug("Should have added the new site");
200 // Anything still in data needs to be removed since it is no longer a valid site
201 for (remSite in mapData) {
202 log.warn("Site: " + remSite + " is no longer valid, removing from map");
203 map.removeLayer(data[remSite]['marker']);
208 function onMapClick(e) {
211 .setContent("You clicked the map at " + e.latlng.toString())
215 setTimeout(updateMaps, 5000)
217 // from stackexchange
218 function setInnerText (elementId, text) {
220 if (document.getElementById) {
221 element = document.getElementById(elementId);
222 } else if (document.all) {
223 element = document.all[elementId];
226 if (typeof element.textContent != 'undefined') {
227 element.textContent = text;
228 } else if (typeof element.innerText != 'undefined') {
229 element.innerText = text;
230 } else if (typeof element.removeChild != 'undefined') {
231 while (element.hasChildNodes()) {
232 element.removeChild(element.lastChild);
234 element.appendChild(document.createTextNode(text)) ;
239 function updateLabelData(summaryData) {
240 setInnerText("active-slivers-value", summaryData["total_slivers"]);
241 setInnerText("overall-throughput-value", (summaryData["total_bandwidth"]*8/1024/1024/1024).toFixed(2) + " Gbps");
242 setInnerText("cpu-utilization-value", summaryData["average_cpu"] + "%");
245 function updateLabels() {
246 log.debug("Attempting to update Labels");
251 success: function(newData)
253 updateLabelData(newData);
256 setTimeout(updateLabels, 30000)
260 setTimeout(updateLabels, 5000)