From b0305e710dc4129764f795d84161dd298c159570 Mon Sep 17 00:00:00 2001
From: Jessica Wang <jessica@cloud.com>
Date: Tue, 14 Dec 2010 16:20:14 -0800
Subject: [PATCH] host page - add primary storage tab.

---
 ui/jsp/host.jsp               | 168 +++++++++++++++++++++++++++++++++-
 ui/scripts/cloud.core.host.js |  64 ++++++++++++-
 2 files changed, 228 insertions(+), 4 deletions(-)

diff --git a/ui/jsp/host.jsp b/ui/jsp/host.jsp
index c4aabcd566e..e7e90dc6ef9 100644
--- a/ui/jsp/host.jsp
+++ b/ui/jsp/host.jsp
@@ -21,7 +21,9 @@
     </div>
     <div class="tabbox" style="margin-top: 15px;">
         <div class="content_tabs on" id="tab_details">
-            <%=t.t("details")%></div>        
+            <%=t.t("details")%></div>  
+        <div class="content_tabs on" id="tab_primarystorage">
+            Primary Storage</div>       
         <div class="content_tabs off" id="tab_instance">
             <%=t.t("instance")%></div>
         <div class="content_tabs off" id="tab_router">
@@ -176,6 +178,19 @@
 	    </div>        
     </div>
     <!-- Details tab (end)-->
+      
+    <!--Primary Storage tab (start)-->
+    <div style="display: none;" id="tab_content_primarystorage">
+    	<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> 
+    <!--Primary Storage tab (end)-->  
            
     <!--Instance tab (start)-->
     <div style="display: none;" id="tab_content_instance">
@@ -329,6 +344,157 @@
     <!--Statistics tab (end)--> 
 </div>
 
+<!--  Primary Storage tab template (begin) -->
+<div class="grid_container" id="primarystorage_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 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 even">
+        <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 even">
+        <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 even">
+        <div class="grid_row_cell" style="width: 20%;">
+            <div class="row_celltitles">
+                <%=t.t("type")%>:</div>
+        </div>
+        <div class="grid_row_cell" style="width: 79%;">
+            <div class="row_celltitles" id="type">
+            </div>
+        </div>
+    </div>
+    <div class="grid_rows even">
+        <div class="grid_row_cell" style="width: 20%;">
+            <div class="row_celltitles">
+                <%=t.t("IP.or.FQDN")%>:</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("path")%>:</div>
+        </div>
+        <div class="grid_row_cell" style="width: 79%;">
+            <div class="row_celltitles" id="path">
+            </div>
+        </div>
+    </div>
+    <div class="grid_rows even">
+        <div class="grid_row_cell" style="width: 20%;">
+            <div class="row_celltitles">
+                <%=t.t("disk.total")%>:</div>
+        </div>
+        <div class="grid_row_cell" style="width: 79%;">
+            <div class="row_celltitles" id="disksizetotal">
+            </div>
+        </div>
+    </div>
+    <div class="grid_rows even">
+        <div class="grid_row_cell" style="width: 20%;">
+            <div class="row_celltitles">
+                <%=t.t("disk.allocated")%>:</div>
+        </div>
+        <div class="grid_row_cell" style="width: 79%;">
+            <div class="row_celltitles" id="disksizeallocated">
+            </div>
+        </div>
+    </div>
+    <div class="grid_rows even">
+        <div class="grid_row_cell" style="width: 20%;">
+            <div class="row_celltitles">
+                <%=t.t("tags")%>:</div>
+        </div>
+        <div class="grid_row_cell" style="width: 79%;">
+            <div class="row_celltitles" id="tags">
+            </div>
+        </div>
+    </div>
+</div>
+<!--  Primary Storage tab template (end) -->
+
 <!--  instance tab template (begin) -->
 <div class="grid_container" id="instance_tab_template" style="display: none">
     <div class="grid_header">
diff --git a/ui/scripts/cloud.core.host.js b/ui/scripts/cloud.core.host.js
index 4ad760b7400..b8b52b4b1d2 100644
--- a/ui/scripts/cloud.core.host.js
+++ b/ui/scripts/cloud.core.host.js
@@ -52,9 +52,9 @@ function afterLoadHostJSP($midmenuItem1) {
     initDialog("dialog_update_os");
          
     // switch between different tabs 
-    var tabArray = [$("#tab_details"), $("#tab_instance"), $("#tab_router"), $("#tab_systemvm"), $("#tab_statistics")];
-    var tabContentArray = [$("#tab_content_details"), $("#tab_content_instance"), $("#tab_content_router"), $("#tab_content_systemvm"), $("#tab_content_statistics")];
-    var afterSwitchFnArray = [hostJsonToDetailsTab, hostJsonToInstanceTab, hostJsonToRouterTab, hostJsonToSystemvmTab, hostJsonToStatisticsTab];
+    var tabArray = [$("#tab_details"), $("#tab_primarystorage"), $("#tab_instance"), $("#tab_router"), $("#tab_systemvm"), $("#tab_statistics")];
+    var tabContentArray = [$("#tab_content_details"), $("#tab_content_primarystorage"), $("#tab_content_instance"), $("#tab_content_router"), $("#tab_content_systemvm"), $("#tab_content_statistics")];
+    var afterSwitchFnArray = [hostJsonToDetailsTab, hostJsonToPrimaryStorageTab, hostJsonToInstanceTab, hostJsonToRouterTab, hostJsonToSystemvmTab, hostJsonToStatisticsTab];
     switchBetweenDifferentTabs(tabArray, tabContentArray, afterSwitchFnArray);    
     
     $("#right_panel_content").data("$midmenuItem1", $midmenuItem1);         
@@ -170,6 +170,64 @@ function hostJsonToDetailsTab() {
     $thisTab.find("#tab_container").show();               
 }
 
+function hostJsonToPrimaryStorageTab() {       	
+	var $midmenuItem1 = $("#right_panel_content").data("$midmenuItem1");
+    if($midmenuItem1 == null)
+        return;
+    
+    var jsonObj = $midmenuItem1.data("jsonObj");
+    if(jsonObj == null)
+        return;
+    
+    var $thisTab = $("#right_panel_content #tab_content_primarystorage");
+	$thisTab.find("#tab_container").hide(); 
+    $thisTab.find("#tab_spinning_wheel").show(); 
+        
+    $.ajax({
+        cache: false,
+        data: createURL("command=listStoragePools&clusterid="+jsonObj.clusterid),
+        dataType: "json",        
+        success: function(json) {    
+            var items = json.liststoragepoolsresponse.storagepool;      
+            if(items != null && items.length > 0) {
+                var $container = $thisTab.find("#tab_container").empty();
+                var $template = $("#primarystorage_tab_template"); 		
+                for(var i=0; i<items.length;i++) { 
+                    var $newTemplate = $template.clone(true);	               
+	                hostPrimaryStorageJSONToTemplate(items[i], $newTemplate); 
+	                $container.append($newTemplate.show());                            
+                }                 
+            }  
+            $thisTab.find("#tab_spinning_wheel").hide();    
+            $thisTab.find("#tab_container").show();    		                
+        }
+    });	     
+} 
+
+function hostPrimaryStorageJSONToTemplate(jsonObj, $template) {
+    $template.data("jsonObj", jsonObj);     
+    $template.attr("id", "host_primarystorage_"+jsonObj.id).data("hostPrimarystorageId", jsonObj.id);        
+    $template.find("#grid_header_title").text(fromdb(jsonObj.name));
+    $template.find("#id").text(fromdb(jsonObj.id));
+    $template.find("#name").text(fromdb(jsonObj.name));
+        
+    setHostStateInRightPanel(fromdb(jsonObj.state), $template.find("#state"));
+    
+    $template.find("#zonename").text(fromdb(jsonObj.zonename));
+    $template.find("#podname").text(fromdb(jsonObj.podname));
+    $template.find("#clustername").text(fromdb(jsonObj.clustername));
+	var storageType = "ISCSI Share";
+	if (jsonObj.type == 'NetworkFilesystem') 
+	    storageType = "NFS Share";
+    $template.find("#type").text(fromdb(storageType));
+    $template.find("#ipaddress").text(fromdb(jsonObj.ipaddress));
+    $template.find("#path").text(fromdb(jsonObj.path));                
+	$template.find("#disksizetotal").text(convertBytes(jsonObj.disksizetotal));
+	$template.find("#disksizeallocated").text(convertBytes(jsonObj.disksizeallocated));
+	
+	$template.find("#tags").text(fromdb(jsonObj.tags));   	
+}  
+
 function hostJsonToInstanceTab() {       	
 	var $midmenuItem1 = $("#right_panel_content").data("$midmenuItem1");
     if($midmenuItem1 == null)