cloudstack 3.0 UI - VPC - Edit VPC chart - populate tiers by API call instead of hardcoding.

ui/scripts/ui-custom/vpc.js

@@ -161,7 +161,7 @@
         $title.html(name);
         $cidr.html(cidr);
         $vmCount.append(
-          $('<span>').addClass('total').html(virtualMachines.length),
+          $('<span>').addClass('total').html(virtualMachines != null? virtualMachines.length: 0),
           ' VMs'
         );
         $tier.append($actions);
@@ -221,7 +221,7 @@
 
       return $tier;
     },
-    chart: function(args) {
+    chart: function(args) {		 
       var $browser = args.$browser;
       var siteToSiteVPN = args.siteToSiteVPN;
       var tiers = args.tiers;
@@ -260,7 +260,7 @@
         return true;
       };
 
-      if (tiers.length) {
+      if (tiers != null && tiers.length > 0) {
         $(tiers).map(function(index, tier) {
           var $tier = elems.tier({
             name: tier.name,
@@ -538,7 +538,7 @@
             context: context,
             response: {
               success: function(args) {
-                var tiers = args.data.tiers;
+                var tiers = args.tiers;
                 var $chart = elems.chart({
                   $browser: $browser,
                   siteToSiteVPN: siteToSiteVPN,

ui/scripts/vpc.js

@@ -509,34 +509,36 @@
       },
 
       // Get tiers
-      dataProvider: function(args) {
-        var tiers = [ // Dummy content
-          {
-            id: 1,
-            name: 'web',
-            cidr: '192.168.0.0/24',
-            state: 'Running',
-            virtualMachines: [
-              { name: 'i-2-VM' },
-              { name: 'i-3-VM' }
-            ]
-          },
-          {
-            id: 2,
-            name: 'app',
-            state: 'Stopped',
-            cidr: '10.0.0.0/24',
-            virtualMachines: []
-          }
-        ];
-
-        setTimeout(function() {
-          args.response.success({
-            data: {
-              tiers: tiers
-            }
-          });
-        }, 1000);
+      dataProvider: function(args) {		
+				$.ajax({
+					url: createURL("listNetworks"),
+					dataType: "json",
+					data: {
+					  vpcid: args.context.vpc[0].id,
+						listAll: true
+					},
+					async: true,
+					success: function(json) {					  
+						var networks = json.listnetworksresponse.network;												
+						if(networks != null && networks.length > 0) {
+						  for(var i = 0; i < networks.length; i++) {							 
+							  $.ajax({
+								  url: createURL("listVirtualMachines"),
+									dataType: "json",
+									data: {
+									  networkid: networks[i].id,
+										listAll: true
+									},
+									async: false,
+									success: function(json) {									  
+									  networks[i].virtualMachines = json.listvirtualmachinesresponse.virtualmachine;										
+									}
+								});								
+							}
+						}								
+						args.response.success({ tiers: networks });
+					}
+				});	 
       }
     }
   };