apache/cloudstack
1
0
Fork 0
mirror of https://github.com/apache/cloudstack.git synced 2025-11-03 04:12:31 +01:00
Code Issues Packages Projects Releases Wiki Activity

new UI - instance page - statistics tab - implement bar chart.

Browse Source
This commit is contained in:
Jessica Wang 2010-11-05 11:30:07 -07:00
parent 3957310846
commit 1aad87622c
3 changed files with 34 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
ui/jsp/instance.jsp
View File

@ -241,7 +241,9 @@
<div class="grid_header">
<div id="grid_header_title" class="grid_header_title"></div>
</div>
<div class="dbrow odd">
<div class="dbrow odd" id="cpu_barchart">
<div class="dbrow_cell" style="width: 40%;">
<div class="dbgraph_titlebox">
<h2>
@ -262,11 +264,13 @@
</div>
</div>
<div class="dbrow_cell" style="width: 16%; border: none;">
<div class="db_totaltitle" id="cpuused">
<div class="db_totaltitle" id="percentused">
K%
</div>
</div>
</div>
<div class="grid_rows even">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">

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

@ -103,7 +103,7 @@ function afterLoadDashboardJSP() {
var $c = $capacityContainer.find("#public_ip_address");
$c.find("#capacityused").text(capacity.capacityused);
$c.find("#capacitytotal").text(capacity.capacitytotal);
capacityBarChart($c, capacity.percentused);
drawBarChart($c, (parseFloat(capacity.percentused))*0.01);
}
// ***** Secondary Storage Used *****
@ -111,7 +111,7 @@ function afterLoadDashboardJSP() {
var $c = $capacityContainer.find("#secondary_storage_used");
$c.find("#capacityused").text(convertBytes(parseInt(capacity.capacityused)));
$c.find("#capacitytotal").text(convertBytes(parseInt(capacity.capacitytotal)));
capacityBarChart($c, capacity.percentused);
drawBarChart($c, (parseFloat(capacity.percentused))*0.01);
}
else {
@ -121,7 +121,7 @@ function afterLoadDashboardJSP() {
var $c = $capacityContainer.find("#memory_allocated");
$c.find("#capacityused").text(convertBytes(parseInt(capacity.capacityused)));
$c.find("#capacitytotal").text(convertBytes(parseInt(capacity.capacitytotal)));
capacityBarChart($c, capacity.percentused);
drawBarChart($c, (parseFloat(capacity.percentused))*0.01);
}
// ***** CPU *****
@ -129,7 +129,7 @@ function afterLoadDashboardJSP() {
var $c = $capacityContainer.find("#cpu");
$c.find("#capacityused").text(convertHz(parseInt(capacity.capacityused)));
$c.find("#capacitytotal").text(convertHz(parseInt(capacity.capacitytotal)));
capacityBarChart($c, capacity.percentused);
drawBarChart($c, (parseFloat(capacity.percentused))*0.01);
}
// ***** Primary Storage Used *****
@ -137,7 +137,7 @@ function afterLoadDashboardJSP() {
var $c = $capacityContainer.find("#primary_storage_used");
$c.find("#capacityused").text(convertBytes(parseInt(capacity.capacityused)));
$c.find("#capacitytotal").text(convertBytes(parseInt(capacity.capacitytotal)));
capacityBarChart($c, capacity.percentused);
drawBarChart($c, (parseFloat(capacity.percentused))*0.01);
}
// ***** Primary Storage Allocated *****
@ -145,7 +145,7 @@ function afterLoadDashboardJSP() {
var $c = $capacityContainer.find("#primary_storage_allocated");
$c.find("#capacityused").text(convertBytes(parseInt(capacity.capacityused)));
$c.find("#capacitytotal").text(convertBytes(parseInt(capacity.capacitytotal)));
capacityBarChart($c, capacity.percentused);
drawBarChart($c, (parseFloat(capacity.percentused))*0.01);
}
// ***** Private IP Addresses *****
@ -153,7 +153,7 @@ function afterLoadDashboardJSP() {
var $c = $capacityContainer.find("#private_ip_address");
$c.find("#capacityused").text(capacity.capacityused);
$c.find("#capacitytotal").text(capacity.capacitytotal);
capacityBarChart($c, capacity.percentused);
drawBarChart($c, (parseFloat(capacity.percentused))*0.01);
}
}
}
@ -314,16 +314,18 @@ function showDashboard(dashboardToShow) {
}
//*** dashboard admin (begin) ***
function capacityBarChart($capacity, percentused) {
var percentused2 = (percentused + "%");
$capacity.find("#percentused").text(percentused2);
function drawBarChart($barChartContainer, percentused) { //e.g. percentused == 55%, 70%, 85%
//var percentused2 = (percentused + "%");
var percentused2 = ((percentused*100) + "%");
//$barChartContainer.find("#percentused").text(percentused2);
$barChartContainer.find("#percentused").text(percentused2);
if (percentused <= 60)
$capacity.find("#bar_chart").removeClass().addClass("db_barbox low").css("width", percentused2);
else if (percentused > 60 && percentused <= 80 )
$capacity.find("#bar_chart").removeClass().addClass("db_barbox mid").css("width", percentused2);
else if (percentused > 80 )
$capacity.find("#bar_chart").removeClass().addClass("db_barbox high").css("width", percentused2);
if (percentused <= 0.6)
$barChartContainer.find("#bar_chart").removeClass().addClass("db_barbox low").css("width", percentused2);
else if (percentused > 0.6 && percentused <= 0.8)
$barChartContainer.find("#bar_chart").removeClass().addClass("db_barbox mid").css("width", percentused2);
else if (percentused > 0.8)
$barChartContainer.find("#bar_chart").removeClass().addClass("db_barbox high").css("width", percentused2);
}
//*** dashboard admin (end) ***

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

@ -1534,23 +1534,25 @@ function vmJsonToStatisticsTab() {
var $midmenuItem1 = $("#right_panel_content").data("$midmenuItem1");
var jsonObj = $midmenuItem1.data("jsonObj");
var spaceCharacter = " ";
var $c = $thisTab.find("#cpu_barchart");
var spaceCharacter = "";
var cpuNumber = ((jsonObj.cpunumber==null)? spaceCharacter:jsonObj.cpunumber.toString());
$thisTab.find("#cpunumber").text(cpuNumber);
$c.find("#cpunumber").text(cpuNumber);
var cpuSpeed = ((jsonObj.cpuspeed==null)? spaceCharacter:convertHz(jsonObj.cpuspeed)) ;
$thisTab.find("#cpuspeed").text(cpuSpeed);
$c.find("#cpuspeed").text(cpuSpeed);
var cpuUsed = ((jsonObj.cpuused==null)? spaceCharacter:jsonObj.cpuused);
$thisTab.find("#cpuused").text(cpuUsed);
//var cpuUsed = ((jsonObj.cpuused==null)? spaceCharacter:jsonObj.cpuused);
if(jsonObj.cpuused!=null)
drawBarChart($c, parseFloat(jsonObj.cpuused));
var networkKbsRead = ((jsonObj.networkkbsread==null)? spaceCharacter:convertBytes(jsonObj.networkkbsread * 1024));
$thisTab.find("#networkkbsread").text(networkKbsRead);
$c.find("#networkkbsread").text(networkKbsRead);
var networkKbsWrite = ((jsonObj.networkkbswrite==null)? spaceCharacter:convertBytes(jsonObj.networkkbswrite * 1024));
$thisTab.find("#networkkbswrite").text(networkKbsWrite);
$c.find("#networkkbswrite").text(networkKbsWrite);
$thisTab.find("#tab_spinning_wheel").hide();
$thisTab.find("#tab_container").show();