From 7fa3b74d284598e5335d05b08e56c8787138b81f Mon Sep 17 00:00:00 2001
From: Jessica Wang <jessica@cloud.com>
Date: Mon, 25 Oct 2010 21:01:19 -0700
Subject: [PATCH] new UI - Add Pod - keep dialog box open with spinning wheel
 running until action is complete. If action succeeds, close dialog box. If
 action fails, display error message on dialog box.

---
 ui/new/jsp/resource.jsp                | 12 +++++++++
 ui/new/scripts/cloud.core2.resource.js | 35 +++++++++++---------------
 2 files changed, 26 insertions(+), 21 deletions(-)

diff --git a/ui/new/jsp/resource.jsp b/ui/new/jsp/resource.jsp
index 4b7fb9f1d60..fdc757ba927 100644
--- a/ui/new/jsp/resource.jsp
+++ b/ui/new/jsp/resource.jsp
@@ -805,6 +805,18 @@
 			</ol>
 		</form>
 	</div>
+	<!--Loading box-->
+    <div id="spinning_wheel" class="ui_dialog_loaderbox" style="display:none;">
+    	<div class="ui_dialog_loader"></div>
+        <p>Adding....</p>
+    </div>
+    
+    <!--Confirmation msg box-->
+    <!--Note: for error msg, just have to add error besides everything for eg. add error(class) next to ui_dialog_messagebox error, ui_dialog_msgicon error, ui_dialog_messagebox_text error.  -->
+	<div id="info_container" class="ui_dialog_messagebox error" style="display:none;">
+    	<div id="icon" class="ui_dialog_msgicon error"></div>
+        <div id="info" class="ui_dialog_messagebox_text error">(info)</div>
+    </div>
 </div>
 <!-- END Add Pod Dialog -->
 
diff --git a/ui/new/scripts/cloud.core2.resource.js b/ui/new/scripts/cloud.core2.resource.js
index acb9eb8eff0..7345a1023f7 100644
--- a/ui/new/scripts/cloud.core2.resource.js
+++ b/ui/new/scripts/cloud.core2.resource.js
@@ -1166,6 +1166,7 @@ function initAddPodButton($midmenuAddLink1) {
         .dialog('option', 'buttons', { 				
 	        "Add": function() {		
 	            var $thisDialog = $(this);
+				$thisDialog.find("#info_container").hide();
 						
 		        // validate values
 		        var isValid = true;					
@@ -1177,7 +1178,7 @@ function initAddPodButton($midmenuAddLink1) {
 		        if (!isValid) 
 		            return;			
                 
-                $thisDialog.dialog("close"); 
+                $thisDialog.find("#spinning_wheel").fadeIn("slow");
                   
                 var name = trim($thisDialog.find("#add_pod_name").val());
 		        var cidr = trim($thisDialog.find("#add_pod_cidr").val());
@@ -1193,26 +1194,21 @@ function initAddPodButton($midmenuAddLink1) {
                 if (endip != null && endip.length > 0)
                     array1.push("&endIp="+encodeURIComponent(endip));
                 array1.push("&gateway="+encodeURIComponent(gateway));			
-								    
-		        var template = $("#leftmenu_pod_node_template").clone(true);
-		        var loadingImg = template.find(".adding_loading");										
-		        var row_container = template.find("#row_container");        				
-		        $("#zone_" + zoneObj.id + " #zone_content").show();	
-		        $("#zone_" + zoneObj.id + " #pods_container").prepend(template.show());						
-		        $("#zone_" + zoneObj.id + " #zone_expand").removeClass().addClass("zonetree_openarrows");									            
-                loadingImg.show();  
-                row_container.hide();             
-                template.fadeIn("slow");
-				
+								
 		        $.ajax({
 		          data: createURL("command=createPod"+array1.join("")), 
 			        dataType: "json",
 			        success: function(json) {
-				        var item = json.createpodresponse; 	
-			            podJSONToTreeNode(item, template);	
-				        loadingImg.hide(); 								                            
-                        row_container.show();
-                        
+			            $thisDialog.dialog("close");
+			            
+			            var item = json.createpodresponse; 			            		            				    
+		                var template = $("#leftmenu_pod_node_template").clone(true);
+		                podJSONToTreeNode(item, template);			                   				
+		                $("#zone_" + zoneObj.id + " #zone_content").show();	
+		                $("#zone_" + zoneObj.id + " #pods_container").prepend(template.show());						
+		                $("#zone_" + zoneObj.id + " #zone_expand").removeClass().addClass("zonetree_openarrows");	
+                        template.fadeIn("slow");
+			                                    
                         forceLogout = false;  // We don't force a logout if pod(s) exit.
 				        if (forceLogout) {
 					        $("#dialog_confirmation")
@@ -1226,10 +1222,7 @@ function initAddPodButton($midmenuAddLink1) {
 				        }
 			        },
 		            error: function(XMLHttpResponse) {	
-		                handleError(XMLHttpResponse);			    
-			            template.slideUp("slow", function() {
-					        $(this).remove();
-				        });
+		                handleErrorInDialog(XMLHttpResponse, $thisDialog);			
 		            }
 		        });					
 	        },