Add header fields

ui/css/cloudstack3.css

@@ -6926,6 +6926,33 @@ div.panel.ui-dialog div.list-view div.fixed-header {
   margin: 0 22px 0 0;
 }
 
+/** Header fields*/
+.multi-edit .header-fields {
+  float: left;
+  height: 32px;
+  width: 100%;
+  margin-left: 8px;
+}
+
+.multi-edit .header-fields .form-item {
+  margin-bottom: 32px;
+  float: left;
+}
+
+.multi-edit .header-fields .form-item .name,
+.multi-edit .header-fields .form-item .value {
+  float: left;
+}
+
+.multi-edit .header-fields .form-item .name {
+  font-size: 14px;
+  padding: 5px;
+  color: #55687A;
+}
+
+.multi-edit .header-fields input[type=submit] {
+}
+
 /*Security Rules*/
 .security-rules .multi-edit input {
   width: 69px;

ui/scripts/network.js

@@ -1949,6 +1949,21 @@
                         }
                       }
                     }),
+                    headerFields: {
+                      tier: {
+                        label: 'Tier',
+                        select: function(args) {
+                          args.response.success({
+                            data: [
+                              { id: '-1', name: '', description: 'None' },
+                              { id: '1', name: 'tier1', description: 'tier1' },
+                              { id: '2', name: 'tier2', description: 'tier2' },
+                              { id: '3', name: 'tier3', description: 'tier3' }
+                            ]
+                          });
+                        }
+                      }
+                    },
                     multipleAdd: true,
                     fields: {
                       'name': { edit: true, label: 'label.name', isEditable: true },
@@ -1967,6 +1982,7 @@
                           });
                         }
                       },
+
                       'sticky': {
                         label: 'label.stickiness',
                         custom: {
@@ -2278,6 +2294,21 @@
 
                   // Port forwarding rules
                   portForwarding: {
+                    headerFields: {
+                      tier: {
+                        label: 'Tier',
+                        select: function(args) {
+                          args.response.success({
+                            data: [
+                              { id: '-1', name: '', description: 'None' },
+                              { id: '1', name: 'tier1', description: 'tier1' },
+                              { id: '2', name: 'tier2', description: 'tier2' },
+                              { id: '3', name: 'tier3', description: 'tier3' }
+                            ]
+                          });
+                        }
+                      }
+                    },
                     listView: $.extend(true, {}, cloudStack.sections.instances, {
                       listView: {
                         dataProvider: function(args) {

ui/scripts/ui/widgets/multiEdit.js

@@ -755,6 +755,24 @@
       }
     });
 
+    // Setup header fields
+    var showHeaderFields = args.headerFields ? true : false;
+    var headerForm = showHeaderFields ? cloudStack.dialog.createForm({
+      noDialog: true,
+      form: {
+        fields: args.headerFields
+      },
+      after: function(args) {
+        // Form fields are handled by main 'add' action
+      }
+    }) : null;
+    var $headerFields = $('<div>').addClass('header-fields');
+
+    if (headerForm) {
+      $headerFields.append(headerForm.$formContainer)
+        .prependTo($multi);
+    }
+
     if (args.actions && !args.noHeaderActionsColumn) {
       $thead.append($('<th></th>').html(_l('label.actions')).addClass('multi-actions'));
       $inputForm.append($('<td></td>').addClass('multi-actions'));