bug 9687: CloudStack UI - Instance page - Security Group tab - add ingress rules under each security group.

This commit is contained in:
Jessica Wang 2011-05-05 15:46:54 -07:00
parent 385f6ed04b
commit 231666acec
6 changed files with 202 additions and 26 deletions

View File

@ -11,6 +11,8 @@ label.account.specific=Account-Specific
label.account=Account
label.accounts=Accounts
label.acquire.new.ip=Acquire New IP
label.show.ingress.rule=Show Ingress Rule
label.hide.ingress.rule=Hide Ingress Rule
label.action.attach.disk.processing=Attaching Disk....
label.action.attach.disk=Attach Disk
label.action.attach.iso.processing=Attaching ISO....

View File

@ -10,7 +10,9 @@ label.account.id = ID de la cuenta
label.account.name = Nombre de la cuenta
label.account.specific = específicas de la cuenta
label.accounts = Cuentas
label.acquire.new.ip = adquirir nuevas IP
label.acquire.new.ip = adquirir nuevas IP
label.show.ingress.rule=Mostrar la regla del ingreso
label.hide.ingress.rule=Ocultar el artículo ingreso
label.action.attach.disk = Conecte el disco
label.action.attach.disk.processing = disco Fijación ....
label.action.attach.iso = Adjuntar ISO

View File

@ -11,6 +11,8 @@ label.account.name =アカウント名
label.account.specific =アカウント固有
label.accounts =アカウント
label.acquire.new.ip =新規取得IP
label.show.ingress.rule=表示イングレスルール
label.hide.ingress.rule=隠すイングレスルール
label.action.attach.disk.processing =ディスクをアタッチしています....
label.action.attach.disk=ディスクをアタッチ
label.action.attach.iso.processing =ISOをアタッチしています....

View File

@ -11,6 +11,8 @@ label.account.name =帐号名称
label.account.specific =特定帐号
label.accounts =帐号
label.acquire.new.ip =获得新IP
label.show.ingress.rule=显示入口规则
label.hide.ingress.rule=隐藏入口规则
label.action.attach.disk =添加磁盘
label.action.attach.disk.processing =添加磁盘....
label.action.attach.iso =添加光盘

View File

@ -297,9 +297,31 @@ dictionary = {
<div class="rightpanel_mainloader_animatedicon"></div>
<p><fmt:message key="label.loading"/> &hellip;</p>
</div>
</div>
<div id="tab_container">
</div>
</div>
<div id="tab_container">
<div class="grid_container">
<div class="grid_header">
<div class="grid_header_cell" style="width: 5%; ">
<div class="grid_header_title">
<fmt:message key="label.id"/></div>
</div>
<div class="grid_header_cell" style="width: 20%; ">
<div class="grid_header_title">
<fmt:message key="label.name"/></div>
</div>
<div class="grid_header_cell" style="width: 40%; ">
<div class="grid_header_title">
<fmt:message key="label.description"/></div>
</div>
<div class="grid_header_cell" style="width: 30%; ">
<div class="grid_header_title">
<fmt:message key="label.actions"/></div>
</div>
</div>
<div id="grid_content">
</div>
</div>
</div>
</div>
<!--Security Group tab (end)-->
@ -1059,34 +1081,118 @@ 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>
<!-- security group tab template (begin) -->
<div class="grid_rows" id="securitygroup_tab_template" style="display:none"> <!-- add class "odd", "even" in JS file-->
<div id="row_container">
<div class="grid_row_cell" style="width: 5%; ">
<div class="row_celltitles" id="id">
</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="grid_row_cell" style="width: 20%; ">
<div class="row_celltitles" id="name">
</div>
</div>
<div class="grid_row_cell" style="width: 40%; ">
<div class="row_celltitles" id="description">
</div>
</div>
<div class="grid_row_cell" style="width: 30%; ">
<div class="row_celltitles">
<a id="show_ingressrule_link" href="#" style="float:left;"><fmt:message key="label.show.ingress.rule"/></a>
<a id="hide_ingressrule_link" href="#" style="float:left;display:none" ><fmt:message key="label.hide.ingress.rule"/></a>
</div>
</div>
<div class="gridrow_loaderbox" style="display: none;" id="spinning_wheel">
<div class="gridrow_loader">
</div>
<p id="description">
<fmt:message key="label.waiting"/> &hellip;
</p>
</div>
</div>
<div class="grid_rows odd" id="row_container_edit" style="display:none; border-bottom:none;">
<div class="grid_row_cell" style="width: 20%; ">
<input id="name" class="text" style="width: 70%;" type="text" />
<div id="name_errormsg" class="errormsg" style="display: none;">Error msg will appear here</div>
</div>
<div class="grid_row_cell" style="width: 14%; ">
<div class="row_celltitles" id="public_port"></div>
</div>
<div class="grid_row_cell" style="width: 14%; ">
<div class="row_celltitles" id="private_port"></div>
</div>
<div class="grid_row_cell" style="width: 15%; ">
<select id="algorithm_select" class="select" style="width: 70%;">
</select>
</div>
<div class="grid_row_cell" style="width: 10%; ">
<div class="row_celltitles" id="state"></div>
</div>
<div class="grid_row_cell" style="width: 25%; ">
<div class="row_celltitles">
<a id="save_link" href="#" style="float:left;"><fmt:message key="label.save"/></a>
<a id="cancel_link" href="#" style="float:left; margin-left:15px; display:inline;"><fmt:message key="label.cancel"/></a>
</div>
</div>
<div class="gridrow_loaderbox" style="display: none;" id="spinning_wheel">
<div class="gridrow_loader">
</div>
<p id="description">
<fmt:message key="label.waiting"/> &hellip;
</p>
</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 class="grid_detailspanel" id="management_area" style="display: none;">
<div class="grid_details_pointer">
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="description">
<div class="grid_detailsbox">
<div class="grid_details_row odd" id="add_vm_to_lb_row">
<div class="grid_header_cell" style="width: 5%; ">
<div class="grid_header_title">
<fmt:message key="label.id"/>
</div>
</div>
<div class="grid_header_cell" style="width: 10%; ">
<div class="grid_header_title">
<fmt:message key="label.protocol"/>
</div>
</div>
<div class="grid_header_cell" style="width: 40%; ">
<div class="grid_header_title">
<fmt:message key="label.endpoint.or.operation"/>
</div>
</div>
<div class="grid_header_cell" style="width: 40%; ">
<div class="grid_header_title">
<fmt:message key="label.cidr.account"/>
</div>
</div>
</div>
<div id="subgrid_content" class="ip_description_managearea">
</div>
</div>
</div>
</div>
</div>
<!-- Security Group tab template (end) -->
<!-- security group tab template (end) -->
<!-- security group tab - ingress rule - template (begin) -->
<div id="ingressrule_template" class="grid_details_row odd" style="display:none">
<div class="grid_row_cell" style="width: 5%;">
<div class="row_celltitles" id="id"></div>
</div>
<div class="grid_row_cell" style="width: 10%;">
<div class="row_celltitles" id="protocol"></div>
</div>
<div class="grid_row_cell" style="width: 40%;">
<div class="row_celltitles" id="endpoint"></div>
</div>
<div class="grid_row_cell" style="width: 40%;">
<div class="row_celltitles" id="cidr"></div>
</div>
</div>
<!-- security group tab - ingress rule - template (end) -->
<!-- volume tab template (begin) -->
<div class="grid_container" id="volume_tab_template" style="display: none">

View File

@ -2090,11 +2090,15 @@ function vmJsonToSecurityGroupTab() {
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();
var template = $("#securitygroup_tab_template");
var $container = $thisTab.find("#tab_container").find("#grid_content").empty();
if(items != null && items.length > 0) {
for (var i = 0; i < items.length; i++) {
var newTemplate = template.clone(true);
if(i % 2 == 0)
newTemplate.addClass("even");
else
newTemplate.addClass("odd");
vmSecurityGroupJSONToTemplate(items[i], newTemplate);
$container.append(newTemplate.show());
}
@ -2285,11 +2289,69 @@ function vmNicJSONToTemplate(json, $template, index) {
function vmSecurityGroupJSONToTemplate(json, $template) {
$template.attr("id","vm_securitygroup_"+fromdb(json.id));
$template.find("#title").text(fromdb(json.name));
$template.find("#id").text(fromdb(json.id));
$template.find("#name").text(fromdb(json.name));
$template.find("#description").text(fromdb(json.description));
$template.find("#show_ingressrule_link").unbind("click").bind("click", function(event){
var $managementArea = $template.find("#management_area");
var $ingressruleSubgrid = $managementArea.find("#subgrid_content").empty();
$.ajax({
cache: false,
data: createURL("command=listSecurityGroups&id="+json.id),
dataType: "json",
async: false,
success: function(json) {
var securityGroupObj = json.listsecuritygroupsresponse.securitygroup[0];
var items = securityGroupObj.ingressrule;
if (items != null && items.length > 0) {
var template = $("#ingressrule_template");
for (var i = 0; i < items.length; i++) {
var newTemplate = template.clone(true);
securityGroupIngressRuleJSONToTemplate(items[i], newTemplate);
$ingressruleSubgrid.append(newTemplate.show());
}
}
}
});
$managementArea.show();
$template.find("#show_ingressrule_link").hide();
$template.find("#hide_ingressrule_link").show();
return false;
});
$template.find("#hide_ingressrule_link").unbind("click").bind("click", function(event){
$template.find("#management_area").hide();
$template.find("#hide_ingressrule_link").hide();
$template.find("#show_ingressrule_link").show();
return false;
});
}
function securityGroupIngressRuleJSONToTemplate(jsonObj, $template) {
$template.data("jsonObj", jsonObj);
$template.attr("id", "securitygroup_ingressRule_"+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.securitygroupname != null && jsonObj.securitygroupname.length > 0)
cidrOrGroup = jsonObj.account + "/" + jsonObj.securitygroupname;
$template.find("#cidr").text(cidrOrGroup);
}
function vmVolumeJSONToTemplate(json, $template) {
$template.attr("id","vm_volume_"+fromdb(json.id));
$template.data("jsonObj", json);