Add "Security Group" at left menu.

ui/2.1/scripts/cloud.core.network.js

@@ -1510,7 +1510,7 @@ function showNetworkingTab(p_domainId, p_account) {
         template.data("endPort", json.endport);           
         template.data("icmpType", json.icmptype);
         template.data("icmpCode", json.icmpcode);			    
-	    debugger;
+
 	    var cidrOrGroup;
 	    if(json.cidr != null && json.cidr.length > 0)
 	        cidrOrGroup = json.cidr;

ui/index.jsp

@@ -33,6 +33,7 @@
     <script type="text/javascript" src="scripts/cloud.core.volume.js?t=<%=now%>"></script>
     <script type="text/javascript" src="scripts/cloud.core.snapshot.js?t=<%=now%>"></script>
     <script type="text/javascript" src="scripts/cloud.core.ipaddress.js?t=<%=now%>"></script>
+    <script type="text/javascript" src="scripts/cloud.core.securitygroup.js?t=<%=now%>"></script>
     <script type="text/javascript" src="scripts/cloud.core.template.js?t=<%=now%>"></script>
     <script type="text/javascript" src="scripts/cloud.core.iso.js?t=<%=now%>"></script>
     <script type="text/javascript" src="scripts/cloud.core.router.js?t=<%=now%>"></script>
@@ -544,13 +545,23 @@
                             <div class="leftmenu_content" id="leftmenu_ip">
                                 <div class="leftmenu_secondindent">
                                    	<div class="leftmenu_arrows white_nonexpanded_close" id="arrowIcon">
-                                    </div>
-                                    
+                                    </div>                                    
                                     <fmt:message key="label.menu.ipaddresses"/>
                                 </div>
                             </div>
                         </div>                        
-                    </div>
+                    </div>                    
+                    <div class="leftmenu_expandedbox" style="display: none">
+                        <div class="leftmenu_expandedlist">
+                            <div class="leftmenu_content" id="leftmenu_security_group">
+                                <div class="leftmenu_secondindent">
+                                   	<div class="leftmenu_arrows white_nonexpanded_close" id="arrowIcon">
+                                    </div>                                    
+                                    Security Group
+                                </div>
+                            </div>
+                        </div>                        
+                    </div>                    
                 </div>  
                 <div class="leftmenu_list">
                     <div class="leftmenu_content_flevel" id="leftmenu_templates">

ui/jsp/securitygroup.jsp

@@ -0,0 +1,228 @@
+<%@ page import="java.util.*" %>
+
+<%@ page import="com.cloud.utils.*" %>
+
+<%
+    Locale browserLocale = request.getLocale();
+    CloudResourceBundle t = CloudResourceBundle.getBundle("resources/resource", browserLocale);
+%>
+
+
+
+<div class="main_title" id="right_panel_header">
+    
+    <div class="main_titleicon">
+        <img src="images/title_diskofferingicon.gif" alt="Disk Offering" /></div>
+    
+    <h1>
+        Security Group
+    </h1>
+</div>
+<div class="contentbox" id="right_panel_content">
+    <div class="info_detailbox errorbox" id="after_action_info_container_on_top" style="display: none">
+        <p id="after_action_info">
+        </p>
+    </div>
+    <div class="tabbox" style="margin-top: 15px;">
+        <div class="content_tabs on">
+            <%=t.t("details")%></div>
+    </div>
+    <div id="tab_content_details">
+    	<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 class="grid_container">
+	        	<div class="grid_header">
+	            	<div id="grid_header_title" class="grid_header_title">(title)</div>
+	                <div id="action_link" class="grid_actionbox" id="account_action_link">
+	                    <div class="grid_actionsdropdown_box" id="action_menu" style="display: none;">
+	                        <ul class="actionsdropdown_boxlist" id="action_list">
+	                        	<li><%=t.t("no.available.actions")%></li>
+	                        </ul>
+	                    </div>
+	                </div>
+	                <div class="gridheader_loaderbox" id="spinning_wheel" style="border: 1px solid #999;
+	                display: none;">
+	                    <div class="gridheader_loader" id="Div1">
+	                    </div>
+	                    <p id="description">
+	                        Waiting &hellip;</p>
+	                </div>
+	            </div>
+	            <div class="grid_rows odd">
+	                <div class="grid_row_cell" style="width: 20%;">
+	                    <div class="row_celltitles">
+	                        <%=t.t("ID")%>:</div>
+	                </div>
+	                <div class="grid_row_cell" style="width: 79%;">
+	                    <div class="row_celltitles" id="id">
+	                    </div>
+	                </div>
+	            </div>
+	            <div class="grid_rows even">
+	                <div class="grid_row_cell" style="width: 20%;">
+	                    <div class="row_celltitles">
+	                        <%=t.t("name")%>:</div>
+	                </div>
+	                <div class="grid_row_cell" style="width: 79%;">
+	                    <div class="row_celltitles" id="name">
+	                    </div>                    
+	                    <input class="text" id="name_edit" style="width: 200px; display: none;" type="text" />
+	                    <div id="name_edit_errormsg" style="display:none"></div>                       
+	                </div>
+	            </div>
+	            <div class="grid_rows odd">
+	                <div class="grid_row_cell" style="width: 20%;">
+	                    <div class="row_celltitles">
+	                        <%=t.t("display.text")%>:</div>
+	                </div>
+	                <div class="grid_row_cell" style="width: 79%;">
+	                    <div class="row_celltitles" id="displaytext">
+	                    </div>                    
+	                    <input class="text" id="displaytext_edit" style="width: 200px; display: none;" type="text" />
+	                    <div id="displaytext_edit_errormsg" style="display:none"></div>                       
+	                </div>
+	            </div>
+	            <div class="grid_rows even">
+	                <div class="grid_row_cell" style="width: 20%;">
+	                    <div class="row_celltitles">
+	                        <%=t.t("disk.size")%>:</div>
+	                </div>
+	                <div class="grid_row_cell" style="width: 79%;">
+	                    <div class="row_celltitles" id="disksize">
+	                    </div>
+	                </div>
+	            </div>  
+	            <div class="grid_rows odd">
+	                <div class="grid_row_cell" style="width: 20%;">
+	                    <div class="row_celltitles">
+	                        <%=t.t("tags")%>:</div>
+	                </div>
+	                <div class="grid_row_cell" style="width: 79%;">
+	                    <div class="row_celltitles" id="tags">
+	                    </div>
+	                    <input class="text" id="tags_edit" style="width: 200px; display: none;" type="text" />
+	                    <div id="tags_edit_errormsg" style="display:none"></div>  
+	                </div>
+	            </div>
+	            <div class="grid_rows even">
+	                <div class="grid_row_cell" style="width: 20%;">
+	                    <div class="row_celltitles">
+	                        <%=t.t("domain")%>:</div>
+	                </div>
+	                <div class="grid_row_cell" style="width: 79%;">
+	                    <div class="row_celltitles" id="domain">
+	                    </div>
+	                    <select class="select" id="domain_edit" style="width: 202px; display: none;">	                       
+	                    </select>	
+	                </div>
+	            </div>      
+	            <!-- 	            
+	            <div class="grid_rows odd">
+	                <div class="grid_row_cell" style="width: 20%;">
+	                    <div class="row_celltitles">
+	                        <%=t.t("customizable.during.VM.creation")%>:</div>
+	                </div>
+	                <div class="grid_row_cell" style="width: 79%;">
+	                    <div class="row_celltitles" id="isCustomized">
+	                    </div>
+	                </div>
+	            </div>  
+	             -->   
+	        </div>        
+	        <div class="grid_botactionpanel">
+	        	<div class="gridbot_buttons" id="save_button" style="display:none;">Save</div>
+	            <div class="gridbot_buttons" id="cancel_button" style="display:none;">Cancel</div>
+	        </div>  
+        </div>
+    </div>
+</div>
+
+<!-- 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>
+	<div class="dialog_formcontent">
+		<form action="#" method="post" id="form1">
+			<ol>
+				<li>
+					<label for="user_name">Name:</label>
+					<input class="text" type="text" name="add_disk_name" id="add_disk_name"/>
+					<div id="add_disk_name_errormsg" class="dialog_formcontent_errormsg" style="display:none;" ></div>
+				</li>
+				<li>
+					<label for="user_name">Description:</label>
+					<input class="text" type="text" name="add_disk_description" id="add_disk_description"/>
+					<div id="add_disk_description_errormsg" class="dialog_formcontent_errormsg" style="display:none;" ></div>
+				</li>	
+				<li>
+					<label>Custom disk size?:</label>
+					<select class="select" id="customized">						
+						<option value="false">No</option>
+						<option value="true">Yes</option>
+					</select>
+				</li>				
+				<li id="add_disk_disksize_container">
+					<label for="user_name">Disk size (in GB):</label>
+					<input class="text" type="text" name="add_disk_disksize" id="add_disk_disksize"/>
+					<div id="add_disk_disksize_errormsg" class="dialog_formcontent_errormsg" style="display:none;" ></div>
+				</li>				
+				<li id="add_disk_tags_container">
+                    <label for="add_disk_tags">
+                        Tags:</label>
+                    <input class="text" type="text" id="add_disk_tags" />
+                    <div id="add_disk_tags_errormsg" class="dialog_formcontent_errormsg" style="display: none;">
+                    </div>
+                </li>	
+                <li>
+				    <label>
+				        Public?:</label>
+				    <select class="select" id="public_dropdown">
+				        <option value="true">Yes</option>
+				        <option value="false">No</option>
+				    </select>
+				</li>
+				<li id="domain_dropdown_container" style="display: none">
+				    <label>
+				        Domain:</label>
+				    <select class="select" id="domain_dropdown">
+				    </select>
+				</li>    	
+			</ol>
+		</form>
+	</div>
+</div>
+
+<!-- advanced search template (begin) -->
+<div id="advanced_search_template" class="adv_searchpopup" style="display: none;">
+    <div class="adv_searchformbox">
+        <h3>
+            Advance Search</h3>
+        <a id="advanced_search_close" href="#">Close </a>
+        <form action="#" method="post">
+        <ol>
+            <li>
+                <label>
+                    Name:</label>
+                <input class="text" type="text" id="adv_search_name" />
+            </li>           
+            <li id="adv_search_domain_li" style="display: none;">
+                <label>
+                    Domain:</label>
+                <select class="select" id="adv_search_domain">
+                </select>
+            </li>           
+        </ol>
+        </form>
+        <div class="adv_search_actionbox">
+            <div class="adv_searchpopup_button" id="adv_search_button">
+            </div>
+        </div>
+    </div>
+</div>
+<!-- advanced search template (end) -->

ui/scripts/cloud.core.init.js

@@ -103,7 +103,8 @@ $(document).ready(function() {
 		bindAndListMidMenuItems($("#leftmenu_volume"), "listVolumes", volumeGetSearchParams, "listvolumesresponse", "volume", "jsp/volume.jsp", afterLoadVolumeJSP, volumeToMidmenu, volumeToRightPanel, getMidmenuId, false);
 		bindAndListMidMenuItems($("#leftmenu_snapshot"), "listSnapshots", snapshotGetSearchParams, "listsnapshotsresponse", "snapshot", "jsp/snapshot.jsp", afterLoadSnapshotJSP, snapshotToMidmenu, snapshotToRightPanel, getMidmenuId, false);
 		bindAndListMidMenuItems($("#leftmenu_ip"), "listPublicIpAddresses", ipGetSearchParams, "listpublicipaddressesresponse", "publicipaddress", "jsp/ipaddress.jsp", afterLoadIpJSP, ipToMidmenu, ipToRightPanel, ipGetMidmenuId, false);
-		 
+		bindAndListMidMenuItems($("#leftmenu_security_group"), "listNetworkGroups", securityGroupGetSearchParams, "listnetworkgroupsresponse", "securitygroup", "jsp/securitygroup.jsp", afterLoadSecurityGroupJSP, securityGroupToMidmenu, securityGroupToRightPanel, getMidmenuId, false);
+					 		  
 		bindAndListMidMenuItems($("#leftmenu_submenu_my_template"), "listTemplates&templatefilter=self", templateGetSearchParams, "listtemplatesresponse", "template", "jsp/template.jsp", afterLoadTemplateJSP, templateToMidmenu, templateToRightPanel, templateGetMidmenuId, false);
 		bindAndListMidMenuItems($("#leftmenu_submenu_featured_template"), "listTemplates&templatefilter=featured", templateGetSearchParams, "listtemplatesresponse", "template", "jsp/template.jsp", afterLoadTemplateJSP, templateToMidmenu, templateToRightPanel, templateGetMidmenuId, false);
 		bindAndListMidMenuItems($("#leftmenu_submenu_community_template"), "listTemplates&templatefilter=community", templateGetSearchParams, "listtemplatesresponse", "template", "jsp/template.jsp", afterLoadTemplateJSP, templateToMidmenu, templateToRightPanel, templateGetMidmenuId, false);

ui/scripts/cloud.core.securitygroup.js

@@ -0,0 +1,223 @@
+ /**
+ *  Copyright (C) 2010 Cloud.com, Inc.  All rights reserved.
+ * 
+ * This software is licensed under the GNU General Public License v3 or later.
+ * 
+ * It is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or any later version.
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ * 
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ * 
+ */
+
+function securityGroupGetSearchParams() {
+    var moreCriteria = [];	
+
+	var $advancedSearchPopup = $("#advanced_search_popup");
+	if (lastSearchType == "advanced_search" && $advancedSearchPopup.length > 0) {
+	    var name = $advancedSearchPopup.find("#adv_search_name").val();							
+		if (name!=null && trim(name).length > 0) 
+			moreCriteria.push("&name="+todb(name));	
+        
+        if ($advancedSearchPopup.find("#adv_search_domain_li").css("display") != "none") {		
+		    var domainId = $advancedSearchPopup.find("#adv_search_domain").val();		
+		    if (domainId!=null && domainId.length > 0) 
+			    moreCriteria.push("&domainid="+domainId);	
+    	}	    
+	} 
+	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("");          
+}
+
+function afterLoadSecurityGroupJSP() {    
+    
+}
+
+function doEditSecurityGroup($actionLink, $detailsTab, $midmenuItem1) {       
+    var $readonlyFields  = $detailsTab.find("#name, #displaytext, #tags, #domain");
+    var $editFields = $detailsTab.find("#name_edit, #displaytext_edit, #domain_edit"); 
+             
+    $readonlyFields.hide();
+    $editFields.show();  
+    $detailsTab.find("#cancel_button, #save_button").show();
+    
+    $detailsTab.find("#cancel_button").unbind("click").bind("click", function(event){    
+        $editFields.hide();
+        $readonlyFields.show();   
+        $("#save_button, #cancel_button").hide();       
+        return false;
+    });
+    $detailsTab.find("#save_button").unbind("click").bind("click", function(event){        
+        doEditsecurityGroup2($actionLink, $detailsTab, $midmenuItem1, $readonlyFields, $editFields);   
+        return false;
+    });   
+}
+
+function doEditSecurityGroup2($actionLink, $detailsTab, $midmenuItem1, $readonlyFields, $editFields) {     
+    var jsonObj = $midmenuItem1.data("jsonObj");
+    var id = jsonObj.id;
+    
+    // validate values   
+    var isValid = true;					
+    isValid &= validateString("Name", $detailsTab.find("#name_edit"), $detailsTab.find("#name_edit_errormsg"), true);		
+    isValid &= validateString("Display Text", $detailsTab.find("#displaytext_edit"), $detailsTab.find("#displaytext_edit_errormsg"), true);				
+    if (!isValid) 
+        return;	
+     
+    var array1 = [];    
+    var name = $detailsTab.find("#name_edit").val();
+    array1.push("&name="+todb(name));
+    
+    var displaytext = $detailsTab.find("#displaytext_edit").val();
+    array1.push("&displayText="+todb(displaytext));
+	
+	var tags = $detailsTab.find("#tags_edit").val();
+	array1.push("&tags="+todb(tags));	
+	
+	var domainid = $detailsTab.find("#domain_edit").val();
+	array1.push("&domainid="+todb(domainid));	
+	
+	$.ajax({
+	    data: createURL("command=updatesecurityGroup&id="+id+array1.join("")),
+		dataType: "json",
+		success: function(json) {			    
+		    var jsonObj = json.updatesecurityGroupresponse.securityGroup;   
+		    securityGroupToMidmenu(jsonObj, $midmenuItem1);
+		    securityGroupToRightPanel($midmenuItem1);	
+		    
+		    $editFields.hide();      
+            $readonlyFields.show();       
+            $("#save_button, #cancel_button").hide();     	  
+		}
+	});
+}
+
+function securityGroupToMidmenu(jsonObj, $midmenuItem1) {  
+    $midmenuItem1.attr("id", getMidmenuId(jsonObj));  
+    $midmenuItem1.data("jsonObj", jsonObj); 
+    
+    /*    
+    var $iconContainer = $midmenuItem1.find("#icon_container").show();   
+    $iconContainer.find("#icon").attr("src", "images/midmenuicon_system_securityGroup.png");	
+    */
+    
+    $midmenuItem1.find("#first_row").text(fromdb(jsonObj.name).substring(0,25)); 
+    $midmenuItem1.find("#second_row").text(fromdb(jsonObj.account).substring(0,25));  
+}
+
+function securityGroupToRightPanel($midmenuItem1) {
+    copyActionInfoFromMidMenuToRightPanel($midmenuItem1);
+    $("#right_panel_content").data("$midmenuItem1", $midmenuItem1);
+    securityGroupJsonToDetailsTab();   
+}
+
+function securityGroupJsonToDetailsTab() {     
+    var $midmenuItem1 = $("#right_panel_content").data("$midmenuItem1");
+    if($midmenuItem1 == null)
+        return;
+    
+    var jsonObj = $midmenuItem1.data("jsonObj");
+    if(jsonObj == null)
+        return;
+     
+    var $thisTab = $("#right_panel_content #tab_content_details");  
+    $thisTab.find("#tab_container").hide(); 
+    $thisTab.find("#tab_spinning_wheel").show();   
+    
+    /*
+    var id = jsonObj.id;    
+    var jsonObj;   
+    $.ajax({
+        data: createURL("command=listNetworkGroups&id="+id),
+        dataType: "json",
+        async: false,
+        success: function(json) {  
+            var items = json.listnetworkgroupsresponse.securitygroup;            
+            if(items != null && items.length > 0) {
+                jsonObj = items[0];
+                $midmenuItem1.data("jsonObj", jsonObj);  
+            }
+        }
+    });   
+    */    
+ 
+    $thisTab.find("#id").text(fromdb(jsonObj.id));
+    
+    /*
+    $thisTab.find("#grid_header_title").text(fromdb(jsonObj.name));
+    $thisTab.find("#name").text(fromdb(jsonObj.name));
+    $thisTab.find("#name_edit").val(fromdb(jsonObj.name));
+    
+    $thisTab.find("#displaytext").text(fromdb(jsonObj.displaytext));
+    $thisTab.find("#displaytext_edit").val(fromdb(jsonObj.displaytext));
+    
+    var diskSize = securityGroupGetDiskSize(jsonObj);   
+    $thisTab.find("#disksize").text(diskSize);    
+        
+    $thisTab.find("#tags").text(fromdb(jsonObj.tags));    
+    $thisTab.find("#tags_edit").val(fromdb(jsonObj.tags));    
+      
+    $thisTab.find("#domain").text(fromdb(jsonObj.domain));   
+    $thisTab.find("#domain_edit").val(fromdb(jsonObj.domainid));   
+    */
+    
+    //actions ***
+    var $actionMenu = $("#right_panel_content #tab_content_details #action_link #action_menu");
+    $actionMenu.find("#action_list").empty();    
+    buildActionLinkForTab("Edit Security Group", securityGroupActionMap, $actionMenu, $midmenuItem1, $thisTab);	  
+    buildActionLinkForTab("Delete Security Group", securityGroupActionMap, $actionMenu, $midmenuItem1, $thisTab);	  
+    
+    $thisTab.find("#tab_spinning_wheel").hide();    
+    $thisTab.find("#tab_container").show();         
+}
+
+function securityGroupClearRightPanel() {
+    securityGroupClearDetailsTab();
+}
+
+function securityGroupClearDetailsTab() {
+    var $thisTab = $("#right_panel_content").find("#tab_content_details");     
+    $thisTab.find("#id").text("");    
+    $thisTab.find("#grid_header_title").text("");
+    $thisTab.find("#name").text("");
+    $thisTab.find("#name_edit").val("");    
+    $thisTab.find("#displaytext").text("");
+    $thisTab.find("#displaytext_edit").val("");    
+    $thisTab.find("#disksize").text("");
+    $thisTab.find("#tags").text("");   
+    $thisTab.find("#domain").text("");   
+    
+    var $actionMenu = $("#right_panel_content #tab_content_details #action_link #action_menu");
+    $actionMenu.find("#action_list").empty(); 
+    $actionMenu.find("#action_list").append($("#no_available_actions").clone().show());
+}
+
+var securityGroupActionMap = {   
+    "Edit Security Group": {
+        dialogBeforeActionFn: doEditSecurityGroup
+    },   
+    "Delete Security Group": {              
+        api: "deleteNetworkGroup",     
+        isAsyncJob: false,           
+        inProcessText: "Deleting Security Group....",
+        afterActionSeccessFn: function(json, $midmenuItem1, id) {   
+            $midmenuItem1.slideUp("slow", function() {
+                $(this).remove();
+            });    
+            clearRightPanel();
+            securityGroupClearRightPanel();
+        }
+    }    
+}