From 64e6f4101588e7098aaa1dcaa533d6799d736e45 Mon Sep 17 00:00:00 2001
From: Jessica Wang <jessica@cloud.com>
Date: Tue, 7 Dec 2010 11:17:21 -0800
Subject: [PATCH] IP Address page - Port Forwarding tab - (1) add "state"
 column. (2) change "delete" link to "revoke" link.

---
 ui/jsp/ipaddress.jsp               | 57 ++++++++++++++++++------------
 ui/scripts/cloud.core.ipaddress.js | 17 +++++----
 2 files changed, 43 insertions(+), 31 deletions(-)

diff --git a/ui/jsp/ipaddress.jsp b/ui/jsp/ipaddress.jsp
index 2fabc7d6bf7..a7e129e57e6 100644
--- a/ui/jsp/ipaddress.jsp
+++ b/ui/jsp/ipaddress.jsp
@@ -176,48 +176,55 @@
         <div id="tab_container">
 	        <div class="grid_container" id="grid_container">
 	            <div class="grid_header">
-	                <div class="grid_header_cell" style="width: 15%">
+	                <div class="grid_header_cell" style="width: 15%; padding: 1px;">
 	                    <div class="grid_header_title">
 	                        Public Port</div>
 	                </div>
-	                <div class="grid_header_cell" style="width: 15%">
+	                <div class="grid_header_cell" style="width: 15%; padding: 1px;">
 	                    <div class="grid_header_title">
 	                        Private Port</div>
 	                </div>
-	                <div class="grid_header_cell" style="width: 15%">
+	                <div class="grid_header_cell" style="width: 15%; padding: 1px;">
 	                    <div class="grid_header_title">
 	                        Protocol</div>
 	                </div>
-	                <div class="grid_header_cell" style="width: 39%; border: none;">
+	                <div class="grid_header_cell" style="width: 25%; border: none; padding: 1px;">
 	                    <div class="grid_header_title">
 	                        Instance</div>
 	                </div>
-	                <div class="grid_header_cell" style="width: 15%">
+	                <div class="grid_header_cell" style="width: 10%; padding: 1px;">
+	                    <div class="grid_header_title">
+	                        State</div>
+	                </div>
+	                <div class="grid_header_cell" style="width: 15%; padding: 1px;">
 	                    <div class="grid_header_title">
 	                        Action</div>
 	                </div>
 	            </div>
 	            <div class="grid_rows even" id="create_port_forwarding_row">
-	                <div class="grid_row_cell" style="width: 15%;">
+	                <div class="grid_row_cell" style="width: 15%; padding: 1px;">
 	                    <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>
-	                <div class="grid_row_cell" style="width: 15%;">
+	                <div class="grid_row_cell" style="width: 15%; padding: 1px;">
 	                    <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>
-	                <div class="grid_row_cell" style="width: 15%;">  
+	                <div class="grid_row_cell" style="width: 15%; padding: 1px;">  
 	                   <select class="select" id="protocol" style="width:70%;">
 	                       <option value="TCP">TCP</option>
 	                       <option value="UDP">UDP</option>
 	                   </select>
 	                </div>
-	                <div class="grid_row_cell" style="width: 39%;">                   
+	                <div class="grid_row_cell" style="width: 25%; padding: 1px;">                   
 	                    <select class="select" id="vm">
 	                    </select>
 	                    <div id="vm_errormsg" class="errormsg" style="display: none;"></div>	                    
 	                </div>
-	                <div class="grid_row_cell" style="width: 15%;">
+	                <div class="grid_row_cell" style="width: 10%; padding: 1px;">   
+	                    <div class="row_celltitles" id="state"></div>
+	                </div>  
+	                <div class="grid_row_cell" style="width: 15%; padding: 1px;">
 	                    <div class="row_celltitles">
 	                        <a id="add_link" href="#">Add</a></div>
 	                </div>
@@ -464,22 +471,25 @@
 <!-- Port Forwarding template (begin) -->
 <div class="grid_rows odd" id="port_forwarding_template" style="display: none">    
     <div id="row_container">
-        <div class="grid_row_cell" style="width: 15%;">
+        <div class="grid_row_cell" style="width: 15%; padding: 1px;">
             <div class="row_celltitles" id="public_port"></div>
         </div>
-        <div class="grid_row_cell" style="width: 15%;">
+        <div class="grid_row_cell" style="width: 15%; padding: 1px;">
             <div class="row_celltitles" id="private_port"></div>
         </div>
-        <div class="grid_row_cell" style="width: 15%;">
+        <div class="grid_row_cell" style="width: 15%; padding: 1px;">
             <div class="row_celltitles" id="protocol"></div>
         </div>
-        <div class="grid_row_cell" style="width: 39%;">
+        <div class="grid_row_cell" style="width: 25%; padding: 1px;">
             <div class="row_celltitles" id="vm_name"></div>
-        </div>       
-        <div class="grid_row_cell" style="width: 15%;">
+        </div>   
+        <div class="grid_row_cell" style="width: 10%; padding: 1px;">
+            <div class="row_celltitles" id="state"></div>
+        </div>        
+        <div class="grid_row_cell" style="width: 15%; padding: 1px;">
             <div class="row_celltitles">
                 <a id="edit_link" href="#" style="float:left;">Edit</a>
-                <a id="delete_link" href="#" style="float:left; margin-left:15px;">Delete</a>
+                <a id="revoke_link" href="#" style="float:left; margin-left:15px;">Revoke</a>
             </div>
         </div>
         <div class="gridrow_loaderbox" style="display: none;" id="spinning_wheel">
@@ -491,22 +501,25 @@
         </div>
     </div>
     <div id="row_container_edit" style="display:none">
-        <div class="grid_row_cell" style="width: 15%;">
+        <div class="grid_row_cell" style="width: 15%; padding: 1px;">
             <div class="row_celltitles" id="public_port"></div>
         </div>
-        <div class="grid_row_cell" style="width: 15%;">
+        <div class="grid_row_cell" style="width: 15%; padding: 1px;">
             <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>
-        <div class="grid_row_cell" style="width: 15%;">
+        <div class="grid_row_cell" style="width: 15%; padding: 1px;">
             <div class="row_celltitles" id="protocol"></div>
         </div>
-        <div class="grid_row_cell" style="width: 39%;">
+        <div class="grid_row_cell" style="width: 25%; padding: 1px;">
             <select class="select" id="vm">
             </select>
         </div>
-        <div class="grid_row_cell" style="width: 15%;">
+        <div class="grid_row_cell" style="width: 10%; padding: 1px;">
+            <div class="row_celltitles" id="state"></div>
+        </div>
+        <div class="grid_row_cell" style="width: 15%; padding: 1px;">
             <div class="row_celltitles">
                 <a id="save_link" href="#" style="float:left;">Save</a>
                 <a id="cancel_link" href="#" style="float:left; margin-left:15px;">Cancel</a>
diff --git a/ui/scripts/cloud.core.ipaddress.js b/ui/scripts/cloud.core.ipaddress.js
index f3946dda36f..993e4b269bb 100644
--- a/ui/scripts/cloud.core.ipaddress.js
+++ b/ui/scripts/cloud.core.ipaddress.js
@@ -155,8 +155,6 @@ function afterLoadIpJSP() {
         array1.push("&protocol="+protocol);
         array1.push("&virtualmachineid=" + virtualMachineId);
         
-        
-        //???
         $.ajax({
             data: createURL("command=createPortForwardingRule"+array1.join("")),
             dataType: "json",           
@@ -215,8 +213,7 @@ function afterLoadIpJSP() {
                     $("#dialog_error").text(fromdb(errorMsg)).dialog("open");
                 });		
             }
-        });    
-	    
+        });    	    
 	    
 	    return false;
 	});
@@ -1085,6 +1082,9 @@ function portForwardingJsonToTemplate(jsonObj, $template) {
     $template.find("#row_container #vm_name").text(vmName);		    
     var virtualMachineId = fromdb(jsonObj.virtualmachineid);
    
+    $template.find("#row_container #state").text(fromdb(jsonObj.state));
+    $template.find("#row_container_edit #state").text(fromdb(jsonObj.state));
+   
     var $midmenuItem1 = $("#right_panel_content").data("$midmenuItem1");
     if($midmenuItem1 == null)
         return;    
@@ -1102,17 +1102,16 @@ function portForwardingJsonToTemplate(jsonObj, $template) {
     var $rowContainer = $template.find("#row_container");      
     var $rowContainerEdit = $template.find("#row_container_edit");    
     		    
-    $template.find("#delete_link").unbind("click").bind("click", function(event){   		                    
+    $template.find("#revoke_link").unbind("click").bind("click", function(event){   		                    
         var $spinningWheel = $rowContainer.find("#spinning_wheel");		
-        $spinningWheel.find("#description").text("Deleting....");	
+        $spinningWheel.find("#description").text("Revoking....");	
         $spinningWheel.show();   
         $.ajax({						
 	       data: createURL("command=deletePortForwardingRule&id="+fromdb(jsonObj.id)),
             dataType: "json",
             success: function(json) {             
-                $template.slideUp("slow", function(){		                    
-                    $(this).remove();
-                });	   						
+                $template.find("#state").text("Revoked");	
+                $spinningWheel.hide(); 			
             },
             error: function(XMLHttpResponse) {
                 handleError(XMLHttpResponse);