etan39
/
cloudstack
mirror of https://github.com/apache/cloudstack.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

new UI - instance page - implement statistics tab

This commit is contained in:
Jessica Wang 2010-11-04 19:49:14 -07:00
parent d1e2fc21a2
commit 861b8f76ae
2 changed files with 78 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
ui/jsp/instance.jsp
View File

@ -236,55 +236,59 @@
<p>Loading &hellip;</p>
</div>
</div>
<div class="grid_container">
<div class="grid_header">
<div id="grid_header_title" class="grid_header_title">(title)</div>
</div>
<div class="dbrow odd">
<div class="dbrow_cell" style="width: 40%;">
<div class="dbgraph_titlebox">
<h2>
CPU</h2>
<div class="dbgraph_title_usedbox">
<p>
Total: <span id="capacityused">1x500 MHZ</span>
</p>
<div id="tab_container">
<div class="grid_container">
<div class="grid_header">
<div id="grid_header_title" class="grid_header_title"></div>
</div>
<div class="dbrow odd">
<div class="dbrow_cell" style="width: 40%;">
<div class="dbgraph_titlebox">
<h2>
CPU</h2>
<div class="dbgraph_title_usedbox">
<p>
Total: <span id="capacityused">
<span id="cpunumber">M</span>
x
<span id="cpuspeed">N</span>
</span>
</p>
</div>
</div>
</div>
<div class="dbrow_cell" style="width: 43%; border: none;">
<div class="db_barbox low" id="bar_chart">
</div>
</div>
<div class="dbrow_cell" style="width: 16%; border: none;">
<div class="db_totaltitle" id="cpuused">
K%
</div>
</div>
</div>
<div class="dbrow_cell" style="width: 43%; border: none;">
<div class="db_barbox low" id="bar_chart">
<div class="grid_rows even">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
Network Read:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="networkkbsread">
</div>
</div>
</div>
<div class="dbrow_cell" style="width: 16%; border: none;">
<div class="db_totaltitle" id="percentused">
0.2%
<div class="grid_rows odd">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
Network Write:</div>
</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="networkkbswrite">
</div>
</div>
</div>
</div>
<div class="grid_rows even">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
Network Read:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" >
</div>
</div>
</div>
<div class="grid_rows odd">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
Network Write:</div>
</div>
<div class="grid_row_cell">
<div class="row_celltitles" id="account">
</div>
</div>
</div>
</div>
</div>
</div>
<!--Statistics tab (start)-->
<!--Routers tab (start)-->

34
ui/scripts/cloud.core.instance.js
View File

@ -62,7 +62,7 @@ function afterLoadInstanceJSP() {
// switch between different tabs
var tabArray = [$("#tab_details"), $("#tab_volume"), $("#tab_statistics"), $("#tab_router")];
var tabContentArray = [$("#tab_content_details"), $("#tab_content_volume"), $("#tab_content_statistics"), $("#tab_content_router")];
var afterSwitchFnArray = [vmJsonToDetailsTab, vmJsonToVolumeTab, null, vmJsonToRouterTab];
var afterSwitchFnArray = [vmJsonToDetailsTab, vmJsonToVolumeTab, vmJsonToStatisticsTab, vmJsonToRouterTab];
switchBetweenDifferentTabs(tabArray, tabContentArray, afterSwitchFnArray);
//initialize VM Wizard
@ -1525,8 +1525,38 @@ function vmJsonToVolumeTab() {
}
});
}
function vmJsonToStatisticsTab() {
var $thisTab = $("#right_panel_content #tab_content_statistics");
$thisTab.find("#tab_container").hide();
$thisTab.find("#tab_spinning_wheel").show();
var $midmenuItem1 = $("#right_panel_content").data("$midmenuItem1");
var jsonObj = $midmenuItem1.data("jsonObj");
function vmJsonToRouterTab($midmenuItem1) {
var spaceCharacter = " ";
var cpuNumber = ((jsonObj.cpunumber==null)? spaceCharacter:jsonObj.cpunumber.toString());
$thisTab.find("#cpunumber").text(cpuNumber);
var cpuSpeed = ((jsonObj.cpuspeed==null)? spaceCharacter:convertHz(jsonObj.cpuspeed)) ;
$thisTab.find("#cpuspeed").text(cpuSpeed);
var cpuUsed = ((jsonObj.cpuused==null)? spaceCharacter:jsonObj.cpuused);
$thisTab.find("#cpuused").text(cpuUsed);
var networkKbsRead = ((jsonObj.networkkbsread==null)? spaceCharacter:convertBytes(jsonObj.networkkbsread * 1024));
$thisTab.find("#networkkbsread").text(networkKbsRead);
var networkKbsWrite = ((jsonObj.networkkbswrite==null)? spaceCharacter:convertBytes(jsonObj.networkkbswrite * 1024));
$thisTab.find("#networkkbswrite").text(networkKbsWrite);
$thisTab.find("#tab_spinning_wheel").hide();
$thisTab.find("#tab_container").show();
}
function vmJsonToRouterTab() {
var $thisTab = $("#right_panel_content #tab_content_router");
$thisTab.find("#tab_container").hide();
$thisTab.find("#tab_spinning_wheel").show();