VPC: Update site-to-site VPN creation flow

If no VPN gateway exists for a VPC, then immediately show a dialog box
asking if user wants to add. If so, create VPN gateway and show list
view afterwards.

- This removes the 'add' button from the list view, moving the code up
  a level in the object to siteToSiteVPN.add

- In addition there is a new function, siteToSiteVPN.preCheck, which
  returns true/false. If true, then show list view immediately; if
  false, show dialog and go through creation process, showing list
  view afterwards.

ui/scripts/ui-custom/vpc.js

@@ -12,6 +12,7 @@
   var elems = {
     vpcConfigureTooltip: function(args) {
       var $browser = args.$browser;
+      var $chart = args.$chart;
       var ipAddresses = args.ipAddresses;
       var gateways = args.gateways;
       var siteToSiteVPN = args.siteToSiteVPN;
@@ -57,14 +58,59 @@
             });
             break;
           case 'site-to-site-vpn':
-            $browser.cloudBrowser('addPanel', {
-              title: 'Site-to-site VPNs',
-              maximizeIfSelected: true,
-              complete: function($panel) {
-                //siteToSiteVPN is an object
-                $panel.listView(siteToSiteVPN, {context: siteToSiteVPN.context});
-              }
-            });
+            //siteToSiteVPN is an object
+            var addAction = siteToSiteVPN.add;
+            var isVPNPresent = addAction.preCheck({ context: siteToSiteVPN.context });
+            var showVPNListView = function() {
+              $browser.cloudBrowser('addPanel', {
+                title: 'Site-to-site VPNs',
+                maximizeIfSelected: true,
+                complete: function($panel) {
+                  $panel.listView(siteToSiteVPN, {context: siteToSiteVPN.context});
+                }
+              });
+            };
+
+            if (isVPNPresent) {
+              showVPNListView();
+            } else {
+              cloudStack.dialog.confirm({
+                message: 'Please confirm that you want to add a VPN gateway.',
+                action: function() {
+                  var $loading = $('<div>').addClass('loading-overlay').appendTo($chart);
+                  var error = function(message) {
+                    $loading.remove();
+                    cloudStack.dialog.notice({ message: message });
+                  };
+
+                  addAction.action({
+                    context: siteToSiteVPN.context,
+                    response: {
+                      success: function(args) {
+                        var _custom = args._custom;
+                        var notification = {
+                          poll: addAction.notification.poll,
+                          _custom: _custom,
+                          desc: addAction.messages.notification()
+                        };
+                        var success = function(args) {
+                          if (!$chart.is(':visible')) return;
+                          
+                          $loading.remove();
+                          showVPNListView();
+                        };
+                        
+                        cloudStack.ui.notifications.add(
+                          notification,
+                          success, {},
+                          error, {}
+                        );
+                      }
+                    }
+                  });
+                }
+              });
+            }
             break;
           }
         });
@@ -92,6 +138,7 @@
     },
     vpcConfigureArea: function(args) {
       var $browser = args.$browser;
+      var $chart = args.$chart;
       var ipAddresses = args.ipAddresses;
       var gateways = args.gateways;
       var siteToSiteVPN = args.siteToSiteVPN;
@@ -104,6 +151,7 @@
       $configIcon.mouseover(function() {
         var $tooltip = elems.vpcConfigureTooltip({
           $browser: $browser,
+          $chart: $chart,
           ipAddresses: ipAddresses,
           gateways: gateways,
           siteToSiteVPN: siteToSiteVPN
@@ -294,6 +342,7 @@
             .append(
               elems.vpcConfigureArea({
                 $browser: $browser,
+                $chart: $chart,
                 ipAddresses: $.extend(ipAddresses, {context: context}),
                 gateways: $.extend(gateways, {context: context}),
                 siteToSiteVPN: $.extend(siteToSiteVPN, {context: context})