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

new UI - dashboard page - implement system wide capacity area.

This commit is contained in:
Jessica Wang 2010-09-25 23:20:21 -07:00
parent 9163ffea67
commit 84a2cea56d
2 changed files with 241 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
ui/new/jsp/dashboard.jsp
View File

@ -20,7 +20,7 @@
<p id="after_action_info">
</p>
</div>
<div class="grid_container">
<div class="grid_container" id="system_wide_capacity_container">
<div class="grid_header">
<div class="grid_header_cell" style="width: 60%; border: none;">
<div class="grid_header_title">
@ -35,14 +35,14 @@
</div>
</div>
</div>
<div class="dbrow even">
<div class="dbrow even" id="public_ip_address">
<div class="dbrow_cell" style="width: 29%;">
<div class="dbgraph_titlebox">
<h2>
Public IP Addresses</h2>
<div class="dbgraph_title_usedbox">
<p>
Used: <span>2 / 11 </span>
Used: <span id="capacityused">N</span>/<span id="capacitytotal">A</span>
</p>
</div>
</div>
@ -52,18 +52,17 @@
</div>
</div>
<div class="dbrow_cell" style="width: 12%; border: none;">
<div class="db_totaltitle">
18.2 %</div>
<div class="db_totaltitle" id="percentused"></div>
</div>
</div>
<div class="dbrow odd">
<div class="dbrow odd" id="private_ip_address">
<div class="dbrow_cell" style="width: 29%;">
<div class="dbgraph_titlebox">
<h2>
Private IP Addresses</h2>
<div class="dbgraph_title_usedbox">
<p>
Used: <span>2 / 10 </span>
Used: <span id="capacityused">N</span>/<span id="capacitytotal">A</span>
</p>
</div>
</div>
@ -73,18 +72,17 @@
</div>
</div>
<div class="dbrow_cell" style="width: 12%; border: none;">
<div class="db_totaltitle">
20 %</div>
<div class="db_totaltitle" id="percentused"></div>
</div>
</div>
<div class="dbrow even">
<div class="dbrow even" id="memory_allocated">
<div class="dbrow_cell" style="width: 29%;">
<div class="dbgraph_titlebox">
<h2>
Memory Allocated</h2>
<div class="dbgraph_title_usedbox">
<p>
Used: <span>2.12 GB / 3.22 GB </span>
Used: <span id="capacityused">N</span>/<span id="capacitytotal">A</span>
</p>
</div>
</div>
@ -94,18 +92,17 @@
</div>
</div>
<div class="dbrow_cell" style="width: 12%; border: none;">
<div class="db_totaltitle">
65.8 %</div>
<div class="db_totaltitle" id="percentused"></div>
</div>
</div>
<div class="dbrow odd">
<div class="dbrow odd" id="cpu">
<div class="dbrow_cell" style="width: 29%;">
<div class="dbgraph_titlebox">
<h2>
CPU</h2>
<div class="dbgraph_title_usedbox">
<p>
Used: <span>8 MHZ / 9.60 MHZ </span>
Used: <span id="capacityused">N</span>/<span id="capacitytotal">A</span>
</p>
</div>
</div>
@ -115,18 +112,17 @@
</div>
</div>
<div class="dbrow_cell" style="width: 12%; border: none;">
<div class="db_totaltitle">
83.3 %</div>
<div class="db_totaltitle" id="percentused"></div>
</div>
</div>
<div class="dbrow even">
<div class="dbrow even" id="primary_storage_allocated">
<div class="dbrow_cell" style="width: 29%;">
<div class="dbgraph_titlebox">
<h2>
Primary Storage Allocated</h2>
<div class="dbgraph_title_usedbox">
<p>
Used: <span>Used: 4.00 GB / 3.50 TB </span>
Used: <span id="capacityused">N</span>/<span id="capacitytotal">A</span>
</p>
</div>
</div>
@ -136,18 +132,17 @@
</div>
</div>
<div class="dbrow_cell" style="width: 12%; border: none;">
<div class="db_totaltitle">
15.2 %</div>
<div class="db_totaltitle" id="percentused"></div>
</div>
</div>
<div class="dbrow odd">
<div class="dbrow odd" id="primary_storage_used">
<div class="dbrow_cell" style="width: 29%;">
<div class="dbgraph_titlebox">
<h2>
Primary Storage Used</h2>
<div class="dbgraph_title_usedbox">
<p>
Used: <span>999.17 GB / 1.75 TB </span>
Used: <span id="capacityused">N</span>/<span id="capacitytotal">A</span>
</p>
</div>
</div>
@ -157,18 +152,17 @@
</div>
</div>
<div class="dbrow_cell" style="width: 12%; border: none;">
<div class="db_totaltitle">
40.12 %</div>
<div class="db_totaltitle" id="percentused"></div>
</div>
</div>
<div class="dbrow even">
<div class="dbrow even" id="secondary_storage_used">
<div class="dbrow_cell" style="width: 29%;">
<div class="dbgraph_titlebox">
<h2>
Secondary Storage Used</h2>
<div class="dbgraph_title_usedbox">
<p>
Used: <span>599.17 GB / 1.75 TB </span>
Used: <span id="capacityused">N</span>/<span id="capacitytotal">A</span>
</p>
</div>
</div>
@ -178,8 +172,7 @@
</div>
</div>
<div class="dbrow_cell" style="width: 12%; border: none;">
<div class="db_totaltitle">
20.12 %</div>
<div class="db_totaltitle" id="percentused"></div>
</div>
</div>
</div>

220
ui/new/scripts/cloud.core2.dashboard.js
View File

@ -1,5 +1,5 @@
function afterLoadDashboardJSP() {
if (isAdmin()) {
if (isAdmin()) {
var sessionExpired = false;
var zones = null;
var noZones = false;
@ -37,6 +37,224 @@ function afterLoadDashboardJSP() {
}
});
//???
if (sessionExpired)
return false;
if (noZones || noPods) {
// $("#tab_dashboard_user").hide();
// $("#menutab_role_user").hide();
// $("#menutab_role_root").show();
// $("#menutab_configuration").click();
return false;
}
var capacities = null;
$.ajax({
cache: false,
async: false,
data: createURL("command=listCapacity"),
dataType: "json",
success: function(json) {
capacities = json.listcapacityresponse.capacity;
}
});
$("#capacity_pod_select").bind("change", function(event) {
// Reset to Defaults
/*
$("#public_ip_total, #storage_total, #storage_alloc_total, #sec_storage_total, #memory_total, #cpu_total, #private_ip_total").text("N/A");
$("#public_ip_used, #storage_used, #storage_alloc, #sec_storage_used, #memory_used, #cpu_used, #private_ip_used,").attr("style", "width:50%").text("N/A");
$(".db_bargraph_barbox_safezone").attr("style", "width:0%");
$(".db_bargraph_barbox_unsafezone").attr("style", "width:0%");
*/
var selectedZone = $("#capacity_zone_select option:selected").text();
var selectedPod = $("#capacity_pod_select").val();
var $capacityContainer = $("#system_wide_capacity_container");
if (capacities != null && capacities.length > 0) {
for (var i = 0; i < capacities.length; i++) {
var capacity = capacities[i];
if (capacity.zonename == selectedZone) {
// Public IPs Addresses
if (capacity.type == "4") {
var $c = $capacityContainer.find("#public_ip_address");
$c.find("#capacityused").text(capacity.capacityused);
$c.find("#capacitytotal").text(capacity.capacitytotal);
$c.find("#percentused").text(capacity.percentused + "%");
/*
$("#public_ip_used").attr("style", "width: " + ((parseFloat(capacity.percentused) < 50) ? "50%" : capacity.percentused + "%")).text("Used: " + capacity.capacityused + " / " + capacity.percentused + "%");
$("#public_ip_total").text("Total: " + capacity.capacitytotal);
var usedPercentage = parseInt(capacity.percentused);
if (usedPercentage > 70) {
$("#capacity_public_ip .db_bargraph_barbox_safezone").attr("style", "width:70%");
if(usedPercentage <= 100)
$("#capacity_public_ip .db_bargraph_barbox_unsafezone").attr("style", "width:"+(usedPercentage - 70)+"%");
else
$("#capacity_public_ip .db_bargraph_barbox_unsafezone").attr("style", "width:30%");
} else {
$("#capacity_public_ip .db_bargraph_barbox_safezone").attr("style", "width:"+usedPercentage+"%");
$("#capacity_public_ip .db_bargraph_barbox_unsafezone").attr("style", "width:0%");
}
*/
}
// Secondary Storage Used
else if (capacity.type == "6") {
var $c = $capacityContainer.find("#secondary_storage_used");
$c.find("#capacityused").text(convertBytes(parseInt(capacity.capacityused)));
$c.find("#capacitytotal").text(convertBytes(parseInt(capacity.capacitytotal)));
$c.find("#percentused").text(capacity.percentused + "%");
/*
$("#sec_storage_used").attr("style", "width: " + ((parseFloat(capacity.percentused) < 50) ? "50%" : capacity.percentused + "%")).text("Used: " + convertBytes(parseInt(capacity.capacityused)) + " / " + capacity.percentused + "%");
$("#sec_storage_total").text("Total: " + convertBytes(parseInt(capacity.capacitytotal)));
var usedPercentage = parseInt(capacity.percentused);
if (usedPercentage > 70) {
$("#capacity_sec_storage .db_bargraph_barbox_safezone").attr("style", "width:70%");
if(usedPercentage <= 100)
$("#capacity_sec_storage .db_bargraph_barbox_unsafezone").attr("style", "width:"+(usedPercentage - 70)+"%");
else
$("#capacity_sec_storage .db_bargraph_barbox_unsafezone").attr("style", "width:30%");
} else {
$("#capacity_sec_storage .db_bargraph_barbox_safezone").attr("style", "width:"+usedPercentage+"%");
$("#capacity_sec_storage .db_bargraph_barbox_unsafezone").attr("style", "width:0%");
}
*/
}
else {
if (capacity.podname == selectedPod) {
// Memory Allocated
if (capacity.type == "0") {
var $c = $capacityContainer.find("#memory_allocated");
$c.find("#capacityused").text(convertBytes(parseInt(capacity.capacityused)));
$c.find("#capacitytotal").text(convertBytes(parseInt(capacity.capacitytotal)));
$c.find("#percentused").text(capacity.percentused + "%");
/*
$("#memory_used").attr("style", "width: " + ((parseFloat(capacity.percentused) < 50) ? "50%" : capacity.percentused + "%")).text("Used: " + convertBytes(parseInt(capacity.capacityused)) + " / " + capacity.percentused + "%");
$("#memory_total").text("Total: " + convertBytes(parseInt(capacity.capacitytotal)));
var usedPercentage = parseInt(capacity.percentused);
if (usedPercentage > 70) {
$("#capacity_memory .db_bargraph_barbox_safezone").attr("style", "width:70%");
if(usedPercentage <= 100)
$("#capacity_memory .db_bargraph_barbox_unsafezone").attr("style", "width:"+(usedPercentage - 70)+"%");
else
$("#capacity_memory .db_bargraph_barbox_unsafezone").attr("style", "width:30%");
} else {
$("#capacity_memory .db_bargraph_barbox_safezone").attr("style", "width:"+usedPercentage+"%");
$("#capacity_memory .db_bargraph_barbox_unsafezone").attr("style", "width:0%");
}
*/
}
// CPU
else if (capacity.type == "1") {
var $c = $capacityContainer.find("#cpu");
$c.find("#capacityused").text(convertHz(parseInt(capacity.capacityused)));
$c.find("#capacitytotal").text(convertHz(parseInt(capacity.capacitytotal)));
$c.find("#percentused").text(capacity.percentused + "%");
/*
$("#cpu_used").attr("style", "width: " + ((parseFloat(capacity.percentused) < 50) ? "50%" : capacity.percentused + "%")).text("Used: " + convertHz(parseInt(capacity.capacityused)) + " / " + capacity.percentused + "%");
$("#cpu_total").text("Total: " + convertHz(parseInt(capacity.capacitytotal)));
var usedPercentage = parseInt(capacity.percentused);
if (usedPercentage > 70) {
$("#capacity_cpu .db_bargraph_barbox_safezone").attr("style", "width:70%");
if(usedPercentage <= 100)
$("#capacity_cpu .db_bargraph_barbox_unsafezone").attr("style", "width:"+(usedPercentage - 70)+"%");
else
$("#capacity_cpu .db_bargraph_barbox_unsafezone").attr("style", "width:30%");
} else {
$("#capacity_cpu .db_bargraph_barbox_safezone").attr("style", "width:"+usedPercentage+"%");
$("#capacity_cpu .db_bargraph_barbox_unsafezone").attr("style", "width:0%");
}
*/
}
// Primary Storage Used
else if (capacity.type == "2") {
var $c = $capacityContainer.find("#primary_storage_used");
$c.find("#capacityused").text(convertBytes(parseInt(capacity.capacityused)));
$c.find("#capacitytotal").text(convertBytes(parseInt(capacity.capacitytotal)));
$c.find("#percentused").text(capacity.percentused + "%");
/*
$("#storage_used").attr("style", "width: " + ((parseFloat(capacity.percentused) < 50) ? "50%" : capacity.percentused + "%")).text("Used: " + convertBytes(parseInt(capacity.capacityused)) + " / " + capacity.percentused + "%");
$("#storage_total").text("Total: " + convertBytes(parseInt(capacity.capacitytotal)));
var usedPercentage = parseInt(capacity.percentused);
if (usedPercentage > 70) {
$("#capacity_storage .db_bargraph_barbox_safezone").attr("style", "width:70%");
if(usedPercentage <= 100)
$("#capacity_storage .db_bargraph_barbox_unsafezone").attr("style", "width:"+(usedPercentage - 70)+"%");
else
$("#capacity_storage .db_bargraph_barbox_unsafezone").attr("style", "width:30%");
} else {
$("#capacity_storage .db_bargraph_barbox_safezone").attr("style", "width:"+usedPercentage+"%");
$("#capacity_storage .db_bargraph_barbox_unsafezone").attr("style", "width:0%");
}
*/
}
// Primary Storage Allocated
else if (capacity.type == "3") {
var $c = $capacityContainer.find("#primary_storage_allocated");
$c.find("#capacityused").text(convertBytes(parseInt(capacity.capacityused)));
$c.find("#capacitytotal").text(convertBytes(parseInt(capacity.capacitytotal)));
$c.find("#percentused").text(capacity.percentused + "%");
/*
$("#storage_alloc").attr("style", "width: " + ((parseFloat(capacity.percentused) < 50) ? "50%" : capacity.percentused + "%")).text("Used: " + convertBytes(parseInt(capacity.capacityused)) + " / " + capacity.percentused + "%");
$("#storage_alloc_total").text("Total: " + convertBytes(parseInt(capacity.capacitytotal)));
var usedPercentage = parseInt(capacity.percentused);
if (usedPercentage > 70) {
$("#capacity_storage_alloc .db_bargraph_barbox_safezone").attr("style", "width:70%");
if(usedPercentage <= 100)
$("#capacity_storage_alloc .db_bargraph_barbox_unsafezone").attr("style", "width:"+(usedPercentage - 70)+"%");
else
$("#capacity_storage_alloc .db_bargraph_barbox_unsafezone").attr("style", "width:30%");
} else {
$("#capacity_storage_alloc .db_bargraph_barbox_safezone").attr("style", "width:"+usedPercentage+"%");
$("#capacity_storage_alloc .db_bargraph_barbox_unsafezone").attr("style", "width:0%");
}
*/
}
// Private IP Addresses
else if (capacity.type == "5") {
var $c = $capacityContainer.find("#private_ip_address");
$c.find("#capacityused").text(capacity.capacityused);
$c.find("#capacitytotal").text(capacity.capacitytotal);
$c.find("#percentused").text(capacity.percentused + "%");
/*
$("#private_ip_used").attr("style", "width: " + ((parseFloat(capacity.percentused) < 50) ? "50%" : capacity.percentused + "%")).text("Used: " + capacity.capacityused + " / " + capacity.percentused + "%");
$("#private_ip_total").text("Total: " + capacity.capacitytotal);
var usedPercentage = parseInt(capacity.percentused);
if (usedPercentage > 70) {
$("#capacity_private_ip .db_bargraph_barbox_safezone").attr("style", "width:70%");
if(usedPercentage <= 100)
$("#capacity_private_ip .db_bargraph_barbox_unsafezone").attr("style", "width:"+(usedPercentage - 70)+"%");
else
$("#capacity_private_ip .db_bargraph_barbox_unsafezone").attr("style", "width:30%");
} else {
$("#capacity_private_ip .db_bargraph_barbox_safezone").attr("style", "width:"+usedPercentage+"%");
$("#capacity_private_ip .db_bargraph_barbox_unsafezone").attr("style", "width:0%");
}
*/
}
}
}
}
}
}
});
//???
$("#capacity_zone_select").bind("change", function(event) {
var zoneId = $(this).val();