planetstack/templates/admin/newminidashboard.html

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