From 0866b8e60aa9448c33b0073e08df3cf793b01816 Mon Sep 17 00:00:00 2001
From: Jessica Wang <jessica@cloud.com>
Date: Fri, 15 Oct 2010 11:24:40 -0700
Subject: [PATCH] new UI - resources page - implement add pod action.

---
 ui/new/index.jsp                       |   4 +-
 ui/new/jsp/resource.jsp                |  48 +++++---
 ui/new/scripts/cloud.core2.js          |   7 +-
 ui/new/scripts/cloud.core2.resource.js | 150 ++++++++++++++++++++++---
 4 files changed, 175 insertions(+), 34 deletions(-)

diff --git a/ui/new/index.jsp b/ui/new/index.jsp
index 6f648a93a9d..112dce1c8ca 100644
--- a/ui/new/index.jsp
+++ b/ui/new/index.jsp
@@ -220,11 +220,11 @@ long milliseconds = new Date().getTime();
                                     Destroy VM</div>
                             </div>
                         </div>
-                        <div class="actionpanel_button_wrapper" id="add_link" style="display: block; float: right;
+                        <div class="actionpanel_button_wrapper" id="help_link" style="display: block; float: right;
                             background: none;">
                             <div class="actionpanel_button">
                                 <div class="actionpanel_button_icons">
-                                    <img src="images/help_actionicon.png" alt="Add" /></div>
+                                    <img src="images/help_actionicon.png" alt="Help" /></div>
                                 <div class="actionpanel_button_links">
                                     <%=t.t("help")%></div>
                             </div>
diff --git a/ui/new/jsp/resource.jsp b/ui/new/jsp/resource.jsp
index 5818348979c..11c81b678c1 100644
--- a/ui/new/jsp/resource.jsp
+++ b/ui/new/jsp/resource.jsp
@@ -674,22 +674,40 @@
 	</div>
 </div>
 <!-- END Add Zone Dialog -->
-
-
-<!-- treenode template (begin) -->
-<div id="treenode_template" class="tree_levelspanel" style="display: none">
-    <div class="tree_levelsbox" style="margin-left: 20px;">
-        <div id="domain_title_container" class="tree_levels">
-            <div id="domain_expand_icon" class="zonetree_closedarrows">
-            </div>
-            <div id="domain_name" class="tree_links">
-                Domain Name</div>
-        </div>
-        <div id="domain_children_container" style="display: none">
-        </div>
-    </div>
+<!-- Add Pod Dialog -->
+<div id="dialog_add_pod" title="Add Pod" style="display:none">
+	<p>Add a new pod for zone: <b><span id="add_pod_zone_name"></span></b></p>
+	<div class="dialog_formcontent">
+		<form action="#" method="post" id="form_acquire">
+			<ol>
+				<li>
+					<label for="user_name" style="width:115px;">Name:</label>
+					<input class="text" type="text" name="add_pod_name" id="add_pod_name"/>
+					<div id="add_pod_name_errormsg" class="dialog_formcontent_errormsg" style="display:none;" ></div>
+				</li>
+				<li>
+					<label for="add_pod_gateway" style="width:115px;">Gateway:</label>
+					<input class="text" type="text" id="add_pod_gateway"/>
+					<div id="add_pod_gateway_errormsg" class="dialog_formcontent_errormsg" style="display:none;" ></div>
+				</li>
+				<li>
+					<label for="user_name" style="width:115px;">CIDR:</label>
+					<input class="text" type="text" name="add_pod_cidr" id="add_pod_cidr"/>
+					<div id="add_pod_cidr_errormsg" class="dialog_formcontent_errormsg" style="display:none;" ></div>
+				</li>
+				<li>
+					<label for="user_name" style="width:115px;">Private IP Range:</label>
+					<input class="text" style="width:67px" type="text" name="add_pod_startip" id="add_pod_startip"/><span>-</span>
+                    <input class="text" style="width:67px" type="text" name="add_pod_endip" id="add_pod_endip"/>
+					<div id="add_pod_startip_errormsg" class="dialog_formcontent_errormsg" style="display:none;" ></div>
+					<div id="add_pod_endip_errormsg" class="dialog_formcontent_errormsg" style="display:none;" ></div>
+				</li>				
+			</ol>
+		</form>
+	</div>
 </div>
-<!-- treenode template (end) -->
+<!-- END Add Pod Dialog -->
+
 <!-- Zonetree Template (begin) -->
 <div class="zonetree_contentbox" id="zonetree" style="display: none">
     <div id="zones_container">
diff --git a/ui/new/scripts/cloud.core2.js b/ui/new/scripts/cloud.core2.js
index faa46bd231f..7136291582d 100644
--- a/ui/new/scripts/cloud.core2.js
+++ b/ui/new/scripts/cloud.core2.js
@@ -483,7 +483,12 @@ function clearLeftMenu() {
 function clearMiddleMenu() {
     $("#midmenu_container").empty();
     $("#midmenu_action_link").hide();
-    $("#midmenu_add_link").hide();        
+    $("#midmenu_add_link").unbind("click").hide();    
+    $("#midmenu_add2_link").unbind("click").hide();           
+    $("#midmenu_startvm_link").unbind("click").hide();     
+    $("#midmenu_stopvm_link").unbind("click").hide(); 
+    $("#midmenu_rebootvm_link").unbind("click").hide(); 
+    $("#midmenu_destoryvm_link").unbind("click").hide(); 
 }
 
 function clearRightPanel() {
diff --git a/ui/new/scripts/cloud.core2.resource.js b/ui/new/scripts/cloud.core2.resource.js
index 03106c7ed9c..f4d21f037f8 100644
--- a/ui/new/scripts/cloud.core2.resource.js
+++ b/ui/new/scripts/cloud.core2.resource.js
@@ -12,7 +12,7 @@ function afterLoadResourceJSP() {
     var pageArray = [$zonePage, $podPage, $clusterPage, $hostPage, $primarystoragePage, $systemvmPage];
     var pageLabelArray = ["Zone", "Pod", "Cluster", "Host", "Primary Storage", "System VM"];
     
-    function showPage($pageToShow) {        
+    function showPage($pageToShow, jsonObj) {        
         for(var i=0; i<pageArray.length; i++) {
             if(pageArray[i].attr("id") == $pageToShow.attr("id")) {
                 $rightPanelHeaderLabel.text(pageLabelArray[i]);
@@ -21,7 +21,124 @@ function afterLoadResourceJSP() {
             else {
                 pageArray[i].hide();
             }
-        }            
+            $pageToShow.data("jsonObj", jsonObj);
+        }   
+        
+        if($pageToShow.attr("id") == "zone_page") {
+            //***** Add Pod (begin) *****
+            $("#midmenu_add_link").find("#label").text("Add Pod");  
+            $("#midmenu_add_link").data("jsonObj", jsonObj).show();   
+            $("#midmenu_add_link").unbind("click").bind("click", function(event) {    
+                var zoneObj = $(this).data("jsonObj");		
+		        $("#dialog_add_pod").find("#add_pod_zone_name").text(fromdb(zoneObj.name));
+		        $("#dialog_add_pod #add_pod_name, #dialog_add_pod #add_pod_cidr, #dialog_add_pod #add_pod_startip, #dialog_add_pod #add_pod_endip, #add_pod_gateway").val("");
+        		
+		        $("#dialog_add_pod")
+		        .dialog('option', 'buttons', { 				
+			        "Add": function() {		
+			            var thisDialog = $(this);
+        						
+				        // validate values
+				        var isValid = true;					
+				        isValid &= validateString("Name", thisDialog.find("#add_pod_name"), thisDialog.find("#add_pod_name_errormsg"));
+				        isValid &= validateCIDR("CIDR", thisDialog.find("#add_pod_cidr"), thisDialog.find("#add_pod_cidr_errormsg"));	
+				        isValid &= validateIp("Start IP Range", thisDialog.find("#add_pod_startip"), thisDialog.find("#add_pod_startip_errormsg"));  //required
+				        isValid &= validateIp("End IP Range", thisDialog.find("#add_pod_endip"), thisDialog.find("#add_pod_endip_errormsg"), true);  //optional
+				        isValid &= validateIp("Gateway", thisDialog.find("#add_pod_gateway"), thisDialog.find("#add_pod_gateway_errormsg"));  //required when creating
+				        if (!isValid) 
+				            return;			
+                        
+                        thisDialog.dialog("close"); 
+                          
+                        var name = trim(thisDialog.find("#add_pod_name").val());
+				        var cidr = trim(thisDialog.find("#add_pod_cidr").val());
+				        var startip = trim(thisDialog.find("#add_pod_startip").val());
+				        var endip = trim(thisDialog.find("#add_pod_endip").val());	    //optional
+				        var gateway = trim(thisDialog.find("#add_pod_gateway").val());			
+
+                        var array1 = [];
+                        array1.push("&zoneId="+zoneObj.id);
+                        array1.push("&name="+todb(name));
+                        array1.push("&cidr="+encodeURIComponent(cidr));
+                        array1.push("&startIp="+encodeURIComponent(startip));
+                        if (endip != null && endip.length > 0)
+                            array1.push("&endIp="+encodeURIComponent(endip));
+                        array1.push("&gateway="+encodeURIComponent(gateway));			
+        								    
+				        var template = $("#pod_template").clone(true);
+				        var loadingImg = template.find(".adding_loading");										
+				        var row_container = template.find("#row_container");        				
+				        $("#zone_" + zoneObj.id + " #zone_content").show();	
+				        $("#zone_" + zoneObj.id + " #pods_container").prepend(template.show());						
+				        $("#zone_" + zoneObj.id + " #zone_expand").removeClass().addClass("zonetree_openarrows");									            
+	                    loadingImg.show();  
+                        row_container.hide();             
+		                template.fadeIn("slow");
+        				
+				        $.ajax({
+				          data: createURL("command=createPod&response=json"+array1.join("")),
+					        dataType: "json",
+					        success: function(json) {
+						        var item = json.createpodresponse; 	
+					            podJSONToTreeNode(item, template);	
+						        loadingImg.hide(); 								                            
+                                row_container.show();
+                                
+                                forceLogout = false;  // We don't force a logout if pod(s) exit.
+						        if (forceLogout) {
+							        $("#dialog_confirmation")
+								        .html("<p>You have successfully added your first Zone and Pod.  After clicking 'OK', this UI will automatically refresh to give you access to the rest of cloud features.</p>")
+								        .dialog('option', 'buttons', { 
+									        "OK": function() { 											
+										        $(this).dialog("close");
+										        window.location.reload();
+									        } 
+								        }).dialog("open");
+						        }
+					        },
+				            error: function(XMLHttpResponse) {	
+				                handleError(XMLHttpResponse);			    
+					            template.slideUp("slow", function() {
+							        $(this).remove();
+						        });
+				            }
+				        });					
+			        }, 
+			        "Cancel": function() { 
+				        $(this).dialog("close"); 
+			        } 
+		        }).dialog("open");        
+                return false;
+            });            
+            //***** Add Pod (end) *****
+            
+            $("#midmenu_add2_link").unbind("click").hide();   
+        }
+        else if($pageToShow.attr("id") == "pod_page") {
+            //***** Add Host (begin) *****
+            $("#midmenu_add_link").find("#label").text("Add Host");  
+            $("#midmenu_add_link").data("jsonObj", jsonObj).show(); 
+            $("#midmenu_add_link").unbind("click").bind("click", function(event) {
+            
+                return false;
+            });
+            
+            //***** Add Host (end) *****
+             
+            //***** Add Primary Storage (begin) *****          
+            $("#midmenu_add2_link").find("#label").text("Add Primary Storage"); 
+            $("#midmenu_add2_link").data("jsonObj", jsonObj).show();   
+            $("#midmenu_add2_link").unbind("click").bind("click", function(event) {
+            
+                return false;
+            });     
+            
+            //***** Add Primary Storage (end) *****           
+        }      
+        else {
+            $("#midmenu_add_link").unbind("click").hide();              
+            $("#midmenu_add2_link").unbind("click").hide();   
+        }
     }
    
     //***** build zone tree (begin) ***********************************************************************************************
@@ -91,9 +208,9 @@ function afterLoadResourceJSP() {
         template.attr("id", "pod_" + podid);  
     	    
 		var ipRange = getIpRange(json.startip, json.endip);			
-		template.data("id", podid).data("name", json.name);
+		template.data("id", podid).data("name", fromdb(json.name));
 		
-		var podName = template.find("#pod_name").text(json.name);
+		var podName = template.find("#pod_name").text(fromdb(json.name));
 		podName.data("jsonObj", json);	    
 			
 	    $.ajax({
@@ -194,8 +311,8 @@ function afterLoadResourceJSP() {
 			case "zone_name":	
 			    $zoneetree1.find(".selected").removeClass("selected");
 			    target.parent().parent().parent().addClass("selected");				    
-			    showPage($zonePage);				    
-			    var jsonObj = target.data("jsonObj");    
+			    var jsonObj = target.data("jsonObj");  
+			    showPage($zonePage, jsonObj);
 			    zoneJsonToDetailsTab(jsonObj);
 			    zoneJsonToNetworkTab(jsonObj);							    		   			    
 			    break;
@@ -213,8 +330,8 @@ function afterLoadResourceJSP() {
 			case "pod_name" :			   
 				$zoneetree1.find(".selected").removeClass("selected");
 				target.parent().parent().parent().addClass("selected");
-				showPage($podPage);			    
 			    var jsonObj = target.data("jsonObj");
+			    showPage($podPage, jsonObj);		
 			    podJsonToDetailsTab(jsonObj);				
 				break;
 				
@@ -231,9 +348,9 @@ function afterLoadResourceJSP() {
 				break;		
 			case "cluster_name" :			   
 				$zoneetree1.find(".selected").removeClass("selected");
-			    target.parent().parent().parent().addClass("selected");
-			    showPage($clusterPage);
+			    target.parent().parent().parent().addClass("selected");			    
 			    var jsonObj = target.data("jsonObj");
+			    showPage($clusterPage, jsonObj);
 			    clusterJsonToDetailsTab(jsonObj);					
 				break;	
 				
@@ -250,9 +367,9 @@ function afterLoadResourceJSP() {
 				break;	
 			case "host_name" :			   
 				$zoneetree1.find(".selected").removeClass("selected");
-			    target.parent().parent().parent().addClass("selected");
-			    showPage($hostPage);
+			    target.parent().parent().parent().addClass("selected");			    
 				var jsonObj = target.data("jsonObj");
+				showPage($hostPage, jsonObj);
 				hostJsonToDetailsTab(jsonObj);				
 				break;	
 			
@@ -269,18 +386,18 @@ function afterLoadResourceJSP() {
 				break;	
 			case "primarystorage_name" :			   
 				$zoneetree1.find(".selected").removeClass("selected");
-			    target.parent().parent().parent().addClass("selected");
-			    showPage($primarystoragePage);
+			    target.parent().parent().parent().addClass("selected");			    
 			    var jsonObj = target.data("jsonObj");
+			    showPage($primarystoragePage, jsonObj);
 				primarystorageJsonToDetailsTab(jsonObj);					
 				break;
 						
 						
 			case "systemvm_name" :			   
 				$zoneetree1.find(".selected").removeClass("selected");			    		    
-			    target.parent().parent().parent().addClass("selected");		
-			    showPage($systemvmPage);
-			    var jsonObj = target.data("jsonObj");						
+			    target.parent().parent().parent().addClass("selected");	
+			    var jsonObj = target.data("jsonObj");	
+			    showPage($systemvmPage, jsonObj);					
 				systemvmJsonToDetailsTab(jsonObj);			
 				break;
 			
@@ -450,6 +567,7 @@ function afterLoadResourceJSP() {
 	
 	//dialogs	
 	initDialog("dialog_add_zone");
+	initDialog("dialog_add_pod", 320);
 	
 	//add button ***
 	$("#midmenu_add_link").find("#label").text("Add Zone");