From cd367de19fe3199d3fcf1482473b9ec4f76aabd2 Mon Sep 17 00:00:00 2001
From: Jessica Wang <jessica@cloud.com>
Date: Sat, 16 Oct 2010 11:36:18 -0700
Subject: [PATCH] new UI - zonetree in left menu - clicking cluster node will
 populate hosts to middle menu.

---
 ui/new/scripts/cloud.core2.init.js     | 55 +-------------------------
 ui/new/scripts/cloud.core2.js          | 49 +++++++++++++++++++++++
 ui/new/scripts/cloud.core2.resource.js | 19 ++++++++-
 3 files changed, 68 insertions(+), 55 deletions(-)

diff --git a/ui/new/scripts/cloud.core2.init.js b/ui/new/scripts/cloud.core2.init.js
index 68c8745312f..b61fd52be30 100644
--- a/ui/new/scripts/cloud.core2.init.js
+++ b/ui/new/scripts/cloud.core2.init.js
@@ -27,60 +27,7 @@ $(document).ready(function() {
         return false;
     });
     $("#leftmenu_container").show();
-       
-    var $midmenuItem = $("#midmenu_item");
-    function listMidMenuItems(leftmenuId, commandString, jsonResponse1, jsonResponse2, rightPanelJSP, afterLoadRightPanelJSPFn, toMidmenuFn, toRightPanelFn, getMidmenuIdFn) { 
-        $("#"+leftmenuId).bind("click", function(event) {
-            selectLeftMenu($(this));
-            
-            showMiddleMenu();
-            disableMultipleSelectionInMidMenu();
-            
-            clearLeftMenu();
-            clearMiddleMenu();
-            
-            $("#right_panel").load(rightPanelJSP, function(){                   
-                $("#right_panel_content #tab_content_details #action_message_box #close_button").bind("click", function(event){    
-                    $(this).parent().hide();
-                    return false;
-                });  
-                                     
-                var $actionLink = $("#right_panel_content #tab_content_details #action_link");
-	            $actionLink.bind("mouseover", function(event) {	    
-                    $(this).find("#action_menu").show();    
-                    return false;
-                });
-                $actionLink.bind("mouseout", function(event) {       
-                    $(this).find("#action_menu").hide();    
-                    return false;
-                });	   
-                              
-                afterLoadRightPanelJSPFn();    
-                            
-                $.ajax({
-	                cache: false,
-	                data: createURL("command="+commandString+"&pagesize="+midmenuItemCount),
-	                dataType: "json",
-	                success: function(json) {		                    
-	                    selectedItemsInMidMenu = {};    	                
-	                    var items = json[jsonResponse1][jsonResponse2];
-	                    if(items != null && items.length > 0) {
-	                        for(var i=0; i<items.length;i++) { 
-                                var $midmenuItem1 = $midmenuItem.clone();  
-                                $midmenuItem1.data("toRightPanelFn", toRightPanelFn);                             
-                                toMidmenuFn(items[i], $midmenuItem1);    
-                                bindClickToMidMenu($midmenuItem1, toRightPanelFn, getMidmenuIdFn);             
-                                $("#midmenu_container").append($midmenuItem1.show());   
-                                if(i == 0)  //click the 1st item in middle menu as default 
-                                    $midmenuItem1.click();                        
-                            }  
-                        }  
-	                }
-		        });	 
-            });     
-            return false;
-        });
-    }
+           
     listMidMenuItems("leftmenu_event", "listEvents", "listeventsresponse", "event", "jsp/event.jsp", afterLoadEventJSP, eventToMidmenu, eventToRigntPanel, getMidmenuId);
     listMidMenuItems("leftmenu_alert", "listAlerts", "listalertsresponse", "alert", "jsp/alert.jsp", afterLoadAlertJSP, alertToMidmenu, alertToRigntPanel, getMidmenuId);
     listMidMenuItems("leftmenu_account", "listAccounts", "listaccountsresponse", "account", "jsp/account.jsp", afterLoadAccountJSP, accountToMidmenu, accountToRigntPanel, getMidmenuId);
diff --git a/ui/new/scripts/cloud.core2.js b/ui/new/scripts/cloud.core2.js
index 5a2544ffa5c..3177ffcf42f 100644
--- a/ui/new/scripts/cloud.core2.js
+++ b/ui/new/scripts/cloud.core2.js
@@ -739,7 +739,56 @@ function getMidmenuId(jsonObj) {
     return "midmenuItem_" + jsonObj.id; 
 }
 
+function listItemsInMidmenu(commandString, jsonResponse1, jsonResponse2, toMidmenuFn, toRightPanelFn, getMidmenuIdFn) {                
+    $.ajax({
+        cache: false,
+        data: createURL("command="+commandString+"&pagesize="+midmenuItemCount),
+        dataType: "json",
+        success: function(json) {		                    
+            selectedItemsInMidMenu = {};    	                
+            var items = json[jsonResponse1][jsonResponse2];
+            if(items != null && items.length > 0) {
+                for(var i=0; i<items.length;i++) { 
+                    var $midmenuItem1 = $("#midmenu_item").clone();  
+                    $midmenuItem1.data("toRightPanelFn", toRightPanelFn);                             
+                    toMidmenuFn(items[i], $midmenuItem1);    
+                    bindClickToMidMenu($midmenuItem1, toRightPanelFn, getMidmenuIdFn);             
+                    $("#midmenu_container").append($midmenuItem1.show());   
+                    if(i == 0)  //click the 1st item in middle menu as default 
+                        $midmenuItem1.click();                        
+                }  
+            }  
+        }
+    });	 
+}
 
+function listMidMenuItems(leftmenuId, commandString, jsonResponse1, jsonResponse2, rightPanelJSP, afterLoadRightPanelJSPFn, toMidmenuFn, toRightPanelFn, getMidmenuIdFn) { 
+    $("#"+leftmenuId).bind("click", function(event) {
+        selectLeftMenu($(this));
+        
+        showMiddleMenu();
+        disableMultipleSelectionInMidMenu();
+        
+        clearLeftMenu();
+        clearMiddleMenu();
+        
+        $("#right_panel").load(rightPanelJSP, function(){     
+            var $actionLink = $("#right_panel_content #tab_content_details #action_link");
+            $actionLink.bind("mouseover", function(event) {	    
+                $(this).find("#action_menu").show();    
+                return false;
+            });
+            $actionLink.bind("mouseout", function(event) {       
+                $(this).find("#action_menu").hide();    
+                return false;
+            });	   
+                          
+            afterLoadRightPanelJSPFn();                
+            listItemsInMidmenu(commandString, jsonResponse1, jsonResponse2, toMidmenuFn, toRightPanelFn, getMidmenuIdFn);            
+        });     
+        return false;
+    });
+}
 
 
 
diff --git a/ui/new/scripts/cloud.core2.resource.js b/ui/new/scripts/cloud.core2.resource.js
index e988333bd01..f2b64fdcff0 100644
--- a/ui/new/scripts/cloud.core2.resource.js
+++ b/ui/new/scripts/cloud.core2.resource.js
@@ -209,7 +209,10 @@ function buildZoneTree() {
 			    selectLeftMenu(target.parent().parent().parent());			    
 			    var jsonObj = target.data("jsonObj");
 			    showPage($("#cluster_page"), jsonObj);
-			    clusterJsonToDetailsTab(jsonObj);					
+			    clusterJsonToDetailsTab(jsonObj);
+			    var clusterId = jsonObj.id;
+			    $("#midmenu_container").empty();
+			    listItemsInMidmenu(("listHosts&clusterid="+clusterId), "listhostsresponse", "host", hostToMidmenu, hostToRigntPanel, getMidmenuId); 					
 				break;								
 						
 			case "systemvm_name" :		
@@ -449,6 +452,20 @@ function clusterJsonToDetailsTab(jsonObj) {
 //***** cluster page (end) ****************************************************************************************************
 
 //***** host page (bgein) *****************************************************************************************************
+function hostToMidmenu(jsonObj, $midmenuItem1) {    
+    $midmenuItem1.attr("id", getMidmenuId(jsonObj));  
+    $midmenuItem1.data("jsonObj", jsonObj);      
+    //$iconContainer.find("#icon").attr("src", "images/midmenuicon_host.png");      
+    $midmenuItem1.find("#first_row").text(jsonObj.name.substring(0,25)); 
+    $midmenuItem1.find("#second_row").text(jsonObj.ipaddress.substring(0,25));  
+    updateStateInMidMenu(jsonObj, $midmenuItem1);           
+}
+
+function hostToRigntPanel($midmenuItem) {      
+    var jsonObj = $midmenuItem.data("jsonObj");
+    hostJsonToDetailsTab(jsonObj);   
+}
+
 function hostJsonToDetailsTab(jsonObj) {	    
     var $detailsTab = $("#host_page").find("#tab_content_details");   
     $detailsTab.data("jsonObj", jsonObj);