From ea4062ca0a0465e1bd109c9a5e5222b9854890df Mon Sep 17 00:00:00 2001
From: Jessica Wang <jessica@cloud.com>
Date: Sun, 19 Sep 2010 00:00:00 -0700
Subject: [PATCH] new UI - load balancer - implement manage link. Clicking
 manage link will expand a subgrid of instances assigned to this load balancer
 policy.

---
 ui/new/jsp/ip_address.jsp               |  50 +++++++---
 ui/new/scripts/cloud.core2.ipaddress.js | 123 +++++++++++++++++++-----
 2 files changed, 139 insertions(+), 34 deletions(-)

diff --git a/ui/new/jsp/ip_address.jsp b/ui/new/jsp/ip_address.jsp
index 0ad5ec1069d..1b5b7778a17 100644
--- a/ui/new/jsp/ip_address.jsp
+++ b/ui/new/jsp/ip_address.jsp
@@ -278,9 +278,7 @@
                 <a id="delete_link" href="#">Delete</a></div>
             <div class="row_celltitles">
                 <a id="edit_link" href="#">Edit</a></div>
-        </div>
-        
-        
+        </div>       
         <div class="gridrow_loaderbox" style="display: none;" id="spinning_wheel">
             <div class="gridrow_loader">
             </div>
@@ -288,10 +286,36 @@
                 Waiting &hellip;
             </p>
         </div>
-        
-        
-    </div>
-    <div class="grid_detailspanel" id="vm_subgrid" style="display: none;">
+    </div> 
+    <div class="grid_rows odd" id="row_container_edit" style="display:none">
+        <div class="grid_row_cell" style="width: 25%;">
+            <input id="name" class="text" style="width: 90%;" type="text" />
+            <div id="name_errormsg" class="errormsg" style="display: none;">Error msg will appear here</div>
+        </div>
+        <div class="grid_row_cell" style="width: 15%;">
+            <div class="row_celltitles" id="public_port">8080</div>
+        </div>
+        <div class="grid_row_cell" style="width: 15%;">
+            <input id="private_port" class="text" style="width: 90%;" type="text" />
+            <div id="private_port_errormsg" class="errormsg" style="display: none;">Error msg will appear here</div>
+        </div>
+        <div class="grid_row_cell" style="width: 15%;">
+            <select id="algorithm_select" class="select" style="width: 90%;">                       
+				<option value="roundrobin">roundrobin</option>
+                <option value="leastconn">leastconn</option>
+                <option value="source">source</option>
+            </select>
+        </div>
+        <div class="grid_row_cell" style="width: 29%;">
+            <div class="row_celltitles">
+                <a id="save_link" href="#">Save</a>
+            </div>
+            <div class="row_celltitles">
+                <a id="cancel_link" href="#">Cancel</a>
+            </div>
+        </div>
+    </div>  
+    <div class="grid_detailspanel" id="management_area" style="display: none;">
         <div class="grid_details_pointer">
         </div>
         <div class="grid_detailsbox">
@@ -317,7 +341,7 @@
                         Assigning instance to load balancer policy &hellip;</p>
                 </div>
             </div>
-            <div id="vm_subgrid" class="ip_description_managearea" style="display: none;">
+            <div id="grid_content" class="ip_description_managearea">
             </div>
         </div>
     </div>
@@ -325,14 +349,16 @@
 <!-- Load Balancer Template (end) -->
 
 <!-- Load Balancer's VM subgrid template (begin) -->
-<div class="grid_details_row odd" style="display:none">
+<div id="load_balancer_vm_template" class="grid_details_row odd" style="display:none">
     <div class="grid_row_cell" style="width: 9%;">
         <div class="row_celltitles">
             <img src="images/network_managevmicon.gif" /></div>
     </div>
-    <div class="grid_row_cell" style="width: 60%;">
-        <div class="row_celltitles">
-            1-2-2-TEST</div>
+    <div class="grid_row_cell" style="width: 50%;">
+        <div class="row_celltitles" id="vm_name"></div>
+    </div>
+    <div class="grid_row_cell" style="width: 10%;">
+        <div class="row_celltitles" id="vm_private_ip"></div>
     </div>
     <div class="grid_row_cell" style="width: 30%;">
         <div class="row_celltitles">
diff --git a/ui/new/scripts/cloud.core2.ipaddress.js b/ui/new/scripts/cloud.core2.ipaddress.js
index 041c5b1a111..bfc8c54c56b 100644
--- a/ui/new/scripts/cloud.core2.ipaddress.js
+++ b/ui/new/scripts/cloud.core2.ipaddress.js
@@ -122,8 +122,7 @@ function afterLoadIpJSP() {
 					$(this).remove();
 				});
 		    }			
-		});  
-	    
+		});  	    
 	    return false;
 	});
 	
@@ -429,40 +428,37 @@ function loadBalancerJsonToTemplate(jsonObj, template) {
     
     template.find("#row_container #algorithm").text(jsonObj.algorithm);	
     template.find("#row_container_edit #algorithm").val(jsonObj.algorithm);			    	    
-    
-    /*
-    template.find("#manage_link").unbind("click").bind("click", function(event){		        
-        var vmSubgrid = template.find("#vm_subgrid");
-        if(vmSubgrid.css("display") == "none") {
+        
+    template.find("#manage_link").unbind("click").bind("click", function(event){	
+        var managementArea = template.find("#management_area");
+        var vmSubgrid = managementArea.find("#grid_content");
+        if(managementArea.css("display") == "none") {
             vmSubgrid.empty();         
             $.ajax({
 			    cache: false,
-		       data: createURL("command=listLoadBalancerRuleInstances&id="+loadBalancerId),
+		        data: createURL("command=listLoadBalancerRuleInstances&id="+loadBalancerId),
 			    dataType: "json",
 			    success: function(json) {					        
-				    var instances = jsonObj.listloadbalancerruleinstancesresponse.loadbalancerruleinstance;						
+				    var instances = json.listloadbalancerruleinstancesresponse.loadbalancerruleinstance;						
 				    if (instances != null && instances.length > 0) {							
 					    for (var i = 0; i < instances.length; i++) {                                  
                             var lbVmTemplate = $("#load_balancer_vm_template").clone();	                                    									    											    											    
 						    var obj = {"loadBalancerId": loadBalancerId, "vmId": instances[i].id, "vmName": getVmName(instances[i].name, instances[i].displayname), "vmPrivateIp": instances[i].privateip};	
 						    lbVmObjToTemplate(obj, lbVmTemplate);		
-						    template.find("#vm_subgrid").append(lbVmTemplate.show());	                                   
+						    vmSubgrid.append(lbVmTemplate.show());	                                   
 					    }
 				    } 
 			    }
 		    });        
-            vmSubgrid.show();		           
+            managementArea.show();		           
         }
         else {
-            vmSubgrid.hide();
-        }	
-            
-        var addVmToLbRow = template.find("#add_vm_to_lb_row");
-        (addVmToLbRow.css("display") == "none")?addVmToLbRow.show():addVmToLbRow.hide();	
-            	        
+            managementArea.hide();
+        }		        
         return false;
     });
-    
+   
+    //??? 
     var loadingContainer = template.find("#loading_container");		
     var rowContainer = template.find("#row_container");      
     var rowContainerEdit = template.find("#row_container_edit");  
@@ -548,7 +544,7 @@ function loadBalancerJsonToTemplate(jsonObj, template) {
         array1.push("&algorithm=" + algorithm);
                                                       
         $.ajax({
-       data: createURL("command=updateLoadBalancerRule"+array1.join("")),
+            data: createURL("command=updateLoadBalancerRule"+array1.join("")),
 			dataType: "json",
 			success: function(json) {					    		   	    									 
 				var jobId = jsonObj.updateloadbalancerruleresponse.jobid;					        
@@ -606,7 +602,7 @@ function loadBalancerJsonToTemplate(jsonObj, template) {
 		var rowContainer =  template.find("#adding_row_container").hide();
 		    	
 		$.ajax({
-		       data: createURL("command=assignToLoadBalancerRule&id="+loadBalancerId+"&virtualmachineid="+vmId),
+		   data: createURL("command=assignToLoadBalancerRule&id="+loadBalancerId+"&virtualmachineid="+vmId),
 			dataType: "json",
 			success: function(json) {
 				var lbInstanceJSON = jsonObj.assigntoloadbalancerruleresponse;
@@ -628,7 +624,7 @@ function loadBalancerJsonToTemplate(jsonObj, template) {
 									    var lbVmTemplate = $("#load_balancer_vm_template").clone();											    											    											    
 									    var obj = {"loadBalancerId": loadBalancerId, "vmId": vmId, "vmName": vmName, "vmPrivateIp": vmPrivateIp};	
 									    lbVmObjToTemplate(obj, lbVmTemplate);		
-									    template.find("#vm_subgrid").append(lbVmTemplate.show());	
+									    template.find("#management_area #grid_content").append(lbVmTemplate.show());	
 									    refreshLbVmSelect(template, loadBalancerId);											    
 		                                loading.hide();  
 		                                rowContainer.show(); 
@@ -658,7 +654,7 @@ function loadBalancerJsonToTemplate(jsonObj, template) {
 		});	        
         return false;
     });  
-    */
+    //???
 }	
 
 function refreshCreateLoadBalancerRow() {
@@ -670,4 +666,87 @@ function refreshCreateLoadBalancerRow() {
 }
     
 
+function lbVmObjToTemplate(obj, template) {
+    template.find("#vm_name").text(obj.vmName);
+	template.find("#vm_private_ip").text(obj.vmPrivateIp);			
+	template.find("#remove_link").bind("click", function(event){			    
+	    var $spinningWheel = $template.find("#row_container").find("#spinning_wheel");		    
+        $spinningWheel.show();   
+	    
+	    //var loading = template.find("#deleting_loading").show();
+	    //var rowContainer = template.find("#deleting_row_container").hide();
+	    						    		
+        $.ajax({
+	       data: createURL("command=removeFromLoadBalancerRule&id="+obj.loadBalancerId+"&virtualmachineid="+obj.vmId),
+			dataType: "json",
+			success: function(json) {
+				var lbJSON = json.removefromloadbalancerruleresponse;
+				var timerKey = "removeVmFromLb"+obj.vmId;
+				$("body").everyTime(
+					5000,
+					timerKey,
+					function() {
+						$.ajax({
+						       data: createURL("command=queryAsyncJobResult&jobId="+lbJSON.jobid),
+							dataType: "json",
+							success: function(json) {
+								var result = json.queryasyncjobresultresponse;
+								if (result.jobstatus == 0) {
+									return; //Job has not completed
+								} else {
+									$("body").stopTime(timerKey);
+									if (result.jobstatus == 1) { // Succeeded											    
+									    refreshLbVmSelect($("#loadBalancer_" + obj.loadBalancerId), obj.loadBalancerId);
+										template.fadeOut("slow", function(event) {
+											$(this).remove();
+										});
+									} else if (result.jobstatus == 2) { // Failed													
+										$("#dialog_error").html("<p style='color:red'>We were unable to remove the Virtual Instance: "+vmName + " from your load balancer policy.  Please try again.").dialog("open");
+										$spinningWheel.hide();   										
+									}
+								}
+							},
+							error: function(XMLHttpResponse) {
+								$("body").stopTime(timerKey);
+								handleError(XMLHttpResponse);
+								$spinningWheel.hide(); 
+							}
+						});
+					},
+					0
+				);
+			},
+			error: function(XMLHttpResponse) {
+			    handleError(XMLHttpResponse);
+			    $spinningWheel.hide(); 
+			}
+		});		
+	    return false;
+	});						
+}		
+
+function refreshLbVmSelect(template, loadBalancerId) {		
+    var vmSelect = template.find("#add_vm_to_lb_row #vm_select");		    	    
+    // Load the select box with the VMs that haven't been applied a LB rule to.	        
+    $.ajax({
+	    cache: false,
+	    data: createURL("command=listLoadBalancerRuleInstances&id="+loadBalancerId+"&applied=false"),
+	    dataType: "json",
+	    success: function(json) {				        			        
+		    var instances = json.listloadbalancerruleinstancesresponse.loadbalancerruleinstance;
+		    vmSelect.empty();
+		    if (instances != null && instances.length > 0) {
+			    for (var i = 0; i < instances.length; i++) {
+			        var vmName = getVmName(instances[i].name, instances[i].displayname);
+				    html = $("<option value='" + instances[i].id + "'>" + vmName + "</option>")
+				    html.data("vmPrivateIp", instances[i].privateip).data("vmName", vmName);
+				    vmSelect.append(html); 
+			    }
+		    } else {
+			    vmSelect.append("<option value=''>None Available</option>");
+		    }
+	    }
+    });			
+}
+
 //***** Load Balancer tab (end) ************************************************************************************************************
\ No newline at end of file