diff --git a/ui/css/cloudstack3.css b/ui/css/cloudstack3.css index 8c1bf299d97..6ed58329de3 100644 --- a/ui/css/cloudstack3.css +++ b/ui/css/cloudstack3.css @@ -9265,6 +9265,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 { } diff --git a/ui/scripts/network.js b/ui/scripts/network.js index 228a6a4268d..0ba7b2b6aea 100644 --- a/ui/scripts/network.js +++ b/ui/scripts/network.js @@ -1241,9 +1241,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) { diff --git a/ui/scripts/ui-custom/enableStaticNAT.js b/ui/scripts/ui-custom/enableStaticNAT.js index ef645f43f0e..2b2fb267345 100644 --- a/ui/scripts/ui-custom/enableStaticNAT.js +++ b/ui/scripts/ui-custom/enableStaticNAT.js @@ -14,6 +14,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; @@ -82,6 +83,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') @@ -120,6 +122,37 @@ } ] }).parent('.ui-dialog').overlay(); + + // Add tier select dialog + if (tierSelect) { + var $toolbar = $dataList.find('.toolbar'); + var $tierSelect = $('