VPC: Add tier detail view

On click of tier name, show a detail view of the specific tier.

This implemented as follows:

    tiers: {
      detailView: {
        name: 'Tier details',
        tabs: {
          details: {
            title: 'Details',
            fields: [
              { id: { label: 'ID' }},
              {
                name: { label: 'Name' },
                cidr: { label: 'CIDR' }
              }
            ],
            dataProvider: function(args) {
              args.response.success({
                data: args.context.networks[0]
              });
            }
          }
        }
      },
      ...

ui/css/cloudstack3.css

@@ -9013,11 +9013,13 @@ div.panel.ui-dialog div.list-view div.fixed-header {
 
 .vpc-chart li.tier span.title {
   color: #FFFFFF;
-  /*+placement:shift 11px 13px;*/
+  /*+placement:shift 8px 7px;*/
   position: relative;
-  left: 11px;
+  left: 8px;
-  top: 13px;
+  top: 7px;
   position: absolute;
+  cursor: pointer;
+  padding: 3px;
   font-size: 24px;
   /*+text-shadow:1px 2px 2px #000000;*/
   -moz-text-shadow: 1px 2px 2px #000000;
@@ -9175,7 +9177,8 @@ div.panel.ui-dialog div.list-view div.fixed-header {
   margin: 4px;
 }
 
-.vpc-chart li.tier .vm-count:hover {
+.vpc-chart li.tier .vm-count:hover,
+.vpc-chart li.tier .title:hover {
   border-radius: 4px;
   border: 1px solid #4C545E;
   background: url(../images/bg-gradients.png) 0px -2751px;
@@ -9229,6 +9232,8 @@ div.panel.ui-dialog div.list-view div.fixed-header {
   -webkit-text-shadow: 0px 0px 7px #FFFFFF;
   -o-text-shadow: 0px 0px 7px #FFFFFF;
   text-shadow: 0px 0px 7px #FFFFFF;
+  background: none;
+  border: none;
 }
 
 .vpc-chart li.tier.virtual-router {

ui/scripts/ui-custom/vpc.js

@@ -134,6 +134,8 @@
           };
         }
       );
+      var detailView = args.detailView;
+      var $browser = args.$browser;
       var isPlaceholder = args.isPlaceholder;
       var virtualMachines = args.virtualMachines;
       var $tier = $('<li>').addClass('tier');
@@ -170,6 +172,19 @@
         }).closest('.ui-dialog').overlay();
       });
 
+      // Title shows tier details
+      $title.click(function() {
+        $browser.cloudBrowser('addPanel', {
+          title: name,
+          maximizeIfSelected: true,
+          complete: function($panel) {
+            $panel.detailView($.extend(true, {}, detailView, {
+              context: context
+            }));
+          }
+        });
+      });
+
       if (isPlaceholder) {
         $tier.addClass('placeholder');
         $title.html('Create Tier');
@@ -248,6 +263,7 @@
       var actionPreFilter = args.actionPreFilter;
       var vpcName = args.vpcName;
       var context = args.context;
+      var tierDetailView = args.tierDetailView;
       var $tiers = $('<ul>').addClass('tiers');
       var $router = elems.router();
       var $chart = $('<div>').addClass('vpc-chart');
@@ -270,6 +286,8 @@
         }
 
         addTierDialog({
+          $browser: $browser,
+          tierDetailView: tierDetailView,
           $tiers: $tiers,
           context: context,
           actions: actions,
@@ -283,6 +301,8 @@
       if (tiers != null && tiers.length > 0) {
         $(tiers).map(function(index, tier) {
           var $tier = elems.tier({
+            $browser: $browser,
+            detailView: tierDetailView,
             name: tier.name,
             cidr: tier.cidr,
             virtualMachines: tier.virtualMachines,
@@ -458,7 +478,11 @@
     var vmListView = args.vmListView;
     var actionPreFilter = args.actionPreFilter;
     var context = args.context;
+    var $browser = args.$browser;
+    var tierDetailView = args.tierDetailView;
     var tier = $.extend(args.tier, {
+      $browser: $browser,
+      detailView: tierDetailView,
       context: context,
       vmListView: vmListView,
       actions: actions,
@@ -482,6 +506,8 @@
     var vmListView = args.vmListView;
     var actionPreFilter = args.actionPreFilter;
     var $tiers = args.$tiers;
+    var $browser = args.$browser;
+    var tierDetailView = args.tierDetailView;
 
     cloudStack.dialog.createForm({
       form: actions.add.createForm,
@@ -504,6 +530,8 @@
                 function(args) {
                   $loading.remove();
                   addNewTier({
+                    $browser: $browser,
+                    tierDetailView: tierDetailView,
                     context: $.extend(true, {}, context, {
                       networks: [tier]
                     }),
@@ -564,6 +592,7 @@
                   $browser: $browser,
 									ipAddresses: ipAddresses,
 									gateways: gateways,
+                  tierDetailView: tierArgs.detailView,
                   siteToSiteVPN: siteToSiteVPN,
                   vmListView: vmListView,
                   context: context,

ui/scripts/vpc.js

@@ -857,6 +857,26 @@
     },
 		
     tiers: {
+      detailView: {
+        name: 'Tier details',
+        tabs: {
+          details: {
+            title: 'Details',
+            fields: [
+              { id: { label: 'ID' }},
+              {
+                name: { label: 'Name' },
+                cidr: { label: 'CIDR' }
+              }
+            ],
+            dataProvider: function(args) {
+              args.response.success({
+                data: args.context.networks[0]
+              });
+            }
+          }
+        }
+      },
       actionPreFilter: function(args) {
         var tier = args.context.networks[0];
         var state = tier.state;
@@ -908,7 +928,7 @@
 							netmask: { 
 								label: 'label.netmask', 
 								validation: { required: true } 
-							},        
+							}
 						}
 					},
 					action: function(args) {