From a70bbc557addc71d9a5f7ea07c8c6db4f9c54891 Mon Sep 17 00:00:00 2001
From: Jessica Wang <jessica@cloud.com>
Date: Wed, 29 Dec 2010 10:34:35 -0800
Subject: [PATCH] Zonetree: add host node under cluster node.

---
 ui/index.jsp                      |  14 ++++
 ui/scripts/cloud.core.host.js     |   8 ++-
 ui/scripts/cloud.core.resource.js | 110 ++++++++++++++++++++++++++++++
 3 files changed, 130 insertions(+), 2 deletions(-)

diff --git a/ui/index.jsp b/ui/index.jsp
index 24fefc412be..dd834f46a94 100644
--- a/ui/index.jsp
+++ b/ui/index.jsp
@@ -854,6 +854,20 @@
     </div>
     <!-- cluster Template (end) -->
 
+    <!-- host Template (begin) --> 
+    <div class="leftmenu_expandedlist" id="leftmenu_host_node_template" style="display:none">       
+        <div id="host_header" class="leftmenu_content">  
+            <div class="leftmenu_sixthindent">
+            	<div class="leftmenu_arrowloader" id="host_loading_container" style="display:none;"></div>
+                <div class="leftmenu_arrows white_nonexpanded_close" id="host_arrow">
+                </div>	                
+                <span id="host_name_label">host: </span>
+                <span id="host_name"></span>
+            </div>  
+        </div>	           
+    </div>
+    <!-- host Template (end) -->
+
     <!-- domain tree node template (begin) -->
     <div id="domain_tree_node_template" style="display:none">    	
                 
diff --git a/ui/scripts/cloud.core.host.js b/ui/scripts/cloud.core.host.js
index 9338e05a6bc..6036ff613d6 100644
--- a/ui/scripts/cloud.core.host.js
+++ b/ui/scripts/cloud.core.host.js
@@ -67,7 +67,10 @@ function hostToMidmenu(jsonObj, $midmenuItem1) {
     updateHostStateInMidMenu(jsonObj, $midmenuItem1);   
 }
 
-function hostToRightPanel($midmenuItem1) {         
+function hostToRightPanel($midmenuItem1) {       
+    $("#right_panel_content").data("$midmenuItem1", $midmenuItem1);        
+    hostJsonToDetailsTab();
+    /*      
     if(currentRightPanelJSP != "jsp/host.jsp") {            
         removeDialogs();
         $("#right_panel").load("jsp/host.jsp", function(){     
@@ -86,8 +89,9 @@ function hostToRightPanel($midmenuItem1) {
     } 
     else {
         $("#right_panel_content").data("$midmenuItem1", $midmenuItem1);    
-        hostJsonToDetailsTab() 
+        hostJsonToDetailsTab();
     }
+    */
 }
 
 function afterLoadHostJSP() {    
diff --git a/ui/scripts/cloud.core.resource.js b/ui/scripts/cloud.core.resource.js
index e22fb6bfbcd..4d982ec0534 100644
--- a/ui/scripts/cloud.core.resource.js
+++ b/ui/scripts/cloud.core.resource.js
@@ -198,6 +198,7 @@ function buildZoneTree() {
 	    return false;
 	});  
 	
+	/*
 	$("#leftmenu_cluster_node_template").unbind("click").bind("click", function(event) {
 	    selectRowInZoneTree($(this).find("#cluster_header"));	    
 	   	  
@@ -207,6 +208,107 @@ function buildZoneTree() {
 	    	    
 	    return false;
 	});  
+	*/
+	
+	$("#leftmenu_cluster_node_template").unbind("click").bind("click", function(event) {
+		var $clusterNode = $(this);
+		var $target = $(event.target);
+		var targetId = $target.attr("id");	
+		
+		switch (targetId) {
+			case "cluster_arrow" :				    
+			    var $loadingContainer = $clusterNode.find("#cluster_loading_container").show();
+                var $clusterArrow = $clusterNode.find("#cluster_arrow").hide();			
+			    
+			    var clusterObj = $clusterNode.data("jsonObj");
+			    var $clusterContent = $clusterNode.find("#cluster_content");				  	   
+				if($target.hasClass("expanded_close")) {										
+					$.ajax({
+                        data: createURL("command=listHosts&type=Routing&clusterid="+clusterObj.id),
+	                    dataType: "json",
+	                    async: false,
+	                    success: function(json) {	                        
+	                        var items = json.listhostsresponse.host;	
+	                        var $container = $clusterContent.find("#hosts_container").empty();
+                            if (items != null && items.length > 0) {					    
+                                for (var i = 0; i < items.length; i++) {
+				                    var $hostNode = $("#leftmenu_host_node_template").clone(true);				                    
+				                    hostJSONToTreeNode(items[i], $hostNode);
+				                    $container.append($hostNode.show());				                    
+			                    }			                                 
+                            }	   
+	                    }
+                    });                     
+                    $target.removeClass("expanded_close").addClass("expanded_open");							
+					$clusterContent.show();					                   
+				} 
+				else if($target.hasClass("expanded_open")) {	
+				    $clusterContent.find("#pods_container").empty();					
+					$target.removeClass("expanded_open").addClass("expanded_close");					
+					$clusterContent.hide();					
+				}	
+				
+				$loadingContainer.hide();
+                $clusterArrow.show();				
+							
+				break;					
+			
+			default:	
+			    /*			    		    
+			    selectRowInZoneTree($(this).find("#cluster_header"));	
+			    
+			    if(currentRightPanelJSP != "jsp/cluster.jsp") {                       
+	                removeDialogs();
+	                
+	                var $thisNode = $(this);
+                    $("#right_panel").load("jsp/cluster.jsp", function(){     
+                        currentRightPanelJSP = "jsp/cluster.jsp";
+                                        
+                        $(this).data("onRefreshFn", function() {
+	                        clusterJsonToDetailsTab();
+	                    });  
+            	        
+                        afterLoadclusterJSP($thisNode);   
+                    });      
+                } 
+                else {
+                    clusterJsonToRightPanel($(this));			 
+                }
+                */
+			   	    		   				    		   			    
+			    break;	
+		}
+		return false;
+	});  
+	
+	$("#leftmenu_host_node_template").unbind("click").bind("click", function(event) {		    
+		var $thisNode = $(this);
+		selectRowInZoneTree($thisNode.find("#host_header"));	
+			    
+	    if(currentRightPanelJSP != "jsp/host.jsp") {                       
+            removeDialogs();            
+            
+            $("#right_panel").load("jsp/host.jsp", function(){                    
+                currentRightPanelJSP = "jsp/host.jsp";
+                       
+                var $topButtonContainer = clearButtonsOnTop();			    	       
+		        $("#top_buttons").appendTo($topButtonContainer);        
+                                
+                $thisNode.data("onRefreshFn", function() {
+                    hostJsonToDetailsTab();
+                });  
+    	        
+                afterLoadHostJSP();
+                hostToRightPanel($thisNode);	   
+            });      
+        } 
+        else {
+            hostToRightPanel($thisNode);	             
+        }	
+		
+		return false;
+	});  
+	
 }    
 
 function refreshClusterUnderPod($podNode, newClusterName, existingClusterId, noClicking) {  
@@ -315,6 +417,14 @@ function clusterJSONToTreeNode(json, $clusterNode) {
     });      
 }			
 
+function hostJSONToTreeNode(json, $hostNode) {
+    $hostNode.attr("id", "host_"+json.id);
+    $hostNode.data("jsonObj", json);	  
+    //$hostNode.data("id", json.id).data("name", fromdb(json.name));	    
+    var hostName = $hostNode.find("#host_name").text(fromdb(json.name));
+    //hostName.data("jsonObj", json);	 
+}	
+
 function afterLoadResourceJSP() {
     hideMiddleMenu();