Mailing-List: contact commits-help@cloudstack.apache.org; run by ezmlm
Precedence: bulk
Reply-To: dev@cloudstack.apache.org
Content-Type: text/plain; charset="us-ascii"
MIME-Version: 1.0
Content-Transfer-Encoding: 7bit
From: jessicawang@apache.org
To: commits@cloudstack.apache.org
Date: Fri, 19 Jul 2013 17:01:24 -0000
Message-Id: <8dd3f500226542918b517a072db3b43e@git.apache.org>
In-Reply-To: <95ac9365660642adb4aa92c9c833a961@git.apache.org>
References: <95ac9365660642adb4aa92c9c833a961@git.apache.org>
Subject: [11/39] Format JS

http://git-wip-us.apache.org/repos/asf/cloudstack/blob/f766a9e5/ui/scripts/ui-custom/securityRules.js
----------------------------------------------------------------------
diff --git a/ui/scripts/ui-custom/securityRules.js b/ui/scripts/ui-custom/securityRules.js
index 2e2c9ac..a5cbbee 100644
--- a/ui/scripts/ui-custom/securityRules.js
+++ b/ui/scripts/ui-custom/securityRules.js
@@ -15,59 +15,59 @@
 // specific language governing permissions and limitations
 // under the License.
 (function($, cloudStack) {
-  cloudStack.uiCustom.securityRules = function(args) {
-    var multiEdit = args;
+    cloudStack.uiCustom.securityRules = function(args) {
+        var multiEdit = args;
 
-    return function(args) {
-      var context = args.context;
-      var $multi = $('<div>').addClass('security-rules').multiEdit(
-        $.extend(true, {}, multiEdit, {
-          context: context
-        })
-      );
-      var $fields = $multi.find('form table').find('th, td');
-      var $accountFields = $fields.filter(function() {
-        return $(this).hasClass('accountname') ||
-          $(this).hasClass('securitygroupname');
-      });
-      var $cidrFields = $fields.filter(function() {
-        return $(this).hasClass('cidr');
-      });
+        return function(args) {
+            var context = args.context;
+            var $multi = $('<div>').addClass('security-rules').multiEdit(
+                $.extend(true, {}, multiEdit, {
+                    context: context
+                })
+            );
+            var $fields = $multi.find('form table').find('th, td');
+            var $accountFields = $fields.filter(function() {
+                return $(this).hasClass('accountname') ||
+                    $(this).hasClass('securitygroupname');
+            });
+            var $cidrFields = $fields.filter(function() {
+                return $(this).hasClass('cidr');
+            });
 
-      $multi.prepend(
-        $('<div>').addClass('add-by')
-          .append($('<span>').html('Add by:'))
-          .append(
-            $('<div>').addClass('selection')
-              .append(
-                $('<input>').attr({
-                  type: 'radio',
-                  name: 'add-by',
-                  checked: 'checked'
-                }).click(function() {
-                  $accountFields.hide();
-                  $cidrFields.show();
+            $multi.prepend(
+                $('<div>').addClass('add-by')
+                .append($('<span>').html('Add by:'))
+                .append(
+                    $('<div>').addClass('selection')
+                    .append(
+                        $('<input>').attr({
+                            type: 'radio',
+                            name: 'add-by',
+                            checked: 'checked'
+                        }).click(function() {
+                            $accountFields.hide();
+                            $cidrFields.show();
 
-                  return true;
-                }).click()
-              )
-              .append($('<label>').html('CIDR'))
-              .append(
-                $('<input>').attr({
-                  type: 'radio',
-                  name: 'add-by'
-                }).click(function() {
-                  $accountFields.show();
-                  $cidrFields.hide();
+                            return true;
+                        }).click()
+                    )
+                    .append($('<label>').html('CIDR'))
+                    .append(
+                        $('<input>').attr({
+                            type: 'radio',
+                            name: 'add-by'
+                        }).click(function() {
+                            $accountFields.show();
+                            $cidrFields.hide();
 
-                  return true;
-                })
-              )
-              .append($('<label>').html('Account'))
-          )
-      );
+                            return true;
+                        })
+                    )
+                    .append($('<label>').html('Account'))
+                )
+            );
 
-      return $multi;
+            return $multi;
+        };
     };
-  };
 })(jQuery, cloudStack);

http://git-wip-us.apache.org/repos/asf/cloudstack/blob/f766a9e5/ui/scripts/ui-custom/uploadVolume.js
----------------------------------------------------------------------
diff --git a/ui/scripts/ui-custom/uploadVolume.js b/ui/scripts/ui-custom/uploadVolume.js
index 996d8ac..432bfe4 100644
--- a/ui/scripts/ui-custom/uploadVolume.js
+++ b/ui/scripts/ui-custom/uploadVolume.js
@@ -15,157 +15,162 @@
 // specific language governing permissions and limitations
 // under the License.
 (function(cloudStack, $) {
-  cloudStack.uiCustom.uploadVolume = function(args) {
-    var listView = args.listView;
-    var action = args.action;
-
-    var validate = function($uploadVolume) {
-      if (!$uploadVolume.find('input[type=text]').val()) {
-        cloudStack.dialog.notice({ message: _l('message.specify.url')});
-
-        return false;
-      }
-      
-      if (!$uploadVolume.find(
-        'input[type=radio]:checked, input[type=checkbox]:checked'
-      ).size()) {
-        cloudStack.dialog.notice({ message: _l('message.select.instance')});
-
-        return false;
-      }
-
-      return true;
-    };
+    cloudStack.uiCustom.uploadVolume = function(args) {
+        var listView = args.listView;
+        var action = args.action;
 
-    return function(args) {
-      var $uploadVolume = $('<div>').addClass('upload-volume');
-      var context = args.context;
-      var topFields = function() {
-        var $form = $('<form>').addClass('top-fields');
-        var $urlLabel = $('<label>').html(_l('label.url') + ':');
-        var $urlField = $('<div>').addClass('field url');
-        var $nameLabel = $('<label>').html(_l('label.name') + ':');
-        var $nameField = $('<div>').addClass('field name');
-        var $urlInput = $('<input>').attr({
-          type: 'text',
-          name: 'url'
-        }).addClass('required');
-        var $nameInput = $('<input>').attr({
-          type: 'text',
-          name: 'name'
-        }).addClass('required');
-
-        $urlField.append($urlLabel, $urlInput);
-        $nameField.append($nameLabel, $nameInput);
-        $form.append($nameField, $urlField);
-
-        return $form;
-      };
-      var vmList = function(args) {
-        // Create a listing of instances, based on limited information
-        // from main instances list view
-        var $listView;
-        var instances = $.extend(true, {}, args.listView, {
-          context: context,
-          uiCustom: true
-        });
-
-        instances.listView.actions = {
-          select: {
-            label: _l('label.select.instance'),
-            type: 'radio',
-            action: {
-              uiCustom: function(args) {
-                var $item = args.$item;
-                var $input = $item.find('td.actions input:visible');
-
-                if ($input.attr('type') == 'checkbox') {
-                  if ($input.is(':checked'))
-                    $item.addClass('multi-edit-selected');
-                  else
-                    $item.removeClass('multi-edit-selected');
-                } else {
-                  $item.siblings().removeClass('multi-edit-selected');
-                  $item.addClass('multi-edit-selected');
-                }
-              }
-            }
-          }
-        };
+        var validate = function($uploadVolume) {
+            if (!$uploadVolume.find('input[type=text]').val()) {
+                cloudStack.dialog.notice({
+                    message: _l('message.specify.url')
+                });
 
-        $listView = $('<div>').listView(instances);
-
-        // Change action label
-        $listView.find('th.actions').html(_l('label.select'));
-
-        return $listView;
-      };
-
-      $uploadVolume.append(
-        topFields,
-        $('<div>').addClass('desc').html(_l('label.select.instance.to.attach.volume.to') + ':'),
-        $('<div>').addClass('listView-container').append(
-          vmList({ listView: listView }) 
-        )
-      );
-      $uploadVolume.dialog({
-        dialogClass: 'multi-edit-add-list panel',
-        width: 900,
-        title: _l('label.upload.volume'),
-        buttons: [
-          {
-            text: _l('label.upload'),
-            'class': 'ok',
-            click: function() {
-              if (!validate($uploadVolume)) return false;
-
-              var complete = args.complete;
-              var $loading = $('<div>').addClass('loading-overlay');
-
-              $loading.appendTo($uploadVolume);
-              action({
-                data: cloudStack.serializeForm($uploadVolume.find('form')),
-                context: $.extend(true, {}, context, {
-                  instances: [
-                    $uploadVolume.find('tr.multi-edit-selected').data('json-obj')
-                  ]
-                }),
-                response: {
-                  success: function(args) {
-                    $('.ui-dialog').fadeOut(function() {
-                      $('.ui-dialog').remove();
-                      $(window).trigger('cloudStack.fullRefresh');
-                    });
-                    $('div.overlay').fadeOut(function() {
-                      $('div.overlay').remove();
-                    });
-                    complete({
-                      $item: $('<div>'),
-                      _custom: args._custom
-                    });
-                  },
-                  error: function(args) {
-                    $loading.remove();
-                    cloudStack.dialog.notice({ message: args });
-                  }
-                }
-              });
+                return false;
             }
-          },
-          {
-            text: _l('label.cancel'),
-            'class': 'cancel',
-            click: function() {
-              $('.ui-dialog').fadeOut(function() {
-                $('.ui-dialog').remove();
-              });
-              $('div.overlay').fadeOut(function() {
-                $('div.overlay').remove();
-              });
+
+            if (!$uploadVolume.find(
+                'input[type=radio]:checked, input[type=checkbox]:checked'
+            ).size()) {
+                cloudStack.dialog.notice({
+                    message: _l('message.select.instance')
+                });
+
+                return false;
             }
-          }
-        ]
-      }).closest('.ui-dialog').overlay();
+
+            return true;
+        };
+
+        return function(args) {
+            var $uploadVolume = $('<div>').addClass('upload-volume');
+            var context = args.context;
+            var topFields = function() {
+                var $form = $('<form>').addClass('top-fields');
+                var $urlLabel = $('<label>').html(_l('label.url') + ':');
+                var $urlField = $('<div>').addClass('field url');
+                var $nameLabel = $('<label>').html(_l('label.name') + ':');
+                var $nameField = $('<div>').addClass('field name');
+                var $urlInput = $('<input>').attr({
+                    type: 'text',
+                    name: 'url'
+                }).addClass('required');
+                var $nameInput = $('<input>').attr({
+                    type: 'text',
+                    name: 'name'
+                }).addClass('required');
+
+                $urlField.append($urlLabel, $urlInput);
+                $nameField.append($nameLabel, $nameInput);
+                $form.append($nameField, $urlField);
+
+                return $form;
+            };
+            var vmList = function(args) {
+                // Create a listing of instances, based on limited information
+                // from main instances list view
+                var $listView;
+                var instances = $.extend(true, {}, args.listView, {
+                    context: context,
+                    uiCustom: true
+                });
+
+                instances.listView.actions = {
+                    select: {
+                        label: _l('label.select.instance'),
+                        type: 'radio',
+                        action: {
+                            uiCustom: function(args) {
+                                var $item = args.$item;
+                                var $input = $item.find('td.actions input:visible');
+
+                                if ($input.attr('type') == 'checkbox') {
+                                    if ($input.is(':checked'))
+                                        $item.addClass('multi-edit-selected');
+                                    else
+                                        $item.removeClass('multi-edit-selected');
+                                } else {
+                                    $item.siblings().removeClass('multi-edit-selected');
+                                    $item.addClass('multi-edit-selected');
+                                }
+                            }
+                        }
+                    }
+                };
+
+                $listView = $('<div>').listView(instances);
+
+                // Change action label
+                $listView.find('th.actions').html(_l('label.select'));
+
+                return $listView;
+            };
+
+            $uploadVolume.append(
+                topFields,
+                $('<div>').addClass('desc').html(_l('label.select.instance.to.attach.volume.to') + ':'),
+                $('<div>').addClass('listView-container').append(
+                    vmList({
+                        listView: listView
+                    })
+                )
+            );
+            $uploadVolume.dialog({
+                dialogClass: 'multi-edit-add-list panel',
+                width: 900,
+                title: _l('label.upload.volume'),
+                buttons: [{
+                    text: _l('label.upload'),
+                    'class': 'ok',
+                    click: function() {
+                        if (!validate($uploadVolume)) return false;
+
+                        var complete = args.complete;
+                        var $loading = $('<div>').addClass('loading-overlay');
+
+                        $loading.appendTo($uploadVolume);
+                        action({
+                            data: cloudStack.serializeForm($uploadVolume.find('form')),
+                            context: $.extend(true, {}, context, {
+                                instances: [
+                                    $uploadVolume.find('tr.multi-edit-selected').data('json-obj')
+                                ]
+                            }),
+                            response: {
+                                success: function(args) {
+                                    $('.ui-dialog').fadeOut(function() {
+                                        $('.ui-dialog').remove();
+                                        $(window).trigger('cloudStack.fullRefresh');
+                                    });
+                                    $('div.overlay').fadeOut(function() {
+                                        $('div.overlay').remove();
+                                    });
+                                    complete({
+                                        $item: $('<div>'),
+                                        _custom: args._custom
+                                    });
+                                },
+                                error: function(args) {
+                                    $loading.remove();
+                                    cloudStack.dialog.notice({
+                                        message: args
+                                    });
+                                }
+                            }
+                        });
+                    }
+                }, {
+                    text: _l('label.cancel'),
+                    'class': 'cancel',
+                    click: function() {
+                        $('.ui-dialog').fadeOut(function() {
+                            $('.ui-dialog').remove();
+                        });
+                        $('div.overlay').fadeOut(function() {
+                            $('div.overlay').remove();
+                        });
+                    }
+                }]
+            }).closest('.ui-dialog').overlay();
+        };
     };
-  };
 }(cloudStack, jQuery));

http://git-wip-us.apache.org/repos/asf/cloudstack/blob/f766a9e5/ui/scripts/ui-custom/vpc.js
----------------------------------------------------------------------
diff --git a/ui/scripts/ui-custom/vpc.js b/ui/scripts/ui-custom/vpc.js
index 4edccf1..69a40c9 100644
--- a/ui/scripts/ui-custom/vpc.js
+++ b/ui/scripts/ui-custom/vpc.js
@@ -13,893 +13,928 @@
 // "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 // KIND, either express or implied.  See the License for the
 // specific language governing permissions and limitations
-// under the License. 
+// under the License.
 (function($, cloudStack) {
-  var elems = {
-    aclDialog: function(args) {
-      var isDialog = args.isDialog;
-      var actionArgs = args.actionArgs;
-      var context = args.context;
-      var $acl = $('<div>').addClass('acl').multiEdit(
-        $.extend(true, {}, actionArgs.multiEdit, {
-          context: context
-        })
-      );
-
-      // Show ACL dialog
-      if (isDialog) {
-        $acl.dialog({
-          title: _l('label.configure.network.ACLs'),
-          dialogClass: 'configure-acl',
-          width: 900,
-          height: 600,
-          buttons: {
-            'Done': function() {
-              $(':ui-dialog').remove();
-              $('.overlay').remove();
+    var elems = {
+        aclDialog: function(args) {
+            var isDialog = args.isDialog;
+            var actionArgs = args.actionArgs;
+            var context = args.context;
+            var $acl = $('<div>').addClass('acl').multiEdit(
+                $.extend(true, {}, actionArgs.multiEdit, {
+                    context: context
+                })
+            );
+
+            // Show ACL dialog
+            if (isDialog) {
+                $acl.dialog({
+                    title: _l('label.configure.network.ACLs'),
+                    dialogClass: 'configure-acl',
+                    width: 900,
+                    height: 600,
+                    buttons: {
+                        'Done': function() {
+                            $(':ui-dialog').remove();
+                            $('.overlay').remove();
+                        }
+                    }
+                });
             }
-          }
-        });
-      }
-
-      return $acl;
-    },
-    vpcConfigureTooltip: function(args) {
-      var context = args.context;
-      var $browser = args.$browser;
-      var $chart = args.$chart;
-      var ipAddresses = args.ipAddresses;
-      var acl = args.acl;
-      var gateways = args.gateways;
-      var siteToSiteVPN = args.siteToSiteVPN;
-      var links = {
-        'ip-addresses': _l('label.menu.ipaddresses'),
-        'gateways': _l('label.private.Gateway'),
-        'site-to-site-vpn': _l('label.site.to.site.VPN'),
-        'network-acls':  _l('label.network.ACLs')
-      };
-      var $links = $('<ul>').addClass('links');
-      var $tooltip = $('<div>').addClass('vpc-configure-tooltip').append(
-        $('<div>').addClass('arrow')
-      );
-      var tierDetailView = args.tierDetailView;
-
-      // Make links
-      $.map(links, function(label, id) {
-        var $link = $('<li>').addClass('link').addClass(id);
-        var $label = $('<span>').html(label);
-
-        $link.append($label);
-        $link.appendTo($links);
-
-        // Link event
-        $link.click(function() {
-          switch (id) {
-          case 'network-acls':
-              $browser.cloudBrowser('addPanel', {
-              title: _l('label.network.ACLs'),
-              maximizeIfSelected: true,
-              complete: function($panel) {
-                $panel.listView(
-                  $.extend(true, {}, acl.listView, {
-                    listView: {
-                      actions: {
-                        add: {
-                          label: 'label.add.network.ACL',
-                          action: {
-                            custom: function() {
-                              elems.aclDialog({
-                                isDialog: true,
-                                actionArgs: acl,
-                                context: context
-                              });
+
+            return $acl;
+        },
+        vpcConfigureTooltip: function(args) {
+            var context = args.context;
+            var $browser = args.$browser;
+            var $chart = args.$chart;
+            var ipAddresses = args.ipAddresses;
+            var acl = args.acl;
+            var gateways = args.gateways;
+            var siteToSiteVPN = args.siteToSiteVPN;
+            var links = {
+                'ip-addresses': _l('label.menu.ipaddresses'),
+                'gateways': _l('label.private.Gateway'),
+                'site-to-site-vpn': _l('label.site.to.site.VPN'),
+                'network-acls': _l('label.network.ACLs')
+            };
+            var $links = $('<ul>').addClass('links');
+            var $tooltip = $('<div>').addClass('vpc-configure-tooltip').append(
+                $('<div>').addClass('arrow')
+            );
+            var tierDetailView = args.tierDetailView;
+
+            // Make links
+            $.map(links, function(label, id) {
+                var $link = $('<li>').addClass('link').addClass(id);
+                var $label = $('<span>').html(label);
+
+                $link.append($label);
+                $link.appendTo($links);
+
+                // Link event
+                $link.click(function() {
+                    switch (id) {
+                        case 'network-acls':
+                            $browser.cloudBrowser('addPanel', {
+                                title: _l('label.network.ACLs'),
+                                maximizeIfSelected: true,
+                                complete: function($panel) {
+                                    $panel.listView(
+                                        $.extend(true, {}, acl.listView, {
+                                            listView: {
+                                                actions: {
+                                                    add: {
+                                                        label: 'label.add.network.ACL',
+                                                        action: {
+                                                            custom: function() {
+                                                                elems.aclDialog({
+                                                                    isDialog: true,
+                                                                    actionArgs: acl,
+                                                                    context: context
+                                                                });
+                                                            }
+                                                        }
+                                                    }
+                                                },
+                                                detailView: function() {
+                                                    var detailView = $.extend(true, {}, tierDetailView);
+
+                                                    detailView.tabs = {
+                                                        acl: tierDetailView.tabs.acl
+                                                    };
+
+                                                    return detailView;
+                                                }
+                                            }
+                                        }), {
+                                            context: acl.context
+                                        }
+                                    );
+                                }
+                            });
+                            break;
+
+                        case 'ip-addresses':
+                            $browser.cloudBrowser('addPanel', {
+                                title: _l('label.menu.ipaddresses'),
+                                maximizeIfSelected: true,
+                                complete: function($panel) {
+                                    //ipAddresses.listView is a function
+                                    $panel.listView(ipAddresses.listView(), {
+                                        context: ipAddresses.context
+                                    });
+                                }
+                            });
+                            break;
+                        case 'gateways':
+                            //siteToSiteVPN is an object
+                            var addAction = gateways.add;
+                            var isGatewayPresent = addAction.preCheck({
+                                context: gateways.context
+                            });
+                            var showGatewayListView = function() {
+                                $browser.cloudBrowser('addPanel', {
+                                    title: _l('label.private.Gateway'),
+                                    maximizeIfSelected: true,
+                                    complete: function($panel) {
+                                        $panel.listView(gateways.listView(), {
+                                            context: gateways.context
+                                        });
+                                    }
+                                });
+                            };
+
+                            if (isGatewayPresent) {
+                                showGatewayListView();
+                            } else {
+                                cloudStack.dialog.createForm({
+                                    form: addAction.createForm,
+                                    context: args.gateways.context,
+                                    after: function(args) {
+                                        var data = args.data;
+                                        var error = function(message) {
+                                            cloudStack.dialog.notice({
+                                                message: message
+                                            });
+                                        };
+
+                                        addAction.action({
+                                            data: data,
+                                            $form: args.$form,
+                                            context: gateways.context,
+                                            response: {
+                                                success: function(args) {
+                                                    var _custom = args._custom;
+                                                    var notification = {
+                                                        poll: addAction.notification.poll,
+                                                        _custom: _custom,
+                                                        desc: addAction.messages.notification()
+                                                    };
+                                                    var success = function(args) {
+                                                        if (!$chart.is(':visible')) return;
+
+                                                        cloudStack.dialog.confirm({
+                                                            message: 'Gateway for VPC has been created successfully. Would you like to see its details?',
+                                                            action: showGatewayListView
+                                                        });
+                                                    };
+
+                                                    cloudStack.dialog.notice({
+                                                        message: 'Your gateway is being created; please see notifications window.'
+                                                    });
+
+                                                    cloudStack.ui.notifications.add(
+                                                        notification,
+                                                        success, {},
+                                                        error, {}
+                                                    );
+                                                },
+                                                error: error
+                                            }
+                                        });
+                                    }
+                                });
+                            }
+                            break;
+                        case 'site-to-site-vpn':
+                            //siteToSiteVPN is an object
+                            var addAction = siteToSiteVPN.add;
+                            var isVPNPresent = addAction.preCheck({
+                                context: siteToSiteVPN.context
+                            });
+                            var showVPNListView = function() {
+                                $browser.cloudBrowser('addPanel', {
+                                    title: _l('label.site.to.site.VPN'),
+                                    maximizeIfSelected: true,
+                                    complete: function($panel) {
+                                        $panel.listView(siteToSiteVPN, {
+                                            context: siteToSiteVPN.context
+                                        });
+                                    }
+                                });
+                            };
+
+                            if (isVPNPresent) {
+                                showVPNListView();
+                            } else {
+                                cloudStack.dialog.confirm({
+                                    message: 'Please confirm that you want to add a Site-to-Site VPN gateway.',
+                                    action: function() {
+                                        var error = function(message) {
+                                            cloudStack.dialog.notice({
+                                                message: message
+                                            });
+                                        };
+
+                                        addAction.action({
+                                            context: siteToSiteVPN.context,
+                                            response: {
+                                                success: function(args) {
+                                                    var _custom = args._custom;
+                                                    var notification = {
+                                                        poll: addAction.notification.poll,
+                                                        _custom: _custom,
+                                                        desc: addAction.messages.notification()
+                                                    };
+                                                    var success = function(args) {
+                                                        if (!$chart.is(':visible')) return;
+                                                        cloudStack.dialog.confirm({
+                                                            message: 'Gateway for VPC has been created successfully. Would you like to see its details?',
+                                                            action: showVPNListView
+                                                        });
+                                                    };
+
+                                                    cloudStack.dialog.notice({
+                                                        message: 'Your VPN is being created; please see notifications window.'
+                                                    });
+
+                                                    cloudStack.ui.notifications.add(
+                                                        notification,
+                                                        success, {},
+                                                        error, {}
+                                                    );
+                                                },
+                                                error: error
+                                            }
+                                        });
+                                    }
+                                });
                             }
-                          }
+                            break;
+                    }
+                });
+            });
+
+            $tooltip.append($links);
+
+            // Tooltip hover event
+            $tooltip.hover(
+                function() {
+                    $tooltip.addClass('active');
+                },
+                function() {
+                    $tooltip.removeClass('active');
+
+                    setTimeout(function() {
+                        if (!$tooltip.hasClass('active')) {
+                            $tooltip.remove();
                         }
-                      },
-                      detailView: function() {
-                        var detailView = $.extend(true, {}, tierDetailView);
+                    }, 500);
+                }
+            );
 
-                        detailView.tabs = {
-                          acl: tierDetailView.tabs.acl
-                        };
+            return $tooltip;
+        },
+        vpcConfigureArea: function(args) {
+            var context = args.context;
+            var $browser = args.$browser;
+            var $chart = args.$chart;
+            var ipAddresses = args.ipAddresses;
+            var acl = args.acl;
+            var gateways = args.gateways;
+            var siteToSiteVPN = args.siteToSiteVPN;
+            var $config = $('<div>').addClass('config-area');
+            var $configIcon = $('<span>').addClass('icon').html('&nbsp');
+            var tierDetailView = args.tierDetailView;
+
+            $config.append($configIcon);
+
+            // Tooltip event
+            $configIcon.mouseover(function() {
+                var $tooltip = elems.vpcConfigureTooltip({
+                    context: context,
+                    $browser: $browser,
+                    $chart: $chart,
+                    ipAddresses: ipAddresses,
+                    gateways: gateways,
+                    acl: acl,
+                    siteToSiteVPN: siteToSiteVPN,
+                    tierDetailView: tierDetailView
+                });
 
-                        return detailView;
-                      }
-                    }
-                  }),
-                  { context: acl.context }
-                );
-              }
+                // Make sure tooltip is center aligned with icon
+                $tooltip.css({
+                    left: $configIcon.position().left
+                });
+                $tooltip.appendTo($config).hide();
+                $tooltip.stop().fadeIn('fast');
             });
-            break;
 
-          case 'ip-addresses':
-            $browser.cloudBrowser('addPanel', {
-              title: _l('label.menu.ipaddresses'),
-              maximizeIfSelected: true,
-              complete: function($panel) {
-                //ipAddresses.listView is a function
-                $panel.listView(ipAddresses.listView(), {context: ipAddresses.context});
-              }
+            return $config;
+        },
+        router: function(args) {
+            var $browser = args.$browser;
+            var detailView = args.detailView;
+            var $router = $('<li>').addClass('tier virtual-router');
+            var $title = $('<span>').addClass('title').html(_l('label.virtual.router'));
+
+            $router.append($title);
+
+            // Append horizontal chart line
+            $router.append($('<div>').addClass('connect-line'));
+
+            $router.click(function() {
+                if ($router.hasClass('disabled')) return false;
+
+                $browser.cloudBrowser('addPanel', {
+                    title: _l('label.VPC.router.details'),
+                    complete: function($panel) {
+                        $panel.detailView(detailView);
+                    }
+                });
             });
-            break;
-          case 'gateways':
-            //siteToSiteVPN is an object
-            var addAction = gateways.add;
-            var isGatewayPresent = addAction.preCheck({ context: gateways.context });
-            var showGatewayListView = function() {
-              $browser.cloudBrowser('addPanel', {
-                title: _l('label.private.Gateway'),
-                maximizeIfSelected: true,
-                complete: function($panel) {
-                  $panel.listView(gateways.listView(), { context: gateways.context });
+
+            return $router;
+        },
+        tier: function(args) {
+            var ipAddresses = args.ipAddresses;
+            var acl = args.acl;
+            var name = args.name;
+            var cidr = args.cidr;
+            var context = args.context;
+            var vmListView = args.vmListView;
+            var actionPreFilter = args.actionPreFilter;
+            var actions = $.map(
+                args.actions ? args.actions : {}, function(value, key) {
+                    return {
+                        id: key,
+                        action: value
+                    };
                 }
-              });
-            };
+            );
+            var detailView = args.detailView;
+            var $browser = args.$browser;
+            var isPlaceholder = args.isPlaceholder;
+            var virtualMachines = args.virtualMachines;
+            var $tier = $('<li>').addClass('tier');
+            var $title = $('<span>').addClass('title');
+            var $cidr = $('<span>').addClass('cidr');
+            var $vmCount = $('<span>').addClass('vm-count');
+            var $actions = $('<div>').addClass('actions');
+
+            // Ignore special actions
+            // -- Add tier action is handled separately
+            actions = $.grep(actions, function(action) {
+                return action.id != 'add';
+            });
 
-            if (isGatewayPresent) {
-              showGatewayListView();
-            } else {
-              cloudStack.dialog.createForm({
-                form: addAction.createForm,
-								context: args.gateways.context,
-                after: function(args) {
-                  var data = args.data;
-                  var error = function(message) {
-                    cloudStack.dialog.notice({ message: message });
-                  };
-
-                  addAction.action({
-                    data: data,
-                    $form:args.$form,
-                    context: gateways.context,
-                    response: {
-                      success: function(args) {
-                        var _custom = args._custom;
-                        var notification = {
-                          poll: addAction.notification.poll,
-                          _custom: _custom,
-                          desc: addAction.messages.notification()
-                        };
-                        var success = function(args) {
-                          if (!$chart.is(':visible')) return;
-
-                          cloudStack.dialog.confirm({
-                            message: 'Gateway for VPC has been created successfully. Would you like to see its details?',
-                            action: showGatewayListView
-                          });
-                        };
-
-                        cloudStack.dialog.notice({
-                          message: 'Your gateway is being created; please see notifications window.'
-                        });
-                        
-                        cloudStack.ui.notifications.add(
-                          notification,
-                          success, {},
-                          error, {}
-                        );
-                      },
-                      error: error
+            // 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>');
+                var $listView = $('<div>').listView($.extend(true, {}, vmListView, {
+                    context: context
+                }));
+
+                $dialog.append($listView);
+                $dialog.dialog({
+                    title: _l('label.VMs.in.tier') + ': ' + name,
+                    dialogClass: 'multi-edit-add-list panel configure-acl',
+                    width: 825,
+                    height: 600,
+                    buttons: {
+                        'Done': function() {
+                            $(':ui-dialog').remove();
+                            $('.overlay').remove();
+                        }
                     }
-                  });
-                }
-              });
-            }
-            break;
-          case 'site-to-site-vpn':
-            //siteToSiteVPN is an object
-            var addAction = siteToSiteVPN.add;
-            var isVPNPresent = addAction.preCheck({ context: siteToSiteVPN.context });
-            var showVPNListView = function() {
-              $browser.cloudBrowser('addPanel', {
-                title: _l('label.site.to.site.VPN'),
-                maximizeIfSelected: true,
-                complete: function($panel) {
-                  $panel.listView(siteToSiteVPN, {context: siteToSiteVPN.context});
+                }).closest('.ui-dialog').overlay();
+            });
+
+            // Title shows tier details
+            $title.click(function() {
+                if ($browser && $browser.size()) { // Fix null exception, if add tier returns error
+                    $browser.cloudBrowser('addPanel', {
+                        title: name,
+                        maximizeIfSelected: true,
+                        complete: function($panel) {
+                            $panel.detailView($.extend(true, {}, detailView, {
+                                $browser: $browser,
+                                context: context
+                            }));
+                        }
+                    });
                 }
-              });
-            };
+            });
 
-            if (isVPNPresent) {
-              showVPNListView();
+            if (isPlaceholder) {
+                $tier.addClass('placeholder');
+                $title.html(_l('label.add.new.tier'));
             } else {
-              cloudStack.dialog.confirm({
-                message: 'Please confirm that you want to add a Site-to-Site VPN gateway.',
-                action: function() {
-                  var error = function(message) {
-                    cloudStack.dialog.notice({ message: message });
-                  };
-
-                  addAction.action({
-                    context: siteToSiteVPN.context,
-                    response: {
-                      success: function(args) {
-                        var _custom = args._custom;
-                        var notification = {
-                          poll: addAction.notification.poll,
-                          _custom: _custom,
-                          desc: addAction.messages.notification()
-                        };
-                        var success = function(args) {
-                          if (!$chart.is(':visible')) return;
-                          cloudStack.dialog.confirm({
-                            message: 'Gateway for VPC has been created successfully. Would you like to see its details?',
-                            action: showVPNListView
-                          });
-                        };
-                        
-                        cloudStack.dialog.notice({
-                          message: 'Your VPN is being created; please see notifications window.'
-                        });
-                        
-                        cloudStack.ui.notifications.add(
-                          notification,
-                          success, {},
-                          error, {}
-                        );
-                      },
-                      error: error
+                $title.html(
+                    cloudStack.concat(name, 8)
+                );
+                $title.attr('title', name);
+                $cidr.html(cidr);
+                $vmCount.append(
+                    $('<span>').addClass('total').html(virtualMachines != null ? virtualMachines.length : 0),
+                    _l('label.vms')
+                );
+                $tier.append($actions);
+
+                // Build action buttons
+                $(actions).map(function(index, action) {
+                    var $action = $('<div>').addClass('action');
+                    var shortLabel = action.action.shortLabel;
+                    var label = action.action.label;
+
+                    $action.addClass(action.id);
+
+                    if (action.id != 'remove') {
+                        $action.append($('<span>').addClass('label').html(_l(shortLabel)));
+                    } else {
+                        $action.append($('<span>').addClass('icon').html('&nbsp;'));
                     }
-                  });
-                }
-              });
-            }
-            break;
-          }
-        });
-      });
 
-      $tooltip.append($links);
+                    $actions.append($action);
+                    $action.attr('title', label);
+                    $action.data('vpc-tier-action-id', action.id);
 
-      // Tooltip hover event
-      $tooltip.hover(
-        function() {
-          $tooltip.addClass('active');
-        },
-        function() {
-          $tooltip.removeClass('active');
+                    // Action event
+                    $action.click(function() {
+                        if ($action.hasClass('disabled')) {
+                            return false;
+                        }
 
-          setTimeout(function() {
-            if (!$tooltip.hasClass('active')) {
-              $tooltip.remove();
+                        tierAction({
+                            action: action,
+                            actionPreFilter: actionPreFilter,
+                            context: context,
+                            $tier: $tier,
+                            $actions: $actions
+                        });
+
+                        return true;
+                    });
+                });
             }
-          }, 500);
-        }
-      );
-
-      return $tooltip;
-    },
-    vpcConfigureArea: function(args) {
-      var context = args.context;
-      var $browser = args.$browser;
-      var $chart = args.$chart;
-      var ipAddresses = args.ipAddresses;
-      var acl = args.acl;
-      var gateways = args.gateways;
-      var siteToSiteVPN = args.siteToSiteVPN;
-      var $config = $('<div>').addClass('config-area');
-      var $configIcon = $('<span>').addClass('icon').html('&nbsp');
-      var tierDetailView = args.tierDetailView;
-      
-      $config.append($configIcon);
-
-      // Tooltip event
-      $configIcon.mouseover(function() {
-        var $tooltip = elems.vpcConfigureTooltip({
-          context: context,
-          $browser: $browser,
-          $chart: $chart,
-          ipAddresses: ipAddresses,
-          gateways: gateways,
-          acl: acl,
-          siteToSiteVPN: siteToSiteVPN,
-          tierDetailView: tierDetailView
-        });
 
-        // Make sure tooltip is center aligned with icon
-        $tooltip.css({ left: $configIcon.position().left });
-        $tooltip.appendTo($config).hide();
-        $tooltip.stop().fadeIn('fast');
-      });
-
-      return $config;
-    },
-    router: function(args) {
-      var $browser = args.$browser;
-      var detailView = args.detailView;
-      var $router = $('<li>').addClass('tier virtual-router');
-      var $title = $('<span>').addClass('title').html(_l('label.virtual.router'));
-
-      $router.append($title);
-
-      // Append horizontal chart line
-      $router.append($('<div>').addClass('connect-line'));
-
-      $router.click(function() {
-        if ($router.hasClass('disabled')) return false;
-
-        $browser.cloudBrowser('addPanel', {
-          title: _l('label.VPC.router.details'),
-          complete: function($panel) {
-            $panel.detailView(detailView);
-          }
-        });
-      });
-
-      return $router;
-    },
-    tier: function(args) {
-      var ipAddresses = args.ipAddresses;
-      var acl = args.acl;
-      var name = args.name;
-      var cidr = args.cidr;
-      var context = args.context;
-      var vmListView = args.vmListView;
-      var actionPreFilter = args.actionPreFilter;
-      var actions = $.map(
-        args.actions ? args.actions : {}, function(value, key) {
-          return {
-            id: key,
-            action: value
-          };
-        }
-      );
-      var detailView = args.detailView;
-      var $browser = args.$browser;
-      var isPlaceholder = args.isPlaceholder;
-      var virtualMachines = args.virtualMachines;
-      var $tier = $('<li>').addClass('tier');
-      var $title = $('<span>').addClass('title');
-      var $cidr = $('<span>').addClass('cidr');
-      var $vmCount = $('<span>').addClass('vm-count');
-      var $actions = $('<div>').addClass('actions');
-
-      // Ignore special actions
-      // -- Add tier action is handled separately
-      actions = $.grep(actions, function(action) {
-        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>');
-        var $listView = $('<div>').listView($.extend(true, {}, vmListView, {
-          context: context
-        }));
-
-        $dialog.append($listView);
-        $dialog.dialog({
-          title: _l('label.VMs.in.tier') + ': ' + name,
-          dialogClass: 'multi-edit-add-list panel configure-acl',
-          width: 825,
-          height: 600,
-          buttons: {
-            'Done': function() {
-              $(':ui-dialog').remove();
-              $('.overlay').remove();
+            $tier.prepend($title);
+
+            if (!isPlaceholder) {
+                $tier.append($title, $cidr, $vmCount);
             }
-          }
-        }).closest('.ui-dialog').overlay();
-      });
-
-      // Title shows tier details
-      $title.click(function() {
-        if ($browser && $browser.size()) { // Fix null exception, if add tier returns error
-          $browser.cloudBrowser('addPanel', {
-            title: name,
-            maximizeIfSelected: true,
-            complete: function($panel) {
-              $panel.detailView($.extend(true, {}, detailView, {
-                $browser: $browser,
+
+            // Append horizontal chart line
+            $tier.append($('<div>').addClass('connect-line'));
+
+            // Handle action filter
+            filterActions({
+                $actions: $actions,
+                actionPreFilter: actionPreFilter,
                 context: context
-              }));
-            }
-          });
-        }
-      });
-
-      if (isPlaceholder) {
-        $tier.addClass('placeholder');
-        $title.html(_l('label.add.new.tier'));
-      } else {        
-        $title.html(
-          cloudStack.concat(name, 8)
-        );
-        $title.attr('title', name);
-        $cidr.html(cidr);
-        $vmCount.append(
-          $('<span>').addClass('total').html(virtualMachines != null? virtualMachines.length: 0),
-          _l('label.vms')
-        );
-        $tier.append($actions);
-
-        // Build action buttons
-        $(actions).map(function(index, action) {
-          var $action = $('<div>').addClass('action');
-          var shortLabel = action.action.shortLabel;
-          var label = action.action.label;
-
-          $action.addClass(action.id);
-
-          if (action.id != 'remove') {
-            $action.append($('<span>').addClass('label').html(_l(shortLabel)));
-          } else {
-            $action.append($('<span>').addClass('icon').html('&nbsp;'));
-          }
-
-          $actions.append($action);
-          $action.attr('title', label);
-          $action.data('vpc-tier-action-id', action.id);
-
-          // Action event
-          $action.click(function() {
-            if ($action.hasClass('disabled')) {
-              return false;
-            }
+            });
 
-            tierAction({
-              action: action,
-              actionPreFilter: actionPreFilter,
-              context: context,
-              $tier: $tier,
-              $actions: $actions
+            return $tier;
+        },
+        chart: function(args) {
+            var $browser = args.$browser;
+            var acl = args.acl;
+            var ipAddresses = args.ipAddresses;
+            var gateways = args.gateways;
+            var siteToSiteVPN = args.siteToSiteVPN;
+            var tiers = args.tiers;
+            var vmListView = args.vmListView;
+            var actions = args.actions;
+            var actionPreFilter = args.actionPreFilter;
+            var vpcName = args.vpcName;
+            var context = args.context;
+            var tierDetailView = args.tierDetailView;
+            var $tiers = $('<ul>').addClass('tiers');
+            var $router;
+
+            $router = elems.router({
+                $browser: $browser,
+                detailView: $.extend(true, {}, args.routerDetailView(), {
+                    context: context
+                })
             });
 
-            return true;
-          });
-        });
-      }
-
-      $tier.prepend($title);
-
-      if (!isPlaceholder) {
-        $tier.append($title, $cidr, $vmCount);
-      }
-
-      // Append horizontal chart line
-      $tier.append($('<div>').addClass('connect-line'));
-
-      // Handle action filter
-      filterActions({
-        $actions: $actions,
-        actionPreFilter: actionPreFilter,
-        context: context
-      });
-
-      return $tier;
-    },
-    chart: function(args) {
-      var $browser = args.$browser;
-      var acl = args.acl;
-      var ipAddresses = args.ipAddresses;
-      var gateways = args.gateways;
-      var siteToSiteVPN = args.siteToSiteVPN;
-      var tiers = args.tiers;
-      var vmListView = args.vmListView;
-      var actions = args.actions;
-      var actionPreFilter = args.actionPreFilter;
-      var vpcName = args.vpcName;
-      var context = args.context;
-      var tierDetailView = args.tierDetailView;
-      var $tiers = $('<ul>').addClass('tiers');
-      var $router;
-
-      $router = elems.router({
-        $browser:$browser,
-        detailView:$.extend(true, {}, args.routerDetailView(), {
-          context:context
-        })
-      });
-
-      if (!isAdmin()) $router.addClass('disabled');
-
-      var $chart = $('<div>').addClass('vpc-chart');
-      var $title = $('<div>').addClass('vpc-title')
-        .append(
-        $('<span>').html(vpcName)
-      )
-        .append(
-        elems.vpcConfigureArea({
-          context:context,
-          $browser:$browser,
-          $chart:$chart,
-          ipAddresses:$.extend(ipAddresses, {context:context}),
-          gateways:$.extend(gateways, {context:context}),
-          siteToSiteVPN:$.extend(siteToSiteVPN, {context:context}),
-          acl:$.extend(acl, {context:context}),
-          tierDetailView:tierDetailView
-        })
-      );
-
-      var showAddTierDialog = function () {
-        if ($(this).find('.loading-overlay').size()) {
-          return false;
-        }
+            if (!isAdmin()) $router.addClass('disabled');
+
+            var $chart = $('<div>').addClass('vpc-chart');
+            var $title = $('<div>').addClass('vpc-title')
+                .append(
+                    $('<span>').html(vpcName)
+            )
+                .append(
+                    elems.vpcConfigureArea({
+                        context: context,
+                        $browser: $browser,
+                        $chart: $chart,
+                        ipAddresses: $.extend(ipAddresses, {
+                            context: context
+                        }),
+                        gateways: $.extend(gateways, {
+                            context: context
+                        }),
+                        siteToSiteVPN: $.extend(siteToSiteVPN, {
+                            context: context
+                        }),
+                        acl: $.extend(acl, {
+                            context: context
+                        }),
+                        tierDetailView: tierDetailView
+                    })
+            );
+
+            var showAddTierDialog = function() {
+                if ($(this).find('.loading-overlay').size()) {
+                    return false;
+                }
 
-        addTierDialog({
-          ipAddresses:ipAddresses,
-          $browser:$browser,
-          tierDetailView:tierDetailView,
-          $tiers:$tiers,
-          acl:acl,
-          context:context,
-          actions:actions,
-          vmListView:vmListView,
-          actionPreFilter:actionPreFilter
-        });
+                addTierDialog({
+                    ipAddresses: ipAddresses,
+                    $browser: $browser,
+                    tierDetailView: tierDetailView,
+                    $tiers: $tiers,
+                    acl: acl,
+                    context: context,
+                    actions: actions,
+                    vmListView: vmListView,
+                    actionPreFilter: actionPreFilter
+                });
 
-        return true;
-      };
-
-      if (tiers != null && tiers.length > 0) {
-        $(tiers).map(function (index, tier) {
-          var $tier = elems.tier({
-            ipAddresses:ipAddresses,
-            acl:acl,
-            $browser:$browser,
-            detailView:tierDetailView,
-            name:tier.name,
-            cidr:tier.cidr,
-            virtualMachines:tier.virtualMachines,
-            vmListView:vmListView,
-            actions:actions,
-            actionPreFilter:actionPreFilter,
-            context:$.extend(true, {}, context, {
-              networks:[tier]
-            })
-          });
-
-          $tier.appendTo($tiers);
-        });
+                return true;
+            };
 
-      }
-
-      elems.tier({ isPlaceholder:true }).appendTo($tiers)
-        .click(showAddTierDialog);
-      $tiers.prepend($router);
-      $chart.append($title, $tiers);
-
-      if (!tiers || !tiers.length) {
-        showAddTierDialog();
-      }
-
-      return $chart;
-    }
-  };
-
-  var filterActions = function(args) {
-    var $actions = args.$actions;
-    var actionPreFilter = args.actionPreFilter;
-    var context = args.context;
-    var disabledActions, allowedActions;
-
-    disabledActions = actionPreFilter ? actionPreFilter({
-      context: context
-    }) : [];
-
-    // Visual appearance for disabled actions
-    $actions.find('.action').map(function(index, action) {
-      var $action = $(action);
-      var actionID = $action.data('vpc-tier-action-id');
-
-      if ($.inArray(actionID, disabledActions) > -1) {
-        $action.addClass('disabled');
-      } else {
-        $action.removeClass('disabled');
-      }
-    });
-  };
-
-  // Handles tier action, including UI effects
-  var tierAction = function(args) {
-    var $tier = args.$tier;
-    var $loading = $('<div>').addClass('loading-overlay');
-    var $actions = args.$actions;
-    var actionArgs = args.action.action;
-    var action = actionArgs.action;
-    var actionID = args.action.id;
-    var notification = actionArgs.notification;
-    var label = actionArgs.label;
-    var context = args.context;
-    var actionPreFilter = args.actionPreFilter;
-
-    var success = function(args) {
-      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
-        {
-          desc: label,
-          poll: notification.poll,
-          _custom: _custom
-        },
+            if (tiers != null && tiers.length > 0) {
+                $(tiers).map(function(index, tier) {
+                    var $tier = elems.tier({
+                        ipAddresses: ipAddresses,
+                        acl: acl,
+                        $browser: $browser,
+                        detailView: tierDetailView,
+                        name: tier.name,
+                        cidr: tier.cidr,
+                        virtualMachines: tier.virtualMachines,
+                        vmListView: vmListView,
+                        actions: actions,
+                        actionPreFilter: actionPreFilter,
+                        context: $.extend(true, {}, context, {
+                            networks: [tier]
+                        })
+                    });
+
+                    $tier.appendTo($tiers);
+                });
 
-        // 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;
-            var newVM = args.data;
-            var newContext = $.extend(true, {}, context, {
-              vms: [newVM]
-            });
+            }
 
-            $total.html(newTotal);
+            elems.tier({
+                isPlaceholder: true
+            }).appendTo($tiers)
+                .click(showAddTierDialog);
+            $tiers.prepend($router);
+            $chart.append($title, $tiers);
 
-            filterActions({
-              $actions: $actions,
-              actionPreFilter: actionPreFilter,
-              context: newContext
-            });
+            if (!tiers || !tiers.length) {
+                showAddTierDialog();
+            }
 
-            updateVMLoadingState();
-          } else if (actionID == 'remove') { //remove tier
-            $loading.remove();
-            $tier.remove();
-          } else {
-            $loading.remove();
-          }
+            return $chart;
+        }
+    };
 
-        },
+    var filterActions = function(args) {
+        var $actions = args.$actions;
+        var actionPreFilter = args.actionPreFilter;
+        var context = args.context;
+        var disabledActions, allowedActions;
 
-        {},
+        disabledActions = actionPreFilter ? actionPreFilter({
+            context: context
+        }) : [];
 
-        // Error
-        function(args) {
-          if (actionID == 'addVM') {
-            updateVMLoadingState();
-          } else {
-            $loading.remove();
-          }
-        }
-      );
+        // Visual appearance for disabled actions
+        $actions.find('.action').map(function(index, action) {
+            var $action = $(action);
+            var actionID = $action.data('vpc-tier-action-id');
+
+            if ($.inArray(actionID, disabledActions) > -1) {
+                $action.addClass('disabled');
+            } else {
+                $action.removeClass('disabled');
+            }
+        });
     };
 
-    switch(actionID) {
-    case 'addVM':
-      action({
-        context: context,
-        complete: function(args) {
-          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);
-        }
-      });
-      break;
-    case 'remove':
-      $loading.appendTo($tier);
-      action({
-        context: context,
-        response: {
-          success: function(args) {
-            success($.extend(args, {
-              remove: true
-            }));
-          }
-        }
-      });
-      break;
-    case 'acl':
-      elems.aclDialog({
-        isDialog: true,
-        actionArgs: actionArgs,
-        context: context  
-      }).closest('.ui-dialog').overlay();
-      break;
-    default:
-      $loading.appendTo($tier);
-      action({
-        context: context,
-        complete: success,
-        response: {
-          success: success,
-          error: function(args) { $loading.remove(); }
-        }
-      });
-    }
-  };
-
-  // Appends a new tier to chart
-  var addNewTier = function(args) {
-    var ipAddresses = args.ipAddresses;
-    var acl = args.acl;
-    var actions = args.actions;
-    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, {
-      ipAddresses: ipAddresses,
-      $browser: $browser,
-      detailView: tierDetailView,
-      context: context,
-      vmListView: vmListView,
-      actions: actions,
-      actionPreFilter: actionPreFilter,
-      acl: acl,
-      virtualMachines: []
-    });
-    var $tiers = args.$tiers;
-
-    $tiers.find('li.placeholder')
-      .before(
-        elems.tier(tier)
-          .hide()
-          .fadeIn('slow')
-      );
-  };
-
-  // Renders the add tier form, in a dialog
-  var addTierDialog = function(args) {
-    var ipAddresses = args.ipAddresses;
-    var actions = args.actions;
-    var context = args.context;
-    var vmListView = args.vmListView;
-    var actionPreFilter = args.actionPreFilter;
-    var $tiers = args.$tiers;
-    var $browser = args.$browser;
-    var tierDetailView = args.tierDetailView;
-    var acl = args.acl;
-
-    cloudStack.dialog.createForm({
-      context: context,
-      form: actions.add.createForm,
-      after: function(args) {
-        var $loading = $('<div>').addClass('loading-overlay').prependTo($tiers.find('li.placeholder'));
-        actions.add.action({
-          context: context,
-          data: args.data,
-          response: {
-            success: function(args) {
-              var tier = args.data;
-
-              cloudStack.ui.notifications.add(
+    // Handles tier action, including UI effects
+    var tierAction = function(args) {
+        var $tier = args.$tier;
+        var $loading = $('<div>').addClass('loading-overlay');
+        var $actions = args.$actions;
+        var actionArgs = args.action.action;
+        var action = actionArgs.action;
+        var actionID = args.action.id;
+        var notification = actionArgs.notification;
+        var label = actionArgs.label;
+        var context = args.context;
+        var actionPreFilter = args.actionPreFilter;
+
+        var success = function(args) {
+            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
                 {
-                  desc: actions.add.label
+                    desc: label,
+                    poll: notification.poll,
+                    _custom: _custom
                 },
 
                 // Success
+
                 function(args) {
-                  $loading.remove();
-                  addNewTier({
-                    ipAddresses: ipAddresses,
-                    $browser: $browser,
-                    tierDetailView: tierDetailView,
-                    context: $.extend(true, {}, context, {
-                      networks: [tier]
-                    }),
-                    tier: tier,
-                    acl: acl,
-                    $tiers: $tiers,
-                    actions: actions,
-                    actionPreFilter: actionPreFilter,
-                    vmListView: vmListView
-                  });
+                    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]
+                        });
+
+                        $total.html(newTotal);
+
+                        filterActions({
+                            $actions: $actions,
+                            actionPreFilter: actionPreFilter,
+                            context: newContext
+                        });
+
+                        updateVMLoadingState();
+                    } else if (actionID == 'remove') { //remove tier
+                        $loading.remove();
+                        $tier.remove();
+                    } else {
+                        $loading.remove();
+                    }
+
                 },
 
                 {},
 
                 // Error
+
                 function(args) {
-                  $loading.remove();
+                    if (actionID == 'addVM') {
+                        updateVMLoadingState();
+                    } else {
+                        $loading.remove();
+                    }
                 }
-              );
-            },
-            error: function(errorMsg) {
-              cloudStack.dialog.notice({ message: _s(errorMsg) });
-              $loading.remove();
-            }
-          }
+            );
+        };
+
+        switch (actionID) {
+            case 'addVM':
+                action({
+                    context: context,
+                    complete: function(args) {
+                        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);
+                    }
+                });
+                break;
+            case 'remove':
+                $loading.appendTo($tier);
+                action({
+                    context: context,
+                    response: {
+                        success: function(args) {
+                            success($.extend(args, {
+                                remove: true
+                            }));
+                        }
+                    }
+                });
+                break;
+            case 'acl':
+                elems.aclDialog({
+                    isDialog: true,
+                    actionArgs: actionArgs,
+                    context: context
+                }).closest('.ui-dialog').overlay();
+                break;
+            default:
+                $loading.appendTo($tier);
+                action({
+                    context: context,
+                    complete: success,
+                    response: {
+                        success: success,
+                        error: function(args) {
+                            $loading.remove();
+                        }
+                    }
+                });
+        }
+    };
+
+    // Appends a new tier to chart
+    var addNewTier = function(args) {
+        var ipAddresses = args.ipAddresses;
+        var acl = args.acl;
+        var actions = args.actions;
+        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, {
+            ipAddresses: ipAddresses,
+            $browser: $browser,
+            detailView: tierDetailView,
+            context: context,
+            vmListView: vmListView,
+            actions: actions,
+            actionPreFilter: actionPreFilter,
+            acl: acl,
+            virtualMachines: []
         });
-      }
-    });
-  };
-
-  cloudStack.uiCustom.vpc = function(args) {
-    var vmListView = args.vmListView;
-    var tierArgs = args.tiers;
-    var ipAddresses = args.ipAddresses;
-    var gateways = args.gateways;
-    var acl = args.acl;
-    var siteToSiteVPN = args.siteToSiteVPN;
-    var routerDetailView = args.routerDetailView;
-
-    return function(args) {
-      var context = args.context;
-      var $browser = $('#browser .container');
-      var $toolbar = $('<div>').addClass('toolbar');
-      var vpc = args.context.vpc[0];
-
-      $browser.cloudBrowser('addPanel', {
-        maximizeIfSelected: true,
-        title: _l('label.configure.vpc') + ': ' + vpc.name,
-        complete: function($panel) {
-          var $loading = $('<div>').addClass('loading-overlay').appendTo($panel);
-
-          $panel.append($toolbar);
-
-          // Load data
-          tierArgs.dataProvider({
+        var $tiers = args.$tiers;
+
+        $tiers.find('li.placeholder')
+            .before(
+                elems.tier(tier)
+                .hide()
+                .fadeIn('slow')
+        );
+    };
+
+    // Renders the add tier form, in a dialog
+    var addTierDialog = function(args) {
+        var ipAddresses = args.ipAddresses;
+        var actions = args.actions;
+        var context = args.context;
+        var vmListView = args.vmListView;
+        var actionPreFilter = args.actionPreFilter;
+        var $tiers = args.$tiers;
+        var $browser = args.$browser;
+        var tierDetailView = args.tierDetailView;
+        var acl = args.acl;
+
+        cloudStack.dialog.createForm({
             context: context,
-            response: {
-              success: function(args) {
-                // Setup detail view tabs
-                var tierDetailView = $.extend(true, {}, tierArgs.detailView, {
-                  tabs: {
-                    acl: {
-                      custom: function(args) {
-                        var $acl = elems.aclDialog({
-                          isDialog: false,
-                          actionArgs: acl,
-                          context: args.context
-                        });
-                        
-                        return $acl;
-                      }
-                    },
-                    ipAddresses: {
-                      custom: function(args) {
-                        return $('<div>').listView(ipAddresses.listView(),
-                                                   {context: args.context});
-                      }
+            form: actions.add.createForm,
+            after: function(args) {
+                var $loading = $('<div>').addClass('loading-overlay').prependTo($tiers.find('li.placeholder'));
+                actions.add.action({
+                    context: context,
+                    data: args.data,
+                    response: {
+                        success: function(args) {
+                            var tier = args.data;
+
+                            cloudStack.ui.notifications.add(
+                                // Notification
+                                {
+                                    desc: actions.add.label
+                                },
+
+                                // Success
+
+                                function(args) {
+                                    $loading.remove();
+                                    addNewTier({
+                                        ipAddresses: ipAddresses,
+                                        $browser: $browser,
+                                        tierDetailView: tierDetailView,
+                                        context: $.extend(true, {}, context, {
+                                            networks: [tier]
+                                        }),
+                                        tier: tier,
+                                        acl: acl,
+                                        $tiers: $tiers,
+                                        actions: actions,
+                                        actionPreFilter: actionPreFilter,
+                                        vmListView: vmListView
+                                    });
+                                },
+
+                                {},
+
+                                // Error
+
+                                function(args) {
+                                    $loading.remove();
+                                }
+                            );
+                        },
+                        error: function(errorMsg) {
+                            cloudStack.dialog.notice({
+                                message: _s(errorMsg)
+                            });
+                            $loading.remove();
+                        }
                     }
-                  }
-                });
-                
-                var tiers = args.tiers;
-                var $chart = elems.chart({
-                  $browser: $browser,
-                  ipAddresses: ipAddresses,
-                  gateways: gateways,
-                  acl: acl,
-                  tierDetailView: tierDetailView,
-                  routerDetailView: routerDetailView,
-                  siteToSiteVPN: siteToSiteVPN,
-                  vmListView: vmListView,
-                  context: context,
-                  actions: tierArgs.actions,
-                  actionPreFilter: tierArgs.actionPreFilter,
-                  vpcName: vpc.name,
-                  tiers: tiers
-                }).appendTo($panel);
-
-                $loading.remove();
-                $chart.fadeIn(function() {
                 });
-              }
             }
-          });
-        }
-      });
+        });
+    };
+
+    cloudStack.uiCustom.vpc = function(args) {
+        var vmListView = args.vmListView;
+        var tierArgs = args.tiers;
+        var ipAddresses = args.ipAddresses;
+        var gateways = args.gateways;
+        var acl = args.acl;
+        var siteToSiteVPN = args.siteToSiteVPN;
+        var routerDetailView = args.routerDetailView;
+
+        return function(args) {
+            var context = args.context;
+            var $browser = $('#browser .container');
+            var $toolbar = $('<div>').addClass('toolbar');
+            var vpc = args.context.vpc[0];
+
+            $browser.cloudBrowser('addPanel', {
+                maximizeIfSelected: true,
+                title: _l('label.configure.vpc') + ': ' + vpc.name,
+                complete: function($panel) {
+                    var $loading = $('<div>').addClass('loading-overlay').appendTo($panel);
+
+                    $panel.append($toolbar);
+
+                    // Load data
+                    tierArgs.dataProvider({
+                        context: context,
+                        response: {
+                            success: function(args) {
+                                // Setup detail view tabs
+                                var tierDetailView = $.extend(true, {}, tierArgs.detailView, {
+                                    tabs: {
+                                        acl: {
+                                            custom: function(args) {
+                                                var $acl = elems.aclDialog({
+                                                    isDialog: false,
+                                                    actionArgs: acl,
+                                                    context: args.context
+                                                });
+
+                                                return $acl;
+                                            }
+                                        },
+                                        ipAddresses: {
+                                            custom: function(args) {
+                                                return $('<div>').listView(ipAddresses.listView(), {
+                                                    context: args.context
+                                                });
+                                            }
+                                        }
+                                    }
+                                });
+
+                                var tiers = args.tiers;
+                                var $chart = elems.chart({
+                                    $browser: $browser,
+                                    ipAddresses: ipAddresses,
+                                    gateways: gateways,
+                                    acl: acl,
+                                    tierDetailView: tierDetailView,
+                                    routerDetailView: routerDetailView,
+                                    siteToSiteVPN: siteToSiteVPN,
+                                    vmListView: vmListView,
+                                    context: context,
+                                    actions: tierArgs.actions,
+                                    actionPreFilter: tierArgs.actionPreFilter,
+                                    vpcName: vpc.name,
+                                    tiers: tiers
+                                }).appendTo($panel);
+
+                                $loading.remove();
+                                $chart.fadeIn(function() {});
+                            }
+                        }
+                    });
+                }
+            });
+        };
     };
-  };
 }(jQuery, cloudStack));