VPC UI: Add link to site-to-site VPN

Add link in tooltip for site-to-site VPN, which opens a new panel
showing the list view. This draws from the existing 'siteToSiteVpn'
network subsection, so no modification should be required to the
existing list view.

ui/scripts/ui-custom/vpc.js

@@ -17,6 +17,8 @@
 (function($, cloudStack) {
   var elems = {
     vpcConfigureTooltip: function(args) {
+      var $browser = args.$browser;
+      var siteToSiteVPN = args.siteToSiteVPN;
       var links = {
         'ip-addresses': 'IP Addresses',
         'gateways': 'Gateways',
@@ -34,6 +36,24 @@
 
         $link.append($label);
         $link.appendTo($links);
+
+        // Link event
+        $link.click(function() {
+          switch (id) {
+          case 'site-to-site-vpn':
+            $browser.cloudBrowser('addPanel', {
+              title: 'Site-to-site VPNs',
+              maximizeIfSelected: true,
+              complete: function($panel) {
+                $panel.listView(
+                  $.isFunction(siteToSiteVPN.listView) ?
+                    siteToSiteVPN.listView() : siteToSiteVPN.listView
+                );
+              }
+            });
+            break;
+          }
+        });
       });
 
       $tooltip.append($links);
@@ -57,6 +77,8 @@
       return $tooltip;
     },
     vpcConfigureArea: function(args) {
+      var $browser = args.$browser;
+      var siteToSiteVPN = args.siteToSiteVPN;
       var $config = $('<div>').addClass('config-area');
       var $configIcon = $('<span>').addClass('icon').html('&nbsp');
 
@@ -64,7 +86,10 @@
 
       // Tooltip event
       $configIcon.mouseover(function() {
-        var $tooltip = elems.vpcConfigureTooltip();
+        var $tooltip = elems.vpcConfigureTooltip({
+          $browser: $browser,
+          siteToSiteVPN: siteToSiteVPN
+        });
 
         // Make sure tooltip is center aligned with icon
         $tooltip.css({ left: $configIcon.position().left });
@@ -203,6 +228,8 @@
       return $tier;
     },
     chart: function(args) {
+      var $browser = args.$browser;
+      var siteToSiteVPN = args.siteToSiteVPN;
       var tiers = args.tiers;
       var vmListView = args.vmListView;
       var actions = args.actions;
@@ -217,7 +244,10 @@
               $('<span>').html(vpcName)
             )
             .append(
-              elems.vpcConfigureArea({})
+              elems.vpcConfigureArea({
+                $browser: $browser,
+                siteToSiteVPN: siteToSiteVPN
+              })
             );
 
       var showAddTierDialog = function() {
@@ -490,6 +520,7 @@
   cloudStack.uiCustom.vpc = function(args) {
     var vmListView = args.vmListView;
     var tierArgs = args.tiers;
+    var siteToSiteVPN = args.siteToSiteVPN;
 
     return function(args) {
       var context = args.context;
@@ -512,6 +543,8 @@
               success: function(args) {
                 var tiers = args.data.tiers;
                 var $chart = elems.chart({
+                  $browser: $browser,
+                  siteToSiteVPN: siteToSiteVPN,
                   vmListView: vmListView,
                   context: context,
                   actions: tierArgs.actions,

ui/scripts/vpc.js

@@ -374,6 +374,11 @@
         }
       }
     },
+    siteToSiteVPN: {
+      listView: function() { 
+        return cloudStack.sections.network.sections.siteToSiteVpn;
+      }
+    },
     tiers: {
       actionPreFilter: function(args) {
         var tier = args.context.tiers[0];