From 2bb3d0d695ae1cf4020822987256fb0a865dbc10 Mon Sep 17 00:00:00 2001
From: Jessica Wang <jessica@cloud.com>
Date: Mon, 2 May 2011 20:01:56 -0700
Subject: [PATCH] bug 9687: CloudStack UI - Instance page - add "Security
 Group" tab.

---
 ui/jsp/instance.jsp               | 50 ++++++++++++++++++++++++++--
 ui/scripts/cloud.core.instance.js | 55 ++++++++++++++++++++++++++++---
 2 files changed, 99 insertions(+), 6 deletions(-)

diff --git a/ui/jsp/instance.jsp b/ui/jsp/instance.jsp
index 070a5bafa41..f858a5a7b52 100644
--- a/ui/jsp/instance.jsp
+++ b/ui/jsp/instance.jsp
@@ -71,10 +71,12 @@ dictionary = {
             <fmt:message key="label.details" /></div>
 		<div class="content_tabs off" id="tab_nic">
             <fmt:message key="label.nics"/></div>
+        <div class="content_tabs off" id="tab_securitygroup" style="display:none;">
+            <fmt:message key="label.security.group"/></div>
         <div class="content_tabs off" id="tab_volume">
             <fmt:message key="label.volumes"/></div>
         <div class="content_tabs off" id="tab_statistics">
-            <fmt:message key="label.statistics"/></div>		
+            <fmt:message key="label.statistics"/></div>	       
     </div>
     <!--Details tab (start)-->
     <div  id="tab_content_details">
@@ -287,6 +289,20 @@ dictionary = {
         </div>
     </div>
     <!--Nic tab (end)-->
+        
+    <!--Security Group tab (start)-->
+    <div style="display: none;" id="tab_content_securitygroup">    
+        <div id="tab_spinning_wheel" class="rightpanel_mainloader_panel" style="display:none;">
+              <div class="rightpanel_mainloaderbox">
+                   <div class="rightpanel_mainloader_animatedicon"></div>
+                   <p><fmt:message key="label.loading"/> &hellip;</p>    
+              </div>               
+        </div> 
+        <div id="tab_container">        
+        </div>
+    </div>
+    <!--Security Group tab (end)-->       
+    
     <!--Volume tab (start)-->
     <div style="display: none;" id="tab_content_volume">    
         <div id="tab_spinning_wheel" class="rightpanel_mainloader_panel" style="display:none;">
@@ -392,7 +408,8 @@ dictionary = {
             </div>
         </div>   
     </div>
-    <!--Statistics tab (end)-->    
+    <!--Statistics tab (end)-->       
+    
 </div>
 <!-- VM detail panel (end) -->
 
@@ -1042,6 +1059,35 @@ dictionary = {
 </div>
 <!--  nic tab template (end) -->
 
+<!--  Security Group tab template (begin) -->
+<div class="grid_container" id="securitygroup_tab_template" style="display: none">	
+    <div class="grid_header">
+        <div class="grid_header_title" id="title">
+        </div>		
+    </div>        
+    <div class="grid_rows even">
+        <div class="grid_row_cell" style="width: 20%;">
+            <div class="row_celltitles">
+                <fmt:message key="label.name"/>:</div>
+        </div>
+        <div class="grid_row_cell" style="width: 79%;">
+            <div class="row_celltitles" id="name">
+            </div>
+        </div>
+    </div>  
+    <div class="grid_rows odd">
+        <div class="grid_row_cell" style="width: 20%;">
+            <div class="row_celltitles">
+                <fmt:message key="label.description"/>:</div>
+        </div>
+        <div class="grid_row_cell" style="width: 79%;">
+            <div class="row_celltitles" id="description">
+            </div>
+        </div>
+    </div>     
+</div>
+<!--  Security Group tab template (end) -->
+
 <!--  volume tab template (begin) -->
 <div class="grid_container" id="volume_tab_template" style="display: none">	
     <div class="grid_header">
diff --git a/ui/scripts/cloud.core.instance.js b/ui/scripts/cloud.core.instance.js
index 112d547f4db..e4bce692be9 100644
--- a/ui/scripts/cloud.core.instance.js
+++ b/ui/scripts/cloud.core.instance.js
@@ -122,11 +122,18 @@ function afterLoadInstanceJSP() {
 	bindDestroyVMButton();
 			
 	// switch between different tabs 
-	var tabArray = [$("#tab_details"), $("#tab_nic"), $("#tab_volume"), $("#tab_statistics")];
-	var tabContentArray = [$("#tab_content_details"), $("#tab_content_nic"), $("#tab_content_volume"), $("#tab_content_statistics")];
-	var afterSwitchFnArray = [vmJsonToDetailsTab, vmJsonToNicTab, vmJsonToVolumeTab, vmJsonToStatisticsTab];
+	var tabArray = [$("#tab_details"), $("#tab_nic"), $("#tab_securitygroup"), $("#tab_volume"), $("#tab_statistics")];
+	var tabContentArray = [$("#tab_content_details"), $("#tab_content_nic"), $("#tab_content_securitygroup"), $("#tab_content_volume"), $("#tab_content_statistics")];
+	var afterSwitchFnArray = [vmJsonToDetailsTab, vmJsonToNicTab, vmJsonToSecurityGroupTab, vmJsonToVolumeTab, vmJsonToStatisticsTab];
 	switchBetweenDifferentTabs(tabArray, tabContentArray, afterSwitchFnArray);   
-	   			   
+	
+	if(getDirectAttachSecurityGroupsEnabled() == "true") {
+		$("#tab_securitygroup").show();
+	}		
+	else {
+		$("#tab_securitygroup").hide();		
+	}	
+	
     // dialogs
     initDialog("dialog_detach_iso_from_vm");       	
    	initDialog("dialog_attach_iso");  
@@ -2067,6 +2074,38 @@ function vmJsonClearNicTab() {
     $thisTab.find("#tab_container").empty();		
 }
 
+function vmJsonToSecurityGroupTab() {  
+	var $midmenuItem1 = $("#right_panel_content").data("$midmenuItem1");	
+	if ($midmenuItem1 == null)  {
+		vmJsonClearSecurityGroupTab();
+	    return;
+	}
+		
+	var jsonObj = $midmenuItem1.data("jsonObj");	
+    if(jsonObj == null) {
+  	    vmJsonClearSecurityGroupTab();
+        return;	
+    }
+	
+	var $thisTab = $("#right_panel_content").find("#tab_content_securitygroup");  		
+	
+	var items = jsonObj.securitygroup;
+	var template = $("#securitygroup_tab_template");
+	var $container = $thisTab.find("#tab_container").empty();
+	if(items != null && items.length > 0) {
+	    for (var i = 0; i < items.length; i++) {
+		    var newTemplate = template.clone(true);
+		    vmSecurityGroupJSONToTemplate(items[i], newTemplate); 
+		    $container.append(newTemplate.show());
+	    }
+	}
+}
+
+function vmJsonClearSecurityGroupTab() { 
+  var $thisTab = $("#right_panel_content").find("#tab_content_securitygroup");  
+  $thisTab.find("#tab_container").empty();		
+}
+
 function vmJsonToVolumeTab() {  
 	var $midmenuItem1 = $("#right_panel_content").data("$midmenuItem1");	
 	if ($midmenuItem1 == null) {
@@ -2169,6 +2208,7 @@ function vmJsonClearStatisticsTab() {
 function vmClearRightPanel(jsonObj) {      
     vmJsonClearDetailsTab();   
     vmJsonClearNicTab();
+    vmJsonClearSecurityGroupTab();
     vmJsonClearVolumeTab();
     vmJsonClearStatisticsTab();     
     $("#tab_details").click();  
@@ -2243,6 +2283,13 @@ function vmNicJSONToTemplate(json, $template, index) {
 	$template.find("#netmask").text(fromdb(json.netmask)); 
 }
 
+function vmSecurityGroupJSONToTemplate(json, $template) {
+	$template.attr("id","vm_securitygroup_"+fromdb(json.id));
+	$template.find("#title").text(fromdb(json.name));	
+	$template.find("#name").text(fromdb(json.name)); 	
+	$template.find("#description").text(fromdb(json.description));
+}
+
 function vmVolumeJSONToTemplate(json, $template) {
     $template.attr("id","vm_volume_"+fromdb(json.id));	        
     $template.data("jsonObj", json);