From 236261c0a51633ddee3e12a4ed59f517cade2439 Mon Sep 17 00:00:00 2001
From: Jessica Wang <jessica@cloud.com>
Date: Thu, 30 Dec 2010 11:46:47 -0800
Subject: [PATCH] resource page - implement add cluster dialog.

---
 ui/jsp/resource.jsp               | 102 +++++++++++++++++-
 ui/scripts/cloud.core.resource.js | 170 ++++++++++++++++++++++++++++++
 2 files changed, 271 insertions(+), 1 deletion(-)

diff --git a/ui/jsp/resource.jsp b/ui/jsp/resource.jsp
index b73b896c190..a37de432789 100644
--- a/ui/jsp/resource.jsp
+++ b/ui/jsp/resource.jsp
@@ -65,7 +65,7 @@
                     </div>
                 </div>
                 <div class="dbrow_cell" style="width: 10%; border: none;">
-                	<div id="add_pod_shortcut" class="resadd_button" title="Add Cluster"></div>
+                	<div id="add_cluster_shortcut" class="resadd_button" title="Add Cluster"></div>
                 </div>
             </div>
             
@@ -595,6 +595,106 @@
 </div>
 <!-- Add Pod Dialog in resource page (end) -->
 
+<!-- Add Cluster Dialog in resource page (begin) -->
+<div id="dialog_add_external_cluster_in_resource_page" title="Add Cluster" style="display: none">
+    <p>
+        Add a hypervisor managed cluster for zone <b><span id="zone_name"></span></b>
+    </p>
+    <div class="dialog_formcontent">
+        <form action="#" method="post" id="form_acquire">
+        <ol>
+            <li>
+            	<label for="cluster_hypervisor">Hypervisor:</label>
+                <select class="select" id="cluster_hypervisor">
+                    <option value="XenServer" SELECTED>Xen Server</option>		
+                    <option value="KVM">KVM</option>										
+                    <option value="VmWare">VMware</option>										
+                </select>
+            </li>
+            <li input_group="vmware">
+                <label>
+                    Cluster Type:</label>
+                <select class="select" id="type_dropdown">
+                    <option value="CloudManaged">Cloud.com Managed</option>		
+                    <option value="ExternalManaged" SELECTED>vSphere Managed</option>										
+                </select>
+                <div id="pod_dropdown_errormsg" class="dialog_formcontent_errormsg" style="display: none;">
+                </div>
+            </li>   
+            
+            <li>
+                <label>
+                    Zone:</label>
+                <select class="select" id="zone_dropdown">
+                </select>
+                <div id="zone_dropdown_errormsg" class="dialog_formcontent_errormsg" style="display: none;">
+                </div>
+            </li>   
+            
+            <li>
+                <label>
+                    Pod:</label>
+                <select class="select" id="pod_dropdown">
+                </select>
+                <div id="pod_dropdown_errormsg" class="dialog_formcontent_errormsg" style="display: none;">
+                </div>
+            </li>   
+            <li input_group="vmware" input_sub_group="external">
+                <label for="cluster_hostname">
+                    vCenter Server:</label>
+                <input class="text" type="text" name="cluster_hostname" id="cluster_hostname" />
+                <div id="cluster_hostname_errormsg" class="dialog_formcontent_errormsg" style="display: none;">
+                </div>
+            </li>
+            <li input_group="vmware" input_sub_group="external">
+                <label for="cluster_username">
+                    vCenter User:</label>
+                <input class="text" type="text" name="cluster_username" id="cluster_username" />
+                <div id="cluster_username_errormsg" class="dialog_formcontent_errormsg" style="display: none;">
+                </div>
+            </li>
+            <li input_group="vmware" input_sub_group="external">
+                <label for="cluster_password">
+                    Password:</label>
+                <input class="text" type="password" name="cluster_password" id="cluster_password" autocomplete="off" />
+                <div id="cluster_password_errormsg" class="dialog_formcontent_errormsg" style="display: none;">
+                </div>
+            </li>
+            <li input_group="vmware" input_sub_group="external">
+                <label for="cluster_datacenter">
+                    vCenter Datacenter:</label>
+                <input class="text" type="text" name="cluster_datacenter" id="cluster_datacenter" />
+                <div id="cluster_datacenter_errormsg" class="dialog_formcontent_errormsg" style="display: none;">
+                </div>
+            </li>
+            <li>
+                <label for="cluster_name" id="cluster_name_label">
+                    vCenter Cluster:</label>
+                <input class="text" type="text" name="cluster_name" id="cluster_name" />
+                <div id="cluster_name_errormsg" class="dialog_formcontent_errormsg" style="display: none;">
+                </div>
+            </li>
+        </ol>
+        </form>
+    </div>
+    <!--Loading box-->
+    <div id="spinning_wheel" class="ui_dialog_loaderbox" style="display: none;">
+        <div class="ui_dialog_loader">
+        </div>
+        <p>
+            Adding....</p>
+    </div>
+    <!--Confirmation msg box-->
+    <!--Note: for error msg, just have to add error besides everything for eg. add error(class) next to ui_dialog_messagebox error, ui_dialog_msgicon error, ui_dialog_messagebox_text error.  -->
+    <div id="info_container" class="ui_dialog_messagebox error" style="display: none;">
+        <div id="icon" class="ui_dialog_msgicon error">
+        </div>
+        <div id="info" class="ui_dialog_messagebox_text error">
+            (info)</div>
+    </div>
+</div>
+<!-- Add Cluster Dialog in resource page (end) -->
+
 <!-- Add Host Dialog in resource page (begin) -->
 <div id="dialog_add_host_in_resource_page" title="Add Host" style="display: none">   
     <div class="dialog_formcontent">
diff --git a/ui/scripts/cloud.core.resource.js b/ui/scripts/cloud.core.resource.js
index 4ea0d898185..eefa6538a58 100644
--- a/ui/scripts/cloud.core.resource.js
+++ b/ui/scripts/cloud.core.resource.js
@@ -507,10 +507,12 @@ function afterLoadResourceJSP() {
 	
 	initDialog("dialog_update_cert", 450);	
 	initDialog("dialog_add_pod_in_resource_page", 370); 	
+	initDialog("dialog_add_external_cluster_in_resource_page", 320);
     initDialog("dialog_add_host_in_resource_page");  
     initDialog("dialog_add_pool_in_resource_page");
 		
 	initAddPodShortcut();
+	initAddClusterShortcut();
 	initAddHostShortcut();
 	initAddPrimaryStorageShortcut();
 		
@@ -679,6 +681,174 @@ function initAddPodShortcut() {
     });        
 }    
 
+//???
+function initAddClusterShortcut() {
+    var $dialogAddCluster = $("#dialog_add_external_cluster_in_resource_page");
+
+    var $zoneDropdown = $dialogAddCluster.find("#zone_dropdown");
+    var $podDropdown = $dialogAddCluster.find("#pod_dropdown");    	
+    
+    $.ajax({
+	    data: createURL("command=listZones&available=true"),
+	    dataType: "json",
+	    async: false,
+	    success: function(json) {
+	        var items = json.listzonesresponse.zone;			
+			if (items != null && items.length > 0) {	
+			    for(var i=0; i<items.length; i++)		   			    
+			        $zoneDropdown.append("<option value='" + items[i].id + "'>" + fromdb(items[i].name) + "</option>");
+			}	
+	    }
+	});    
+        
+    $zoneDropdown.bind("change", function(event) {
+	    var zoneId = $(this).val();	    
+	    if(zoneId == null)
+	        return;
+	    $.ajax({
+	        data: createURL("command=listZones&id="+zoneId),
+	        dataType: "json",	        
+	        success: function(json) {	            
+	            var zoneObj = json.listzonesresponse.zone[0];		           
+	            if(zoneObj.networktype == "Basic") { //basic-mode network (pod-wide VLAN)
+                    $dialogAddCluster.find("#guestip_container, #guestnetmask_container, #guestgateway_container").show();
+                }
+                else if(zoneObj.networktype == "Advanced") { //advanced-mode network (zone-wide VLAN)
+                    $dialogAddCluster.find("#guestip_container, #guestnetmask_container, #guestgateway_container").hide();     
+                }  	                    
+	        }
+	    });		    	   
+	    $.ajax({
+            data: createURL("command=listPods&zoneid="+zoneId),
+            dataType: "json",
+            async: false,
+            success: function(json) {            
+                var pods = json.listpodsresponse.pod;   
+                $podDropdown.empty(); 
+                if(pods != null && pods.length > 0) {
+                    for(var i=0; i<pods.length; i++)
+                        $podDropdown.append("<option value='" + pods[i].id + "'>" + fromdb(pods[i].name) + "</option>"); 	
+                }                 
+            }        
+        });  	    
+    });        
+  
+    var $hypervisorDropdown = $dialogAddCluster.find("#cluster_hypervisor");    
+    $hypervisorDropdown.change(function() {
+        if($(this).val() == "VmWare") {
+    		$('li[input_group="vmware"]', $dialogAddCluster).show();
+    		$dialogAddCluster.find("#type_dropdown").change();
+    	} else {
+    		$('li[input_group="vmware"]', $dialogAddCluster).hide();
+    		$("#cluster_name_label", $dialogAddCluster).text("Cluster:");
+    	}
+    });
+    
+    $dialogAddCluster.find("#type_dropdown").change(function() {
+    	if($(this).val() == "ExternalManaged") {
+    		$('li[input_sub_group="external"]', $dialogAddCluster).show();
+    		$("#cluster_name_label", $dialogAddCluster).text("vCenter Cluster:");
+    	} else {
+    		$('li[input_sub_group="external"]', $dialogAddCluster).hide();
+    		$("#cluster_name_label", $dialogAddCluster).text("Cluster:");
+    	}
+    });
+            
+    $("#add_cluster_shortcut").unbind("click").bind("click", function(event) {          
+        $dialogAddCluster.find("#info_container").hide();          
+         
+        $zoneDropdown.change();          
+        $hypervisorDropdown.change();         
+                
+        $dialogAddCluster.dialog('option', 'buttons', { 				
+	        "Add": function() { 
+	            var $thisDialog = $(this);		            
+	            			   
+		        // validate values
+			    var hypervisor = $thisDialog.find("#cluster_hypervisor").val();
+			    var clusterType="CloudManaged";
+			    if(hypervisor == "VmWare")
+			    	clusterType = $thisDialog.find("#type_dropdown").val();
+	            
+		        var isValid = true;
+		        if(hypervisor == "VmWare" && clusterType != "CloudManaged") {
+			        isValid &= validateString("vCenter Server", $thisDialog.find("#cluster_hostname"), $thisDialog.find("#cluster_hostname_errormsg"));
+			        isValid &= validateString("vCenter user", $thisDialog.find("#cluster_username"), $thisDialog.find("#cluster_username_errormsg"));
+			        isValid &= validateString("Password", $thisDialog.find("#cluster_password"), $thisDialog.find("#cluster_password_errormsg"));	
+			        isValid &= validateString("Datacenter", $thisDialog.find("#cluster_datacenter"), $thisDialog.find("#cluster_datacenter_errormsg"));	
+		        }
+		        isValid &= validateString("Cluster name", $thisDialog.find("#cluster_name"), $thisDialog.find("#cluster_name_errormsg"));	
+		        if (!isValid) 
+		            return;
+		            				
+				$thisDialog.find("#spinning_wheel").show(); 				
+				
+		        var array1 = [];
+			    array1.push("&hypervisor="+hypervisor);
+			    array1.push("&clustertype=" + clusterType);
+			    
+			    var zoneId = $thisDialog.find("#zone_dropdown").val();;
+		        array1.push("&zoneId="+zoneId);
+		        
+		        //expand zone in left menu tree (to show pod, cluster under the zone) 
+				var $zoneNode = $("#leftmenu_zone_tree").find("#tree_container").find("#zone_" + zoneId);							
+				if($zoneNode.find("#zone_arrow").hasClass("expanded_close"))
+				    $zoneNode.find("#zone_arrow").click();
+										             
+		        var podId = $thisDialog.find("#pod_dropdown").val();
+		        array1.push("&podId="+podId);
+
+		        var clusterName = trim($thisDialog.find("#cluster_name").val());
+		        if(hypervisor == "VmWare" && clusterType != "CloudManaged") {
+			        var username = trim($thisDialog.find("#cluster_username").val());
+			        array1.push("&username="+todb(username));
+					
+			        var password = trim($thisDialog.find("#cluster_password").val());
+			        array1.push("&password="+todb(password));
+			        
+			        var hostname = trim($thisDialog.find("#cluster_hostname").val());
+			        var dcName = trim($thisDialog.find("#cluster_datacenter").val());
+			        var url;					
+			        if(hostname.indexOf("http://")==-1)
+			            url = "http://" + todb(hostname);
+			        else
+			            url = hostname;
+			        url += "/" + todb(dcName) + "/" + todb(clusterName);
+			        array1.push("&url=" + todb(url));
+			        
+			        clusterName = hostname + "/" + dcName + "/" + clusterName
+		        } 
+		        
+		        array1.push("&clustername=" + todb(clusterName));
+									
+		        $.ajax({
+			       data: createURL("command=addCluster" + array1.join("")),
+			        dataType: "json",
+			        success: function(json) {
+			            $thisDialog.find("#spinning_wheel").hide();
+			            $thisDialog.dialog("close");
+					
+					    var clusterTotal = parseInt($("#cluster_total").text());
+		                clusterTotal++;
+		                $("#cluster_total").text(clusterTotal.toString());  
+					
+                        //clickClusterNodeAfterAddHost("new_cluster_radio", podId, clusterName, null, $thisDialog);                        
+			        },			
+                    error: function(XMLHttpResponse) {	
+						handleError(XMLHttpResponse, function() {							
+							handleErrorInDialog(XMLHttpResponse, $thisDialog);							
+						});
+                    }				
+		        });
+	        }, 
+	        "Cancel": function() { 
+		        $(this).dialog("close"); 
+	        } 
+        }).dialog("open");            
+        return false;
+    });
+}
+
 function initAddHostShortcut() {
     var $dialogAddHost = $("#dialog_add_host_in_resource_page");