From 7e96bf5f1989f43db969ee026e34ae96efa54cf0 Mon Sep 17 00:00:00 2001 From: Brian Federle Date: Wed, 26 Jun 2013 12:07:52 -0700 Subject: [PATCH] CLOUDSTACK-3170: Support editing ACL rule items --- ui/scripts/ui/dialog.js | 4 +- ui/scripts/ui/widgets/multiEdit.js | 5 +- ui/scripts/vpc.js | 287 ++++++++++++++++++++--------- 3 files changed, 204 insertions(+), 92 deletions(-) diff --git a/ui/scripts/ui/dialog.js b/ui/scripts/ui/dialog.js index 6f05af2dd3e..e4ca389d3c0 100644 --- a/ui/scripts/ui/dialog.js +++ b/ui/scripts/ui/dialog.js @@ -236,7 +236,7 @@ response: { success: function(args) { $(args.data).each(function() { - var id = this.id; + var id = this.id ? this.id : this.name; var description = this.description; if (args.descriptionField) @@ -272,7 +272,7 @@ .appendTo($value); // Pass form item to provider for additional manipulation - $.extend(selectArgs, { $select: $input }); + $.extend(selectArgs, { $select: $input, $form: $form, type: 'createForm' }); if (dependsOn) { $dependsOn = $input.closest('form').find('input, select').filter(function() { diff --git a/ui/scripts/ui/widgets/multiEdit.js b/ui/scripts/ui/widgets/multiEdit.js index ea177c57848..26a6bdb7529 100755 --- a/ui/scripts/ui/widgets/multiEdit.js +++ b/ui/scripts/ui/widgets/multiEdit.js @@ -336,8 +336,7 @@ }, error: function(args) { error(args); - $loading.remove(); - $dataItem.show(); + $multi.trigger('refresh'); return cloudStack.dialog.error; } @@ -402,6 +401,8 @@ var editableFields = {}; $.each(fields, function(key, field) { + field.isDisabled = false; + if (field && field.isEditable) editableFields[key] = $.extend(true, {}, field, { defaultValue: data[key] }); diff --git a/ui/scripts/vpc.js b/ui/scripts/vpc.js index 310fbb60fc4..57422863346 100644 --- a/ui/scripts/vpc.js +++ b/ui/scripts/vpc.js @@ -60,13 +60,15 @@ 'number':{ label:'Rule Number', - edit:true + edit:true, + isEditable: true }, - 'cidrlist': { edit: true, label: 'label.cidr' }, + 'cidrlist': { edit: true, label: 'label.cidr', isEditable: true }, action: { label: 'Action', + isEditable: true, select: function(args) { args.response.success({ data: [ @@ -78,63 +80,125 @@ }, 'protocol': { label: 'label.protocol', + isEditable: true, select: function(args) { + var isEditDialog = args.type === 'createForm'; + args.$select.change(function() { - var $inputs = args.$form.find('input'); - var $icmpFields = $inputs.filter(function() { - var name = $(this).attr('name'); + var $inputs, $icmpFields, $otherFields, $portFields, $protocolFields, $protocolinput; + + // + // Editing existing rules in createForm dialog + // + if (isEditDialog) { + $inputs = args.$form.find('.form-item'); + $icmpFields = $inputs.filter(function() { + var name = $(this).attr('rel'); - return $.inArray(name, [ - 'icmptype', - 'icmpcode' - ]) > -1; - }); - var $otherFields = $inputs.filter(function() { - var name = $(this).attr('name'); + return $.inArray(name, [ + 'icmptype', + 'icmpcode' + ]) > -1; + }); + $otherFields = $inputs.filter(function() { + var name = $(this).attr('rel'); - return name != 'protocolnumber' && - name != 'icmptype' && - name != 'icmpcode' && - name != 'cidrlist'; - }); - var $portFields = $inputs.filter(function() { - var name = $(this).attr('name'); - return $.inArray(name, [ - 'startport', - 'endport' - ]) > -1; - }); + return name != 'protocolnumber' && + name != 'icmptype' && + name != 'icmpcode' && + name != 'cidrlist'; + }); + $portFields = $inputs.filter(function() { + var name = $(this).attr('rel'); + return $.inArray(name, [ + 'startport', + 'endport' + ]) > -1; + }); + $protocolFields = $inputs.filter(function(){ + var name = $(this).attr('rel'); - var $protocolinput = args.$form.find('td input'); - var $protocolFields = $protocolinput.filter(function(){ - var name = $(this).attr('name'); + return $.inArray(name,['protocolnumber']) > -1; + }); - return $.inArray(name,['protocolnumber']) > -1; - }); - - if ($(this).val() == 'protocolnumber' ){ - $icmpFields.hide(); - $otherFields.hide(); - $protocolFields.show().addClass('required'); - } else if ($(this).val() == 'icmp') { - $icmpFields.show(); - $icmpFields.attr('disabled', false); - $protocolFields.hide().removeClass('required'); - $otherFields.attr('disabled', 'disabled'); - $otherFields.hide(); - $otherFields.parent().find('label.error').hide(); - } else { - $otherFields.show(); - $otherFields.parent().find('label.error').hide(); - $otherFields.attr('disabled', false); - $icmpFields.attr('disabled', 'disabled'); - $icmpFields.hide(); - $icmpFields.parent().find('label.error').hide(); - $protocolFields.hide().removeClass('required'); - if ($(this).val() == 'all'){ - $portFields.attr('disabled', 'disabled'); + if ($(this).val() == 'protocolnumber' ){ + $icmpFields.hide(); + $portFields.show(); + $protocolFields.show(); + } else if ($(this).val() == 'icmp') { + $icmpFields.show(); + $protocolFields.hide(); $portFields.hide(); - } + } else { + $otherFields.show(); + $icmpFields.hide(); + $protocolFields.hide(); + + if ($(this).val() == 'all') { + $portFields.hide(); + } + } + } else { + // + // Add new form + // + $inputs = args.$form.find('input'); + $icmpFields = $inputs.filter(function() { + var name = $(this).attr('name'); + + return $.inArray(name, [ + 'icmptype', + 'icmpcode' + ]) > -1; + }); + $otherFields = $inputs.filter(function() { + var name = $(this).attr('name'); + + return name != 'protocolnumber' && + name != 'icmptype' && + name != 'icmpcode' && + name != 'cidrlist' && + name != 'number'; + }); + $portFields = $inputs.filter(function() { + var name = $(this).attr('name'); + return $.inArray(name, [ + 'startport', + 'endport' + ]) > -1; + }); + + $protocolinput = args.$form.find('td input'); + $protocolFields = $protocolinput.filter(function(){ + var name = $(this).attr('name'); + + return $.inArray(name,['protocolnumber']) > -1; + }); + + if ($(this).val() == 'protocolnumber' ){ + $icmpFields.hide(); + $otherFields.hide(); + $protocolFields.show().addClass('required'); + } else if ($(this).val() == 'icmp') { + $icmpFields.show(); + $icmpFields.attr('disabled', false); + $protocolFields.hide().removeClass('required'); + $otherFields.attr('disabled', 'disabled'); + $otherFields.hide(); + $otherFields.parent().find('label.error').hide(); + } else { + $otherFields.show(); + $otherFields.parent().find('label.error').hide(); + $otherFields.attr('disabled', false); + $icmpFields.attr('disabled', 'disabled'); + $icmpFields.hide(); + $icmpFields.parent().find('label.error').hide(); + $protocolFields.hide().removeClass('required'); + if ($(this).val() == 'all'){ + $portFields.attr('disabled', 'disabled'); + $portFields.hide(); + } + } } }); @@ -153,9 +217,9 @@ } }, - 'protocolnumber': {label:'Protocol Number',edit:true}, - 'startport': { edit: true, label: 'label.start.port', isOptional: true }, - 'endport': { edit: true, label: 'label.end.port', isOptional: true }, + 'protocolnumber': {label:'Protocol Number',edit:true, isEditable: true}, + 'startport': { edit: true, label: 'label.start.port', isOptional: true, isEditable: true }, + 'endport': { edit: true, label: 'label.end.port', isOptional: true, isEditable: true }, 'networkid': { label: 'Select Tier', select: function(args) { @@ -192,10 +256,11 @@ }); } }, - 'icmptype': { edit: true, label: 'ICMP.type', isDisabled: true, desc:'Please specify -1 if you want to allow all ICMP types', defaultValue:'-1' }, - 'icmpcode': { edit: true, label: 'ICMP.code', isDisabled: true, desc:'Please specify -1 if you want to allow all ICMP codes', defaultValue:'-1' }, + 'icmptype': { edit: true, label: 'ICMP.type', isDisabled: true, desc:'Please specify -1 if you want to allow all ICMP types', defaultValue:'-1', isEditable: true }, + 'icmpcode': { edit: true, label: 'ICMP.code', isDisabled: true, desc:'Please specify -1 if you want to allow all ICMP codes', defaultValue:'-1', isEditable: true }, 'traffictype' : { label: 'label.traffic.type', + isEditable: true, select: function(args) { args.response.success({ data: [ @@ -219,54 +284,100 @@ var $multi = args.$multi; //Support for Protocol Number between 0 to 255 if(args.data.protocol == 'protocolnumber'){ - $.extend(args.data,{protocol:args.data.protocolnumber}); - delete args.data.protocolnumber; + $.extend(args.data,{protocol:args.data.protocolnumber}); + delete args.data.protocolnumber; } else delete args.data.protocolnumber; - + if((args.data.protocol == 'tcp' || args.data.protocol == 'udp') && (args.data.startport=="" || args.data.startport == undefined)){ - cloudStack.dialog.notice({message:_l('Start Port or End Port value should not be blank')}); + cloudStack.dialog.notice({message:_l('Start Port or End Port value should not be blank')}); $(window).trigger('cloudStack.fullRefresh'); } else if((args.data.protocol == 'tcp' || args.data.protocol == 'udp') && (args.data.endport=="" || args.data.endport == undefined)){ - cloudStack.dialog.notice({message:_l('Start Port or End Port value should not be blank')}); + cloudStack.dialog.notice({message:_l('Start Port or End Port value should not be blank')}); $(window).trigger('cloudStack.fullRefresh'); } - else{ - $.ajax({ - url: createURL('createNetworkACL'), - data: $.extend(args.data, { - aclid: args.context.aclLists[0].id - }), - dataType: 'json', - success: function(data) { - args.response.success({ - _custom: { - jobId: data.createnetworkaclresponse.jobid, - getUpdatedItem: function(json) { - $(window).trigger('cloudStack.fullRefresh'); + else{ + $.ajax({ + url: createURL('createNetworkACL'), + data: $.extend(args.data, { + aclid: args.context.aclLists[0].id + }), + dataType: 'json', + success: function(data) { + args.response.success({ + _custom: { + jobId: data.createnetworkaclresponse.jobid, + getUpdatedItem: function(json) { + $(window).trigger('cloudStack.fullRefresh'); - return data; + return data; + } + }, + notification: { + label: 'label.add.ACL', + poll: pollAsyncJobResult } - }, - notification: { - label: 'label.add.ACL', - poll: pollAsyncJobResult - } - }); - }, - error: function(data) { - args.response.error(parseXMLHttpResponse(data)); - } - }); - } + }); + }, + error: function(data) { + args.response.error(parseXMLHttpResponse(data)); + } + }); + } } }, actions: { + edit: { + label: 'label.edit', + action: function(args) { + var data = { + id: args.context.multiRule[0].id, + cidrlist: args.data.cidrlist, + number: args.data.number, + protocol: args.data.protocol, + traffictype: args.data.traffictype, + action: args.data.action + }; + + if (data.protocol === 'tcp' || data.protocol === 'udp') { + $.extend(data, { + startport: args.data.startport, + endport: args.data.endport + }); + } else if (data.protocol === 'icmp') { + $.extend(data, { + icmptype: args.data.icmptype, + icmpcode: args.data.icmpcode + }); + } else if (data.protocol === 'protocolnumber') { + $.extend(data, { + protocolnumber: args.data.protocolnumber + }); + } + + $.ajax({ + url: createURL('updateNetworkACLItem'), + data: data, + success: function(json) { + args.response.success({ + _custom: { jobId: json.createnetworkaclresponse.jobid }, // API response obj name needs to be fixed + notification: { + label: 'Edit ACL rule', + poll: pollAsyncJobResult + } + }); + }, + error: function(error) { + args.response.error(parseXMLHttpResponse(error)); + } + }); + } + }, destroy: { label: 'label.remove.ACL', action: function(args) {