From fe4e67309306913820e60936585667ec496b2b8b Mon Sep 17 00:00:00 2001
From: Jessica Wang <jessica@cloud.com>
Date: Sat, 16 Oct 2010 14:55:19 -0700
Subject: [PATCH] new UI - implement Add host action.

---
 ui/new/jsp/resource.jsp                |  45 +++-
 ui/new/scripts/cloud.core2.resource.js | 342 ++++++++++++++-----------
 2 files changed, 240 insertions(+), 147 deletions(-)

diff --git a/ui/new/jsp/resource.jsp b/ui/new/jsp/resource.jsp
index 11c81b678c1..184a5e74a3c 100644
--- a/ui/new/jsp/resource.jsp
+++ b/ui/new/jsp/resource.jsp
@@ -676,7 +676,7 @@
 <!-- END Add Zone Dialog -->
 <!-- Add Pod Dialog -->
 <div id="dialog_add_pod" title="Add Pod" style="display:none">
-	<p>Add a new pod for zone: <b><span id="add_pod_zone_name"></span></b></p>
+	<p>Add a new pod for zone <b><span id="add_pod_zone_name"></span></b> </p>
 	<div class="dialog_formcontent">
 		<form action="#" method="post" id="form_acquire">
 			<ol>
@@ -708,6 +708,49 @@
 </div>
 <!-- END Add Pod Dialog -->
 
+<!-- Add Computing Host Dialog -->
+<div id="dialog_add_host" title="Add Host" style="display:none">
+	<p>Add a host for zone <b><span id="zone_name"></span></b>, pod <b><span id="pod_name"></span></b></p>
+	<div class="dialog_formcontent">
+		<form action="#" method="post" id="form_acquire">
+			<ol>				
+				<li>
+					<label for="host_hostname">Host name:</label>
+					<input class="text" type="text" name="host_hostname" id="host_hostname"/>
+					<div id="host_hostname_errormsg" class="dialog_formcontent_errormsg" style="display:none;" ></div>
+				</li>
+				<li>
+					<label for="user_name">User name:</label>
+					<input class="text" type="text" name="host_username" id="host_username"/>
+					<div id="host_username_errormsg" class="dialog_formcontent_errormsg" style="display:none;" ></div>
+				</li>
+				<li>
+					<label for="user_name">Password:</label>
+					<input class="text" type="password" name="host_password" id="host_password" AUTOCOMPLETE="off" />
+					<div id="host_password_errormsg" class="dialog_formcontent_errormsg" style="display:none;" ></div>
+				</li>
+				<li id="cluster_options_container">
+				    <label>&nbsp;</label><span><u>Cluster Options</u></span>
+				</li>
+				<li id="new_cluster_radio_container">
+				    <label><input type="radio" name="cluster" value="new_cluster_radio" checked />&nbsp;New cluster:</label>
+				    <input class="text" type="text" id="new_cluster_name"/>
+					<div id="new_cluster_name_errormsg" class="dialog_formcontent_errormsg" style="display:none;" ></div>
+				</li>
+				<li id="existing_cluster_radio_container">
+				    <label><input type="radio" name="cluster" value="existing_cluster_radio" />&nbsp;Join cluster:</label>
+				    <select class="select" id="cluster_select"></select>
+				</li>
+				<li id="no_cluster_radio_container">
+				    <label><input type="radio" name="cluster" value="no_cluster_radio" />&nbsp;Standalone</label>
+				    <span style="padding-left:20px"></span>
+				</li>
+			</ol>
+		</form>
+	</div>
+</div>
+
+
 <!-- Zonetree Template (begin) -->
 <div class="zonetree_contentbox" id="zonetree" style="display: none">
     <div id="zones_container">
diff --git a/ui/new/scripts/cloud.core2.resource.js b/ui/new/scripts/cloud.core2.resource.js
index 4a1ddfd2c3a..4ac576b8b63 100644
--- a/ui/new/scripts/cloud.core2.resource.js
+++ b/ui/new/scripts/cloud.core2.resource.js
@@ -21,144 +21,7 @@ function buildZoneTree() {
             $zoneTree.show();
 		}
 	});  
-
-    function zoneJSONToTreeNode(json, $zoneNode) {
-        var zoneid = json.id;
-        $zoneNode.attr("id", "zone_" + zoneid);  
-	    $zoneNode.data("id", zoneid).data("name", fromdb(json.name));
-	    var zoneName = $zoneNode.find("#zone_name").text(fromdb(json.name));	    
-	    zoneName.data("jsonObj", json);	    
-    	
-	    $.ajax({
-	        data: createURL("command=listPods&zoneid="+zoneid+maxPageSize),
-		    dataType: "json",
-		    async: false,
-		    success: function(json) {
-			    var items = json.listpodsresponse.pod;			    
-			    var container = $zoneNode.find("#pods_container");
-			    if (items != null && items.length > 0) {					    
-				    for (var i = 0; i < items.length; i++) {
-					    var $podNode = $("#leftmenu_pod_node_template").clone(true);
-					    podJSONToTreeNode(items[i], $podNode);
-					    container.append($podNode.show());
-					    forceLogout = false;  // We don't force a logout if pod(s) exit.
-				    }
-			    }
-		    }
-	    });
-	    	    
-	    $.ajax({
-	        data: createURL("command=listSystemVms&zoneid="+zoneid+maxPageSize),
-		    dataType: "json",
-		    async: false,
-		    success: function(json) {
-			    var items = json.listsystemvmsresponse.systemvm;
-			    var container = $zoneNode.find("#systemvms_container").empty();
-			    if (items != null && items.length > 0) {					    
-				    for (var i = 0; i < items.length; i++) {
-					    var $systemvmNode = $("#leftmenu_systemvm_node_template").clone(true);
-					    systemvmJSONToTreeNode(items[i], $systemvmNode);
-					    container.append($systemvmNode.show());
-				    }
-			    }
-		    }
-	    });
-    }
-    
-    function podJSONToTreeNode(json, $podNode) {	
-        var podid = json.id;
-        $podNode.attr("id", "pod_" + podid);      	
-		$podNode.data("id", podid).data("name", fromdb(json.name));
-		
-		var podName = $podNode.find("#pod_name").text(fromdb(json.name));
-		podName.data("jsonObj", json);	    
-			
-	    $.ajax({
-            data: createURL("command=listClusters&podid="+podid+maxPageSize),
-	        dataType: "json",
-	        async: false,
-	        success: function(json) {
-		        var items = json.listclustersresponse.cluster;
-		        var container = $podNode.find("#clusters_container").empty();
-		        if (items != null && items.length > 0) {					    
-			        for (var i = 0; i < items.length; i++) {
-				        var clusterTemplate = $("#leftmenu_cluster_node_template").clone(true); 
-				        clusterJSONToTreeNode(items[i], clusterTemplate);
-				        container.append(clusterTemplate.show());
-			        }
-		        }
-	        }
-        });		
-	}
-		
-	function systemvmJSONToTreeNode(json, $systemvmNode) {	
-	    var systemvmid = json.id;	
-	    $systemvmNode.attr("id", "systemvm_"+systemvmid);
-	    $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);
-	    $clusterNode.data("id", json.id).data("name", fromdb(json.name));	    
-	    var clusterName = $clusterNode.find("#cluster_name").text(fromdb(json.name));
-	    clusterName.data("jsonObj", json);	   
-	    	
-	    /*	   
-	    $.ajax({
-            data: createURL("command=listHosts&clusterid="+json.id+maxPageSize),
-	        dataType: "json",
-	        success: function(json) {
-		        var items = json.listhostsresponse.host;
-		        var container = template.find("#hosts_container").empty();
-		        if (items != null && items.length > 0) {					    
-			        for (var i = 0; i < items.length; i++) {
-				        var hostTemplate = $("#host_template").clone(true);
-				        hostJSONToTreeNode(items[i], hostTemplate);
-				        container.append(hostTemplate.show());
-			        }
-		        }
-	        }
-        });		
-        
-        $.ajax({
-            data: createURL("command=listStoragePools&clusterid="+json.id+maxPageSize),
-	        dataType: "json",
-	        success: function(json) {
-		        var items = json.liststoragepoolsresponse.storagepool;
-		        var container = template.find("#primarystorages_container").empty();
-		        if (items != null && items.length > 0) {					    
-			        for (var i = 0; i < items.length; i++) {
-				        var primaryStorageTemplate = $("#primarystorage_template").clone(true);
-				        primaryStorageJSONToTreeNode(items[i], primaryStorageTemplate);
-				        container.append(primaryStorageTemplate.show());
-			        }
-		        }
-	        }
-        });	
-        */	    
-	}
-	
-	/*
-	function hostJSONToTreeNode(json, template) {
-	    template.attr("id", "host_"+json.id);
-	    template.data("id", json.id).data("name", fromdb(json.name));	    
-	    var hostName = template.find("#host_name").text(fromdb(json.name));
-	    hostName.data("jsonObj", json);
-	}
-	*/	
-	
-	/*
-	function primaryStorageJSONToTreeNode(json, template) {
-	    template.attr("id", "primary_storage_"+json.id);
-	    template.data("id", json.id).data("name", fromdb(json.name));	    
-	    var primaryStorageName = template.find("#primarystorage_name").text(fromdb(json.name));
-	    primaryStorageName.data("jsonObj", json);
-	}
-	*/
-	
-	//$("#zone_template").bind("click", function(event) {
+    
 	$("#leftmenu_zone_node_template").bind("click", function(event) {
 		var template = $(this);
 		var target = $(event.target);
@@ -231,6 +94,90 @@ function buildZoneTree() {
 	//***** build zone tree (end) *************************************************************************************************       
 }    
 
+function zoneJSONToTreeNode(json, $zoneNode) {
+    var zoneid = json.id;
+    $zoneNode.attr("id", "zone_" + zoneid);  
+    $zoneNode.data("id", zoneid).data("name", fromdb(json.name));
+    var zoneName = $zoneNode.find("#zone_name").text(fromdb(json.name));	    
+    zoneName.data("jsonObj", json);	    
+	
+    $.ajax({
+        data: createURL("command=listPods&zoneid="+zoneid+maxPageSize),
+	    dataType: "json",
+	    async: false,
+	    success: function(json) {
+		    var items = json.listpodsresponse.pod;			    
+		    var container = $zoneNode.find("#pods_container");
+		    if (items != null && items.length > 0) {					    
+			    for (var i = 0; i < items.length; i++) {
+				    var $podNode = $("#leftmenu_pod_node_template").clone(true);
+				    podJSONToTreeNode(items[i], $podNode);
+				    container.append($podNode.show());
+				    forceLogout = false;  // We don't force a logout if pod(s) exit.
+			    }
+		    }
+	    }
+    });
+    	    
+    $.ajax({
+        data: createURL("command=listSystemVms&zoneid="+zoneid+maxPageSize),
+	    dataType: "json",
+	    async: false,
+	    success: function(json) {
+		    var items = json.listsystemvmsresponse.systemvm;
+		    var container = $zoneNode.find("#systemvms_container").empty();
+		    if (items != null && items.length > 0) {					    
+			    for (var i = 0; i < items.length; i++) {
+				    var $systemvmNode = $("#leftmenu_systemvm_node_template").clone(true);
+				    systemvmJSONToTreeNode(items[i], $systemvmNode);
+				    container.append($systemvmNode.show());
+			    }
+		    }
+	    }
+    });
+}
+
+function podJSONToTreeNode(json, $podNode) {	
+    var podid = json.id;
+    $podNode.attr("id", "pod_" + podid);      	
+	$podNode.data("id", podid).data("name", fromdb(json.name));
+	
+	var podName = $podNode.find("#pod_name").text(fromdb(json.name));
+	podName.data("jsonObj", json);	    
+		
+    $.ajax({
+        data: createURL("command=listClusters&podid="+podid+maxPageSize),
+        dataType: "json",
+        async: false,
+        success: function(json) {
+	        var items = json.listclustersresponse.cluster;
+	        var container = $podNode.find("#clusters_container").empty();
+	        if (items != null && items.length > 0) {					    
+		        for (var i = 0; i < items.length; i++) {
+			        var clusterTemplate = $("#leftmenu_cluster_node_template").clone(true); 
+			        clusterJSONToTreeNode(items[i], clusterTemplate);
+			        container.append(clusterTemplate.show());
+		        }
+	        }
+        }
+    });		
+}
+	
+function systemvmJSONToTreeNode(json, $systemvmNode) {	
+    var systemvmid = json.id;	
+    $systemvmNode.attr("id", "systemvm_"+systemvmid);
+    $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);
+    $clusterNode.data("id", json.id).data("name", fromdb(json.name));	    
+    var clusterName = $clusterNode.find("#cluster_name").text(fromdb(json.name));
+    clusterName.data("jsonObj", json);	   
+}			
+
 function showPage($pageToShow, jsonObj) {   
     var pageArray = [$("#zone_page"), $("#pod_page"), $("#cluster_page"), $("#host_page"), $("#primarystorage_page"), $("#systemvm_page")];
     var pageLabelArray = ["Zone", "Pod", "Cluster", "Host", "Primary Storage", "System VM"];       
@@ -287,7 +234,7 @@ function showPage($pageToShow, jsonObj) {
                         array1.push("&endIp="+encodeURIComponent(endip));
                     array1.push("&gateway="+encodeURIComponent(gateway));			
     								    
-			        var template = $("#pod_template").clone(true);
+			        var template = $("#leftmenu_pod_node_template").clone(true);
 			        var loadingImg = template.find(".adding_loading");										
 			        var row_container = template.find("#row_container");        				
 			        $("#zone_" + zoneObj.id + " #zone_content").show();	
@@ -298,7 +245,7 @@ function showPage($pageToShow, jsonObj) {
 	                template.fadeIn("slow");
     				
 			        $.ajax({
-			          data: createURL("command=createPod&response=json"+array1.join("")),
+			          data: createURL("command=createPod"+array1.join("")), 
 				        dataType: "json",
 				        success: function(json) {
 					        var item = json.createpodresponse; 	
@@ -340,8 +287,109 @@ function showPage($pageToShow, jsonObj) {
         //***** Add Host (begin) *****
         $("#midmenu_add_link").find("#label").text("Add Host");  
         $("#midmenu_add_link").data("jsonObj", jsonObj).show(); 
-        $("#midmenu_add_link").unbind("click").bind("click", function(event) {
-        
+        $("#midmenu_add_link").unbind("click").bind("click", function(event) {     
+            dialogAddHost = $("#dialog_add_host");  
+            var podObj = $(this).data("jsonObj");	
+            dialogAddHost.find("#zone_name").text(fromdb(podObj.zonename));  
+            dialogAddHost.find("#pod_name").text(fromdb(podObj.name)); 
+            dialogAddHost.find("#new_cluster_name").val("");
+                              
+	        $.ajax({
+		       data: createURL("command=listClusters&podid="+podObj.id+maxPageSize),
+	            dataType: "json",
+	            success: function(json) {			            
+	                var items = json.listclustersresponse.cluster;
+	                var clusterSelect = dialogAddHost.find("#cluster_select").empty();		
+	                if(items != null && items.length > 0) {			                
+	                    for(var i=0; i<items.length; i++) 			                    
+	                        clusterSelect.append("<option value='" + items[i].id + "'>" + fromdb(items[i].name) + "</option>");		      
+                        dialogAddHost.find("input[value=existing_cluster_radio]").attr("checked", true);
+	                }
+	                else {
+					    clusterSelect.append("<option value='-1'>None Available</option>");
+	                    dialogAddHost.find("input[value=new_cluster_radio]").attr("checked", true);
+	                }
+	            }
+	        });           
+		        	    
+	        dialogAddHost
+	        .dialog('option', 'buttons', { 				
+		        "Add": function() { 
+		            var dialogBox = $(this);				   
+			        var clusterRadio = dialogBox.find("input[name=cluster]:checked").val();				
+    			
+			        // validate values
+			        var isValid = true;									
+			        isValid &= validateString("Host name", dialogBox.find("#host_hostname"), dialogBox.find("#host_hostname_errormsg"));
+			        isValid &= validateString("User name", dialogBox.find("#host_username"), dialogBox.find("#host_username_errormsg"));
+			        isValid &= validateString("Password", dialogBox.find("#host_password"), dialogBox.find("#host_password_errormsg"));						
+			        if (!isValid) 
+			            return;
+			            
+    				dialogBox.dialog("close");    				
+    				
+			        var array1 = [];    
+			        array1.push("&zoneId="+podObj.zoneid);
+			        array1.push("&podId="+podObj.id);
+    						      
+			        var username = trim(dialogBox.find("#host_username").val());
+			        array1.push("&username="+encodeURIComponent(username));
+    				
+			        var password = trim(dialogBox.find("#host_password").val());
+			        array1.push("&password="+encodeURIComponent(password));
+    											
+				    if(clusterRadio == "new_cluster_radio") {
+			            var newClusterName = trim(dialogBox.find("#new_cluster_name").val());
+			            array1.push("&clustername="+todb(newClusterName));				    
+			        }
+			        else if(clusterRadio == "existing_cluster_radio") {			            
+			            var clusterId = dialogBox.find("#cluster_select").val();
+					    // We will default to no cluster if someone selects Join Cluster with no cluster available.
+					    if (clusterId != '-1') {
+						    array1.push("&clusterid="+clusterId);
+					    }
+			        }				
+    				
+			        var hostname = trim(dialogBox.find("#host_hostname").val());
+			        var url;					
+			        if(hostname.indexOf("http://")==-1)
+			            url = "http://" + todb(hostname);
+			        else
+			            url = hostname;
+			        array1.push("&url="+encodeURIComponent(url));
+    									
+			        var $midmenuItem1 = beforeAddingMidMenuItem() ;    				
+			        
+			        $.ajax({
+				       data: createURL("command=addHost" + array1.join("")),
+				        dataType: "json",
+				        success: function(json) {	
+				            var items = json.addhostresponse.host;				            			      										   
+						    hostToMidmenu(items[0], $midmenuItem1);
+		                    bindClickToMidMenu($midmenuItem1, hostToRigntPanel, getMidmenuId);  
+		                    afterAddingMidMenuItem($midmenuItem1, true);
+                                                            
+                            if(items.length > 1) { 
+                                for(var i=1; i<items.length; i++) {                                    
+                                    var $midmenuItem2 = $("#midmenu_item").clone();
+                                    hostToMidmenu(items[i], $midmenuItem2);
+                                    bindClickToMidMenu($midmenuItem2, hostToRigntPanel, getMidmenuId); 
+                                    $("#midmenu_container").append($midmenuItem2.show());                                   
+                                }	
+                            }                                
+                            
+                            if(clusterRadio == "new_cluster_radio")
+                                dialogBox.find("#new_cluster_name").val("");
+				        },			
+                        error: function(XMLHttpResponse) {		                   
+                            handleErrorInMidMenu(XMLHttpResponse, $midmenuItem1);					    
+                        }				
+			        });
+		        }, 
+		        "Cancel": function() { 
+			        $(this).dialog("close"); 
+		        } 
+	        }).dialog("open");            
             return false;
         });
         
@@ -554,7 +602,8 @@ function afterLoadResourceJSP() {
 	//dialogs	
 	initDialog("dialog_add_zone");
 	initDialog("dialog_add_pod", 320);
-	
+	initDialog("dialog_add_host");
+		
 	//Add Zone button ***
 	$("#midmenu_add_link").find("#label").text("Add Zone");     
     $("#midmenu_add_link").show();     
@@ -613,10 +662,11 @@ function afterLoadResourceJSP() {
 				moreCriteria.push("&guestcidraddress="+encodeURIComponent(guestcidraddress));	
 						
 				
-				var template = $("#zone_template").clone(true);
+				var template = $("#leftmenu_zone_node_template").clone(true); 
 			    var loadingImg = template.find(".adding_loading");										
-			    var row_container = template.find("#row_container");    			
-			    $("#zonetree1").find("#zones_container").prepend(template);			    			            
+			    var row_container = template.find("#row_container");  			   
+			    var $zoneTree = $("#leftmenu_zone_tree").find("#tree_container");		     			
+			    $zoneTree.prepend(template);						            
                 loadingImg.show();  
                 row_container.hide();             
 	            template.fadeIn("slow");