From 1bcb4f2f6ec9ea712b31f212149ef46412000f68 Mon Sep 17 00:00:00 2001
From: Jessica Wang <jessica@cloud.com>
Date: Thu, 14 Oct 2010 17:45:37 -0700
Subject: [PATCH] new UI - resources page - host page - implement details tab.1

---
 .../classes/resources/resource.properties     |   6 +
 ui/new/jsp/resource.jsp                       | 111 +++++++++++++++++-
 ui/new/scripts/cloud.core2.resource.js        |  19 ++-
 3 files changed, 134 insertions(+), 2 deletions(-)

diff --git a/client/WEB-INF/classes/resources/resource.properties b/client/WEB-INF/classes/resources/resource.properties
index 9b282a5732f..848823ebffd 100644
--- a/client/WEB-INF/classes/resources/resource.properties
+++ b/client/WEB-INF/classes/resources/resource.properties
@@ -51,6 +51,8 @@ snapshot.limit = Snapshot Limit
 template.limit = Template Limit
 URL = URL
 zone = Zone
+pod = Pod
+cluster = Cluster
 bootable = Bootable
 group = Group
 storage.type = Storage Type
@@ -79,6 +81,10 @@ active.sessions = Active Sessions
 public.ip = Public IP
 private.ip = Private IP
 host = Host
+state = State
+os.preference = OS Preference
+last.disconnected = Last Disconnected
+
 
 disk.offering = Disk Offering
 copy.ISO.to = Copy ISO to
diff --git a/ui/new/jsp/resource.jsp b/ui/new/jsp/resource.jsp
index 42303d0b8c7..0b4d170d037 100644
--- a/ui/new/jsp/resource.jsp
+++ b/ui/new/jsp/resource.jsp
@@ -307,7 +307,116 @@
         <!-- Details tab (end)-->
     </div>
     <div id="host_page" style="display:none">
-        Host page
+        <div class="tabbox" style="margin-top: 15px;">
+            <div class="content_tabs on" id="tab_details">
+                <%=t.t("details")%></div>           
+        </div>
+        <!-- Details tab (start)-->
+        <div id="tab_content_details">
+            <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("state")%>:</div>
+                    </div>
+                    <div class="grid_row_cell" style="width: 79%;">
+                        <div class="row_celltitles" id="state">
+                        </div>
+                    </div>
+                </div>
+                <div class="grid_rows even">
+                    <div class="grid_row_cell" style="width: 20%;">
+                        <div class="row_celltitles">
+                            <%=t.t("zone")%>:</div>
+                    </div>
+                    <div class="grid_row_cell" style="width: 79%;">
+                        <div class="row_celltitles" id="zonename">
+                        </div>
+                    </div>
+                </div>
+                <div class="grid_rows odd">
+                    <div class="grid_row_cell" style="width: 20%;">
+                        <div class="row_celltitles">
+                            <%=t.t("pod")%>:</div>
+                    </div>
+                    <div class="grid_row_cell" style="width: 79%;">
+                        <div class="row_celltitles" id="podname">
+                        </div>
+                    </div>
+                </div>
+                <div class="grid_rows even">
+                    <div class="grid_row_cell" style="width: 20%;">
+                        <div class="row_celltitles">
+                            <%=t.t("cluster")%>:</div>
+                    </div>
+                    <div class="grid_row_cell" style="width: 79%;">
+                        <div class="row_celltitles" id="clustername">
+                        </div>
+                    </div>
+                </div>
+                <div class="grid_rows odd">
+                    <div class="grid_row_cell" style="width: 20%;">
+                        <div class="row_celltitles">
+                            <%=t.t("ip.address")%>:</div>
+                    </div>
+                    <div class="grid_row_cell" style="width: 79%;">
+                        <div class="row_celltitles" id="ipaddress">
+                        </div>
+                    </div>
+                </div>
+                <div class="grid_rows even">
+                    <div class="grid_row_cell" style="width: 20%;">
+                        <div class="row_celltitles">
+                            <%=t.t("version")%>:</div>
+                    </div>
+                    <div class="grid_row_cell" style="width: 79%;">
+                        <div class="row_celltitles" id="version">
+                        </div>
+                    </div>
+                </div>
+                <div class="grid_rows odd">
+                    <div class="grid_row_cell" style="width: 20%;">
+                        <div class="row_celltitles">
+                            <%=t.t("os.preference")%>:</div>
+                    </div>
+                    <div class="grid_row_cell" style="width: 79%;">
+                        <div class="row_celltitles" id="oscategoryname">
+                        </div>
+                    </div>
+                </div>
+                <div class="grid_rows even">
+                    <div class="grid_row_cell" style="width: 20%;">
+                        <div class="row_celltitles">
+                            <%=t.t("last.disconnected")%>:</div>
+                    </div>
+                    <div class="grid_row_cell" style="width: 79%;">
+                        <div class="row_celltitles" id="disconnected">
+                        </div>
+                    </div>
+                </div>                
+            </div>
+        </div>
+        <!-- Details tab (end)-->
     </div>
     <div id="primarystorage_page" style="display:none">
         Primary Storage Page
diff --git a/ui/new/scripts/cloud.core2.resource.js b/ui/new/scripts/cloud.core2.resource.js
index 09a70bf50f2..0e8f4e70bf0 100644
--- a/ui/new/scripts/cloud.core2.resource.js
+++ b/ui/new/scripts/cloud.core2.resource.js
@@ -249,7 +249,7 @@ function afterLoadResourceJSP() {
 			    target.parent().parent().parent().addClass("selected");
 			    showPage($hostPage);
 				var jsonObj = target.data("jsonObj");
-				//hostObjectToRightPanel(jsonObj);				
+				hostJsonToDetailsTab(jsonObj);				
 				break;	
 			
 			
@@ -345,6 +345,23 @@ function afterLoadResourceJSP() {
     }
     //***** cluster page (end) ****************************************************************************************************
 	
+	//***** host page (bgein) *****************************************************************************************************
+	function hostJsonToDetailsTab(jsonObj) {	    
+	    var $detailsTab = $hostPage.find("#tab_content_details");   
+        $detailsTab.data("jsonObj", jsonObj);           
+        $detailsTab.find("#id").text(fromdb(jsonObj.id));
+        $detailsTab.find("#name").text(fromdb(jsonObj.name));
+        $detailsTab.find("#state").text(fromdb(jsonObj.state));        
+        $detailsTab.find("#zonename").text(fromdb(jsonObj.zonename)); 
+        $detailsTab.find("#podname").text(fromdb(jsonObj.podname));   
+        $detailsTab.find("#clustername").text(fromdb(jsonObj.clustername));        
+        $detailsTab.find("#ipaddress").text(fromdb(jsonObj.ipaddress)); 
+        $detailsTab.find("#version").text(fromdb(jsonObj.version));  
+        $detailsTab.find("#oscategoryname").text(fromdb(jsonObj.oscategoryname));        
+        $detailsTab.find("#disconnected").text(fromdb(jsonObj.disconnected));        
+    }
+	//***** host page (end) *******************************************************************************************************
+	
 	//***** systemVM page (begin) *************************************************************************************************
     function systemvmJsonToDetailsTab(jsonObj) {	   
 	    var $detailsTab = $systemvmPage.find("#tab_content_details");