From 49f55f0a5635638bf3e2c7f8f73ec694ccaba2d9 Mon Sep 17 00:00:00 2001
From: Jessica Wang <jessica@cloud.com>
Date: Tue, 9 Nov 2010 16:16:25 -0800
Subject: [PATCH] bug 6983 - host page - add Router tab that list all routers
 under this host.

---
 .../classes/resources/resource.properties     |   1 +
 ui/jsp/host.jsp                               | 117 +++++++++++++++++-
 ui/scripts/cloud.core.host.js                 |  48 ++++++-
 3 files changed, 162 insertions(+), 4 deletions(-)

diff --git a/client/WEB-INF/classes/resources/resource.properties b/client/WEB-INF/classes/resources/resource.properties
index b4565d24646..a75c5d83cb9 100644
--- a/client/WEB-INF/classes/resources/resource.properties
+++ b/client/WEB-INF/classes/resources/resource.properties
@@ -30,6 +30,7 @@ service.offerings = Service Offerings
 disk.offerings = Disk Offerings
 
 details = Details
+statistics = Statistics
 network = Network
 secondary.storage = Secondary Storage
 
diff --git a/ui/jsp/host.jsp b/ui/jsp/host.jsp
index 33583faf111..e701215fe37 100644
--- a/ui/jsp/host.jsp
+++ b/ui/jsp/host.jsp
@@ -26,6 +26,8 @@
             <%=t.t("statistics")%></div>
         <div class="content_tabs off" id="tab_instance">
             <%=t.t("instance")%></div>
+        <div class="content_tabs off" id="tab_router">
+            <%=t.t("router")%></div>
     </div>
     <!-- Details tab (start)-->
     <div id="tab_content_details">
@@ -294,6 +296,19 @@
         </div>
     </div> 
     <!--Instance tab (end)-->
+    
+    <!--router tab (start)-->
+    <div style="display: none;" id="tab_content_router">
+    	<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> 
+    <!--router tab (end)-->
 </div>
 
 <!--  instance tab template (begin) -->
@@ -301,7 +316,7 @@
     <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_actionbox" id="snapshot_action_link" style="display: none;">
             <div class="grid_actionsdropdown_box" id="snapshot_action_menu" style="display: none;">
                 <ul class="actionsdropdown_boxlist" id="action_list">
                 </ul>
@@ -386,6 +401,106 @@
 </div>
 <!--  instance tab template (end) -->
 
+<!--  router tab template (begin) -->
+<div class="grid_container" id="router_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" style="display: none;">
+            <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">
+                <%=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 odd">
+        <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 even">
+        <div class="grid_row_cell" style="width: 20%;">
+            <div class="row_celltitles">
+                <%=t.t("Public IP")%>:</div>
+        </div>
+        <div class="grid_row_cell" style="width: 79%;">
+            <div class="row_celltitles" id="publicip">
+            </div>
+        </div>
+    </div>   
+    <div class="grid_rows even">
+        <div class="grid_row_cell" style="width: 20%;">
+            <div class="row_celltitles">
+                <%=t.t("Private IP")%>:</div>
+        </div>
+        <div class="grid_row_cell" style="width: 79%;">
+            <div class="row_celltitles" id="privateip">
+            </div>
+        </div>
+    </div>   
+    <div class="grid_rows even">
+        <div class="grid_row_cell" style="width: 20%;">
+            <div class="row_celltitles">
+                <%=t.t("Guest IP")%>:</div>
+        </div>
+        <div class="grid_row_cell" style="width: 79%;">
+            <div class="row_celltitles" id="guestipaddress">
+            </div>
+        </div>
+    </div>   
+    <div class="grid_rows even">
+        <div class="grid_row_cell" style="width: 20%;">
+            <div class="row_celltitles">
+                <%=t.t("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">
+                <%=t.t("Account")%>:</div>
+        </div>
+        <div class="grid_row_cell" style="width: 79%;">
+            <div class="row_celltitles" id="account">
+            </div>
+        </div>
+    </div>  
+</div>
+<!--  router tab template (end) -->
+
 <!-- Add Host Dialog -->
 <div id="dialog_add_host" title="Add Host" style="display: none">
     <p>
diff --git a/ui/scripts/cloud.core.host.js b/ui/scripts/cloud.core.host.js
index b14cd99e03c..e7cabfbc129 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"), $("#tab_instance")];
-    var tabContentArray = [$("#tab_content_details"), $("#tab_content_statistics"), $("#tab_content_instance")];
-    var afterSwitchFnArray = [hostJsonToDetailsTab, hostJsonToStatisticsTab, hostJsonToInstanceTab];
+    var tabArray = [$("#tab_details"), $("#tab_statistics"), $("#tab_instance"), $("#tab_router")];
+    var tabContentArray = [$("#tab_content_details"), $("#tab_content_statistics"), $("#tab_content_instance"), $("#tab_content_router")];
+    var afterSwitchFnArray = [hostJsonToDetailsTab, hostJsonToStatisticsTab, hostJsonToInstanceTab, hostJsonToRouterTab];
     switchBetweenDifferentTabs(tabArray, tabContentArray, afterSwitchFnArray);         
 }
 
@@ -230,6 +230,48 @@ function hostInstanceJSONToTemplate(jsonObj, template) {
     setDateField(jsonObj.created, template.find("#created"));	 		
 } 
 
+function  hostJsonToRouterTab() {   
+    var $thisTab = $("#right_panel_content #tab_content_router");
+	$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=listRouters&hostid="+jsonObj.id),
+		dataType: "json",
+		success: function(json) {							    
+			var items = json.listroutersresponse.router;																						
+			if (items != null && items.length > 0) {
+			    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);	               
+	                hostRouterJSONToTemplate(items[i], newTemplate); 
+	                $container.append(newTemplate.show());	
+				}			
+			}	
+			$thisTab.find("#tab_spinning_wheel").hide();    
+            $thisTab.find("#tab_container").show();    			
+		}
+	});
+} 
+
+function hostRouterJSONToTemplate(jsonObj, template) {
+    template.data("jsonObj", jsonObj);     
+    template.attr("id", "host_router_"+jsonObj.id).data("hostRouterId", 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("#publicip").text(fromdb(jsonObj.publicip));   
+    template.find("#privateip").text(fromdb(jsonObj.privateip));
+    template.find("#guestipaddress").text(fromdb(jsonObj.guestipaddress)); 
+    template.find("#account").text(fromdb(jsonObj.account));
+    setDateField(jsonObj.created, template.find("#created"));	 		
+}  
+
 function hostClearRightPanel() {
     hostClearDetailsTab(); 
 }