planetstack/templates/admin/dashboard/welcome.html

   1 {% extends "admin/base.html" %}
   2 {% load admin_static %}
   3
   4 {% block content %}
   5 <h1>Welcome <a href="core/user/{{user.id}}">{{user.email}}</a> from Site: <a href="core/site/{{site.id}}">{{site}}</a></h1>
   6 <table class="table table-striped table-bordered table-hover table-condensed">
   7 <thead><tr>
   8 <th class="sortable">Slices</th><th class="sortable">Privilege</th>
   9 <th class="sortable">Reservations</th>
  10 </tr></thead>
  11 {% for entry in userSliceInfo %}
  12 <tr><td> <a href="core/slice/{{entry.slice.id}}">{{entry.slice.name}}</a><br>
  13 </td><td>{{entry.role}}</td>
  14 {% if entry.reservations %}
  15 <td><a href="core/slice/{{entry.slice.id}}/#reservations">
  16 {% for resSlot in entry.reservations.1 %}
  17 {{resSlot}} <br>
  18 {% endfor %}
  19 </a></td></tr>
  20 {% else %}
  21 <td></td></tr>
  22 {% endif %}
  23 {% endfor %}
  24 </table>
  25 <script type="text/javascript" src="{% static 'log4javascript-1.4.6/log4javascript.js' %}"></script>
  26     <h1>HPC Dashboard</h1>
  27     <span id="hpcSummary">
  28         <span class="summary-attr"><b>Active Slivers:</b> 78 </span>
  29         <span class="summary-attr"><b>Overall Throughput:</b> 58Gbps</span>
  30         <span class="summary-attr-util"><b>CPU Utilization:</b> 45%</span>
  31
  32     </span>
  33     <div id="map-us" ></div>
  34 <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
  35 <script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
  36
  37 <script src="{% static 'js/Leaflet.MakiMarkers.js' %}" > </script>
  38
  39 <script>
  40 var consoleAppender = new log4javascript.BrowserConsoleAppender();
  41 var patternLayout = new log4javascript.PatternLayout("%d{HH:mm:ss,SSS} %l{s:l} %-5p - %m{1}%n");
  42 consoleAppender.setLayout(patternLayout);
  43
  44 var log  = log4javascript.getRootLogger();
  45 log.addAppender(consoleAppender);
  46 log.setLevel(log4javascript.Level.ALL);
  47
  48
  49 L.Map = L.Map.extend({
  50     openPopup: function(popup) {
  51         this._popup = popup;
  52
  53         return this.addLayer(popup).fire('popupopen', {
  54             popup: this._popup
  55         });
  56     }
  57 });
  58
  59
  60 //Iterate through data and find the max/min coordinates to include all of our points to start
  61 var map = L.map('map-us'); //.setView([0, 0], 1);
  62
  63 L.tileLayer('http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png', {
  64     maxZoom: 18,
  65     attribution: 'Test'
  66 }).addTo(map);
  67
  68 var arrayOfLatLngs = [];
  69 var data = {{ cdnData|safe }};
  70 log.info( data );
  71
  72 for ( var key in data ) {
  73     arrayOfLatLngs.push([data[key]['lat'],data[key]['long']]);
  74     log.info( arrayOfLatLngs );
  75     var colorChoices = ["#007FFF", "#0000FF", "#7f00ff", "#FF00FF", "#FF007F", "#FF0000"];
  76
  77     var ratio = data[key]['numHPCSlivers']/data[key]['numNodes'] * 100;
  78     var numColors = colorChoices.length;
  79     var colorBands = 100/numColors;
  80
  81     log.info("numColors: " + numColors);
  82     log.info("colorBands: " + colorBands);
  83     log.info("ratio: " + ratio);
  84
  85     //Algorithm for color tone should consider the number of available nodes
  86     // on the site, and then how much the current dedicated nodes are impacted
  87     //var iconColor = 0;
  88     var iconColor = 0;
  89     for (;iconColor < numColors; iconColor ++) {
  90         if (ratio < colorBands * iconColor+1) {
  91             break;
  92         }
  93     }
  94
  95     var icon = L.MakiMarkers.icon({icon: "star-stroked", color: colorChoices[iconColor] , size: "s"});
  96
  97     L.marker([data[key]['lat'], data[key]['long']], {icon: icon}).addTo(map)
  98         .bindPopup( '<span class="SiteDetail"><b>' + key + '</b></span>' +
  99                    '</br><a href="' + data[key]['siteUrl'] + '">' + data[key]['siteUrl'] + '</a>' +
 100                    '</br><b>Available Nodes: </b>' + data[key]['numNodes'] +
 101                    '</br><b>Active HPC Slivers: </b>' + data[key]['numHPCSlivers'] +
 102                    '</br><span id="addSlivers">Add HPC Slivers</span>' +
 103                    '<span id="remSlivers">Remove HPC Slivers</span>' +
 104
 105                    '');//.openPopup();
 106
 107 }
 108 var bounds = new L.LatLngBounds(arrayOfLatLngs);
 109 map.fitBounds(bounds);
 110
 111 var popup = L.popup();
 112
 113 function onMapClick(e) {
 114     popup
 115     .setLatLng(e.latlng)
 116     .setContent("You clicked the map at " + e.latlng.toString())
 117     .openOn(map);
 118 }
 119
 120 </script>
 121 {% endblock %}