From 57bb673fa3e41188040285c247f8275e55c698fd Mon Sep 17 00:00:00 2001
From: Jessica Wang <jessica@cloud.com>
Date: Thu, 14 Oct 2010 11:59:54 -0700
Subject: [PATCH] new UI - left menu - create new function buildZoneTree().

---
 ui/new/index.jsp                   | 99 ++++++++++++++----------------
 ui/new/scripts/cloud.core2.init.js | 17 +++++
 ui/new/scripts/cloud.core2.js      |  4 +-
 3 files changed, 65 insertions(+), 55 deletions(-)

diff --git a/ui/new/index.jsp b/ui/new/index.jsp
index a3222e06375..34a6f77e04d 100644
--- a/ui/new/index.jsp
+++ b/ui/new/index.jsp
@@ -575,60 +575,9 @@ long milliseconds = new Date().getTime();
                             </div>
                         </div>
                         <div class="leftmenu_expandedlist">
-                            <div class="leftmenu_content" id="leftmenu_resource">
-                                <div class="leftmenu_thirdindent">
-                                    <div class="leftmenu_arrows expanded_close" id="arrowIcon">
-                                    </div>
-                                    <div class="leftmenu_list_icons">
-                                        <img src="images/zone_zoneicon.png" alt="Zone" /></div>
-                                    Zone: <strong><span id="zone_name">Zone 1</span></strong>
-                                </div>
+                            <div class="leftmenu_content" id="leftmenu_zone_tree">
                             </div>
-                        </div>
-                        <div class="leftmenu_expandedlist">
-                            <div class="leftmenu_content" id="leftmenu_resource">
-                                <div class="leftmenu_fourthindent">
-                                    <div class="leftmenu_arrows expanded_close" id="arrowIcon">
-                                    </div>
-                                    <div class="leftmenu_list_icons">
-                                        <img src="images/zone_podicon.png" alt="Pod" /></div>
-                                    Pod: <strong><span id="pod_name">Name of the Pod</span></strong>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="leftmenu_expandedlist">
-                            <div class="leftmenu_content" id="leftmenu_resource">
-                                <div class="leftmenu_fifthindent">
-                                    <div class="leftmenu_arrows expanded_close" id="arrowIcon">
-                                    </div>
-                                    <div class="leftmenu_list_icons">
-                                        <img src="images/zone_clustericon.png" alt="Cluster" /></div>
-                                    Cluster: <strong><span id="cluster_name">(Name of the Cluster)</span></strong>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="leftmenu_expandedlist">
-                            <div class="leftmenu_content" id="leftmenu_resource">
-                                <div class="leftmenu_sixthindent">
-                                    <div class="leftmenu_arrows white_nonexpanded_close" id="arrowIcon">
-                                    </div>
-                                    <div class="leftmenu_list_icons">
-                                        <img src="images/zone_hosticon.png" alt="Host" /></div>
-                                    Host: <strong><span id="host_name">(Name of the Host)</span></strong>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="leftmenu_expandedlist">
-                            <div class="leftmenu_content" id="leftmenu_resource">
-                                <div class="leftmenu_sixthindent">
-                                    <div class="leftmenu_arrows white_nonexpanded_close" id="arrowIcon">
-                                    </div>
-                                    <div class="leftmenu_list_icons">
-                                        <img src="images/zone_primarystorageicon.png" alt="PrimaryStorage" /></div>
-                                    Primary: <strong><span id="primary_storage_name">(Name of the Primary Storage)</span></strong>
-                                </div>
-                            </div>
-                        </div>
+                        </div>                                             
                         <div class="leftmenu_expandedlist">
                             <div class="leftmenu_content" style="border-bottom: 1px dashed b4c8d6;" id="leftmenu_service_offering">
                                 <div class="leftmenu_secondindent">
@@ -740,6 +689,50 @@ long milliseconds = new Date().getTime();
     <li id="action_list_item" style="display: none;"><a id="link" href="#">(action)</a></li>
     <li id="no_available_actions" style="display: none">
         <%=t.t("no.available.actions")%></li>
+        
+    <div class="leftmenu_thirdindent" id="leftmenu_zone_node_template" style="display:none">
+        <div class="leftmenu_arrows expanded_close" id="arrowIcon">
+        </div>
+        <div class="leftmenu_list_icons">
+            <img src="images/zone_zoneicon.png" alt="Zone" /></div>
+        Zone: <strong><span id="zone_name"></span></strong>
+    </div>  
+    
+    <div class="leftmenu_expandedlist" id="leftmenu_pod_node_template" style="display:none">
+        <div class="leftmenu_content">
+            <div class="leftmenu_fourthindent">
+                <div class="leftmenu_arrows expanded_close" id="arrowIcon">
+                </div>
+                <div class="leftmenu_list_icons">
+                    <img src="images/zone_podicon.png" alt="Pod" /></div>
+                Pod: <strong><span id="pod_name"></span></strong>
+            </div>
+        </div>
+    </div>
+    
+    <div class="leftmenu_expandedlist" id="leftmenu_cluster_node_template" style="display:none">
+        <div class="leftmenu_content">
+            <div class="leftmenu_fifthindent">
+                <div class="leftmenu_arrows expanded_close" id="arrowIcon">
+                </div>
+                <div class="leftmenu_list_icons">
+                    <img src="images/zone_clustericon.png" alt="Cluster" /></div>
+                Cluster: <strong><span id="cluster_name"></span></strong>
+            </div>
+        </div>
+    </div> 
+    
+    <div class="leftmenu_expandedlist" id="leftmenu_systemvm_node_template" style="display:none">
+        <div class="leftmenu_content">
+            <div class="leftmenu_fourthindent">
+                <div class="leftmenu_arrows expanded_close" id="arrowIcon">
+                </div>
+                <div class="leftmenu_list_icons">
+                    <img src="images/zone_systemvmicon.png" alt="System VM" /></div>
+                System VM: <strong><span id="systemvm_name"></span></strong>
+            </div>
+        </div>
+    </div> 
     <!-- templates ends here-->
 </body>
 </html>
diff --git a/ui/new/scripts/cloud.core2.init.js b/ui/new/scripts/cloud.core2.init.js
index 4927a2a57ac..bbb6d896010 100644
--- a/ui/new/scripts/cloud.core2.init.js
+++ b/ui/new/scripts/cloud.core2.init.js
@@ -136,6 +136,7 @@ $(document).ready(function() {
     });
     
     $("#leftmenu_resource").bind("click", function(event) {  
+        buildZoneTree();
         selectLeftMenu($(this));
         
         showMiddleMenuWithoutSearch();
@@ -151,6 +152,22 @@ $(document).ready(function() {
         return false;
     });
     
+    function buildZoneTree() {        
+        $zoneTree = $("#leftmenu_zone_tree").empty();
+        
+        var $zoneNode = $("#leftmenu_zone_node_template").clone();
+        $zoneTree.append($zoneNode.show());
+        
+        var $podNode = $("#leftmenu_pod_node_template").clone();
+        $zoneTree.append($podNode.show());
+        
+        var $clusterNode = $("#leftmenu_cluster_node_template").clone();
+        $zoneTree.append($clusterNode.show());
+        
+        var $systemvmNode = $("#leftmenu_systemvm_node_template").clone();
+        $zoneTree.append($systemvmNode.show());
+    }
+    
            
     $("#midmenu_action_link").bind("mouseover", function(event) {
         $(this).find("#action_menu").show();    
diff --git a/ui/new/scripts/cloud.core2.js b/ui/new/scripts/cloud.core2.js
index 0d931dadc10..faa46bd231f 100644
--- a/ui/new/scripts/cloud.core2.js
+++ b/ui/new/scripts/cloud.core2.js
@@ -474,8 +474,8 @@ function setBooleanField(value, $field) {
  
 function clearLeftMenu() {
     var $arrowIcon = $("#leftmenu_instance_group_header #arrow_icon");
-    if($arrowIcon.hasClass("open") == true) {
-        $arrowIcon.removeClass("open").addClass("close");            
+    if($arrowIcon.hasClass("expanded_open") == true) {
+        $arrowIcon.removeClass("expanded_open").addClass("expanded_close");            
         $("#leftmenu_instance_group_container").empty();   
     }	
 }