From 8d8dc339bd05863aa23f0a15670ed38ea9d528fb Mon Sep 17 00:00:00 2001
From: Jessica Wang <jessica@cloud.com>
Date: Fri, 17 Dec 2010 17:50:19 -0800
Subject: [PATCH] Security Group page - add Ingress Rule tab.

---
 ui/jsp/securitygroup.jsp               | 89 +++++++++++++++++++++++++-
 ui/scripts/cloud.core.securitygroup.js | 81 ++++++++++++++++++++++-
 ui/scripts/cloud.core.snapshot.js      | 13 ++--
 3 files changed, 174 insertions(+), 9 deletions(-)

diff --git a/ui/jsp/securitygroup.jsp b/ui/jsp/securitygroup.jsp
index 929d4470917..2cb7efe25da 100644
--- a/ui/jsp/securitygroup.jsp
+++ b/ui/jsp/securitygroup.jsp
@@ -24,9 +24,12 @@
         </p>
     </div>
     <div class="tabbox" style="margin-top: 15px;">
-        <div class="content_tabs on">
+        <div class="content_tabs on" id="tab_details">
             <%=t.t("details")%></div>
+        <div class="content_tabs off" id="tab_ingressrule">
+            Ingress Rule</div>
     </div>
+    <!--Details tab (start)-->
     <div id="tab_content_details">
     	<div id="tab_spinning_wheel" class="rightpanel_mainloader_panel" style="display: none;">
             <div class="rightpanel_mainloaderbox">
@@ -112,8 +115,92 @@
 	        </div>  
         </div>
     </div>
+    <!--Details tab (end)-->
+    
+    <!--Ingress Rule tab (start)-->
+    <div style="display: none;" id="tab_content_ingressrule">
+    	<div id="tab_spinning_wheel" class="rightpanel_mainloader_panel" style="display:none;">
+              <div class="rightpanel_mainloaderbox">
+                   <div class="rightpanel_mainloader_animatedicon"></div>
+                   <p>Loading &hellip;</p>    
+              </div>               
+        </div>
+        <div id="tab_container">
+        </div>
+    </div> 
+    <!--Ingress Rule tab (end)-->    
 </div>
 
+<!--  Ingress Rule tab template (begin) -->
+<div class="grid_container" id="ingressrule_tab_template" style="display: none">
+    <div class="grid_header">
+        <div class="grid_header_title" id="grid_header_title">
+        </div>
+        <div class="grid_actionbox" id="ingressrule_action_link">
+            <div class="grid_actionsdropdown_box" id="ingressrule_action_menu" style="display: none;">
+                <ul class="actionsdropdown_boxlist" id="action_list">
+                </ul>
+            </div>
+        </div>
+        <div class="gridheader_loaderbox" id="spinning_wheel" style="display: none; height: 18px;">
+            <div class="gridheader_loader" id="icon">
+            </div>
+            <p id="description">
+                Waiting &hellip;
+            </p>
+        </div>       
+    </div>
+    
+    <div class="grid_rows" id="after_action_info_container" style="display:none">
+        <div class="grid_row_cell" style="width: 90%; border: none;">
+            <div class="row_celltitles">
+                <strong id="after_action_info">Message will appear here</strong></div>
+        </div>
+    </div>
+        
+    <div class="grid_rows even">
+        <div class="grid_row_cell" style="width: 20%;">
+            <div class="row_celltitles">
+                ID:</div>
+        </div>
+        <div class="grid_row_cell" style="width: 79%;">
+            <div class="row_celltitles" id="id">
+            </div>
+        </div>
+    </div>
+    <div class="grid_rows odd">
+        <div class="grid_row_cell" style="width: 20%;">
+            <div class="row_celltitles">
+                Protocol:</div>
+        </div>
+        <div class="grid_row_cell" style="width: 79%;">
+            <div class="row_celltitles" id="protocol">
+            </div>
+        </div>
+    </div>
+    <div class="grid_rows even">
+        <div class="grid_row_cell" style="width: 20%;">
+            <div class="row_celltitles">
+                Endpoint or Operation:</div>
+        </div>
+        <div class="grid_row_cell" style="width: 79%;">
+            <div class="row_celltitles" id="endpoint">
+            </div>
+        </div>
+    </div>
+    <div class="grid_rows odd">
+        <div class="grid_row_cell" style="width: 20%;">
+            <div class="row_celltitles">
+                CIDR or Account/Network Group:</div>
+        </div>
+        <div class="grid_row_cell" style="width: 79%;">
+            <div class="row_celltitles" id="cidr">
+            </div>
+        </div>
+    </div>   
+</div>
+<!--  Ingress Rule tab template (end) -->
+
 <!-- Add Disk Offering Dialog -->
 <div id="dialog_add_disk" title="Add Disk Offering" style="display:none">
 	<p>Please fill in the following data to add a new disk Offering.</p>
diff --git a/ui/scripts/cloud.core.securitygroup.js b/ui/scripts/cloud.core.securitygroup.js
index 7b9ee7b950c..1d11a311fc7 100644
--- a/ui/scripts/cloud.core.securitygroup.js
+++ b/ui/scripts/cloud.core.securitygroup.js
@@ -43,6 +43,12 @@ function securityGroupGetSearchParams() {
 
 function afterLoadSecurityGroupJSP() {    
     initAddSecurityGroupDialog();  
+    
+    // switch between different tabs 
+    var tabArray = [$("#tab_details"), $("#tab_ingressrule")];
+    var tabContentArray = [$("#tab_content_details"), $("#tab_content_ingressrule")];
+    var afterSwitchFnArray = [securityGroupJsonToDetailsTab, securityGroupJsonToIngressRuleTab];
+    switchBetweenDifferentTabs(tabArray, tabContentArray, afterSwitchFnArray);           
 }
 
 function initAddSecurityGroupDialog() {
@@ -198,7 +204,7 @@ function securityGroupToMidmenu(jsonObj, $midmenuItem1) {
 function securityGroupToRightPanel($midmenuItem1) {
     copyActionInfoFromMidMenuToRightPanel($midmenuItem1);
     $("#right_panel_content").data("$midmenuItem1", $midmenuItem1);
-    securityGroupJsonToDetailsTab();   
+    $("#tab_details").click();   
 }
 
 function securityGroupJsonToDetailsTab() {     
@@ -247,6 +253,79 @@ function securityGroupJsonToDetailsTab() {
     $thisTab.find("#tab_container").show();         
 }
 
+function securityGroupJsonToIngressRuleTab() {       		
+	var $midmenuItem1 = $("#right_panel_content").data("$midmenuItem1");	
+	if($midmenuItem1 == null)
+	    return;
+	
+	var securityGroupObj = $midmenuItem1.data("jsonObj");	
+	if(securityGroupObj == null)
+	    return;
+	
+	var $thisTab = $("#right_panel_content").find("#tab_content_ingressrule");	    
+	$thisTab.find("#tab_container").hide(); 
+    $thisTab.find("#tab_spinning_wheel").show();   
+        
+    $.ajax({
+		cache: false,		
+		data: createURL("command=listNetworkGroups"+"&domainid="+securityGroupObj.domainid+"&account="+securityGroupObj.account+"&networkgroupname="+securityGroupObj.name),
+		dataType: "json",
+		success: function(json) {			    				    
+			var items = json.listnetworkgroupsresponse.securitygroup[0].ingressrule;    
+			var $container = $thisTab.find("#tab_container").empty();     																			
+			if (items != null && items.length > 0) {			    
+				var template = $("#ingressrule_tab_template");				
+				for (var i = 0; i < items.length; i++) {
+					var newTemplate = template.clone(true);	               
+	                securityGroupIngressRuleJSONToTemplate(items[i], newTemplate); 
+	                $container.append(newTemplate.show());	
+				}			
+			}	
+			$thisTab.find("#tab_spinning_wheel").hide();    
+            $thisTab.find("#tab_container").show();    			
+		}
+	});
+} 
+
+function securityGroupIngressRuleJSONToTemplate(jsonObj, $template) {
+    $template.data("jsonObj", jsonObj);     
+    $template.attr("id", "securitygroup_ingressRule_"+fromdb(jsonObj.id));   
+     
+    $template.find("#grid_header_title").text(fromdb(jsonObj.ruleid));			   
+    $template.find("#id").text(fromdb(jsonObj.ruleid));       
+    $template.find("#protocol").text(jsonObj.protocol);
+    			    		    
+    var endpoint;		    
+    if(jsonObj.protocol == "icmp")
+        endpoint = "ICMP Type=" + ((jsonObj.icmptype!=null)?jsonObj.icmptype:"") + ", code=" + ((jsonObj.icmpcode!=null)?jsonObj.icmpcode:"");		        
+    else //tcp, udp
+        endpoint = "Port Range " + ((jsonObj.startport!=null)?jsonObj.startport:"") + "-" + ((jsonObj.endport!=null)?jsonObj.endport:"");		    
+    $template.find("#endpoint").text(endpoint);	
+    
+    var cidrOrGroup;
+    if(jsonObj.cidr != null && jsonObj.cidr.length > 0)
+        cidrOrGroup = jsonObj.cidr;
+    else if (jsonObj.account != null && jsonObj.account.length > 0 &&  jsonObj.networkgroupname != null && jsonObj.networkgroupname.length > 0)
+        cidrOrGroup = jsonObj.account + "/" + jsonObj.networkgroupname;		    
+    $template.find("#cidr").text(cidrOrGroup);	
+    
+    // actions	
+	var $actionLink = $template.find("#snapshot_action_link");		
+	$actionLink.bind("mouseover", function(event) {
+        $(this).find("#snapshot_action_menu").show();    
+        return false;
+    });
+    $actionLink.bind("mouseout", function(event) {
+        $(this).find("#snapshot_action_menu").hide();    
+        return false;
+    });		
+	
+	var $actionMenu = $actionLink.find("#snapshot_action_menu");
+    $actionMenu.find("#action_list").empty();	
+        
+    //buildActionLinkForSubgridItem("Delete Ingress Rule", securityGroupIngressRuleActionMap, $actionMenu, $template);	   
+} 
+
 function securityGroupClearRightPanel() {
     securityGroupClearDetailsTab();
 }
diff --git a/ui/scripts/cloud.core.snapshot.js b/ui/scripts/cloud.core.snapshot.js
index eb02af1f299..b9a655f36d7 100644
--- a/ui/scripts/cloud.core.snapshot.js
+++ b/ui/scripts/cloud.core.snapshot.js
@@ -19,6 +19,11 @@
 function snapshotGetSearchParams() {
     var moreCriteria = [];	
 
+    var searchInput = $("#basic_search").find("#search_input").val();	 
+    if (searchInput != null && searchInput.length > 0) {	           
+        moreCriteria.push("&keyword="+todb(searchInput));	       
+    }     
+
 	var $advancedSearchPopup = $("#advanced_search_popup");
 	if (lastSearchType == "advanced_search" && $advancedSearchPopup.length > 0) {
 	    var name = $advancedSearchPopup.find("#adv_search_name").val();							
@@ -37,13 +42,7 @@ function snapshotGetSearchParams() {
 			    moreCriteria.push("&account="+account);		
 		}	
 	} 
-	else {     			    		
-	    var searchInput = $("#basic_search").find("#search_input").val();	 
-        if (lastSearchType == "basic_search" && searchInput != null && searchInput.length > 0) {	           
-            moreCriteria.push("&keyword="+todb(searchInput));	       
-        }        
-	}
-	
+		
 	return moreCriteria.join("");          
 }