From cf69ee0b0d632712f227b4ac98bf0a4bd5d422a1 Mon Sep 17 00:00:00 2001
From: Jessica Wang <jessica@cloud.com>
Date: Fri, 29 Oct 2010 20:38:26 -0700
Subject: [PATCH] new UI - instance page - Add spinning wheel to each tab. Show
 spinning wheel before loading is finished in each tab.

---
 ui/new/jsp/instance.jsp                | 38 ++++++++++++++------------
 ui/new/scripts/cloud.core2.instance.js | 32 ++++++++++++++--------
 ui/new/scripts/cloud.core2.js          | 20 ++++++++++++++
 3 files changed, 61 insertions(+), 29 deletions(-)

diff --git a/ui/new/jsp/instance.jsp b/ui/new/jsp/instance.jsp
index b5c46f04b07..5bcf2410d99 100644
--- a/ui/new/jsp/instance.jsp
+++ b/ui/new/jsp/instance.jsp
@@ -34,7 +34,7 @@
     </div>
     <!--Details tab (start)-->
     <div  id="tab_content_details">
-    	<div class="rightpanel_mainloader_panel" style="display:none;">
+    	<div id="tab_spinning_wheel" class="rightpanel_mainloader_panel" style="display:none;">
               <div class="rightpanel_mainloaderbox">
                    <div class="rightpanel_mainloader_animatedicon"></div>
                    <p>Loading &hellip;</p>    
@@ -216,12 +216,19 @@
     <!--Details tab (end)-->
     <!--Volume tab (start)-->
     <div style="display: none;" id="tab_content_volume">    
-        Volume    
+        <div id="tab_spinning_wheel" class="rightpanel_mainloader_panel" style="display:none;">
+              <div class="rightpanel_mainloaderbox">
+                   <div class="rightpanel_mainloader_animatedicon"></div>
+                   <p>Loading &hellip;</p>    
+              </div>               
+        </div> 
+        <div id="tab_container">        
+        </div>
     </div>
     <!--Volume tab (end)-->
     <!--Statistics tab (start)-->
     <div style="display: none;" id="tab_content_statistics">
-        <div class="rightpanel_mainloader_panel" style="display:none;">
+        <div id="tab_spinning_wheel" class="rightpanel_mainloader_panel" style="display:none;">
               <div class="rightpanel_mainloaderbox">
                    <div class="rightpanel_mainloader_animatedicon"></div>
                    <p>Loading &hellip;</p>    
@@ -280,7 +287,14 @@
     <!--Statistics tab (start)-->
     <!--Routers tab (start)-->
     <div style="display: none;" id="tab_content_router">
-        Routers
+        <div id="tab_spinning_wheel" class="rightpanel_mainloader_panel" style="display:none;">
+              <div class="rightpanel_mainloaderbox">
+                   <div class="rightpanel_mainloader_animatedicon"></div>
+                   <p>Loading &hellip;</p>    
+              </div>               
+        </div>  
+        <div id="tab_container">
+        </div>
     </div>
     <!--Routers tab (start)-->
 </div>
@@ -817,13 +831,7 @@
 <!-- VM Wizard - disk Offering template (end)-->
 
 <!--  volume tab template (begin) -->
-<div class="grid_container" id="volume_tab_template" style="display: none">
-	<div class="rightpanel_mainloader_panel" style="display:none;">
-              <div class="rightpanel_mainloaderbox">
-                   <div class="rightpanel_mainloader_animatedicon"></div>
-                   <p>Loading &hellip;</p>    
-              </div>               
-     </div>
+<div class="grid_container" id="volume_tab_template" style="display: none">	
     <div class="grid_header">
         <div class="grid_header_title" id="title">
         </div>
@@ -912,13 +920,7 @@
 <!-- view console template (end)  -->
 
 <!--  router tab template (begin) -->
-<div class="grid_container" id="router_tab_template" style="display: none">
-	<div class="rightpanel_mainloader_panel" style="display:none;">
-              <div class="rightpanel_mainloaderbox">
-                   <div class="rightpanel_mainloader_animatedicon"></div>
-                   <p>Loading &hellip;</p>    
-              </div>               
-     </div>
+<div class="grid_container" id="router_tab_template" style="display: none">	
     <div class="grid_header">
         <div class="grid_header_title" id="title">
         </div>
diff --git a/ui/new/scripts/cloud.core2.instance.js b/ui/new/scripts/cloud.core2.instance.js
index e3b15ca4667..fd92087f0a6 100644
--- a/ui/new/scripts/cloud.core2.instance.js
+++ b/ui/new/scripts/cloud.core2.instance.js
@@ -1410,11 +1410,12 @@ function vmToRightPanel($midmenuItem1) {
     */
 }
   
-function vmJsonToDetailsTab(){
+function vmJsonToDetailsTab(){  
+    var $detailsTab = $("#right_panel_content #tab_content_details");  
+    $detailsTab.find("#tab_spinning_wheel").show();    
+    
     var $midmenuItem1 = $("#right_panel_content").data("$midmenuItem1");
     var jsonObj = $midmenuItem1.data("jsonObj");
-    
-    var $detailsTab = $("#right_panel_content #tab_content_details");  
     $detailsTab.data("jsonObj", jsonObj);  
 
     resetViewConsoleAction(jsonObj, $detailsTab);      
@@ -1491,13 +1492,17 @@ function vmJsonToDetailsTab(){
 			//instanceTemplate.find("#vm_action_start, #vm_action_stop, #vm_action_reboot, #vm_action_attach_iso, #vm_action_detach_iso, #vm_action_reset_password, #vm_action_change_service").removeClass().addClass("vmaction_links_off");
 	    }
 		//to hide view console in details tab....(to-do)
-	}       
+	}   
+	
+	$detailsTab.find("#tab_spinning_wheel").hide();        
 }
 
 function vmJsonToVolumeTab() {    
     //if (getHypervisorType() == "kvm") 
 		//detail.find("#volume_action_create_template").show();		
-	
+	var $thisTab = $("#right_panel_content #tab_content_volume");  
+	beforeLoadingToTab($thisTab);
+		
 	var $midmenuItem1 = $("#right_panel_content").data("$midmenuItem1");	
 	var jsonObj = $midmenuItem1.data("jsonObj");	
 
@@ -1508,19 +1513,23 @@ function vmJsonToVolumeTab() {
 		success: function(json) {			    
 			var items = json.listvolumesresponse.volume;
 			if (items != null && items.length > 0) {
-				var container = $("#right_panel_content #tab_content_volume").empty();
+				var $container = $thisTab.find("#tab_container").empty();
 				var template = $("#volume_tab_template");				
 				for (var i = 0; i < items.length; i++) {
 					var newTemplate = template.clone(true);
 	                vmVolumeJSONToTemplate(items[i], newTemplate); 
-	                container.append(newTemplate.show());	
+	                $container.append(newTemplate.show());	
 				}
-			}						
+			}	
+			afterLoadingToTab($thisTab);							
 		}
 	});          
 }
     
 function vmJsonToRouterTab($midmenuItem1) {   
+    var $thisTab = $("#right_panel_content #tab_content_router");  
+	beforeLoadingToTab($thisTab);
+
     var $midmenuItem1 = $("#right_panel_content").data("$midmenuItem1");
     var vmObj = $midmenuItem1.data("jsonObj");
 
@@ -1531,14 +1540,15 @@ function vmJsonToRouterTab($midmenuItem1) {
 		success: function(json) {				      
 			var items = json.listroutersresponse.router;
 			if (items != null && items.length > 0) {
-				var container = $("#right_panel_content #tab_content_router").empty();
+				var $container = $thisTab.find("#tab_container").empty();
 				var template = $("#router_tab_template");				
 				for (var i = 0; i < items.length; i++) {
 					var newTemplate = template.clone(true);
 	                vmRouterJSONToTemplate(items[i], newTemplate); 
-	                container.append(newTemplate.show());	
+	                $container.append(newTemplate.show());	
 				}
-			}						
+			}
+			afterLoadingToTab($thisTab);					
 		}
 	});          
 }    
diff --git a/ui/new/scripts/cloud.core2.js b/ui/new/scripts/cloud.core2.js
index 02399f02554..86251856021 100644
--- a/ui/new/scripts/cloud.core2.js
+++ b/ui/new/scripts/cloud.core2.js
@@ -993,6 +993,26 @@ function handleErrorInDialog(XMLHttpResponse, $thisDialog) {
 	$infoContainer.show();
 }
 
+function beforeLoadingToTab($thisTab) {
+    $thisTab.find("#tab_spinning_wheel").show();   
+	$thisTab.find("#tab_container").hide();
+}
+
+function afterLoadingToTab($thisTab) {
+    $thisTab.find("#tab_spinning_wheel").hide();   
+	$thisTab.find("#tab_container").show();
+}
+
+
+
+
+
+
+
+
+
+
+