cloudstack-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From bfede...@apache.org
Subject git commit: VPC UI: Better launch VM loading state for tiers
Date Thu, 26 Jul 2012 21:33:24 GMT
Updated Branches:
  refs/heads/vpc 522bdf816 -> 1ba451b65


VPC UI: Better launch VM loading state for tiers

When launching a VM via the 'add VM' button on a VPC tier, show
loading icon to the side of the VM count, so that the tier area isn't
blocked, allowing the user to add more VMs or do other actions to the
tier.


Project: http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/commit/1ba451b6
Tree: http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/tree/1ba451b6
Diff: http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/diff/1ba451b6

Branch: refs/heads/vpc
Commit: 1ba451b65f85611a173ed026b1abcbadc89f1fd8
Parents: 522bdf8
Author: Brian Federle <brian.federle@citrix.com>
Authored: Thu Jul 26 14:32:05 2012 -0700
Committer: Brian Federle <brian.federle@citrix.com>
Committed: Thu Jul 26 14:33:14 2012 -0700

----------------------------------------------------------------------
 ui/css/cloudstack3.css      |   23 +++++
 ui/scripts/ui-custom/vpc.js |  184 ++++++++++++++++++++++----------------
 2 files changed, 128 insertions(+), 79 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/blob/1ba451b6/ui/css/cloudstack3.css
----------------------------------------------------------------------
diff --git a/ui/css/cloudstack3.css b/ui/css/cloudstack3.css
index 822b601..d3618f1 100644
--- a/ui/css/cloudstack3.css
+++ b/ui/css/cloudstack3.css
@@ -9467,6 +9467,29 @@ div.panel.ui-dialog div.list-view div.fixed-header {
   text-decoration: underline;
 }
 
+.vpc-chart li.tier.loading .vm-count {
+  padding-right: 10px;
+}
+
+.vpc-chart li.tier .vm-count .loading-overlay {
+  display: none;
+  width: 18px;
+  height: 18px;
+  position: absolute;
+  left: 94px;
+  top: 9px;
+  /*+border-radius:12px;*/
+  -moz-border-radius: 12px;
+  -webkit-border-radius: 12px;
+  -khtml-border-radius: 12px;
+  border-radius: 12px;
+  background-image: url(../images/ajax-loader-small.gif);
+}
+
+.vpc-chart li.tier.loading .vm-count .loading-overlay {
+  display: block;
+}
+
 .vpc-chart li.tier .vm-count:hover,
 .vpc-chart li.tier .title:hover {
   border-radius: 4px;

http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/blob/1ba451b6/ui/scripts/ui-custom/vpc.js
----------------------------------------------------------------------
diff --git a/ui/scripts/ui-custom/vpc.js b/ui/scripts/ui-custom/vpc.js
index 4de0acb..72a2177 100644
--- a/ui/scripts/ui-custom/vpc.js
+++ b/ui/scripts/ui-custom/vpc.js
@@ -19,8 +19,8 @@
   var elems = {
     vpcConfigureTooltip: function(args) {
       var $browser = args.$browser;
-			var ipAddresses = args.ipAddresses;
-			var gateways = args.gateways;
+      var ipAddresses = args.ipAddresses;
+      var gateways = args.gateways;
       var siteToSiteVPN = args.siteToSiteVPN;
       var links = {
         'ip-addresses': 'IP Addresses',
@@ -41,39 +41,39 @@
         $link.appendTo($links);
 
         // Link event
-        $link.click(function() {				  
+        $link.click(function() {
           switch (id) {
-          case 'ip-addresses':					 
-					  $browser.cloudBrowser('addPanel', {
-						  title: 'IP Addresses',
-							maximizeIfSelected: true,
-							complete: function($panel) {	
-                //ipAddresses.listView is a function					
-								$panel.listView(ipAddresses.listView(), {context: ipAddresses.context});
-							}
-						});
-					  break;
-					case 'gateways':
-					  $browser.cloudBrowser('addPanel', {
-						  title: 'Gateways',
-							maximizeIfSelected: true,
-							complete: function($panel) {	
-                //ipAddresses.listView is a function					
-								$panel.listView(gateways.listView(), {context: gateways.context});
-							}
-						});
-					  break;
-					case 'site-to-site-vpn':
+          case 'ip-addresses':
+            $browser.cloudBrowser('addPanel', {
+              title: 'IP Addresses',
+              maximizeIfSelected: true,
+              complete: function($panel) {
+                //ipAddresses.listView is a function
+                $panel.listView(ipAddresses.listView(), {context: ipAddresses.context});
+              }
+            });
+            break;
+          case 'gateways':
+            $browser.cloudBrowser('addPanel', {
+              title: 'Gateways',
+              maximizeIfSelected: true,
+              complete: function($panel) {
+                //ipAddresses.listView is a function
+                $panel.listView(gateways.listView(), {context: gateways.context});
+              }
+            });
+            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});		
+              complete: function($panel) {
+                //siteToSiteVPN is an object
+                $panel.listView(siteToSiteVPN, {context: siteToSiteVPN.context});
               }
             });
             break;
-          }					
+          }
         });
       });
 
@@ -97,11 +97,11 @@
 
       return $tooltip;
     },
-    vpcConfigureArea: function(args) {				  
+    vpcConfigureArea: function(args) {
       var $browser = args.$browser;
       var ipAddresses = args.ipAddresses;
-			var gateways = args.gateways;
-			var siteToSiteVPN = args.siteToSiteVPN;
+      var gateways = args.gateways;
+      var siteToSiteVPN = args.siteToSiteVPN;
       var $config = $('<div>').addClass('config-area');
       var $configIcon = $('<span>').addClass('icon').html('&nbsp');
 
@@ -111,8 +111,8 @@
       $configIcon.mouseover(function() {
         var $tooltip = elems.vpcConfigureTooltip({
           $browser: $browser,
-					ipAddresses: ipAddresses,
-					gateways: gateways,
+          ipAddresses: ipAddresses,
+          gateways: gateways,
           siteToSiteVPN: siteToSiteVPN
         });
 
@@ -165,6 +165,12 @@
         return action.id != 'add';
       });
 
+      // Add loading indicator
+      $vmCount.append(
+        $('<div>').addClass('loading-overlay')
+          .attr('title', 'VMs are launching in this tier.')
+      );
+
       // VM count shows instance list
       $vmCount.click(function() {
         var $dialog = $('<div>');
@@ -272,11 +278,11 @@
 
       return $tier;
     },
-    chart: function(args) {		 
+    chart: function(args) {
       var $browser = args.$browser;
       var ipAddresses = args.ipAddresses;
-			var gateways = args.gateways;
-			var siteToSiteVPN = args.siteToSiteVPN;
+      var gateways = args.gateways;
+      var siteToSiteVPN = args.siteToSiteVPN;
       var tiers = args.tiers;
       var vmListView = args.vmListView;
       var actions = args.actions;
@@ -294,8 +300,8 @@
             .append(
               elems.vpcConfigureArea({
                 $browser: $browser,
-								ipAddresses: $.extend(ipAddresses, {context: context}),
-								gateways: $.extend(gateways, {context: context}),
+                ipAddresses: $.extend(ipAddresses, {context: context}),
+                gateways: $.extend(gateways, {context: context}),
                 siteToSiteVPN: $.extend(siteToSiteVPN, {context: context})
               })
             );
@@ -392,6 +398,19 @@
       var remove = args ? args.remove : false;
       var _custom = args ? args._custom : {};
 
+      var updateVMLoadingState = function() {
+        var pendingVMs = $tier.data('vpc-tier-pending-vms');
+
+        pendingVMs = pendingVMs ? pendingVMs - 1 : 0;
+
+        if (!pendingVMs) {
+          $tier.data('vpc-tier-pending-vms', 0);
+          $tier.removeClass('loading');
+        } else {
+          $tier.data('vpc-tier-pending-vms', pendingVMs);
+        }
+      };
+
       cloudStack.ui.notifications.add(
         // Notification
         {
@@ -401,38 +420,41 @@
         },
 
         // Success
-        function(args) {				  
-					if (actionID == 'addVM') {	
-						// Increment VM total
-						var $total = $tier.find('.vm-count .total');
-						var prevTotal = parseInt($total.html());
-						var newTotal = prevTotal + 1;
-						$total.html(newTotal);
-						
-						$loading.remove();
-						
-						var newVM = args.data;		
+        function(args) {
+          if (actionID == 'addVM') {
+            // Increment VM total
+            var $total = $tier.find('.vm-count .total');
+            var prevTotal = parseInt($total.html());
+            var newTotal = prevTotal + 1;
+            var newVM = args.data;
             var newContext = $.extend(true, {}, context, {
-						  vms: [newVM]
-						});			
-						filterActions({
-							$actions: $actions,
-							actionPreFilter: actionPreFilter,
-							context: newContext
-						});						
-					}	
-					
-					else if (actionID == 'remove') { //remove tier		
-					  $tier.remove();
-					}				
-					
+              vms: [newVM]
+            });
+
+            $total.html(newTotal);
+
+            filterActions({
+              $actions: $actions,
+              actionPreFilter: actionPreFilter,
+              context: newContext
+            });
+
+            updateVMLoadingState();
+          }
+
+          else if (actionID == 'remove') { //remove tier
+            $tier.remove();
+          }
+
         },
 
         {},
 
         // Error
         function(args) {
-          $loading.remove();
+          if (actionID == 'addVM') {
+            updateVMLoadingState();
+          }
         }
       );
     };
@@ -442,7 +464,11 @@
         action({
           context: context,
           complete: function(args) {
-            $loading.appendTo($tier);
+            var pendingVMs = $tier.data('vpc-tier-pending-vms');
+
+            pendingVMs = pendingVMs ? pendingVMs + 1 : 1;
+            $tier.addClass('loading');
+            $tier.data('vpc-tier-pending-vms', pendingVMs);
             success(args);
           }
         });
@@ -452,10 +478,10 @@
         action({
           context: context,
           response: {
-            success: function(args) {						  				
-              success($.extend(args, { 
-							  remove: true 
-							}));
+            success: function(args) {
+              success($.extend(args, {
+                remove: true
+              }));
             }
           }
         });
@@ -538,13 +564,13 @@
           context: context,
           data: args.data,
           response: {
-            success: function(args) {						  
+            success: function(args) {
               var tier = args.data;
 
               cloudStack.ui.notifications.add(
                 // Notification
                 {
-                  desc: actions.add.label                  
+                  desc: actions.add.label
                 },
 
                 // Success
@@ -572,10 +598,10 @@
                 }
               );
             },
-						error: function(errorMsg) {						 
-							cloudStack.dialog.notice({ message: _s(errorMsg) });							
-						  $loading.remove();
-						}						
+            error: function(errorMsg) {
+              cloudStack.dialog.notice({ message: _s(errorMsg) });
+              $loading.remove();
+            }
           }
         });
       }
@@ -586,8 +612,8 @@
     var vmListView = args.vmListView;
     var tierArgs = args.tiers;
     var ipAddresses = args.ipAddresses;
-		var gateways = args.gateways;
-		var siteToSiteVPN = args.siteToSiteVPN;
+    var gateways = args.gateways;
+    var siteToSiteVPN = args.siteToSiteVPN;
 
     return function(args) {
       var context = args.context;
@@ -607,12 +633,12 @@
           tierArgs.dataProvider({
             context: context,
             response: {
-              success: function(args) {			
+              success: function(args) {
                 var tiers = args.tiers;
                 var $chart = elems.chart({
                   $browser: $browser,
-									ipAddresses: ipAddresses,
-									gateways: gateways,
+                  ipAddresses: ipAddresses,
+                  gateways: gateways,
                   tierDetailView: tierArgs.detailView,
                   siteToSiteVPN: siteToSiteVPN,
                   vmListView: vmListView,


Mime
View raw message