From 8b84696c0268ae85ad1eb8158782f8349fbfc8f4 Mon Sep 17 00:00:00 2001
From: Jessica Wang <jessica@cloud.com>
Date: Tue, 26 Jul 2011 10:15:41 -0700
Subject: [PATCH] bug 10801: cloudStack - IP Address page - Load Balancer tab -
 add Source CIDR.

---
 ui/jsp/ipaddress.jsp               | 98 ++++++++++++++++--------------
 ui/scripts/cloud.core.ipaddress.js | 38 ++++++++----
 2 files changed, 79 insertions(+), 57 deletions(-)

diff --git a/ui/jsp/ipaddress.jsp b/ui/jsp/ipaddress.jsp
index 18959859c11..a0b4252d64e 100644
--- a/ui/jsp/ipaddress.jsp
+++ b/ui/jsp/ipaddress.jsp
@@ -376,53 +376,61 @@ dictionary = {
         </div>        
         <div id="tab_container">
 	        <div class="grid_container">
-	            <div class="grid_header">
-	                <div class="grid_header_cell" style="width: 18%; ">
+	            <div class="grid_header">	            
+	                <div class="grid_header_cell" style="width: 25%; ">
+	                    <div class="grid_header_title">
+	                        <fmt:message key="label.cidr.list"/></div>
+	                </div>		            
+	                <div class="grid_header_cell" style="width: 14%; ">
 	                    <div class="grid_header_title">
 	                        <fmt:message key="label.name"/></div>
 	                </div>
-	                <div class="grid_header_cell" style="width: 14%; ">
+	                <div class="grid_header_cell" style="width: 12%; ">
 	                    <div class="grid_header_title">
 	                        <fmt:message key="label.public.port"/></div>
 	                </div>
-	                <div class="grid_header_cell" style="width: 14%; ">
+	                <div class="grid_header_cell" style="width: 12%; ">
 	                    <div class="grid_header_title">
 	                        <fmt:message key="label.private.port"/></div>
 	                </div>
-	                <div class="grid_header_cell" style="width: 15%; ">
+	                <div class="grid_header_cell" style="width: 12%; ">
 	                    <div class="grid_header_title">
 	                        <fmt:message key="label.algorithm"/></div>
 	                </div>	                
-	                <div class="grid_header_cell" style="width: 10%; ">
+	                <div class="grid_header_cell" style="width: 6%; ">
 	                    <div class="grid_header_title">
 	                        <fmt:message key="label.state"/></div>
 	                </div>	                
-	                <div class="grid_header_cell" style="width: 27%; ">
+	                <div class="grid_header_cell" style="width: 17%; ">
 	                    <div class="grid_header_title">
 	                        <fmt:message key="label.actions"/></div>
 	                </div>
 	            </div>
-	            <div class="grid_rows even" id="create_load_balancer_row">
-	                <div class="grid_row_cell" style="width: 18%; ">
+	            <div class="grid_rows even" id="create_load_balancer_row">	            
+	                <div class="grid_row_cell" style="width: 25%; ">  
+	                    <input id="cidr" class="text" type="text" />
+	                    <div id="cidr_errormsg" class="errormsg" style="display: none;"></div>
+	                </div>	            
+	                <div class="grid_row_cell" style="width: 14%; ">
 	                    <input id="name" class="text" style="width: 70%; " type="text" />
-	                    <div id="name_errormsg" class="errormsg" style="display: none;">Error msg will appear here</div>
+	                    <div id="name_errormsg" class="errormsg" style="display: none;"></div>
 	                </div>
-	                <div class="grid_row_cell" style="width: 14%;">
+	                <div class="grid_row_cell" style="width: 12%;">
 	                    <input id="public_port" class="text" style="width: 70%; " type="text" />
-	                    <div id="public_port_errormsg" class="errormsg" style="display: none;">Error msg will appear here</div>
+	                    <div id="public_port_errormsg" class="errormsg" style="display: none;"></div>
 	                </div>
-	                <div class="grid_row_cell" style="width: 14%;">
+	                <div class="grid_row_cell" style="width: 12%;">
 	                    <input id="private_port" class="text" style="width: 70%; " type="text" />
-	                    <div id="private_port_errormsg" class="errormsg" style="display: none;">Error msg will appear here</div>
+	                    <div id="private_port_errormsg" class="errormsg" style="display: none;"></div>
 	                </div>
-	                <div class="grid_row_cell" style="width: 15%;">
+	                <div class="grid_row_cell" style="width: 12%;">
 	                    <select id="algorithm_select" class="select" style="width: 70%;">   	                      
 	                    </select>
 	                </div>	                
-	                <div class="grid_row_cell" style="width: 10%;">	  
+	                <div class="grid_row_cell" style="width: 6%;">	  
                     	<div class="row_celltitles" style="padding:1px;"></div>         
 	                </div>	                
-	                <div class="grid_row_cell" style="width: 27%; ">
+	                <div class="grid_row_cell" style="width: 17%; ">
 	                    <div class="row_celltitles">
 	                        <a id="add_link" href="#"><fmt:message key="label.add"/></a></div>
 	                </div>
@@ -492,27 +500,26 @@ dictionary = {
 
 <!-- Load Balancer Template (begin) -->
 <div class="grid_rows odd" id="load_balancer_template" style="display:none">
-    <div id="row_container">
-        <div class="grid_row_cell" style="width: 18%; ">
-            <div class="row_celltitles" id="name">
-                LB#1</div>
-        </div>
-        <div class="grid_row_cell" style="width: 14%; ">
-            <div class="row_celltitles" id="public_port">
-                8080</div>
-        </div>
-        <div class="grid_row_cell" style="width: 14%; ">
-            <div class="row_celltitles" id="private_port">
-                80</div>
-        </div>
-        <div class="grid_row_cell" style="width: 15%; ">
-            <div class="row_celltitles" id="algorithm">
-                (algorithm)</div>
+    <div id="row_container">        
+        <div class="grid_row_cell" style="width: 25%; ">
+            <div class="row_celltitles" id="cidr" style="padding:1px;"></div>
         </div>        
-        <div class="grid_row_cell" style="width: 10%; ">
+        <div class="grid_row_cell" style="width: 14%; ">
+            <div class="row_celltitles" id="name"></div>
+        </div>
+        <div class="grid_row_cell" style="width: 12%; ">
+            <div class="row_celltitles" id="public_port"></div>
+        </div>
+        <div class="grid_row_cell" style="width: 12%; ">
+            <div class="row_celltitles" id="private_port"></div>
+        </div>
+        <div class="grid_row_cell" style="width: 12%; ">
+            <div class="row_celltitles" id="algorithm"></div>
+        </div>        
+        <div class="grid_row_cell" style="width: 6%; ">
             <div class="row_celltitles" id="state" style="padding:1px;"></div>
         </div>  
-        <div class="grid_row_cell" style="width: 27%; ">
+        <div class="grid_row_cell" style="width: 17%; ">
             <div class="row_celltitles">
                 <a id="manage_link" href="#" style="float:left;"><fmt:message key="label.manage"/></a>
                 <a id="edit_link" href="#" style="float:left; margin-left:15px;"><fmt:message key="label.edit"/></a>
@@ -527,25 +534,28 @@ dictionary = {
             </p>
         </div>
     </div> 
-    <div class="grid_rows odd" id="row_container_edit" style="display:none; border-bottom:none;">
-        <div class="grid_row_cell" style="width: 20%; ">
-            <input id="name" class="text" style="width: 70%;" type="text" />
-            <div id="name_errormsg" class="errormsg" style="display: none;">Error msg will appear here</div>
-        </div>
+    <div class="grid_rows odd" id="row_container_edit" style="display:none; border-bottom:none;">        
+        <div class="grid_row_cell" style="width: 25%; ">
+            <div class="row_celltitles" id="cidr" style="padding:1px;"></div>
+        </div>       
         <div class="grid_row_cell" style="width: 14%; ">
+            <input id="name" class="text" style="width: 70%;" type="text" />
+            <div id="name_errormsg" class="errormsg" style="display: none;"></div>
+        </div>
+        <div class="grid_row_cell" style="width: 12%; ">
             <div class="row_celltitles" id="public_port"></div>
         </div>
-        <div class="grid_row_cell" style="width: 14%; ">
+        <div class="grid_row_cell" style="width: 12%; ">
             <div class="row_celltitles" id="private_port"></div>
         </div>
-        <div class="grid_row_cell" style="width: 15%; ">
+        <div class="grid_row_cell" style="width: 12%; ">
             <select id="algorithm_select" class="select" style="width: 70%;">                 
             </select>
         </div>        
-        <div class="grid_row_cell" style="width: 10%; ">
+        <div class="grid_row_cell" style="width: 6%; ">
             <div class="row_celltitles" id="state"></div>
         </div>        
-        <div class="grid_row_cell" style="width: 25%; ">
+        <div class="grid_row_cell" style="width: 17%; ">
             <div class="row_celltitles">
                 <a id="save_link" href="#" style="float:left;"><fmt:message key="label.save"/></a>
                 <a id="cancel_link" href="#" style="float:left; margin-left:15px; display:inline;"><fmt:message key="label.cancel"/></a>
diff --git a/ui/scripts/cloud.core.ipaddress.js b/ui/scripts/cloud.core.ipaddress.js
index 3969d3495f2..65f7bb8855a 100644
--- a/ui/scripts/cloud.core.ipaddress.js
+++ b/ui/scripts/cloud.core.ipaddress.js
@@ -399,7 +399,8 @@ function afterLoadIpJSP() {
     
     createLoadBalancerRow.find("#add_link").bind("click", function(event){		
 	    // validate values		    
-		var isValid = true;					
+		var isValid = true;		
+		isValid &= validateCIDRList("CIDR", createLoadBalancerRow.find("#cidr"), createLoadBalancerRow.find("#cidr_errormsg"), true); //optional		
 		isValid &= validateString("Name", createLoadBalancerRow.find("#name"), createLoadBalancerRow.find("#name_errormsg"));
 		isValid &= validateInteger("Public Port", createLoadBalancerRow.find("#public_port"), createLoadBalancerRow.find("#public_port_errormsg"), 1, 65535);
 		isValid &= validateInteger("Private Port", createLoadBalancerRow.find("#private_port"), createLoadBalancerRow.find("#private_port_errormsg"), 1, 65535);				
@@ -414,17 +415,24 @@ function afterLoadIpJSP() {
 		 			
 		var $midmenuItem1 = $("#right_panel_content").data("$midmenuItem1");        
         var ipObj = $midmenuItem1.data("jsonObj");
-       	 
-	    var name = createLoadBalancerRow.find("#name").val();  
-	    var publicPort = createLoadBalancerRow.find("#public_port").val();
-	    var privatePort = createLoadBalancerRow.find("#private_port").val();
-	    var algorithm = createLoadBalancerRow.find("#algorithm_select").val();  
-	    		   
+       	 	    
 	    var array1 = [];
-        array1.push("&publicipid="+ipObj.id);    
-        array1.push("&name="+todb(name));              
-        array1.push("&publicport="+publicPort);
-        array1.push("&privateport="+privatePort);
+        array1.push("&publicipid="+ipObj.id);  
+        
+        var cidr = createLoadBalancerRow.find("#cidr").val();
+        if(cidr != null && cidr.length > 0)
+        	array1.push("&cidrlist="+cidr);
+        
+        var name = createLoadBalancerRow.find("#name").val();  
+        array1.push("&name="+todb(name));              
+        
+        var publicPort = createLoadBalancerRow.find("#public_port").val();
+        array1.push("&publicport="+publicPort);
+        
+        var privatePort = createLoadBalancerRow.find("#private_port").val();
+        array1.push("&privateport="+privatePort);
+        
+        var algorithm = createLoadBalancerRow.find("#algorithm_select").val();  
         array1.push("&algorithm="+algorithm);
        
         $.ajax({
@@ -1656,7 +1664,10 @@ function ipClearLoadBalancerTab() {
 function loadBalancerJsonToTemplate(jsonObj, $template) {	
     var loadBalancerId = fromdb(jsonObj.id);	    
     $template.attr("id", "loadBalancer_" + loadBalancerId).data("loadBalancerId", loadBalancerId);		    
-    
+       
+    $template.find("#row_container #cidr").text(fromdb(jsonObj.cidrlist));
+    $template.find("#row_container_edit #cidr").text(fromdb(jsonObj.cidrlist));
+        
     $template.find("#row_container #name").text(fromdb(jsonObj.name));
     $template.find("#row_container_edit #name").val(fromdb(jsonObj.name));
     
@@ -1909,7 +1920,8 @@ function loadBalancerJsonToTemplate(jsonObj, $template) {
 }	
 
 function refreshCreateLoadBalancerRow() {
-    var createLoadBalancerRow = $("#tab_content_load_balancer #create_load_balancer_row");
+    var createLoadBalancerRow = $("#tab_content_load_balancer #create_load_balancer_row");
+    createLoadBalancerRow.find("#cidr").val("");  
     createLoadBalancerRow.find("#name").val("");  
     createLoadBalancerRow.find("#public_port").val("");
     createLoadBalancerRow.find("#private_port").val("");