Added in support for new HPC Dashboard View, ability to retrieve HPC Dashboard view from views.py in separate function, support for log4javascript to provide integration with browser console for debugging, and leaflet support for MakiMarkers on encodings.
diff --git a/planetstack/templates/admin/dashboard/welcome.html b/planetstack/templates/admin/dashboard/welcome.html
index 707ee96..bec703d 100644
--- a/planetstack/templates/admin/dashboard/welcome.html
+++ b/planetstack/templates/admin/dashboard/welcome.html
@@ -22,4 +22,100 @@
 {% endif %}
 {% endfor %}
 </table>
+<script type="text/javascript" src="{% static 'log4javascript-1.4.6/log4javascript.js' %}"></script>
+    <h1>HPC Dashboard</h1>
+    <span id="hpcSummary">
+        <span class="summary-attr"><b>Active Slivers:</b> 78 </span>
+        <span class="summary-attr"><b>Overall Throughput:</b> 58Gbps</span>
+        <span class="summary-attr-util"><b>CPU Utilization:</b> 45%</span>
+
+    </span>
+    <div id="map-us" ></div>
+<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
+<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
+
+<script src="{% static 'js/Leaflet.MakiMarkers.js' %}" > </script>
+
+<script>
+var consoleAppender = new log4javascript.BrowserConsoleAppender();
+var patternLayout = new log4javascript.PatternLayout("%d{HH:mm:ss,SSS} %l{s:l} %-5p - %m{1}%n");
+consoleAppender.setLayout(patternLayout);
+
+var log  = log4javascript.getRootLogger();
+log.addAppender(consoleAppender);
+log.setLevel(log4javascript.Level.ALL);
+
+
+L.Map = L.Map.extend({
+    openPopup: function(popup) {
+        this._popup = popup;
+
+        return this.addLayer(popup).fire('popupopen', {
+            popup: this._popup
+        });
+    }
+});
+
+
+//Iterate through data and find the max/min coordinates to include all of our points to start
+var map = L.map('map-us'); //.setView([0, 0], 1);
+
+L.tileLayer('http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png', {
+    maxZoom: 18,
+    attribution: 'Test'
+}).addTo(map);
+
+var arrayOfLatLngs = [];
+var data = {{ cdnData|safe }};
+log.info( data );
+
+for ( var key in data ) {
+    arrayOfLatLngs.push([data[key]['lat'],data[key]['long']]);
+    log.info( arrayOfLatLngs );
+    var colorChoices = ["#007FFF", "#0000FF", "#7f00ff", "#FF00FF", "#FF007F", "#FF0000"];
+
+    var ratio = data[key]['numHPCSlivers']/data[key]['numNodes'] * 100;
+    var numColors = colorChoices.length;
+    var colorBands = 100/numColors;
+
+    log.info("numColors: " + numColors);
+    log.info("colorBands: " + colorBands);
+    log.info("ratio: " + ratio);
+
+    //Algorithm for color tone should consider the number of available nodes 
+    // on the site, and then how much the current dedicated nodes are impacted
+    //var iconColor = 0;
+    var iconColor = 0;
+    for (;iconColor < numColors; iconColor ++) {
+        if (ratio < colorBands * iconColor+1) { 
+            break;
+        }
+    }
+   
+    var icon = L.MakiMarkers.icon({icon: "star-stroked", color: colorChoices[iconColor] , size: "s"});
+
+    L.marker([data[key]['lat'], data[key]['long']], {icon: icon}).addTo(map)
+        .bindPopup( '<span class="SiteDetail"><b>' + key + '</b></span>' + 
+                   '</br><a href="' + data[key]['siteUrl'] + '">' + data[key]['siteUrl'] + '</a>' + 
+                   '</br><b>Available Nodes: </b>' + data[key]['numNodes'] + 
+                   '</br><b>Active HPC Slivers: </b>' + data[key]['numHPCSlivers'] + 
+                   '</br><span id="addSlivers">Add HPC Slivers</span>' + 
+                   '<span id="remSlivers">Remove HPC Slivers</span>' + 
+
+                   '');//.openPopup();
+
+}
+var bounds = new L.LatLngBounds(arrayOfLatLngs);
+map.fitBounds(bounds);
+
+var popup = L.popup();
+
+function onMapClick(e) {
+    popup
+    .setLatLng(e.latlng)
+    .setContent("You clicked the map at " + e.latlng.toString())
+    .openOn(map);
+}
+
+</script>
 {% endblock %}