CS-15802: Add VPC filter to instance wizard network select

Adds drop-down select to filter networks by VPC.

-If no VPC is selected, only show non-VPC isolated networks

-If VPC is selected, show tiers from specified VPC. Note that only one
 tier/network can be checked at a time in this mode, and 'add network'
 text field is hidden

ui/scripts/instanceWizard.js

@@ -16,7 +16,7 @@
 // under the License. 
 
 (function($, cloudStack) {
-  var zoneObjs, hypervisorObjs, featuredTemplateObjs, communityTemplateObjs, myTemplateObjs, featuredIsoObjs, community
+  var zoneObjs, hypervisorObjs, featuredTemplateObjs, communityTemplateObjs, myTemplateObjs, featuredIsoObjs, community;
   var selectedZoneObj, selectedTemplateObj, selectedHypervisor, selectedDiskOfferingObj; 
   var step5ContainerType = 'nothing-to-select'; //'nothing-to-select', 'select-network', 'select-security-group'
 
@@ -24,6 +24,17 @@
     maxDiskOfferingSize: function() {
       return g_capabilities.customdiskofferingmaxsize;
     },
+
+    // Called in networks list, when VPC drop-down is changed
+    // -- if vpcID given, return true if in network specified by vpcID
+    // -- if vpcID == -1, return true if network is not associated with a VPC
+    vpcFilter: function(data, vpcID) {
+      return vpcID != -1?
+        data.vpcid == vpcID :
+        !data.vpcid;
+    },
+
+    // Data providers for each wizard step
     steps: [
       // Step 1: Setup
       function(args) {
@@ -308,11 +319,23 @@
           networkData.account = g_account;
         }
 
-        var networkObjs;
+        var networkObjs, vpcObjs;
+
+        // Get VPCs
+        $.ajax({
+          url: createURL('listVPCs'),
+          data: isDomainAdmin() ?
+            { account: args.context.users[0].account, domainid: args.context.users[0].domainid } :
+            { listAll: true },
+          async: false,
+          success: function(json) {
+            vpcObjs = json.listvpcsresponse.vpc ? json.listvpcsresponse.vpc : [];
+          }
+        });
+        
         $.ajax({
           url: createURL('listNetworks'),
           data: networkData,
-          dataType: "json",
           async: false,
           success: function(json) {
             networkObjs = json.listnetworksresponse.network ? json.listnetworksresponse.network : [];
@@ -344,7 +367,8 @@
             myNetworks: [], //not used any more
             sharedNetworks: networkObjs,
             securityGroups: [],
-            networkOfferings: networkOfferingObjs
+            networkOfferings: networkOfferingObjs,
+            vpcs: vpcObjs
           }
         });
       }
@@ -377,7 +401,8 @@
             myNetworks: [], //not used any more
             sharedNetworks: [],
             securityGroups: securityGroupArray,
-            networkOfferings: []
+            networkOfferings: [],
+            vpcs: []
           }
         });
       }
@@ -389,7 +414,8 @@
             myNetworks: [], //not used any more
             sharedNetworks: [],
             securityGroups: [],
-            networkOfferings: []
+            networkOfferings: [],
+            vpcs: []
           }
         });
       }

ui/scripts/ui-custom/instanceWizard.js

@@ -108,6 +108,14 @@
                       .click(function() {
                         var $radio = $(this).closest('.select').find('input[type=radio]');
 
+                        if ($(this).attr('type') == 'checkbox') {
+                          if ($(this).closest('.select-container').hasClass('single-select')) {
+                            $(this).closest('.select').siblings().find('input[type=checkbox]')
+                              .attr('checked', false);
+                            $(this).closest('.select').find('input[type=radio]').click();
+                          }
+                        }
+                        
                         if ($radio.is(':checked') && !$(this).is(':checked')) {
                           if (!$radio.closest('.select').index()) {
                             return false;
@@ -126,7 +134,8 @@
                     $('<div>').addClass('select-desc')
                       .append($('<div>').addClass('name').html(this[fields.name]))
                       .append($('<div>').addClass('desc').html(this[fields.desc]))
-                  );
+                  )
+                  .data('json-obj', this);
 
             $selects.append($select);
 
@@ -145,6 +154,11 @@
                     if (!$checkbox.is(':checked')) {
                       $checkbox.attr('checked', true);
                     }
+
+                    if ($(this).closest('.select-container').hasClass('single-select')) {
+                      $(this).closest('.select').siblings().find('input[type=checkbox]')
+                        .attr('checked', false);
+                    }
                   })
                   .after(
                     $('<div>').addClass('name').html(options.secondary.desc)
@@ -486,9 +500,81 @@
             // Show relevant conditional sub-step if present
             $step.find('.wizard-step-conditional').hide();
 
+            // Filter network list by VPC ID
+            var filterNetworkList = function(vpcID) {
+              var $selects = $step.find('.my-networks .select-container .select');
+              var $visibleSelects = $($.grep($selects, function(select) {
+                var $select = $(select);
+                
+                return args.vpcFilter($select.data('json-obj'), vpcID);
+              }));
+              var $addNetworkForm = $step.find('.select.new-network');
+              var $addNewNetworkCheck = $addNetworkForm.find('input[name=new-network]');
+
+              // VPC networks cannot be created via instance wizard
+              if (vpcID != -1) {
+                $step.find('.my-networks .select-container').addClass('single-select');
+                $addNetworkForm.hide();
+
+                if ($addNewNetworkCheck.is(':checked')) {
+                  $addNewNetworkCheck.click();
+                  $addNewNetworkCheck.attr('checked', false);
+                }
+              } else {
+                $step.find('.my-networks .select-container').removeClass('single-select');
+                $addNetworkForm.show();
+              }
+              
+              $selects.find('input[type=checkbox]').attr('checked', false);
+              $selects.hide();
+              $visibleSelects.show();
+
+              // Select first visible item by default
+              $visibleSelects.filter(':first')
+                .find('input[type=radio]')
+                .click();
+
+              cloudStack.evenOdd($visibleSelects, 'div.select', {
+                even: function($elem) {
+                  $elem.removeClass('odd');
+                  $elem.addClass('even');
+                },
+                odd: function($elem) {
+                  $elem.removeClass('even');
+                  $elem.addClass('odd');
+                }
+              });
+            };
+
+            var $vpcSelect = $step.find('select[name=vpc-filter]');
+
+            $vpcSelect.unbind('change');
+            $vpcSelect.change(function() {
+              filterNetworkList($vpcSelect.val());
+            });
+
             return {
               response: {
                 success: function(args) {
+                  var vpcs = args.data.vpcs;
+
+                  // Populate VPC drop-down
+                  $vpcSelect.html('');
+                  $(vpcs).map(function(index, vpc) {
+                    var $option = $('<option>');
+                    var id = vpc.id;
+                    var description = vpc.name;
+
+                    $option.attr('value', id);
+                    $option.html(description);
+                    $option.appendTo($vpcSelect);
+                  });
+
+                  // 'No VPC' option
+                  $('<option>').attr('value', '-1').html('None').prependTo($vpcSelect);
+
+                  $vpcSelect.val(-1);
+                  
                   // Populate network offering drop-down
                   $(args.data.networkOfferings).each(function() {
                     $('<option>')
@@ -523,6 +609,9 @@
                     })
                   );
 
+                  // Show non-VPC networks by default
+                  filterNetworkList(-1);
+
                   // Security groups (alt. page)
                   $step.find('.security-groups .select-container').append(
                     makeSelects('security-groups', args.data.securityGroups, {