From 3822192879087cbdb464d5b278f3fc554b0ef3bf Mon Sep 17 00:00:00 2001
From: Jessica Wang <jessica@cloud.com>
Date: Fri, 19 Aug 2011 13:13:21 -0700
Subject: [PATCH] bug 11176: cloudStack - IP Address page - Firewall tab - add
 firewall rule - (1) Hide ICMP Type, ICMP Code when protocol TCP or UDP is
 selected. (2) Hide Start Port, End Port when protocol ICMP is selected.

---
 ui/jsp/ipaddress.jsp               | 106 ++++++++++++++---------------
 ui/scripts/cloud.core.ipaddress.js |  24 +++----
 2 files changed, 65 insertions(+), 65 deletions(-)

diff --git a/ui/jsp/ipaddress.jsp b/ui/jsp/ipaddress.jsp
index 88424a0fab0..5ea52ec3050 100644
--- a/ui/jsp/ipaddress.jsp
+++ b/ui/jsp/ipaddress.jsp
@@ -233,61 +233,61 @@ dictionary = {
         <div id="tab_container">
 	        <div class="grid_container" id="grid_container">
 	            <div class="grid_header">	                
-	                <div class="grid_header_cell" style="width: 30%; ">
+	                <div class="grid_header_cell" style="padding:1px; width: 30%; ">
 	                    <div class="grid_header_title">
 	                        <fmt:message key="label.cidr.list"/></div>
+	                </div>	
+	                <div class="grid_header_cell" style="padding:1px; width: 15%; ">
+	                    <div class="grid_header_title">
+	                        <fmt:message key="label.protocol"/></div>
 	                </div>	 
-	                <div class="grid_header_cell" style="width: 10%; ">
+	                <div class="grid_header_cell" style="padding:1px; width: 10%; ">
 	                    <div class="grid_header_title">
 	                        <fmt:message key="label.start.port"/></div>
 	                </div>
-	                <div class="grid_header_cell" style="width: 10%; ">
+	                <div class="grid_header_cell" style="padding:1px; width: 10%; ">
 	                    <div class="grid_header_title">
 	                        <fmt:message key="label.end.port"/></div>
-	                </div>
-	                <div class="grid_header_cell" style="width: 15%; ">
-	                    <div class="grid_header_title">
-	                        <fmt:message key="label.protocol"/></div>
-	                </div>		                
-	                <div class="grid_header_cell" style="width: 10%; ">
+	                </div>	              	                
+	                <div class="grid_header_cell" style="padding:1px; width: 10%; ">
 	                    <div class="grid_header_title">
 	                        <fmt:message key="ICMP.type"/></div>
 	                </div>
-	                 <div class="grid_header_cell" style="width: 10%; ">
+	                 <div class="grid_header_cell" style="padding:1px; width: 10%; ">
 	                    <div class="grid_header_title">
 	                        <fmt:message key="ICMP.code"/></div>
 	                </div>
-	                <div class="grid_header_cell" style="width: 10%; ">
+	                <div class="grid_header_cell" style="padding:1px; width: 10%; ">
 	                    <div class="grid_header_title">
 	                        <fmt:message key="label.actions"/></div>
 	                </div>
 	            </div>
 	            <div class="grid_rows even" id="create_firewall_row">	            
-	                <div class="grid_row_cell" style="width: 30%; ">  
+	                <div class="grid_row_cell" style="padding:1px; width: 30%; ">  
 	                    <input id="cidr" class="text" type="text" />
-	                    <div id="cidr_errormsg" class="errormsg" style="display: none;">Error msg will appear here</div>
-	                </div>	            
-	                <div class="grid_row_cell" style="width: 10%; ">
-	                    <input id="start_port" class="text" style="width: 70%;" type="text" disabled="disabled" />
-	                    <div id="start_port_errormsg" class="errormsg" style="display: none;">Error msg will appear here</div>
-	                </div>
-	                <div class="grid_row_cell" style="width: 10%; ">
-	                    <input id="end_port" class="text" style="width: 70%;" type="text" disabled="disabled" />
-	                    <div id="end_port_errormsg" class="errormsg" style="display: none;">Error msg will appear here</div>
-	                </div>
-	                <div class="grid_row_cell" style="width: 15%; ">  
+	                    <div id="cidr_errormsg" class="errormsg" style="display: none;"></div>
+	                </div>	
+	                <div class="grid_row_cell" style="padding:1px; width: 15%; ">  
 	                   <select class="select" id="protocol" style="width:70%;">	                  
 	                   </select>
-	                </div>	 	                
-	                <div class="grid_row_cell" style="width: 10%; ">
-	                    <input id="ICMP_type" class="text" style="width: 70%;" type="text" disabled="disabled" />
-	                    <div id="ICMP_type_errormsg" class="errormsg" style="display: none;">Error msg will appear here</div>
+	                </div>	 	
+	                <div class="grid_row_cell" style="padding:1px; width: 10%; ">
+	                    <input id="start_port" class="text" style="width: 70%;" type="text" />
+	                    <div id="start_port_errormsg" class="errormsg" style="display: none;"></div>
 	                </div>
-	                <div class="grid_row_cell" style="width: 10%; ">
-	                    <input id="ICMP_code" class="text" style="width: 70%;" type="text" disabled="disabled" />
-	                    <div id="ICMP_code_errormsg" class="errormsg" style="display: none;">Error msg will appear here</div>
+	                <div class="grid_row_cell" style="padding:1px; width: 10%; ">
+	                    <input id="end_port" class="text" style="width: 70%;" type="text" />
+	                    <div id="end_port_errormsg" class="errormsg" style="display: none;"></div>
+	                </div>	                               
+	                <div class="grid_row_cell" style="padding:1px; width: 10%; ">
+	                    <input id="ICMP_type" class="text" style="width: 70%;" type="text" />
+	                    <div id="ICMP_type_errormsg" class="errormsg" style="display: none;"></div>
 	                </div>
-	                <div class="grid_row_cell" style="width: 10%; ">
+	                <div class="grid_row_cell" style="padding:1px; width: 10%; ">
+	                    <input id="ICMP_code" class="text" style="width: 70%;" type="text" />
+	                    <div id="ICMP_code_errormsg" class="errormsg" style="display: none;"></div>
+	                </div>
+	                <div class="grid_row_cell" style="padding:1px; width: 10%; ">
 	                    <div class="row_celltitles">
 	                        <a id="add_link" href="#"><fmt:message key="label.add"/></a></div>
 	                </div>
@@ -336,11 +336,11 @@ dictionary = {
 	            <div class="grid_rows even" id="create_port_range_row">
 	                <div class="grid_row_cell" style="width: 15%; ">
 	                    <input id="start_port" class="text" style="width: 70%;" type="text" />
-	                    <div id="start_port_errormsg" class="errormsg" style="display: none;">Error msg will appear here</div>
+	                    <div id="start_port_errormsg" class="errormsg" style="display: none;"></div>
 	                </div>
 	                <div class="grid_row_cell" style="width: 15%; ">
 	                    <input id="end_port" class="text" style="width: 70%;" type="text" />
-	                    <div id="end_port_errormsg" class="errormsg" style="display: none;">Error msg will appear here</div>
+	                    <div id="end_port_errormsg" class="errormsg" style="display: none;"></div>
 	                </div>
 	                <div class="grid_row_cell" style="width: 15%; ">  
 	                   <select class="select" id="protocol" style="width:70%;">	                  
@@ -401,21 +401,21 @@ dictionary = {
 	            <div class="grid_rows even" id="create_port_forwarding_row">	               
 	                <div class="grid_row_cell" style="width: 15%; ">
 	                    <input id="public_port" class="text" style="width: 30%; " 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>
 	                    
 	                    <span style="float:left;padding-left:10px"> - </span>
 	                    
 	                    <input id="public_end_port" class="text" style="width: 30%; " type="text" />
-	                    <div id="public_end_port_errormsg" class="errormsg" style="display: none;">Error msg will appear here</div>	                    
+	                    <div id="public_end_port_errormsg" class="errormsg" style="display: none;"></div>	                    
 	                </div>
 	                <div class="grid_row_cell" style="width: 15%;">
                         <input id="private_port" class="text" style="width: 30%; " 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>
 	                    
 	                    <span style="float:left;padding-left:10px"> - </span>
 	                    
 	                    <input id="private_end_port" class="text" style="width: 30%; " type="text" />
-	                    <div id="private_end_port_errormsg" class="errormsg" style="display: none;">Error msg will appear here</div>	 
+	                    <div id="private_end_port_errormsg" class="errormsg" style="display: none;"></div>	 
 	                </div>
 	                <div class="grid_row_cell" style="width: 10%; ">  
 	                   <select class="select" id="protocol" style="width:70%;">	                    
@@ -582,25 +582,25 @@ dictionary = {
 <!-- Firewall template (begin) -->
 <div class="grid_rows odd" id="firewall_template" style="display: none">    
     <div id="row_container">        
-        <div class="grid_row_cell" style="width: 30%; ">
-           <div class="row_celltitles" id="cidr" style="padding:1px;"></div>
-        </div>        
-        <div class="grid_row_cell" style="width: 10%; ">
-            <div class="row_celltitles" id="start_port" style="padding:1px;"></div>
-        </div>
-        <div class="grid_row_cell" style="width: 10%; ">
-            <div class="row_celltitles" id="end_port" style="padding:1px;"></div>
-        </div>
-        <div class="grid_row_cell" style="width: 15%; ">
+        <div class="grid_row_cell" style="padding:1px; width: 30%; ">
+           <div class="row_celltitles" id="cidr"></div>
+        </div>   
+        <div class="grid_row_cell" style="padding:1px; width: 15%; ">
             <div class="row_celltitles" id="protocol"></div>
-        </div>  
-        <div class="grid_row_cell" style="width: 10%; ">
-            <div class="row_celltitles" id="ICMP_type" style="padding:1px;"></div>
+        </div>       
+        <div class="grid_row_cell" style="padding:1px; width: 10%; ">
+            <div class="row_celltitles" id="start_port"></div>
         </div>
-         <div class="grid_row_cell" style="width: 10%; ">
-            <div class="row_celltitles" id="ICMP_code" style="padding:1px;"></div>
+        <div class="grid_row_cell" style="padding:1px; width: 10%; ">
+            <div class="row_celltitles" id="end_port"></div>
+        </div>        
+        <div class="grid_row_cell" style="padding:1px; width: 10%; ">
+            <div class="row_celltitles" id="ICMP_type"></div>
         </div>
-        <div class="grid_row_cell" style="width: 10%; ">
+         <div class="grid_row_cell" style="padding:1px; width: 10%; ">
+            <div class="row_celltitles" id="ICMP_code"></div>
+        </div>
+        <div class="grid_row_cell" style="padding:1px; width: 10%; ">
             <div class="row_celltitles">
                 <a id="delete_link" href="#" style="float:left;"><fmt:message key="label.delete"/> </a>                            
             </div>
diff --git a/ui/scripts/cloud.core.ipaddress.js b/ui/scripts/cloud.core.ipaddress.js
index 78c130d3a4f..64e64754a25 100644
--- a/ui/scripts/cloud.core.ipaddress.js
+++ b/ui/scripts/cloud.core.ipaddress.js
@@ -312,13 +312,13 @@ function afterLoadIpJSP() {
 	    		return true;
 	    	var protocol = $(this).val().toLowerCase();	    
 	    	if(protocol == "tcp" || protocol == "udp") {
-	    		$createFirewallRow.find("#start_port,#end_port").removeAttr("disabled");
-	    		$createFirewallRow.find("#ICMP_type,#ICMP_code").attr("disabled", "disabled");
+	    		$createFirewallRow.find("#start_port,#end_port").show();
+	    		$createFirewallRow.find("#ICMP_type,#ICMP_code").hide();
 	    		$createFirewallRow.find("#ICMP_type,#ICMP_code").val("")
 	    	}
 	    	else { //protocol == icmp
-	    		$createFirewallRow.find("#ICMP_type,#ICMP_code").removeAttr("disabled");
-	    		$createFirewallRow.find("#start_port,#end_port").attr("disabled", "disabled");
+	    		$createFirewallRow.find("#ICMP_type,#ICMP_code").show();
+	    		$createFirewallRow.find("#start_port,#end_port").hide();
 	    		$createFirewallRow.find("#start_port,#end_port").val("");
 	    	}	    	
 	    	return true;
@@ -327,13 +327,13 @@ function afterLoadIpJSP() {
 	    $createFirewallRow.find("#add_link").bind("click", function(event){	  	 	
 	    	var isValid = true;		
 			isValid &= validateCIDRList("Source CIDR", $createFirewallRow.find("#cidr"), $createFirewallRow.find("#cidr_errormsg"), true); //optional								
-			if($createFirewallRow.find("#start_port").attr("disabled") == false)
+			if($createFirewallRow.find("#start_port").css("display") != "none")
 			    isValid &= validateInteger("Start Port", $createFirewallRow.find("#start_port"), $createFirewallRow.find("#start_port_errormsg"), 1, 65535);
-			if($createFirewallRow.find("#end_port").attr("disabled") == false)
+			if($createFirewallRow.find("#end_port").css("display") != "none")
 			    isValid &= validateInteger("End Port", $createFirewallRow.find("#end_port"), $createFirewallRow.find("#end_port_errormsg"), 1, 65535);				
-			if($createFirewallRow.find("#ICMP_type").attr("disabled") == false) 
+			if($createFirewallRow.find("#ICMP_type").css("display") != "none") 
 				isValid &= validateInteger("ICMP type", $createFirewallRow.find("#ICMP_type"), $createFirewallRow.find("#ICMP_type_errormsg"), null, null);
-			if($createFirewallRow.find("#ICMP_code").attr("disabled") == false) 
+			if($createFirewallRow.find("#ICMP_code").css("display") != "none") 
 				isValid &= validateInteger("ICMP code", $createFirewallRow.find("#ICMP_code"), $createFirewallRow.find("#ICMP_code_errormsg"), null, null);
 			if (!isValid) 
 			    return;			
@@ -355,12 +355,12 @@ function afterLoadIpJSP() {
 	        if(cidr != null && cidr.length > 0)
 	        	array1.push("&cidrlist="+cidr);
 		    
-	        if($createFirewallRow.find("#start_port").attr("disabled") == false) {
+	        if($createFirewallRow.find("#start_port").css("display") != "none") {
 		        var startPort = $createFirewallRow.find("#start_port").val();       
 		        array1.push("&startPort="+startPort);
 	        }
 	        
-	        if($createFirewallRow.find("#end_port").attr("disabled") == false) {
+	        if($createFirewallRow.find("#end_port").css("display") != "none") {
 		        var endPort = $createFirewallRow.find("#end_port").val();
 		        array1.push("&endPort="+endPort);
 	        }
@@ -368,11 +368,11 @@ function afterLoadIpJSP() {
 	        var protocol = $createFirewallRow.find("#protocol").val();
 	        array1.push("&protocol="+protocol);
 	         
-	        if($createFirewallRow.find("#ICMP_type").attr("disabled") == false) {
+	        if($createFirewallRow.find("#ICMP_type").css("display") != "none") {
 		        var ICMPType = $createFirewallRow.find("#ICMP_type").val();       
 		        array1.push("&icmptype="+ICMPType);
 	        }
-	        if($createFirewallRow.find("#ICMP_code").attr("disabled") == false) {
+	        if($createFirewallRow.find("#ICMP_code").css("display") != "none") {
 		        var ICMPCode = $createFirewallRow.find("#ICMP_code").val();       
 		        array1.push("&icmpcode="+ICMPCode);
 	        }