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

bug 6983: Host page - add statistics tab.

Browse Source
This commit is contained in:
Jessica Wang 2010-11-09 14:38:22 -08:00
parent 6656a348f4
commit b61c81df0b
5 changed files with 162 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
ui/jsp/host.jsp
View File

@ -22,6 +22,8 @@
<div class="tabbox" style="margin-top: 15px;">
<div class="content_tabs on" id="tab_details">
<%=t.t("details")%></div>
<div class="content_tabs off" id="tab_statistics">
<%=t.t("Statistics")%></div>
</div>
<!-- Details tab (start)-->
<div id="tab_content_details">
@ -166,6 +168,75 @@
</div>
</div>
<!-- Details tab (end)-->
<!--Statistics tab (start)-->
<div style="display: none;" id="tab_content_statistics">
<div id="tab_spinning_wheel" class="rightpanel_mainloader_panel" style="display:none;">
<div class="rightpanel_mainloaderbox">
<div class="rightpanel_mainloader_animatedicon"></div>
<p>Loading &hellip;</p>
</div>
</div>
<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" id="cpu_barchart">
<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="percentused">
K%
</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" id="networkkbsread">
</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" style="width: 79%;">
<div class="row_celltitles" id="networkkbswrite">
</div>
</div>
</div>
</div>
</div>
</div>
<!--Statistics tab (end)-->
</div>
<!-- Add Host Dialog -->

4
ui/jsp/instance.jsp
View File

@ -294,7 +294,7 @@
</div>
</div>
</div>
<!--Statistics tab (start)-->
<!--Statistics tab (end)-->
<!--Routers tab (start)-->
<div style="display: none;" id="tab_content_router">
<div id="tab_spinning_wheel" class="rightpanel_mainloader_panel" style="display:none;">
@ -306,7 +306,7 @@
<div id="tab_container">
</div>
</div>
<!--Routers tab (start)-->
<!--Routers tab (end)-->
</div>
<!-- VM detail panel (end) -->
<!-- VM wizard (begin)-->

94
ui/scripts/cloud.core.host.js
View File

@ -27,8 +27,12 @@ function afterLoadHostJSP($midmenuItem1) {
initDialog("dialog_confirmation_force_reconnect");
initDialog("dialog_confirmation_remove_host");
initDialog("dialog_update_os");
hostJsonToDetailsTab($midmenuItem1);
// switch between different tabs
var tabArray = [$("#tab_details"), $("#tab_statistics")];
var tabContentArray = [$("#tab_content_details"), $("#tab_content_statistics")];
var afterSwitchFnArray = [hostJsonToDetailsTab, hostJsonToStatisticsTab];
switchBetweenDifferentTabs(tabArray, tabContentArray, afterSwitchFnArray);
}
@ -49,34 +53,38 @@ function hostToMidmenu(jsonObj, $midmenuItem1) {
updateHostStateInMidMenu(jsonObj, $midmenuItem1);
}
function hostToRightPanel($midmenuItem1) {
copyActionInfoFromMidMenuToRightPanel($midmenuItem1);
resourceLoadPage("jsp/host.jsp", $midmenuItem1);
function hostToRightPanel($midmenuItem1) {
resourceLoadPage("jsp/host.jsp", $midmenuItem1);
}
function hostJsonToDetailsTab($midmenuItem1) {
function hostJsonToDetailsTab() {
var $thisTab = $("#right_panel_content #tab_content_details");
$thisTab.find("#tab_container").hide();
$thisTab.find("#tab_spinning_wheel").show();
var $midmenuItem1 = $("#right_panel_content").data("$midmenuItem1");
var jsonObj = $midmenuItem1.data("jsonObj");
var $detailsTab = $("#tab_content_details");
$detailsTab.data("jsonObj", jsonObj);
$detailsTab.find("#id").text(fromdb(jsonObj.id));
$detailsTab.find("#grid_header_title").text(fromdb(jsonObj.name));
$detailsTab.find("#name").text(fromdb(jsonObj.name));
$thisTab.data("jsonObj", jsonObj);
$thisTab.find("#id").text(fromdb(jsonObj.id));
$thisTab.find("#grid_header_title").text(fromdb(jsonObj.name));
$thisTab.find("#name").text(fromdb(jsonObj.name));
setHostStateInRightPanel(fromdb(jsonObj.state), $detailsTab.find("#state"));
setHostStateInRightPanel(fromdb(jsonObj.state), $thisTab.find("#state"));
$detailsTab.find("#type").text(fromdb(jsonObj.type));
$detailsTab.find("#zonename").text(fromdb(jsonObj.zonename));
$detailsTab.find("#podname").text(fromdb(jsonObj.podname));
$detailsTab.find("#clustername").text(fromdb(jsonObj.clustername));
$detailsTab.find("#ipaddress").text(fromdb(jsonObj.ipaddress));
$detailsTab.find("#version").text(fromdb(jsonObj.version));
$detailsTab.find("#oscategoryname").text(fromdb(jsonObj.oscategoryname));
$detailsTab.find("#disconnected").text(fromdb(jsonObj.disconnected));
$thisTab.find("#type").text(fromdb(jsonObj.type));
$thisTab.find("#zonename").text(fromdb(jsonObj.zonename));
$thisTab.find("#podname").text(fromdb(jsonObj.podname));
$thisTab.find("#clustername").text(fromdb(jsonObj.clustername));
$thisTab.find("#ipaddress").text(fromdb(jsonObj.ipaddress));
$thisTab.find("#version").text(fromdb(jsonObj.version));
$thisTab.find("#oscategoryname").text(fromdb(jsonObj.oscategoryname));
$thisTab.find("#disconnected").text(fromdb(jsonObj.disconnected));
populateForUpdateOSDialog(jsonObj.oscategoryid);
//actions ***
var $actionLink = $detailsTab.find("#action_link");
var $actionLink = $thisTab.find("#action_link");
$actionLink.bind("mouseover", function(event) {
$(this).find("#action_menu").show();
return false;
@ -85,20 +93,20 @@ function hostJsonToDetailsTab($midmenuItem1) {
$(this).find("#action_menu").hide();
return false;
});
var $actionMenu = $detailsTab.find("#action_link #action_menu");
var $actionMenu = $thisTab.find("#action_link #action_menu");
$actionMenu.find("#action_list").empty();
var noAvailableActions = true;
if (jsonObj.state == 'Up' || jsonObj.state == "Connecting") {
buildActionLinkForTab("Enable Maintenance Mode", hostActionMap, $actionMenu, $midmenuItem1, $detailsTab);
buildActionLinkForTab("Force Reconnect", hostActionMap, $actionMenu, $midmenuItem1, $detailsTab);
buildActionLinkForTab("Update OS Preference", hostActionMap, $actionMenu, $midmenuItem1, $detailsTab);
buildActionLinkForTab("Enable Maintenance Mode", hostActionMap, $actionMenu, $midmenuItem1, $thisTab);
buildActionLinkForTab("Force Reconnect", hostActionMap, $actionMenu, $midmenuItem1, $thisTab);
buildActionLinkForTab("Update OS Preference", hostActionMap, $actionMenu, $midmenuItem1, $thisTab);
noAvailableActions = false;
}
else if(jsonObj.state == 'Down') {
buildActionLinkForTab("Enable Maintenance Mode", hostActionMap, $actionMenu, $midmenuItem1, $detailsTab);
buildActionLinkForTab("Update OS Preference", hostActionMap, $actionMenu, $midmenuItem1, $detailsTab);
buildActionLinkForTab("Remove Host", hostActionMap, $actionMenu, $midmenuItem1, $detailsTab);
buildActionLinkForTab("Enable Maintenance Mode", hostActionMap, $actionMenu, $midmenuItem1, $thisTab);
buildActionLinkForTab("Update OS Preference", hostActionMap, $actionMenu, $midmenuItem1, $thisTab);
buildActionLinkForTab("Remove Host", hostActionMap, $actionMenu, $midmenuItem1, $thisTab);
noAvailableActions = false;
}
else if(jsonObj.state == "Alert") {
@ -149,6 +157,36 @@ function hostJsonToDetailsTab($midmenuItem1) {
}
}
function hostJsonToStatisticsTab() {
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");
var $barChartContainer = $thisTab.find("#cpu_barchart");
var cpuNumber = ((jsonObj.cpunumber==null)? "":jsonObj.cpunumber.toString());
$barChartContainer.find("#cpunumber").text(cpuNumber);
var cpuSpeed = ((jsonObj.cpuspeed==null)? "":convertHz(jsonObj.cpuspeed)) ;
$barChartContainer.find("#cpuspeed").text(cpuSpeed);
$barChartContainer.find("#bar_chart").removeClass().addClass("db_barbox").css("width", "0%");
$barChartContainer.find("#percentused").text("");
if(jsonObj.cpuused!=null)
drawBarChart($barChartContainer, jsonObj.cpuused);
var networkKbsRead = ((jsonObj.networkkbsread==null)? "":convertBytes(jsonObj.networkkbsread * 1024));
$thisTab.find("#networkkbsread").text(networkKbsRead);
var networkKbsWrite = ((jsonObj.networkkbswrite==null)? "":convertBytes(jsonObj.networkkbswrite * 1024));
$thisTab.find("#networkkbswrite").text(networkKbsWrite);
$thisTab.find("#tab_spinning_wheel").hide();
$thisTab.find("#tab_container").show();
}
function hostClearRightPanel() {
hostClearDetailsTab();

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

@ -607,27 +607,7 @@ function initVMWizard() {
return false;
});
}
/*
$vmPopup.find("#template_container").bind("click", function(event) {
var container = $(this);
var target = $(event.target);
var parent = target.parent();
if (parent.hasClass("rev_wiztemplistbox_selected") || parent.hasClass("rev_wiztemplistbox")) {
target = parent;
}
if (target.attr("id") != "-2") {
if (target.hasClass("rev_wiztemplistbox")) {
container.find(".rev_wiztemplistbox_selected").removeClass().addClass("rev_wiztemplistbox");
target.removeClass().addClass("rev_wiztemplistbox_selected");
} else if (target.hasClass("rev_wiztemplistbox_selected")) {
target.removeClass().addClass("rev_wiztemplistbox");
}
}
});
*/
$vmPopup.find("#wizard_zone").bind("change", function(event) {
var selectedZone = $(this).val();
if(selectedZone != null && selectedZone.length > 0)

72
ui/scripts/cloud.core.resource.js
View File

@ -121,15 +121,8 @@ function buildZoneTree() {
selectRowInZoneTree(target.parent().parent());
var $leftmenuItem1 = target.parent().parent().parent().parent();
resourceLoadPage("jsp/cluster.jsp", $leftmenuItem1);
break;
case "systemvm_name_label" :
case "systemvm_name" :
selectRowInZoneTree(target.parent().parent());
var $leftmenuItem1 = target.parent().parent().parent().parent();
resourceLoadPage("jsp/systemvm.jsp", $leftmenuItem1);
break;
break;
default:
break;
}
@ -189,8 +182,7 @@ function zoneJSONToTreeNode(json, $zoneNode) {
$zoneNode.data("id", zoneid).data("name", fromdb(json.name));
var zoneName = $zoneNode.find("#zone_name").text(fromdb(json.name));
zoneName.data("jsonObj", json);
var zoneArrowExpandable = false;
$.ajax({
data: createURL("command=listPods&zoneid="+zoneid+maxPageSize),
dataType: "json",
@ -198,29 +190,11 @@ function zoneJSONToTreeNode(json, $zoneNode) {
success: function(json) {
var items = json.listpodsresponse.pod;
if (items != null && items.length > 0) {
zoneArrowExpandable = true;
$zoneNode.find("#zone_arrow").removeClass("white_nonexpanded_close").addClass("expanded_close");
forceLogout = false; // We don't force a logout if pod(s) exit.
}
}
});
if(zoneArrowExpandable == false) {
$.ajax({
data: createURL("command=listSystemVms&zoneid="+zoneid+maxPageSize),
dataType: "json",
async: false,
success: function(json) {
var items = json.listsystemvmsresponse.systemvm;
if (items != null && items.length > 0) {
zoneArrowExpandable = true;
}
}
});
}
if(zoneArrowExpandable == true) {
$zoneNode.find("#zone_arrow").removeClass("white_nonexpanded_close").addClass("expanded_close");
}
});
}
function podJSONToTreeNode(json, $podNode) {
@ -234,15 +208,6 @@ function podJSONToTreeNode(json, $podNode) {
refreshClusterUnderPod($podNode);
}
function systemvmJSONToTreeNode(json, $systemvmNode) {
var systemvmid = json.id;
$systemvmNode.attr("id", "systemvm_"+systemvmid);
$systemvmNode.data("jsonObj", json);
$systemvmNode.data("id", systemvmid).data("name", json.name);
var systeymvmName = $systemvmNode.find("#systemvm_name").text(json.name);
systeymvmName.data("jsonObj", json);
}
function clusterJSONToTreeNode(json, $clusterNode) {
$clusterNode.attr("id", "cluster_"+json.id);
@ -255,20 +220,27 @@ function clusterJSONToTreeNode(json, $clusterNode) {
function resourceLoadPage(pageToShow, $midmenuItem1) { //$midmenuItem1 is either $leftmenuItem1 or $midmenuItem1
clearAddButtonsOnTop();
$("#right_panel").load(pageToShow, function(){
if(pageToShow == "jsp/resource.jsp")
if(pageToShow == "jsp/resource.jsp") {
afterLoadResourceJSP($midmenuItem1);
else if(pageToShow == "jsp/zone.jsp")
}
else if(pageToShow == "jsp/zone.jsp") {
afterLoadZoneJSP($midmenuItem1);
else if(pageToShow == "jsp/pod.jsp")
}
else if(pageToShow == "jsp/pod.jsp") {
afterLoadPodJSP($midmenuItem1);
else if(pageToShow == "jsp/cluster.jsp")
}
else if(pageToShow == "jsp/cluster.jsp") {
afterLoadClusterJSP($midmenuItem1);
else if(pageToShow == "jsp/host.jsp")
afterLoadHostJSP($midmenuItem1);
else if(pageToShow == "jsp/primarystorage.jsp")
afterLoadPrimaryStorageJSP($midmenuItem1);
else if(pageToShow == "jsp/systemvm.jsp")
afterLoadSystemVmJSP($midmenuItem1);
}
else if(pageToShow == "jsp/host.jsp") {
afterLoadHostJSP($midmenuItem1);
copyActionInfoFromMidMenuToRightPanel($midmenuItem1);
$("#right_panel_content").data("$midmenuItem1", $midmenuItem1);
$("#tab_details").click();
}
else if(pageToShow == "jsp/primarystorage.jsp") {
afterLoadPrimaryStorageJSP($midmenuItem1);
}
});
}