From 3857dd359a9ada761e7e61ee6d6be513e221dcf2 Mon Sep 17 00:00:00 2001
From: Jessica Wang <jessica@cloud.com>
Date: Tue, 28 Sep 2010 17:27:15 -0700
Subject: [PATCH] new UI - domain page - implement details panel.

---
 ui/new/jsp/domain.jsp                | 97 ++++++++++++++++++++++++++++
 ui/new/scripts/cloud.core2.domain.js | 56 +++++++++-------
 2 files changed, 129 insertions(+), 24 deletions(-)

diff --git a/ui/new/jsp/domain.jsp b/ui/new/jsp/domain.jsp
index 3c02eab7588..48fb781d705 100644
--- a/ui/new/jsp/domain.jsp
+++ b/ui/new/jsp/domain.jsp
@@ -6,6 +6,103 @@
     CloudResourceBundle t = CloudResourceBundle.getBundle("resources/resource", browserLocale);
 %>
 
+<!-- domain detail panel (begin) -->
+<div class="main_title" id="right_panel_header">
+    <!--  
+    <div class="main_titleicon">
+        <img src="images/title_snapshoticon.gif" alt="Instance" /></div>
+    -->
+    <h1>
+        Domain
+    </h1>
+</div>
+<div class="contentbox" id="right_panel_content">
+    <div class="info_detailbox errorbox" id="after_action_info_container" style="display: none">
+        <p id="after_action_info">
+        </p>
+    </div>
+    <div class="tabbox" style="margin-top: 15px;">
+        <div class="content_tabs on">
+            <%=t.t("Details")%></div>
+    </div>    
+    <div id="tab_content_details">
+        <div class="grid_actionpanel">
+            <div class="grid_actionbox" id="action_link">
+                <div class="grid_actionsdropdown_box" id="action_menu" style="display: none;">
+                    <ul class="actionsdropdown_boxlist" id="action_list">
+                        <!--  
+                    	<li> <a href="#"> Delete </a> </li>
+                        <li> <a href="#"> Attach Disk </a> </li>
+                        -->
+                    </ul>
+                </div>
+            </div>
+            <div class="grid_editbox">
+            </div>
+            <div class="gridheader_loaderbox" id="spinning_wheel" style="border: 1px solid #999;
+                display: none;">
+                <div class="gridheader_loader" id="icon">
+                </div>
+                <p id="description">
+                    Detaching Disk &hellip;</p>
+            </div>                  
+        </div>
+        <div class="grid_container">
+            <div class="grid_rows odd">
+                <div class="grid_row_cell" style="width: 20%;">
+                    <div class="row_celltitles">
+                        <%=t.t("ID")%>:</div>
+                </div>
+                <div class="grid_row_cell" style="width: 79%;">
+                    <div class="row_celltitles" id="id">
+                    </div>
+                </div>
+            </div>
+            <div class="grid_rows even">
+                <div class="grid_row_cell" style="width: 20%;">
+                    <div class="row_celltitles">
+                        <%=t.t("Name")%>:</div>
+                </div>
+                <div class="grid_row_cell" style="width: 79%;">
+                    <div class="row_celltitles" id="name">
+                    </div>
+                </div>
+            </div>
+            <div class="grid_rows odd">
+                <div class="grid_row_cell" style="width: 20%;">
+                    <div class="row_celltitles">
+                        <%=t.t("Accounts")%>:</div>
+                </div>
+                <div class="grid_row_cell" style="width: 79%;">
+                    <div class="row_celltitles" id="redirect_to_account_page">
+                    </div>
+                </div>
+            </div>
+            <div class="grid_rows even">
+                <div class="grid_row_cell" style="width: 20%;">
+                    <div class="row_celltitles">
+                        <%=t.t("Instances")%>:</div>
+                </div>
+                <div class="grid_row_cell" style="width: 79%;">
+                    <div class="row_celltitles" id="redirect_to_instance_page">
+                    </div>
+                </div>
+            </div>
+            <div class="grid_rows even">
+                <div class="grid_row_cell" style="width: 20%;">
+                    <div class="row_celltitles">
+                        <%=t.t("Volume")%>:</div>
+                </div>
+                <div class="grid_row_cell" style="width: 79%;">
+                    <div class="row_celltitles" id="redirect_to_volume_page">
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>        
+</div>
+<!-- domain detail panel (end) -->
+
 <!-- treenode template (begin) -->
 <div id="treenode_template" class="tree_levelspanel" style="display:none">
 	<div class="tree_levelsbox" style="margin-left:20px;">
diff --git a/ui/new/scripts/cloud.core2.domain.js b/ui/new/scripts/cloud.core2.domain.js
index 459ab9b59f5..6a879f605cf 100644
--- a/ui/new/scripts/cloud.core2.domain.js
+++ b/ui/new/scripts/cloud.core2.domain.js
@@ -1,11 +1,8 @@
 function afterLoadDomainJSP() {
     var defaultRootDomainId = g_domainid;
     var defaultRootLevel = 0;	 
-    var index = 1;	   
-    
-    //var treeContentBox = $("#tree_contentbox");    	 //???
-    var treeContentBox = $("#midmenu_container");
-      
+    var index = 1;	       
+    var treeContentBox = $("#midmenu_container");      
     var treenodeTemplate = $("#treenode_template");	  	    
     var grid = $("#right_panel_grid");  
     var gridRowTemplate = $("#grid_row_template");  
@@ -40,7 +37,8 @@ function afterLoadDomainJSP() {
     
         var template = treenodeTemplate.clone(true);	            
         template.attr("id", "domain_"+json.id);	 
-        template.data("domainId", json.id).data("domainName", fromdb(json.name)).data("domainLevel", level); 	       
+        //template.data("domainId", json.id).data("domainName", fromdb(json.name)).data("domainLevel", level); 	   
+        template.data("jsonObj", json).data("domainLevel", level); 	      
         template.find("#domain_title_container").attr("id", "domain_title_container_"+json.id); 	        
         template.find("#domain_expand_icon").attr("id", "domain_expand_icon_"+json.id); 
         template.find("#domain_name").attr("id", "domain_name_"+json.id).text(json.name);        	              	
@@ -129,15 +127,19 @@ function afterLoadDomainJSP() {
 		var template = $(this);
 		var target = $(event.target);
 		var action = target.attr("id");
-		var id = template.attr("id");	
-		var domainId = template.data("domainId");	
-		var domainName = template.data("domainName");										
+		var id = template.attr("id");
+		var jsonObj = template.data("jsonObj");	
+		var domainId = jsonObj.id;	
+		var domainName = jsonObj.name;										
 		if (action.indexOf("domain_expand_icon")!=-1) {		
 		    clickExpandIcon(domainId);					
 		}
-		else if(action.indexOf("domain_name")!=-1) {			    			 
-		    domainDetail.find("#domain_name").text(domainName);
-		    domainDetail.find("#domain_id").text(domainId);			  	
+		else if(action.indexOf("domain_name")!=-1) {
+		    var $detailsTab = $("#right_panel_content #tab_content_details");   
+            $detailsTab.data("jsonObj", jsonObj);  
+            $detailsTab.find("#id").text(domainId);
+            $detailsTab.find("#name").text(domainName);		   
+					  	
 		  	$.ajax({
 			    cache: false,				
 			    data: createURL("command=listAccounts&domainid="+domainId+maxPageSize),
@@ -145,14 +147,16 @@ function afterLoadDomainJSP() {
 			    success: function(json) {				       
 				    var accounts = json.listaccountsresponse.account;					
 				    if (accounts != null) {	
-				        domainDetail.find("#redirect_to_account_page").text(accounts.length);	
-				        domainDetail.find("#redirect_to_account_page").bind("click", function() {
+				        $detailsTab.find("#redirect_to_account_page").text(accounts.length);	
+				        /*
+				        $detailsTab.find("#redirect_to_account_page").bind("click", function() {
 				            $("#menutab_role_root #menutab_accounts").data("domainId", domainId).click();
 				        });	
+				        */
 				    }
 				    else {
-				        domainDetail.find("#redirect_to_account_page").text("");
-				        domainDetail.find("#redirect_to_account_page").unbind("click");	
+				        $detailsTab.find("#redirect_to_account_page").text("");
+				        //$detailsTab.find("#redirect_to_account_page").unbind("click");	
 				    }						   		                 
 			    }		
 		    });		 
@@ -164,14 +168,16 @@ function afterLoadDomainJSP() {
 			    success: function(json) {
 				    var instances = json.listvirtualmachinesresponse.virtualmachine;					
 				    if (instances != null) {	
-				        domainDetail.find("#redirect_to_instance_page").text(instances.length);	
-				        domainDetail.find("#redirect_to_instance_page").bind("click", function() {
+				        $detailsTab.find("#redirect_to_instance_page").text(instances.length);	
+				        /*
+				        $detailsTab.find("#redirect_to_instance_page").bind("click", function() {
 				            $("#menutab_role_root #menutab_vm").data("domainId", domainId).click();
 				        });	
+				        */
 				    }
 				    else {
-				        domainDetail.find("#redirect_to_instance_page").text("");
-				        domainDetail.find("#redirect_to_instance_page").unbind("click");	
+				        $detailsTab.find("#redirect_to_instance_page").text("");
+				        //$detailsTab.find("#redirect_to_instance_page").unbind("click");	
 				    }						   		                 
 			    }		
 		    });		 
@@ -183,14 +189,16 @@ function afterLoadDomainJSP() {
 			    success: function(json) {
 				    var volumes = json.listvolumesresponse.volume;						
 				    if (volumes != null) {	
-				        domainDetail.find("#redirect_to_volume_page").text(volumes.length);	
-				        domainDetail.find("#redirect_to_volume_page").bind("click", function() {
+				        $detailsTab.find("#redirect_to_volume_page").text(volumes.length);	
+				        /*
+				        $detailsTab.find("#redirect_to_volume_page").bind("click", function() {
 				            $("#menutab_role_root #menutab_storage").data("domainId", domainId).data("targetTab", "submenu_volume").click();
 				        });	
+				        */
 				    }	
 				    else {
-				        domainDetail.find("#redirect_to_volume_page").text("");
-				        domainDetail.find("#redirect_to_volume_page").unbind("click");	
+				        $detailsTab.find("#redirect_to_volume_page").text("");
+				        //$detailsTab.find("#redirect_to_volume_page").unbind("click");	
 				    }							   		                 
 			    }		
 		    });