From b61c81df0b2934fba69f731853db2372179b68e1 Mon Sep 17 00:00:00 2001 From: Jessica Wang Date: Tue, 9 Nov 2010 14:38:22 -0800 Subject: [PATCH] bug 6983: Host page - add statistics tab. --- ui/jsp/host.jsp | 71 +++++++++++++++++++++++ ui/jsp/instance.jsp | 4 +- ui/scripts/cloud.core.host.js | 94 ++++++++++++++++++++++--------- ui/scripts/cloud.core.instance.js | 22 +------- ui/scripts/cloud.core.resource.js | 72 ++++++++--------------- 5 files changed, 162 insertions(+), 101 deletions(-) diff --git a/ui/jsp/host.jsp b/ui/jsp/host.jsp index 8411c7b9c4d..2e214977148 100644 --- a/ui/jsp/host.jsp +++ b/ui/jsp/host.jsp @@ -22,6 +22,8 @@
<%=t.t("details")%>
+
+ <%=t.t("Statistics")%>
@@ -166,6 +168,75 @@
+ + + + + diff --git a/ui/jsp/instance.jsp b/ui/jsp/instance.jsp index 9aee6f1bdd0..c717e8d4a3f 100644 --- a/ui/jsp/instance.jsp +++ b/ui/jsp/instance.jsp @@ -294,7 +294,7 @@ - + diff --git a/ui/scripts/cloud.core.host.js b/ui/scripts/cloud.core.host.js index 49351df825b..282a106ace2 100644 --- a/ui/scripts/cloud.core.host.js +++ b/ui/scripts/cloud.core.host.js @@ -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(); diff --git a/ui/scripts/cloud.core.instance.js b/ui/scripts/cloud.core.instance.js index c4ef2f92679..091fa6316be 100644 --- a/ui/scripts/cloud.core.instance.js +++ b/ui/scripts/cloud.core.instance.js @@ -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) diff --git a/ui/scripts/cloud.core.resource.js b/ui/scripts/cloud.core.resource.js index e088becbf24..97002de5867 100644 --- a/ui/scripts/cloud.core.resource.js +++ b/ui/scripts/cloud.core.resource.js @@ -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); + } }); }