CLOUDSTACK-3170: Support editing ACL rule items

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() {

ui/scripts/ui/widgets/multiEdit.js

@@ -336,8 +336,7 @@
                             },
                             error: function(args) {
                               error(args);
-                              $loading.remove();
+                              $multi.trigger('refresh');
-                              $dataItem.show();
 
                               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]
                 });

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,10 +80,70 @@
       },
       '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 $inputs, $icmpFields, $otherFields, $portFields, $protocolFields, $protocolinput;
-            var $icmpFields = $inputs.filter(function() {
+            
+            //
+            // 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;
+              });
+              $otherFields = $inputs.filter(function() {
+                var name = $(this).attr('rel');
+
+                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');
+
+                return $.inArray(name,['protocolnumber']) > -1;
+              });
+
+              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, [
@@ -89,15 +151,16 @@
                   'icmpcode'
                 ]) > -1;
               });
-            var $otherFields = $inputs.filter(function() {
+              $otherFields = $inputs.filter(function() {
                 var name = $(this).attr('name');
 
                 return name != 'protocolnumber' &&
                   name != 'icmptype' &&
                   name != 'icmpcode' &&
-                     name != 'cidrlist';
+                  name != 'cidrlist' &&
+                  name != 'number';
               });
-            var $portFields = $inputs.filter(function() {
+              $portFields = $inputs.filter(function() {
                 var name = $(this).attr('name');
                 return $.inArray(name, [
                   'startport',
@@ -105,8 +168,8 @@
                 ]) > -1;
               });
 
-            var $protocolinput = args.$form.find('td input');
+              $protocolinput = args.$form.find('td input');
-            var $protocolFields = $protocolinput.filter(function(){
+              $protocolFields = $protocolinput.filter(function(){
                 var name = $(this).attr('name');
 
                 return  $.inArray(name,['protocolnumber']) > -1;
@@ -136,6 +199,7 @@
                   $portFields.hide();
                 }
               }              
+            }
           });
 
           args.response.success({
@@ -153,9 +217,9 @@
         }
       },
 
-      'protocolnumber': {label:'Protocol Number',edit:true},
+      'protocolnumber': {label:'Protocol Number',edit:true, isEditable: true},
-      'startport': { edit: true, label: 'label.start.port', isOptional: true },
+      'startport': { edit: true, label: 'label.start.port', isOptional: true, isEditable: true },
-      'endport': { edit: true, label: 'label.end.port', isOptional: 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' },
+      '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' },
+      '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: [
@@ -267,6 +332,52 @@
       }
     },
     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) {