Site-to-site VPN UI: Show confirm dialog if no gateways exist

ui/modules/vpc/vpc.js

@@ -168,27 +168,60 @@
         $dashboardItem.appendTo($dashboard);
 
         $dashboardItem.click(function() {
-          $('#browser .container').cloudBrowser('addPanel', {
-            title: tier.name + ' - ' + dashboardItem.name,
-            maximizeIfSelected: true,
-            complete: function($panel) {
-              var section = cloudStack.vpc.sections[id];
-              var $section = $('<div>');
+          var section = cloudStack.vpc.sections[id];
+          var $section = $('<div>');
+          var $loading = $('<div>').addClass('loading-overlay');
+          
+          if ($.isFunction(section)) {
+            section = cloudStack.vpc.sections[id]();
+          }
 
-              if ($.isFunction(section)) {
-                section = cloudStack.vpc.sections[id]();
+          var before = section.before;
+          var load = function() {
+            $('#browser .container').cloudBrowser('addPanel', {
+              title: tier.name + ' - ' + dashboardItem.name,
+              maximizeIfSelected: true,
+              complete: function($panel) {
+                if (section.listView) {
+                  $section.listView($.extend(true, {}, section, {
+                    onActionComplete: function() {
+                      $dashboardItem.closest('.vpc-network-chart').trigger('reload');
+                    },
+                    context: context
+                  }));
+                }
+
+                $section.appendTo($panel);
               }
+            });            
+          };
 
-              if (section.listView) {
-                $section.listView($.extend(true, {}, section, {
-                  onActionComplete: function() {
-                    $dashboardItem.closest('.vpc-network-chart').trigger('reload');
-                  },
-                  context: context
-                }));
+          before.check({
+            context: context,
+            response: {
+              success: function(result) {
+                // true means content exists
+                if (result) {
+                  load();
+                } else {
+                  cloudStack.dialog.confirm({
+                    message: before.messages.confirm,
+                    action: function() {
+                      $loading.appendTo($dashboardItem.closest('.vpc-network-chart'));
+                      before.action({
+                        context: context,
+                        response: {
+                          success: function() {
+                            $loading.remove();
+                            $dashboardItem.closest('.vpc-network-chart').trigger('reload');
+                            load();
+                          }
+                        }
+                      });
+                    }
+                  })
+                }
               }
-
-              $section.appendTo($panel);
             }
           });
         });

ui/scripts/vpc.js

@@ -801,7 +801,48 @@
           // 'listView' block
           //
           // -- use this as a flag for VPC chart to render as a list view
-          listView: true
+          listView: true,
+          before: {
+            messages: {
+              confirm: 'Please confirm that you would like to create a site-to-site VPN gateway for this VPC.',
+              notification: 'Create site-to-site VPN gateway'
+            },
+            check: function(args) {
+              var items;
+              
+              $.ajax({
+                url: createURL('listVpnGateways&listAll=true'),
+                data: {
+                  vpcid: args.context.vpc[0].id
+                },
+                success: function(json) {
+                  var items = json.listvpngatewaysresponse.vpngateway;
+
+                  args.response.success(items && items.length);
+                }
+              });
+            },
+            action: function(args) {
+              $.ajax({
+                url: createURL("createVpnGateway"),
+                data: {
+                  vpcid: args.context.vpc[0].id
+                },
+                success: function(json) {
+                  var jid = json.createvpngatewayresponse.jobid;
+                  var pollTimer = setInterval(function() {
+                    pollAsyncJobResult({
+                      _custom: { jobId: jid },
+                      complete: function() {
+                        clearInterval(pollTimer);
+                        args.response.success();
+                      }
+                    });
+                  }, g_queryAsyncJobResultInterval);
+                }
+              });             
+            }
+          }
         });
       }
     },