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