mirror of
https://github.com/apache/cloudstack.git
synced 2025-11-03 04:12:31 +01:00
Security Group page - add Ingress Rule tab.
This commit is contained in:
Jessica Wang
parent
ecc4297219
commit
8d8dc339bd
@ -24,9 +24,12 @@
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="tabbox" style="margin-top: 15px;">
|
<div class="tabbox" style="margin-top: 15px;">
|
||||||
<div class="content_tabs on">
|
<div class="content_tabs on" id="tab_details">
|
||||||
<%=t.t("details")%></div>
|
<%=t.t("details")%></div>
|
||||||
|
<div class="content_tabs off" id="tab_ingressrule">
|
||||||
|
Ingress Rule</div>
|
||||||
</div>
|
</div>
|
||||||
|
<!--Details tab (start)-->
|
||||||
<div id="tab_content_details">
|
<div id="tab_content_details">
|
||||||
<div id="tab_spinning_wheel" class="rightpanel_mainloader_panel" style="display: none;">
|
<div id="tab_spinning_wheel" class="rightpanel_mainloader_panel" style="display: none;">
|
||||||
<div class="rightpanel_mainloaderbox">
|
<div class="rightpanel_mainloaderbox">
|
||||||
@ -112,8 +115,92 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</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 …</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="tab_container">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!--Ingress Rule tab (end)-->
|
||||||
</div>
|
</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 …
|
||||||
|
</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 -->
|
<!-- Add Disk Offering Dialog -->
|
||||||
<div id="dialog_add_disk" title="Add Disk Offering" style="display:none">
|
<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>
|
<p>Please fill in the following data to add a new disk Offering.</p>
|
||||||
|
|||||||
@ -43,6 +43,12 @@ function securityGroupGetSearchParams() {
|
|||||||
|
|
||||||
function afterLoadSecurityGroupJSP() {
|
function afterLoadSecurityGroupJSP() {
|
||||||
initAddSecurityGroupDialog();
|
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() {
|
function initAddSecurityGroupDialog() {
|
||||||
@ -198,7 +204,7 @@ function securityGroupToMidmenu(jsonObj, $midmenuItem1) {
|
|||||||
function securityGroupToRightPanel($midmenuItem1) {
|
function securityGroupToRightPanel($midmenuItem1) {
|
||||||
copyActionInfoFromMidMenuToRightPanel($midmenuItem1);
|
copyActionInfoFromMidMenuToRightPanel($midmenuItem1);
|
||||||
$("#right_panel_content").data("$midmenuItem1", $midmenuItem1);
|
$("#right_panel_content").data("$midmenuItem1", $midmenuItem1);
|
||||||
securityGroupJsonToDetailsTab();
|
$("#tab_details").click();
|
||||||
}
|
}
|
||||||
|
|
||||||
function securityGroupJsonToDetailsTab() {
|
function securityGroupJsonToDetailsTab() {
|
||||||
@ -247,6 +253,79 @@ function securityGroupJsonToDetailsTab() {
|
|||||||
$thisTab.find("#tab_container").show();
|
$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() {
|
function securityGroupClearRightPanel() {
|
||||||
securityGroupClearDetailsTab();
|
securityGroupClearDetailsTab();
|
||||||
}
|
}
|
||||||
|
|||||||
@ -19,6 +19,11 @@
|
|||||||
function snapshotGetSearchParams() {
|
function snapshotGetSearchParams() {
|
||||||
var moreCriteria = [];
|
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");
|
var $advancedSearchPopup = $("#advanced_search_popup");
|
||||||
if (lastSearchType == "advanced_search" && $advancedSearchPopup.length > 0) {
|
if (lastSearchType == "advanced_search" && $advancedSearchPopup.length > 0) {
|
||||||
var name = $advancedSearchPopup.find("#adv_search_name").val();
|
var name = $advancedSearchPopup.find("#adv_search_name").val();
|
||||||
@ -37,13 +42,7 @@ function snapshotGetSearchParams() {
|
|||||||
moreCriteria.push("&account="+account);
|
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("");
|
return moreCriteria.join("");
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user