From f9cedd56ad2a2a4c7f62f4e15080d3764c3e3a52 Mon Sep 17 00:00:00 2001
From: Jessica Wang <jessica@cloud.com>
Date: Tue, 9 Nov 2010 15:52:31 -0800
Subject: [PATCH] bug 6983 - host page - add Instance tab that list all
 instances under this host.

---
 ui/jsp/host.jsp                   | 110 +++++++++++++++++++++++++++++-
 ui/jsp/volume.jsp                 |   3 +-
 ui/scripts/cloud.core.host.js     |  60 ++++++++++++----
 ui/scripts/cloud.core.instance.js |   5 +-
 ui/scripts/cloud.core.volume.js   |   2 +-
 5 files changed, 158 insertions(+), 22 deletions(-)

diff --git a/ui/jsp/host.jsp b/ui/jsp/host.jsp
index f0ea3d0ea40..33583faf111 100644
--- a/ui/jsp/host.jsp
+++ b/ui/jsp/host.jsp
@@ -23,7 +23,9 @@
         <div class="content_tabs on" id="tab_details">
             <%=t.t("details")%></div>
         <div class="content_tabs off" id="tab_statistics">
-            <%=t.t("Statistics")%></div>
+            <%=t.t("statistics")%></div>
+        <div class="content_tabs off" id="tab_instance">
+            <%=t.t("instance")%></div>
     </div>
     <!-- Details tab (start)-->
     <div id="tab_content_details">
@@ -278,10 +280,112 @@
             </div>
         </div>   
     </div>
-    <!--Statistics tab (end)-->
-    
+    <!--Statistics tab (end)--> 
+       
+    <!--Instance tab (start)-->
+    <div style="display: none;" id="tab_content_instance">
+    	<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> 
+    <!--Instance tab (end)-->
 </div>
 
+<!--  instance tab template (begin) -->
+<div class="grid_container" id="instance_tab_template" style="display: none">
+    <div class="grid_header">
+        <div class="grid_header_title" id="grid_header_title">
+        </div>
+        <div class="grid_actionbox" id="snapshot_action_link">
+            <div class="grid_actionsdropdown_box" id="snapshot_action_menu" style="display: none;">
+                <ul class="actionsdropdown_boxlist" id="action_list">
+                </ul>
+            </div>
+        </div>
+        <div class="gridheader_loaderbox" id="spinning_wheel" style="display: none; height: 18px;">
+            <div class="gridheader_loader" id="icon">
+            </div>
+            <p id="description">
+                Waiting &hellip;
+            </p>
+        </div>       
+    </div>
+    
+    <div class="grid_rows" id="after_action_info_container" style="display:none">
+        <div class="grid_row_cell" style="width: 90%; border: none;">
+            <div class="row_celltitles">
+                <strong id="after_action_info">Message will appear here</strong></div>
+        </div>
+    </div>
+        
+    <div class="grid_rows even">
+        <div class="grid_row_cell" style="width: 20%;">
+            <div class="row_celltitles">
+                ID:</div>
+        </div>
+        <div class="grid_row_cell" style="width: 79%;">
+            <div class="row_celltitles" id="id">
+            </div>
+        </div>
+    </div>
+    <div class="grid_rows odd">
+        <div class="grid_row_cell" style="width: 20%;">
+            <div class="row_celltitles">
+                Name:</div>
+        </div>
+        <div class="grid_row_cell" style="width: 79%;">
+            <div class="row_celltitles" id="name">
+            </div>
+        </div>
+    </div>
+    <div class="grid_rows even">
+        <div class="grid_row_cell" style="width: 20%;">
+            <div class="row_celltitles">
+                IP:</div>
+        </div>
+        <div class="grid_row_cell" style="width: 79%;">
+            <div class="row_celltitles" id="ipaddress">
+            </div>
+        </div>
+    </div>
+    <div class="grid_rows odd">
+        <div class="grid_row_cell" style="width: 20%;">
+            <div class="row_celltitles">
+                Service Offering:</div>
+        </div>
+        <div class="grid_row_cell" style="width: 79%;">
+            <div class="row_celltitles" id="serviceOfferingName">
+            </div>
+        </div>
+    </div>
+    <div class="grid_rows even">
+        <div class="grid_row_cell" style="width: 20%;">
+            <div class="row_celltitles">
+                Created:</div>
+        </div>
+        <div class="grid_row_cell" style="width: 79%;">
+            <div class="row_celltitles" id="created">
+            </div>
+        </div>
+    </div>
+    <div class="grid_rows odd">
+        <div class="grid_row_cell" style="width: 20%;">
+            <div class="row_celltitles">
+                Account:</div>
+        </div>
+        <div class="grid_row_cell" style="width: 79%;">
+            <div class="row_celltitles" id="account">
+            </div>
+        </div>
+    </div>  
+</div>
+<!--  instance tab template (end) -->
+
 <!-- Add Host Dialog -->
 <div id="dialog_add_host" title="Add Host" style="display: none">
     <p>
diff --git a/ui/jsp/volume.jsp b/ui/jsp/volume.jsp
index d7f8278b736..a914f140ff6 100644
--- a/ui/jsp/volume.jsp
+++ b/ui/jsp/volume.jsp
@@ -183,6 +183,7 @@
         <div id="tab_container">
         </div>
     </div> 
+    <!--Snapshot tab (end)-->
 </div>
 <!-- volume detail panel (end) -->
 <!-- Create Template Dialog -->
@@ -616,7 +617,7 @@
 <!--  Snapshot tab template (begin) -->
 <div class="grid_container" id="snapshot_tab_template" style="display: none">
     <div class="grid_header">
-        <div class="grid_header_title" id="title">
+        <div class="grid_header_title" id="grid_header_title">
         </div>
         <div class="grid_actionbox" id="snapshot_action_link">
             <div class="grid_actionsdropdown_box" id="snapshot_action_menu" style="display: none;">
diff --git a/ui/scripts/cloud.core.host.js b/ui/scripts/cloud.core.host.js
index 99bfb62f1d7..b14cd99e03c 100644
--- a/ui/scripts/cloud.core.host.js
+++ b/ui/scripts/cloud.core.host.js
@@ -29,9 +29,9 @@ function afterLoadHostJSP($midmenuItem1) {
     initDialog("dialog_update_os");
          
     // switch between different tabs 
-    var tabArray = [$("#tab_details"), $("#tab_statistics")];
-    var tabContentArray = [$("#tab_content_details"), $("#tab_content_statistics")];
-    var afterSwitchFnArray = [hostJsonToDetailsTab, hostJsonToStatisticsTab];
+    var tabArray = [$("#tab_details"), $("#tab_statistics"), $("#tab_instance")];
+    var tabContentArray = [$("#tab_content_details"), $("#tab_content_statistics"), $("#tab_content_instance")];
+    var afterSwitchFnArray = [hostJsonToDetailsTab, hostJsonToStatisticsTab, hostJsonToInstanceTab];
     switchBetweenDifferentTabs(tabArray, tabContentArray, afterSwitchFnArray);         
 }
 
@@ -139,18 +139,7 @@ function hostJsonToDetailsTab() {
 	else {
 	    alert("Unsupported Host State: " + jsonObj.state);
 	} 
-    
-    //temporary for testing (begin) *****
-    /*
-    buildActionLinkForTab("Enable Maintenance Mode", hostActionMap, $actionMenu, $midmenuItem1, $detailsTab);  
-    buildActionLinkForTab("Cancel Maintenance Mode", hostActionMap, $actionMenu, $midmenuItem1, $detailsTab);  
-    buildActionLinkForTab("Force Reconnect", hostActionMap, $actionMenu, $midmenuItem1, $detailsTab);  
-    buildActionLinkForTab("Remove Host", hostActionMap, $actionMenu, $midmenuItem1, $detailsTab);  
-    buildActionLinkForTab("Update OS Preference", hostActionMap, $actionMenu, $midmenuItem1, $detailsTab);
-    noAvailableActions = false; 	  
-    */  
-    //temporary for testing (begin) *****
-    
+        
     // no available actions 
 	if(noAvailableActions == true) {
 	    $actionMenu.find("#action_list").append($("#no_available_actions").clone().show());
@@ -200,6 +189,47 @@ function hostJsonToStatisticsTab() {
     $thisTab.find("#tab_container").show();  
 }
 
+function  hostJsonToInstanceTab() {   
+    var $thisTab = $("#right_panel_content #tab_content_instance");
+	$thisTab.find("#tab_container").hide(); 
+    $thisTab.find("#tab_spinning_wheel").show(); 
+    		
+	var $midmenuItem1 = $("#right_panel_content").data("$midmenuItem1");	
+	var jsonObj = $midmenuItem1.data("jsonObj");	
+    
+    $.ajax({
+		cache: false,
+		data: createURL("command=listVirtualMachines&hostid="+jsonObj.id),
+		dataType: "json",
+		success: function(json) {							    
+			var items = json.listvirtualmachinesresponse.virtualmachine;																						
+			if (items != null && items.length > 0) {
+			    var $container = $thisTab.find("#tab_container").empty();
+				var template = $("#instance_tab_template");				
+				for (var i = 0; i < items.length; i++) {
+					var newTemplate = template.clone(true);	               
+	                hostInstanceJSONToTemplate(items[i], newTemplate); 
+	                $container.append(newTemplate.show());	
+				}			
+			}	
+			$thisTab.find("#tab_spinning_wheel").hide();    
+            $thisTab.find("#tab_container").show();    			
+		}
+	});
+} 
+
+function hostInstanceJSONToTemplate(jsonObj, template) {
+    template.data("jsonObj", jsonObj);     
+    template.attr("id", "host_instance_"+jsonObj.id).data("hostInstanceId", jsonObj.id);    
+    template.find("#grid_header_title").text(fromdb(jsonObj.name));			   
+    template.find("#id").text(jsonObj.id);
+    template.find("#name").text(fromdb(jsonObj.name));	  
+    template.find("#ipaddress").text(fromdb(jsonObj.ipaddress));
+    template.find("#serviceOfferingName").text(fromdb(jsonObj.serviceofferingname));	
+    template.find("#account").text(fromdb(jsonObj.account));
+    setDateField(jsonObj.created, template.find("#created"));	 		
+} 
+
 function hostClearRightPanel() {
     hostClearDetailsTab(); 
 }
diff --git a/ui/scripts/cloud.core.instance.js b/ui/scripts/cloud.core.instance.js
index c5087888ab4..9e3e6078cae 100644
--- a/ui/scripts/cloud.core.instance.js
+++ b/ui/scripts/cloud.core.instance.js
@@ -1334,8 +1334,7 @@ function vmJsonToDetailsTab(){
     $thisTab.find("#ipaddress").text(fromdb(jsonObj.ipaddress));
     
     $thisTab.find("#templateName").text(fromdb(jsonObj.templatename));
-    $thisTab.find("#serviceOfferingName").text(fromdb(jsonObj.serviceofferingname));		
-    $thisTab.find("#created").text(jsonObj.created);
+    $thisTab.find("#serviceOfferingName").text(fromdb(jsonObj.serviceofferingname));	
     $thisTab.find("#account").text(fromdb(jsonObj.account));
     $thisTab.find("#domain").text(fromdb(jsonObj.domain));
     $thisTab.find("#hostName").text(fromdb(jsonObj.hostname));
@@ -1343,6 +1342,8 @@ function vmJsonToDetailsTab(){
     $thisTab.find("#group").text(fromdb(jsonObj.group));	
     $thisTab.find("#group_edit").val(fromdb(jsonObj.group));	
     
+    setDateField(jsonObj.created, $thisTab.find("#created"));	 		
+    
     setBooleanReadField(jsonObj.haenable, $thisTab.find("#haenable"));
     setBooleanEditField(jsonObj.haenable, $thisTab.find("#haenable_edit"));
     //$thisTab.find("#haenable_edit").val(jsonObj.haenable);
diff --git a/ui/scripts/cloud.core.volume.js b/ui/scripts/cloud.core.volume.js
index fb5cce8b9ca..91ed2031146 100644
--- a/ui/scripts/cloud.core.volume.js
+++ b/ui/scripts/cloud.core.volume.js
@@ -484,7 +484,7 @@ function  volumeJsonToSnapshotTab() {
 function volumeSnapshotJSONToTemplate(jsonObj, template) {
     template.data("jsonObj", jsonObj);     
     template.attr("id", "volume_snapshot_"+jsonObj.id).data("volumeSnapshotId", jsonObj.id);    
-    template.find("#title").text(fromdb(jsonObj.name));			   
+    template.find("#grid_header_title").text(fromdb(jsonObj.name));			   
     template.find("#id").text(jsonObj.id);
     template.find("#name").text(fromdb(jsonObj.name));			      
     template.find("#volumename").text(fromdb(jsonObj.volumename));