Implement static NAT tier select UI

Adds a new drop-down to the enable static NAT dialog to allow selecting a tier to be associated with the VM. This is in the header of the list view.

It is defined as follows:

enableStaticNAT: {
  ...
    action: {
      noAdd: true,
      custom: cloudStack.uiCustom.enableStaticNAT({
        // VPC
        tierSelect: function(args) {
          args.response.success({
            data: [
              { id: '1', description: 'VPC 1' },
              { id: '2', description: 'VPC 2' }
            ]
          });
        },
    ...

ui/css/cloudstack3.css

@@ -9266,6 +9266,34 @@ div.panel.ui-dialog div.list-view div.fixed-header {
   width: 46px;
 }
 
+/*VPC: Enable Static NAT fields*/
+.list-view.instances .filters.tier-select {
+  width: 246px;
+  /*+border-radius:4px;*/
+  -moz-border-radius: 4px;
+  -webkit-border-radius: 4px;
+  -khtml-border-radius: 4px;
+  border-radius: 4px;
+  background: #8F98A1;
+  padding: 2px 20px 2px 13px;
+  margin: 1px 120px 0 19px;
+  border: 1px solid #000000;
+}
+
+.list-view.instances .filters.tier-select label {
+  color: #FFFFFF;
+  /*+text-shadow:0px 1px 3px #000000;*/
+  -moz-text-shadow: 0px 1px 3px #000000;
+  -webkit-text-shadow: 0px 1px 3px #000000;
+  -o-text-shadow: 0px 1px 3px #000000;
+  text-shadow: 0px 1px 3px #000000;
+}
+
+.list-view.instances .filters.tier-select select {
+  width: 166px;
+  float: left;
+}
+
 /*Configure ACL dialog*/
 .ui-dialog.configure-acl {
 }

ui/scripts/network.js

@@ -1230,9 +1230,20 @@
               },
               enableStaticNAT: {
                 label: 'label.action.enable.static.NAT',
+                
                 action: {
                   noAdd: true,
                   custom: cloudStack.uiCustom.enableStaticNAT({
+                    // VPC
+                    tierSelect: function(args) {
+                      args.response.success({
+                        data: [
+                          { id: '1', description: 'VPC 1' },
+                          { id: '2', description: 'VPC 2' }
+                        ]
+                      });
+                    },
+
                     listView: $.extend(true, {}, cloudStack.sections.instances, {
                       listView: {
                         dataProvider: function(args) {

ui/scripts/ui-custom/enableStaticNAT.js

@@ -18,6 +18,7 @@
   cloudStack.uiCustom.enableStaticNAT = function(args) {
     var listView = args.listView;
     var action = args.action;
+    var tierSelect = args.tierSelect;
 
     return function(args) {
       var context = args.context;
@@ -86,6 +87,7 @@
 
               $dataList.fadeOut(function() {
                 action({
+                  tierID: $dataList.find('.tier-select select').val(),
                   context: $.extend(true, {}, context, {
                     instances: [
                       $dataList.find('tr.multi-edit-selected').data('json-obj')
@@ -124,6 +126,37 @@
           }
         ]
       }).parent('.ui-dialog').overlay();
+
+      // Add tier select dialog
+      if (tierSelect) {
+        var $toolbar = $dataList.find('.toolbar');
+        var $tierSelect = $('<div>').addClass('filters tier-select').prependTo($toolbar);
+        var $tierSelectLabel = $('<label>').html('Select tier').appendTo($tierSelect);
+        var $tierSelectInput = $('<select>').appendTo($tierSelect);
+
+        // Get tier data
+        tierSelect({
+          context: context,
+          response: {
+            success: function(args) {
+              var data = args.data;
+
+              $(data).map(function(index, item) {
+                var $option = $('<option>');
+
+                $option.attr('value', item.id);
+                $option.html(item.description);
+                $option.appendTo($tierSelectInput);
+              });
+            },
+            error: function(message) {
+              cloudStack.dialog.notice({
+                message: message ? message : 'Could not retrieve VPC tiers'
+              });
+            }
+          }
+        });
+      }
     };
   };
 }(cloudStack, jQuery));