planetstack/templates/admin/newminidashboard.html

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