incubator-cloudstack-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From bfede...@apache.org
Subject git commit: Update VPC UI
Date Fri, 20 Jul 2012 18:02:36 GMT
Updated Branches:
  refs/heads/vpc e9ae7336c -> 71bfeae48


Update VPC UI


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

Branch: refs/heads/vpc
Commit: 71bfeae4873f0ccb9c6b27e223af0053b01c4d4f
Parents: e9ae733
Author: bfederle <bfederle@gmail.com>
Authored: Fri Jul 20 10:49:09 2012 -0700
Committer: bfederle <bfederle@gmail.com>
Committed: Fri Jul 20 11:02:28 2012 -0700

----------------------------------------------------------------------
 ui/css/cloudstack3.css      |   17 +++-
 ui/images/sprites.png       |  Bin 178569 -> 178788 bytes
 ui/scripts/ui-custom/vpc.js |  180 ++++++++++++++++++++++++++------------
 3 files changed, 136 insertions(+), 61 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/blob/71bfeae4/ui/css/cloudstack3.css
----------------------------------------------------------------------
diff --git a/ui/css/cloudstack3.css b/ui/css/cloudstack3.css
index ef81697..2101e2b 100644
--- a/ui/css/cloudstack3.css
+++ b/ui/css/cloudstack3.css
@@ -9097,17 +9097,20 @@ div.panel.ui-dialog div.list-view div.fixed-header {
 
 .vpc-chart li.tier span.title {
   color: #FFFFFF;
-  /*+placement:shift 11px 13px;*/
+  /*+placement:shift 8px 7px;*/
   position: relative;
-  left: 11px;
-  top: 13px;
+  left: 8px;
+  top: 7px;
   position: absolute;
+  cursor: pointer;
+  padding: 3px;
   font-size: 24px;
   /*+text-shadow:1px 2px 2px #000000;*/
   -moz-text-shadow: 1px 2px 2px #000000;
   -webkit-text-shadow: 1px 2px 2px #000000;
   -o-text-shadow: 1px 2px 2px #000000;
   text-shadow: 1px 2px 2px #000000;
+  text-decoration: underline;
 }
 
 .vpc-chart li.tier span.cidr {
@@ -9257,9 +9260,11 @@ div.panel.ui-dialog div.list-view div.fixed-header {
   width: 100px;
   border: 1px solid transparent;
   margin: 4px;
+  text-decoration: underline;
 }
 
-.vpc-chart li.tier .vm-count:hover {
+.vpc-chart li.tier .vm-count:hover,
+.vpc-chart li.tier .title:hover {
   border-radius: 4px;
   border: 1px solid #4C545E;
   background: url(../images/bg-gradients.png) 0px -2751px;
@@ -9304,6 +9309,7 @@ div.panel.ui-dialog div.list-view div.fixed-header {
   -webkit-text-shadow: none;
   -o-text-shadow: none;
   text-shadow: none;
+  text-decoration: none;
 }
 
 .vpc-chart li.tier.placeholder:hover span {
@@ -9313,6 +9319,8 @@ div.panel.ui-dialog div.list-view div.fixed-header {
   -webkit-text-shadow: 0px 0px 7px #FFFFFF;
   -o-text-shadow: 0px 0px 7px #FFFFFF;
   text-shadow: 0px 0px 7px #FFFFFF;
+  background: none;
+  border: none;
 }
 
 .vpc-chart li.tier.virtual-router {
@@ -9340,6 +9348,7 @@ div.panel.ui-dialog div.list-view div.fixed-header {
   position: relative;
   left: 53px;
   top: 22px;
+  text-decoration: none;
 }
 
 .vpc-chart li.tier.virtual-router span:hover {

http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/blob/71bfeae4/ui/images/sprites.png
----------------------------------------------------------------------
diff --git a/ui/images/sprites.png b/ui/images/sprites.png
index 71674d1..f1f5b8c 100644
Binary files a/ui/images/sprites.png and b/ui/images/sprites.png differ

http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/blob/71bfeae4/ui/scripts/ui-custom/vpc.js
----------------------------------------------------------------------
diff --git a/ui/scripts/ui-custom/vpc.js b/ui/scripts/ui-custom/vpc.js
index a4934bc..ab636a8 100644
--- a/ui/scripts/ui-custom/vpc.js
+++ b/ui/scripts/ui-custom/vpc.js
@@ -18,6 +18,8 @@
   var elems = {
     vpcConfigureTooltip: function(args) {
       var $browser = args.$browser;
+			var ipAddresses = args.ipAddresses;
+			var gateways = args.gateways;
       var siteToSiteVPN = args.siteToSiteVPN;
       var links = {
         'ip-addresses': 'IP Addresses',
@@ -38,21 +40,39 @@
         $link.appendTo($links);
 
         // Link event
-        $link.click(function() {
+        $link.click(function() {				  
           switch (id) {
-          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) {
-                $panel.listView(
-                  $.isFunction(siteToSiteVPN.listView) ?
-                    siteToSiteVPN.listView() : siteToSiteVPN.listView
-                );
+              complete: function($panel) {	
+								//siteToSiteVPN is an object
+                $panel.listView(siteToSiteVPN, {context: siteToSiteVPN.context});		
               }
             });
             break;
-          }
+          }					
         });
       });
 
@@ -76,9 +96,11 @@
 
       return $tooltip;
     },
-    vpcConfigureArea: function(args) {
+    vpcConfigureArea: function(args) {				  
       var $browser = args.$browser;
-      var siteToSiteVPN = args.siteToSiteVPN;
+      var ipAddresses = args.ipAddresses;
+			var gateways = args.gateways;
+			var siteToSiteVPN = args.siteToSiteVPN;
       var $config = $('<div>').addClass('config-area');
       var $configIcon = $('<span>').addClass('icon').html('&nbsp');
 
@@ -88,6 +110,8 @@
       $configIcon.mouseover(function() {
         var $tooltip = elems.vpcConfigureTooltip({
           $browser: $browser,
+					ipAddresses: ipAddresses,
+					gateways: gateways,
           siteToSiteVPN: siteToSiteVPN
         });
 
@@ -124,6 +148,8 @@
           };
         }
       );
+      var detailView = args.detailView;
+      var $browser = args.$browser;
       var isPlaceholder = args.isPlaceholder;
       var virtualMachines = args.virtualMachines;
       var $tier = $('<li>').addClass('tier');
@@ -147,7 +173,7 @@
 
         $dialog.append($listView);
         $dialog.dialog({
-          title: 'VMs in this tier',
+          title: 'VMs in tier: ' + name,
           dialogClass: 'multi-edit-add-list panel configure-acl',
           width: 825,
           height: 600,
@@ -160,6 +186,21 @@
         }).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, {
+                context: context
+              }));
+            }
+          });
+        }
+      });
+
       if (isPlaceholder) {
         $tier.addClass('placeholder');
         $title.html('Create Tier');
@@ -167,7 +208,7 @@
         $title.html(name);
         $cidr.html(cidr);
         $vmCount.append(
-          $('<span>').addClass('total').html(virtualMachines.length),
+          $('<span>').addClass('total').html(virtualMachines != null? virtualMachines.length:
0),
           ' VMs'
         );
         $tier.append($actions);
@@ -227,15 +268,18 @@
 
       return $tier;
     },
-    chart: function(args) {
+    chart: function(args) {		 
       var $browser = args.$browser;
-      var siteToSiteVPN = args.siteToSiteVPN;
+      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 = elems.router();
       var $chart = $('<div>').addClass('vpc-chart');
@@ -246,7 +290,9 @@
             .append(
               elems.vpcConfigureArea({
                 $browser: $browser,
-                siteToSiteVPN: siteToSiteVPN
+								ipAddresses: $.extend(ipAddresses, {context: context}),
+								gateways: $.extend(gateways, {context: context}),
+                siteToSiteVPN: $.extend(siteToSiteVPN, {context: context})
               })
             );
 
@@ -256,6 +302,8 @@
         }
 
         addTierDialog({
+          $browser: $browser,
+          tierDetailView: tierDetailView,
           $tiers: $tiers,
           context: context,
           actions: actions,
@@ -266,9 +314,11 @@
         return true;
       };
 
-      if (tiers.length) {
+      if (tiers != null && tiers.length > 0) {
         $(tiers).map(function(index, tier) {
           var $tier = elems.tier({
+            $browser: $browser,
+            detailView: tierDetailView,
             name: tier.name,
             cidr: tier.cidr,
             virtualMachines: tier.virtualMachines,
@@ -276,7 +326,7 @@
             actions: actions,
             actionPreFilter: actionPreFilter,
             context: $.extend(true, {}, context, {
-              tiers: [tier]
+              networks: [tier]
             })
           });
 
@@ -347,34 +397,31 @@
         },
 
         // Success
-        function(args) {
-          var newData = args.data ? args.data : {};
-          var newTier = $.extend(true, {}, context.tiers[0], newData);
-          var newContext = $.extend(true, {}, context);
-
-          // Update data
-          newContext.tiers = [newTier];
-
-          if (remove) {
-            $tier.remove();
-          } else {
-            $loading.remove();
-          }
-
-          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);
-          }
-
-          filterActions({
-            $actions: $actions,
-            actionPreFilter: actionPreFilter,
-            context: newContext
-          });
+        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;		
+            var newContext = $.extend(true, {}, context, {
+						  vms: [newVM]
+						});			
+						filterActions({
+							$actions: $actions,
+							actionPreFilter: actionPreFilter,
+							context: newContext
+						});						
+					}	
+					
+					else if (actionID == 'remove') { //remove tier		
+					  $tier.remove();
+					}				
+					
         },
 
         {},
@@ -401,8 +448,10 @@
         action({
           context: context,
           response: {
-            success: function(args) {
-              success({ remove: true });
+            success: function(args) {						  				
+              success($.extend(args, { 
+							  remove: true 
+							}));
             }
           }
         });
@@ -414,9 +463,9 @@
           context: context
         })
       ).dialog({
-        title: 'Configure ACL',
+        title: 'Configure ACL for tier: ' + $tier.find('.title').html(),
         dialogClass: 'configure-acl',
-        width: 820,
+        width: 900,
         height: 600,
         buttons: {
           'Done': function() {
@@ -445,7 +494,11 @@
     var vmListView = args.vmListView;
     var actionPreFilter = args.actionPreFilter;
     var context = args.context;
+    var $browser = args.$browser;
+    var tierDetailView = args.tierDetailView;
     var tier = $.extend(args.tier, {
+      $browser: $browser,
+      detailView: tierDetailView,
       context: context,
       vmListView: vmListView,
       actions: actions,
@@ -469,8 +522,11 @@
     var vmListView = args.vmListView;
     var actionPreFilter = args.actionPreFilter;
     var $tiers = args.$tiers;
+    var $browser = args.$browser;
+    var tierDetailView = args.tierDetailView;
 
     cloudStack.dialog.createForm({
+      context: context,
       form: actions.add.createForm,
       after: function(args) {
         var $loading = $('<div>').addClass('loading-overlay').prependTo($tiers.find('li.placeholder'));
@@ -478,22 +534,23 @@
           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,
-                  poll: actions.add.notification.poll
+                  desc: actions.add.label                  
                 },
 
                 // Success
                 function(args) {
                   $loading.remove();
                   addNewTier({
+                    $browser: $browser,
+                    tierDetailView: tierDetailView,
                     context: $.extend(true, {}, context, {
-                      tiers: [tier]
+                      networks: [tier]
                     }),
                     tier: tier,
                     $tiers: $tiers,
@@ -510,7 +567,11 @@
                   $loading.remove();
                 }
               );
-            }
+            },
+						error: function(errorMsg) {						 
+							cloudStack.dialog.notice({ message: _s(errorMsg) });							
+						  $loading.remove();
+						}						
           }
         });
       }
@@ -520,7 +581,9 @@
   cloudStack.uiCustom.vpc = function(args) {
     var vmListView = args.vmListView;
     var tierArgs = args.tiers;
-    var siteToSiteVPN = args.siteToSiteVPN;
+    var ipAddresses = args.ipAddresses;
+		var gateways = args.gateways;
+		var siteToSiteVPN = args.siteToSiteVPN;
 
     return function(args) {
       var context = args.context;
@@ -540,10 +603,13 @@
           tierArgs.dataProvider({
             context: context,
             response: {
-              success: function(args) {
-                var tiers = args.data.tiers;
+              success: function(args) {			
+                var tiers = args.tiers;
                 var $chart = elems.chart({
                   $browser: $browser,
+									ipAddresses: ipAddresses,
+									gateways: gateways,
+                  tierDetailView: tierArgs.detailView,
                   siteToSiteVPN: siteToSiteVPN,
                   vmListView: vmListView,
                   context: context,


Mime
View raw message