From f32c0b8a39a48ab2700c800a58db39e362dd1984 Mon Sep 17 00:00:00 2001
From: Jessica Wang <jessica@cloud.com>
Date: Wed, 8 Dec 2010 15:04:00 -0800
Subject: [PATCH] bug 7448: zone tree - network - add public network as the 1st
 middle menu item (hardcode it as "Public Network).

---
 ui/jsp/network.jsp               | 153 ++++++++++++++++++++++++++++++-
 ui/scripts/cloud.core.network.js | 151 ++++++++++++++++++++++++++++--
 2 files changed, 293 insertions(+), 11 deletions(-)

diff --git a/ui/jsp/network.jsp b/ui/jsp/network.jsp
index 4337ebeb53d..e044776ae99 100644
--- a/ui/jsp/network.jsp
+++ b/ui/jsp/network.jsp
@@ -19,7 +19,7 @@
         <p id="after_action_info">
         </p>
     </div>    
-    <!-- ***** Direct Network (begin) ***** -->
+    <!-- ***** Direct Network Page (begin) ***** -->
     <div id="direct_network_page" style="display:none">
         <div class="tabbox" style="margin-top: 15px;">
             <div class="content_tabs on" id="tab_details">
@@ -165,7 +165,156 @@
         <!-- IP Allocation tab (end)-->        
              
     </div>
-    <!-- ***** Direct Network (end) ***** -->
+    <!-- ***** Direct Network Page (end) ***** -->
+    
+    <!-- ***** Public Network Page (begin) ***** -->
+    <div id="public_network_page" style="display:none">
+        <div class="tabbox" style="margin-top: 15px;">
+            <div class="content_tabs on" id="tab_details">
+                <%=t.t("Details")%></div>
+            <div class="content_tabs off" id="tab_ipallocation">
+                <%=t.t("IP Allocation")%></div>
+        </div>    
+        <!-- Details tab (end)-->
+        <div id="tab_content_details">  
+            <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 class="grid_container">
+	        	    <div class="grid_header">
+	            	    <div class="grid_header_title">Title</div>
+	                       <div class="grid_actionbox" id="action_link">
+	                        <div class="grid_actionsdropdown_box" id="action_menu" style="display: none;">
+	                            <ul class="actionsdropdown_boxlist" id="action_list">
+	                                <li><%=t.t("no.available.actions")%></li>
+	                            </ul>
+	                        </div>
+	                    </div>
+	                    <div class="gridheader_loaderbox" id="spinning_wheel" style="border: 1px solid #999;
+	                     display: none;">
+	                        <div class="gridheader_loader" id="icon">
+	                        </div>
+	                        <p id="description">
+	                            Waiting &hellip;</p>
+	                    </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 odd">
+	                    <div class="grid_row_cell" style="width: 20%;">
+	                        <div class="row_celltitles">
+	                            <%=t.t("displaytext")%>:</div>
+	                    </div>
+	                    <div class="grid_row_cell" style="width: 79%;">
+	                        <div class="row_celltitles" id="displaytext">
+	                        </div>
+	                    </div>
+	                </div>
+	                <div class="grid_rows even">
+	                    <div class="grid_row_cell" style="width: 20%;">
+	                        <div class="row_celltitles">
+	                            <%=t.t("vlan")%>:</div>
+	                    </div>
+	                    <div class="grid_row_cell" style="width: 79%;">
+	                        <div class="row_celltitles" id="vlan">
+	                        </div>
+	                    </div>
+	                </div>
+	                                    <div class="grid_rows odd">
+	                    <div class="grid_row_cell" style="width: 20%;">
+	                        <div class="row_celltitles">
+	                            <%=t.t("gateway")%>:</div>
+	                    </div>
+	                    <div class="grid_row_cell" style="width: 79%;">
+	                        <div class="row_celltitles" id="gateway">
+	                        </div>
+	                    </div>
+	                </div>
+	                <div class="grid_rows even">
+	                    <div class="grid_row_cell" style="width: 20%;">
+	                        <div class="row_celltitles">
+	                            <%=t.t("netmask")%>:</div>
+	                    </div>
+	                    <div class="grid_row_cell" style="width: 79%;">
+	                        <div class="row_celltitles" id="netmask">
+	                        </div>
+	                    </div>
+	                </div>
+	                <div class="grid_rows odd">
+	                    <div class="grid_row_cell" style="width: 20%;">
+	                        <div class="row_celltitles">
+	                            <%=t.t("iprange")%>:</div>
+	                    </div>
+	                    <div class="grid_row_cell" style="width: 79%;">
+	                        <div class="row_celltitles" id="iprange">
+	                        </div>
+	                    </div>
+	                </div>
+	                <div class="grid_rows even">
+	                    <div class="grid_row_cell" style="width: 20%;">
+	                        <div class="row_celltitles">
+	                            <%=t.t("domain")%>:</div>
+	                    </div>
+	                    <div class="grid_row_cell" style="width: 79%;">
+	                        <div class="row_celltitles" id="domain">
+	                        </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>
+	        </div>    
+        </div>   
+        <!-- Details tab (end)-->
+        
+        <!-- IP Allocation tab (start)-->
+        <div style="display: none;" id="tab_content_ipallocation">
+    	    <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> 
+        <!-- IP Allocation tab (end)-->        
+             
+    </div>
+    <!-- ***** Public Network Page (end) ***** -->
+        
 </div>
 
 <!--  Direct Network - IP Allocation tab template (begin) -->
diff --git a/ui/scripts/cloud.core.network.js b/ui/scripts/cloud.core.network.js
index f286b06b878..2e2723a172c 100644
--- a/ui/scripts/cloud.core.network.js
+++ b/ui/scripts/cloud.core.network.js
@@ -30,9 +30,35 @@ function afterLoadNetworkJSP($leftmenuItem1) {
     var tabContentArray = [$directNetworkPage.find("#tab_content_details"), $directNetworkPage.find("#tab_content_ipallocation")];
     var afterSwitchFnArray = [directNetworkJsonToDetailsTab, directNetworkJsonToIpAllocationTab];
     switchBetweenDifferentTabs(tabArray, tabContentArray, afterSwitchFnArray);  
-     
+        
+    //switch between different tabs - Public Network page
+    var $publicNetworkPage = $("#public_network_page");
+    var tabArray = [$publicNetworkPage.find("#tab_details"), $publicNetworkPage.find("#tab_ipallocation")];
+    var tabContentArray = [$publicNetworkPage.find("#tab_content_details"), $publicNetworkPage.find("#tab_content_ipallocation")];
+    var afterSwitchFnArray = [publicNetworkJsonToDetailsTab, publicNetworkJsonToIpAllocationTab];
+    switchBetweenDifferentTabs(tabArray, tabContentArray, afterSwitchFnArray);  
+         
     //populate items into middle menu  
     var $midmenuContainer = $("#midmenu_container").empty();   
+        
+    $.ajax({
+        data: createURL("command=listNetworks&isSystem=true&zoneId="+zoneObj.id),
+        dataType: "json",
+        async: false,
+        success: function(json) {       
+            var items = json.listnetworksresponse.network;       
+            if(items != null && items.length > 0) {
+                var item = items[0];
+                var $midmenuItem1 = $("#midmenu_item").clone();                      
+                $midmenuItem1.data("toRightPanelFn", publicNetworkToRightPanel);                             
+                publicNetworkToMidmenu(item, $midmenuItem1);    
+                bindClickToMidMenu($midmenuItem1, publicNetworkToRightPanel, publicNetworkGetMidmenuId);   
+                $midmenuContainer.append($midmenuItem1.show());    
+                $midmenuItem1.click();  
+            }
+        }
+    });   
+    
     $.ajax({
 		data: createURL("command=listNetworks&type=Direct&zoneId="+zoneObj.id),
 		dataType: "json",
@@ -43,20 +69,21 @@ function afterLoadNetworkJSP($leftmenuItem1) {
 					var $midmenuItem1 = $("#midmenu_item").clone();                      
                     $midmenuItem1.data("toRightPanelFn", directNetworkToRightPanel);                             
                     directNetworkToMidmenu(items[i], $midmenuItem1);    
-                    bindClickToMidMenu($midmenuItem1, directNetworkToRightPanel, getMidmenuId);             
-                   
-                    $midmenuContainer.append($midmenuItem1.show());   
-                    if(i == 0)  { //click the 1st item in middle menu as default                        
-                        $midmenuItem1.click();   
-                    }    									
+                    bindClickToMidMenu($midmenuItem1, directNetworkToRightPanel, directNetworkGetMidmenuId);   
+                    $midmenuContainer.append($midmenuItem1.show());  
 				}
 			}	
 		}
 	});    
 }
 
+//***** Direct Network (begin) ******************************************************************************************************
+function directNetworkGetMidmenuId(jsonObj) {
+    return "midmenuItem_directnetework_" + jsonObj.id;
+}
+
 function directNetworkToMidmenu(jsonObj, $midmenuItem1) {  
-    $midmenuItem1.attr("id", getMidmenuId(jsonObj)); 
+    $midmenuItem1.attr("id", directNetworkGetMidmenuId(jsonObj)); 
     $midmenuItem1.data("jsonObj", jsonObj); 
     
     /*
@@ -65,7 +92,7 @@ function directNetworkToMidmenu(jsonObj, $midmenuItem1) {
     */
          
     $midmenuItem1.find("#first_row").text(fromdb(jsonObj.name).substring(0,25)); 
-    $midmenuItem1.find("#second_row").text("VLAN " + fromdb(jsonObj.vlan));   
+    $midmenuItem1.find("#second_row").text("VLAN ID: " + fromdb(jsonObj.vlan));   
 }
 
 function directNetworkToRightPanel($midmenuItem1) {    
@@ -153,4 +180,110 @@ function directNetworkIprangeJsonToTemplate(jsonObj, $template) {
     $template.find("#startip").text(fromdb(jsonObj.startip));
     $template.find("#endip").text(fromdb(jsonObj.endip));
 }
+//***** Direct Network (end) ******************************************************************************************************
 
+
+//***** Public Network (begin) ******************************************************************************************************
+function publicNetworkGetMidmenuId(jsonObj) {    
+    return "midmenuItem_publicnetework_" + jsonObj.id;
+}
+
+function publicNetworkToMidmenu(jsonObj, $midmenuItem1) {  
+    $midmenuItem1.attr("id", publicNetworkGetMidmenuId(jsonObj)); 
+    $midmenuItem1.data("jsonObj", jsonObj); 
+    
+    /*
+    var $iconContainer = $midmenuItem1.find("#icon_container").show();   
+    $iconContainer.find("#icon").attr("src", "images/midmenuicon_storage_snapshots.png");		
+    */
+         
+    $midmenuItem1.find("#first_row").text("Public Network"); 
+    $midmenuItem1.find("#second_row").text("Network ID: " + fromdb(jsonObj.id));   
+}
+
+function publicNetworkToRightPanel($midmenuItem1) {      
+    copyActionInfoFromMidMenuToRightPanel($midmenuItem1);  
+    $("#right_panel_content").data("$midmenuItem1", $midmenuItem1);  
+            
+    $("#public_network_page").show();
+    $("#direct_network_page").hide();
+    
+    $("#public_network_page").find("#tab_details").click();     
+}
+	
+function publicNetworkJsonToDetailsTab() {	 
+    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 #public_network_page #tab_content_details");      
+    $thisTab.find("#tab_container").hide(); 
+    $thisTab.find("#tab_spinning_wheel").show();   
+		
+	$thisTab.find("#grid_header_title").text(fromdb(jsonObj.name));	
+		
+	$thisTab.find("#id").text(fromdb(jsonObj.id));				
+	$thisTab.find("#name").text(fromdb(jsonObj.name));	
+	$thisTab.find("#displaytext").text(fromdb(jsonObj.displaytext));
+	  	
+    $thisTab.find("#vlan").text(fromdb(jsonObj.vlan));
+    $thisTab.find("#gateway").text(fromdb(jsonObj.gateway));
+    $thisTab.find("#netmask").text(fromdb(jsonObj.netmask));
+    var ipRange = getIpRange(fromdb(jsonObj.startip), fromdb(jsonObj.endip));
+    $thisTab.find("#iprange").text(ipRange);        
+    
+    $thisTab.find("#domain").text(fromdb(jsonObj.domain));      //might be null
+    $thisTab.find("#account").text(fromdb(jsonObj.account));    //might be null
+        
+    $thisTab.find("#tab_container").show(); 
+    $thisTab.find("#tab_spinning_wheel").hide();   
+}
+
+function publicNetworkJsonToIpAllocationTab() {  
+    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 #public_network_page #tab_content_ipallocation");      
+    $thisTab.find("#tab_container").hide(); 
+    $thisTab.find("#tab_spinning_wheel").show();   
+         
+    $.ajax({
+		data: createURL("command=listVlanIpRanges&zoneid="+ jsonObj.zoneid + "&networkid="+jsonObj.id),
+		dataType: "json",		
+		success: function(json) {		    
+		    var items = json.listvlaniprangesresponse.vlaniprange;		    
+		    var $container = $thisTab.find("#tab_container").empty();
+		    var $template = $("#directnetwork_iprange_template");
+		    if(items != null && items.length > 0) {		        
+		        for(var i=0; i<items.length; i++) {
+		            var $newTemplate = $template.clone();
+		            publicNetworkIprangeJsonToTemplate(items[i], $newTemplate);
+		            $container.append($newTemplate.show());
+		        }
+		    }		    
+		    $thisTab.find("#tab_container").show(); 
+            $thisTab.find("#tab_spinning_wheel").hide();    
+		}
+    });  
+}
+
+function publicNetworkIprangeJsonToTemplate(jsonObj, $template) {    
+    $template.attr("id", "publicNetworkIprange_" + jsonObj.id);
+    
+    var ipRange = getIpRange(fromdb(jsonObj.startip), fromdb(jsonObj.endip));
+    $template.find("#grid_header_title").text(ipRange);
+    
+    $template.find("#vlan").text(jsonObj.vlan)
+    $template.find("#startip").text(fromdb(jsonObj.startip));
+    $template.find("#endip").text(fromdb(jsonObj.endip));
+}
+//***** Public Network (end) ******************************************************************************************************
\ No newline at end of file