cloudstack 3.0 UI - VPC - tier - implement "Add VM to tier" action.

ui/index.jsp

@@ -209,8 +209,9 @@
             <div class="step network" wizard-step-id="network">
               <!-- 5a: Network description -->
               <div class="wizard-step-conditional nothing-to-select">
-                <p><fmt:message key="message.zone.no.network.selection"/></p>
+                <p id="from_instance_page_1"><fmt:message key="message.zone.no.network.selection"/></p>
-                <p><fmt:message key="message.please.proceed"/></p>
+								<p id="from_instance_page_2"><fmt:message key="message.please.proceed"/></p>
+								<p id="from_vpc_tier"></p>                
               </div>
 
               <!-- 5b: Select network -->

ui/scripts/instanceWizard.js

@@ -231,8 +231,22 @@
         }
       }
 
-      if (selectedZoneObj.networktype == "Advanced") {  //Advanced zone. Show network list.
+      if (selectedZoneObj.networktype == "Advanced") {  //Advanced zone. Show network list.	 
-        step5ContainerType = 'select-network';
+				var $networkStep = $(".step.network:visible .nothing-to-select");		
+				if(args.initArgs.pluginForm != null && args.initArgs.pluginForm.name == "vpcTierInstanceWizard") { //from VPC Tier chart
+				  step5ContainerType = 'nothing-to-select'; 					
+					$networkStep.find("#from_instance_page_1").hide();		
+          $networkStep.find("#from_instance_page_2").hide();					
+					$networkStep.find("#from_vpc_tier").text("tier " + args.context.tiers[0].name);					
+					$networkStep.find("#from_vpc_tier").show();					
+				}
+			  else { //from Instance page 
+          step5ContainerType = 'select-network';
+					$networkStep.find("#from_instance_page_1").show();		
+          $networkStep.find("#from_instance_page_2").show();
+					$networkStep.find("#from_vpc_tier").text("");			
+					$networkStep.find("#from_vpc_tier").hide();
+				}
       }
       else { //Basic zone. Show securigy group list or nothing(when no SecurityGroup service in guest network)
         var includingSecurityGroupService = false;
@@ -370,14 +384,6 @@
     }
     ],
     action: function(args) {
-/*
-var isValid = true;
-isValid &= validateString("Name", $thisPopup.find("#wizard_vm_name"), $thisPopup.find("#wizard_vm_name_errormsg"), true);   //optional
-isValid &= validateString("Group", $thisPopup.find("#wizard_vm_group"), $thisPopup.find("#wizard_vm_group_errormsg"), true); //optional
-if (!isValid)
-return;
-*/
-
       // Create a new VM!!!!
       var array1 = [];
 
@@ -470,7 +476,11 @@ return;
         if(checkedSecurityGroupIdArray.length > 0)
           array1.push("&securitygroupids=" + checkedSecurityGroupIdArray.join(","));
       }
-
+      else if (step5ContainerType == 'nothing-to-select') {		
+				if(args.context.tiers != null) //from VPC tier
+				  array1.push("&networkIds=" + args.context.tiers[0].id);
+			}
+			
       var displayname = args.data.displayname;
       if(displayname != null && displayname.length > 0) {
         array1.push("&displayname="+todb(displayname));

ui/scripts/network.js

@@ -3140,7 +3140,12 @@
           },
           actions: {
             add: {
-              label: 'Add VPC',
+              label: 'Add VPC',							
+							messages: {								
+								notification: function(args) {
+									return 'Add VPC';
+								}
+							},
               createForm: {
                 title: 'Add VPC',
 								messages: {

ui/scripts/ui-custom/instanceWizard.js

@@ -162,7 +162,9 @@
         var dataProvider = function(step, providerArgs, callback) {
           // Call appropriate data provider
           args.steps[step - 1]($.extend(providerArgs, {
-            currentData: cloudStack.serializeForm($form)
+            currentData: cloudStack.serializeForm($form),
+						initArgs: args,
+						context: context
           }));
         };
 

ui/scripts/ui-custom/vpc.js

@@ -341,34 +341,31 @@
         },
 
         // Success
-        function(args) {
+        function(args) {				  
-          var newData = args.data ? args.data : {};
+					if (actionID == 'addVM') {	
-          var newTier = $.extend(true, {}, context.tiers[0], newData);
+						// Increment VM total
-          var newContext = $.extend(true, {}, context);
+						var $total = $tier.find('.vm-count .total');
-
+						var prevTotal = parseInt($total.html());
-          // Update data
+						var newTotal = prevTotal + 1;
-          newContext.tiers = [newTier];
+						$total.html(newTotal);
-
+						
-          if (remove) {
+						$loading.remove();
-            $tier.remove();
+						
-          } else {
+						var newVM = args.data;		
-            $loading.remove();
+            var newContext = $.extend(true, {}, context, {
-          }
+						  vms: [newVM]
-
+						});			
-          if (actionID == 'addVM') {
+						filterActions({
-            // Increment VM total
+							$actions: $actions,
-            var $total = $tier.find('.vm-count .total');
+							actionPreFilter: actionPreFilter,
-            var prevTotal = parseInt($total.html());
+							context: newContext
-            var newTotal = prevTotal + 1;
+						});						
-
+					}	
-            $total.html(newTotal);
+					
-          }
+					else if (actionID == 'remove') { //remove tier		
-
+					  $tier.remove();
-          filterActions({
+					}				
-            $actions: $actions,
+					
-            actionPreFilter: actionPreFilter,
-            context: newContext
-          });
         },
 
         {},

ui/scripts/vpc.js

@@ -483,8 +483,12 @@
         addVM: {
           label: 'Add VM to tier',
           shortLabel: 'Add VM',
-          action: cloudStack.uiCustom.instanceWizard(
+          action: cloudStack.uiCustom.instanceWizard(						
-            cloudStack.instanceWizard
+						$.extend(true, {}, cloudStack.instanceWizard, {
+						  pluginForm: {
+								name: 'vpcTierInstanceWizard'
+							}
+						})	
           ),
           notification: {
             poll: pollAsyncJobResult
@@ -535,7 +539,7 @@
 									}
 								});								
 							}
-						}								
+						}		
 						args.response.success({ tiers: networks });
 					}
 				});