planetstack/templates/admin/newminidashboard.html

   1 {% if not DISABLE_MINIDASHBOARD %}
   2
   3 <div id="newMiniDashboard">
   4     <div class="hide" id="selectedMainNav">{{ opts.verbose_name_plural|capfirst }}</div>
   5     <div class="hide" id="currentOriginalNode">{{ original|truncatewords:"18" }}</div>
   6     <div class="hide" id="minidashStatus"></div>
   7     <div class="miniDashPair">
   8         <button type="button" name="nodeCount" id="miniDashNodeCount" class="minidashbutton">--</button>
   9         <label for="nodeCount" id="miniDashNodeCountLabel">Active Nodes</label>
  10     </div>
  11     <div class="miniDashPair">
  12         <button type="button" name="avgLoad" id="miniDashAvgLoad" class="minidashbutton">--</button>
  13         <label for="avgLoad" id="miniDashAvgLoadLabel">Average Load</label>
  14     </div>
  15     <div class="miniDashPair">
  16         <button type="button" name="bandwidth" id="miniDashBandwidth" class="minidashbutton">--</button>
  17         <label for="bandwidth" id="miniDashBandwidthLabel">Bandwidth</label>
  18     </div>
  19     <div class="endDashPair">
  20     </div>
  21 </div>
  22
  23 <div id="nodeCountDialog" class="miniDashModal" >
  24 <div id="nodeCountGraph" ></div>
  25 </div>
  26
  27 <div id="bandwidthDialog" class="miniDashModal" >
  28 <div id="bandwidthGraph" ></div>
  29 </div>
  30
  31 <div id="avgLoadDialog" class="miniDashModal" >
  32 <div id="avgLoadGraph" ></div>
  33 </div>
  34
  35 <script>
  36 /** If the analytics have already been set -- read them in on page load **/
  37 if (typeof window != "undefined") {
  38     if (typeof window.pageAnalyticsData != "undefined") {
  39         updatePageAnalyticsData(window.pageAnalyticsData);
  40     }
  41 }
  42
  43 var loadingDiv = '<div class="loading">Loading ...</div>';
  44
  45 $( "#nodeCountDialog" ).dialog({ title: "OpenCloud Node Count", modal: true, position: ['middle', 40], resizable: true, autoOpen: false, width: 527, height: 400});
  46 $( "#miniDashNodeCount" ).click(function() {
  47     $( "#nodeCountGraph" ).html(loadingDiv);
  48     $( "#nodeCountDialog" ).dialog("open");
  49     var options = {"title": "Node Count", "vAxis": {"title": "Number of Nodes", "minValue": 0, "maxValue": 250}};
  50     renderChart(true,"#nodeCountDialog", "#nodeCountGraph", window.pageAnalyticsUrl, 0, 2, google.visualization.data.sum, options);
  51     });
  52
  53 $( "#bandwidthDialog" ).dialog({ title: "OpenCloud Bandwidth", modal: true, position: ['middle', 40], resizable: true, autoOpen: false, width: 527, height: 400});
  54 $( "#miniDashBandwidth" ).click(function() {
  55     $("#bandwidthGraph").html(loadingDiv);
  56     $( "#bandwidthDialog" ).dialog("open");
  57     var options = {"title": "Total Bandwidth", "vAxis": {"title": "Total Bandwidth (Gbps)"}};
  58     renderChart(true,"#bandwidthDialog", "#bandwidthGraph", window.pageBandwidthUrl, 0, 1, agg_bandwidth, options);
  59     });
  60
  61 $( "#avgLoadDialog" ).dialog({ title: "OpenCloud Average Load", modal: true, position: ['middle', 40], resizable: true, autoOpen: false, width: 527, height: 400});
  62 $( "#miniDashAvgLoad" ).click(function() {
  63     $("#avgLoadGraph").html(loadingDiv);
  64     $( "#avgLoadDialog" ).dialog("open");
  65     var options = {"title": "Average CPU Utilization", "vAxis": {"title": "CPU Utilization (%)"}};
  66     renderChart(true,"#avgLoadDialog", "#avgLoadGraph", window.pageAnalyticsUrl, 0, 1, google.visualization.data.sum, options);
  67     });
  68
  69 </script>
  70
  71 {% endif %}