From f75b17383af0aceda265d840bf772967b312101c Mon Sep 17 00:00:00 2001
From: Jessica Wang <jessica@cloud.com>
Date: Sun, 12 Sep 2010 17:48:55 -0700
Subject: [PATCH] new UI - volume page - implement create template action.

---
 ui/new/jsp/instance.jsp                 | 20 ----------
 ui/new/jsp/volume.jsp                   | 51 +++++++++++++++++++++++-
 ui/new/scripts/cloud.core2.account.js   |  4 ++
 ui/new/scripts/cloud.core2.alert.js     |  4 ++
 ui/new/scripts/cloud.core2.event.js     |  4 ++
 ui/new/scripts/cloud.core2.init.js      | 53 +++++++++++++------------
 ui/new/scripts/cloud.core2.ipaddress.js |  4 ++
 ui/new/scripts/cloud.core2.js           |  8 ++--
 ui/new/scripts/cloud.core2.snapshot.js  |  4 ++
 ui/new/scripts/cloud.core2.volume.js    | 32 ++++++++++++---
 10 files changed, 128 insertions(+), 56 deletions(-)

diff --git a/ui/new/jsp/instance.jsp b/ui/new/jsp/instance.jsp
index 18163f88c36..b8456bcc2f9 100644
--- a/ui/new/jsp/instance.jsp
+++ b/ui/new/jsp/instance.jsp
@@ -870,24 +870,4 @@
         </ol>
         </form>
     </div>
-</div>
-<!-- Detach Volume Dialog (begin) -->
-<div id="dialog_detach_volume" title="Detach Volume" style="display: none">
-    <p>
-        Please confirm you want to detach the volume</p>
-    <div class="dialog_formcontent">
-        <div class="selectable_errorbox" style="display: none; width: 250px">
-            <p>
-                <span style="font-style: bold; color: red"><strong>Error</strong>: </span><span id="apply_error_text">
-                    Error text will appear here</span>
-            </p>
-        </div>
-        <div class="selectable_commentbox" style="display: none; width: 250px">
-            <div class="selectable_loader">
-            </div>
-            <p>
-                <strong>Please wait...</strong>
-            </p>
-        </div>
-    </div>
 </div>
\ No newline at end of file
diff --git a/ui/new/jsp/volume.jsp b/ui/new/jsp/volume.jsp
index dc30712f739..729bb5779b0 100644
--- a/ui/new/jsp/volume.jsp
+++ b/ui/new/jsp/volume.jsp
@@ -165,5 +165,54 @@
         </div>           
     </div>
 </div>
+<!-- volume detail panel (end) -->
 
-<!-- volume detail panel (end) -->
\ No newline at end of file
+<!-- Create Template Dialog -->
+<div id="dialog_create_template" title="Create Template" style="display:none">
+    <p>
+        Please specify the following information before creating a template of your disk
+        volume: <b><span id="volume_name"></span></b>. Creating a template could take up
+        to several hours depending on the size of your disk volume.</p>
+    <div class="dialog_formcontent">
+        <form action="#" method="post" id="form_acquire">
+        <ol>
+            <li>
+                <label for="user_name">
+                    Name:</label>
+                <input class="text" type="text" name="create_template_name" id="create_template_name" />
+                <div id="create_template_name_errormsg" class="dialog_formcontent_errormsg" style="display: none;">
+                </div>
+            </li>
+            <li>
+                <label for="user_name">
+                    Display Text:</label>
+                <input class="text" type="text" name="create_template_desc" id="create_template_desc" />
+                <div id="create_template_desc_errormsg" class="dialog_formcontent_errormsg" style="display: none;">
+                </div>
+            </li>
+            <li>
+                <label for="create_template_os_type">
+                    OS Type:</label>
+                <select class="select" name="create_template_os_type" id="create_template_os_type">
+                </select>
+            </li>
+            <li>
+                <label for="create_template_public">
+                    Public:</label>
+                <select class="select" name="create_template_public" id="create_template_public">                    
+                    <option value="false">No</option>
+                    <option value="true">Yes</option>
+                </select>
+            </li>
+            <li>
+                <label for="user_name">
+                    Password Enabled?:</label>
+                <select class="select" name="create_template_password" id="create_template_password">                    
+                    <option value="false">No</option>
+                    <option value="true">Yes</option>
+                </select>
+            </li>
+        </ol>
+        </form>
+    </div>
+</div>
\ No newline at end of file
diff --git a/ui/new/scripts/cloud.core2.account.js b/ui/new/scripts/cloud.core2.account.js
index ec9044531c5..1b5db3800a8 100644
--- a/ui/new/scripts/cloud.core2.account.js
+++ b/ui/new/scripts/cloud.core2.account.js
@@ -1,3 +1,7 @@
+function afterLoadAccountJSP() {
+
+}
+
 function accountToMidmenu(jsonObj, $midmenuItem1, toRightPanelFn) {  
     $midmenuItem1.attr("id", ("midmenuItem_"+jsonObj.id));                             
     $midmenuItem1.data("id", jsonObj.id); 
diff --git a/ui/new/scripts/cloud.core2.alert.js b/ui/new/scripts/cloud.core2.alert.js
index 04ede572047..46e2d5756c6 100644
--- a/ui/new/scripts/cloud.core2.alert.js
+++ b/ui/new/scripts/cloud.core2.alert.js
@@ -1,3 +1,7 @@
+function afterLoadAlertJSP() {
+
+}
+
 function alertToMidmenu(jsonObj, $midmenuItem1, toRightPanelFn) {      
     $midmenuItem1.attr("id", ("midmenuItem_"+jsonObj.id));                             
     $midmenuItem1.data("id", jsonObj.id); 
diff --git a/ui/new/scripts/cloud.core2.event.js b/ui/new/scripts/cloud.core2.event.js
index d5bac6ebabf..b3d86a66e0e 100644
--- a/ui/new/scripts/cloud.core2.event.js
+++ b/ui/new/scripts/cloud.core2.event.js
@@ -1,3 +1,7 @@
+function afterLoadEventJSP() {
+
+}
+
 function eventToMidmenu(jsonObj, $midmenuItem1, toRightPanelFn) {
     $midmenuItem1.attr("id", ("midmenuItem_"+jsonObj.id));                             
     $midmenuItem1.data("id", jsonObj.id); 
diff --git a/ui/new/scripts/cloud.core2.init.js b/ui/new/scripts/cloud.core2.init.js
index 38bce04dbb1..eca3254d4e1 100644
--- a/ui/new/scripts/cloud.core2.init.js
+++ b/ui/new/scripts/cloud.core2.init.js
@@ -58,37 +58,38 @@ $(document).ready(function() {
     }
     
     var $midmenuItem = $("#midmenu_item");
-    function listMidMenuItems(leftmenuId, apiName, jsonResponse1, jsonResponse2, rightPanelJSP, toMidmenu, toRightPanel) { 
+    function listMidMenuItems(leftmenuId, apiName, jsonResponse1, jsonResponse2, rightPanelJSP, afterLoadRightPanelJSP, toMidmenu, toRightPanel) { 
         $("#"+leftmenuId).bind("click", function(event) {
-            $("#right_panel").load(rightPanelJSP);           
-            $.ajax({
-	            cache: false,
-	            data: createURL("command="+apiName+"&pagesize="+midmenuItemCount),
-	            dataType: "json",
-	            success: function(json) {	
-	                $("#midmenu_container").empty();
-	                selectedItemsInMidMenu = {};
-	                
-	                var items = json[jsonResponse1][jsonResponse2];
-	                if(items != null && items.length > 0) {
-	                    for(var i=0; i<items.length;i++) { 
-                            var $midmenuItem1 = $midmenuItem.clone();                               
-                            toMidmenu(items[i], $midmenuItem1, toRightPanel);                             
-                            $("#midmenu_container").append($midmenuItem1.show());                            
+            $("#right_panel").load(rightPanelJSP, function(){   
+                afterLoadRightPanelJSP();
+                $.ajax({
+	                cache: false,
+	                data: createURL("command="+apiName+"&pagesize="+midmenuItemCount),
+	                dataType: "json",
+	                success: function(json) {	
+	                    $("#midmenu_container").empty();
+	                    selectedItemsInMidMenu = {};
+    	                
+	                    var items = json[jsonResponse1][jsonResponse2];
+	                    if(items != null && items.length > 0) {
+	                        for(var i=0; i<items.length;i++) { 
+                                var $midmenuItem1 = $midmenuItem.clone();                               
+                                toMidmenu(items[i], $midmenuItem1, toRightPanel);                             
+                                $("#midmenu_container").append($midmenuItem1.show());                            
+                            }  
                         }  
-                    }  
-	            }
-		    });	
-		   
+	                }
+		        });	 
+            });     
             return false;
         });
     }
-    listMidMenuItems("leftmenu_event", "listEvents", "listeventsresponse", "event", "jsp/event.jsp", eventToMidmenu, eventToRigntPanel);
-    listMidMenuItems("leftmenu_alert", "listAlerts", "listalertsresponse", "alert", "jsp/alert.jsp", alertToMidmenu, alertToRigntPanel);
-    listMidMenuItems("leftmenu_account", "listAccounts", "listaccountsresponse", "account", "jsp/account.jsp", accountToMidmenu, accountToRigntPanel);
-    listMidMenuItems("leftmenu_volume", "listVolumes", "listvolumesresponse", "volume", "jsp/volume.jsp", volumeToMidmenu, volumeToRigntPanel);
-    listMidMenuItems("leftmenu_snapshot", "listSnapshots", "listsnapshotsresponse", "snapshot", "jsp/snapshot.jsp", snapshotToMidmenu, snapshotToRigntPanel);
-    listMidMenuItems("leftmenu_ip", "listPublicIpAddresses", "listpublicipaddressesresponse", "publicipaddress", "jsp/ip_address.jsp", ipToMidmenu, ipToRigntPanel);
+    listMidMenuItems("leftmenu_event", "listEvents", "listeventsresponse", "event", "jsp/event.jsp", afterLoadEventJSP, eventToMidmenu, eventToRigntPanel);
+    listMidMenuItems("leftmenu_alert", "listAlerts", "listalertsresponse", "alert", "jsp/alert.jsp", afterLoadAlertJSP, alertToMidmenu, alertToRigntPanel);
+    listMidMenuItems("leftmenu_account", "listAccounts", "listaccountsresponse", "account", "jsp/account.jsp", afterLoadAccountJSP, accountToMidmenu, accountToRigntPanel);
+    listMidMenuItems("leftmenu_volume", "listVolumes", "listvolumesresponse", "volume", "jsp/volume.jsp", afterLoadVolumeJSP, volumeToMidmenu, volumeToRigntPanel);
+    listMidMenuItems("leftmenu_snapshot", "listSnapshots", "listsnapshotsresponse", "snapshot", "jsp/snapshot.jsp", afterLoadSnapshotJSP, snapshotToMidmenu, snapshotToRigntPanel);
+    listMidMenuItems("leftmenu_ip", "listPublicIpAddresses", "listpublicipaddressesresponse", "publicipaddress", afterLoadIpJSP, "jsp/ip_address.jsp", ipToMidmenu, ipToRigntPanel);
     
        
     $("#action_link").bind("mouseover", function(event) {
diff --git a/ui/new/scripts/cloud.core2.ipaddress.js b/ui/new/scripts/cloud.core2.ipaddress.js
index b21ee722d02..4688110ba1b 100644
--- a/ui/new/scripts/cloud.core2.ipaddress.js
+++ b/ui/new/scripts/cloud.core2.ipaddress.js
@@ -1,3 +1,7 @@
+function afterLoadIpJSP() {
+
+}
+
 function ipToMidmenu(jsonObj, $midmenuItem1, toRightPanelFn) {    
     $midmenuItem1.attr("id", ("midmenuItem_"+jsonObj.id));                             
     $midmenuItem1.data("id", jsonObj.id); 
diff --git a/ui/new/scripts/cloud.core2.js b/ui/new/scripts/cloud.core2.js
index 3373e543b6c..5ecdf96bb6d 100644
--- a/ui/new/scripts/cloud.core2.js
+++ b/ui/new/scripts/cloud.core2.js
@@ -213,8 +213,7 @@ function buildActionLinkForSingleObject(label, actionMap, $actionMenu, listAPIMa
     });  
 } 
 
-function doActionToSingleObject(id, $actionLink, apiCommand, listAPIMap, $singleObject) {   
-    //debugger;
+function doActionToSingleObject(id, $actionLink, apiCommand, listAPIMap, $singleObject) {       
     var label = $actionLink.data("label");	
     var inProcessText = $actionLink.data("inProcessText");		           
     var isAsyncJob = $actionLink.data("isAsyncJob");
@@ -223,7 +222,8 @@ function doActionToSingleObject(id, $actionLink, apiCommand, listAPIMap, $single
     var listAPI = listAPIMap["listAPI"];
     var listAPIResponse = listAPIMap["listAPIResponse"];
     var listAPIResponseObj = listAPIMap["listAPIResponseObj"];
-          
+    
+    //debugger;      
     var $spinningWheel = $singleObject.find("#spinning_wheel");
     $spinningWheel.find("#description").text(inProcessText);  
     $spinningWheel.show();        
@@ -250,7 +250,7 @@ function doActionToSingleObject(id, $actionLink, apiCommand, listAPIMap, $single
 		                        if (result.jobstatus == 0) {
 			                        return; //Job has not completed
 		                        } else {											                    
-			                        $("body").stopTime(timerKey);	
+			                        $("body").stopTime(timerKey);				                        
 			                        $spinningWheel.hide();      		                       
 			                        if (result.jobstatus == 1) { // Succeeded 
 			                            $singleObject.data("afterActionInfo", (label + " action succeeded.")); 
diff --git a/ui/new/scripts/cloud.core2.snapshot.js b/ui/new/scripts/cloud.core2.snapshot.js
index 3ac7e35793c..4c85406c9ac 100644
--- a/ui/new/scripts/cloud.core2.snapshot.js
+++ b/ui/new/scripts/cloud.core2.snapshot.js
@@ -1,3 +1,7 @@
+function afterLoadSnapshotJSP() {
+
+}
+
 function snapshotToMidmenu(jsonObj, $midmenuItem1, toRightPanelFn) {  
     $midmenuItem1.attr("id", ("midmenuItem_"+jsonObj.id));                             
     $midmenuItem1.data("id", jsonObj.id); 
diff --git a/ui/new/scripts/cloud.core2.volume.js b/ui/new/scripts/cloud.core2.volume.js
index d70c075c37a..923e7d15d86 100644
--- a/ui/new/scripts/cloud.core2.volume.js
+++ b/ui/new/scripts/cloud.core2.volume.js
@@ -1,3 +1,27 @@
+function afterLoadVolumeJSP() {
+    activateDialog($("#dialog_create_template").dialog({
+        width: 400,
+        autoOpen: false,
+        modal: true,
+        zIndex: 2000
+    }));
+    
+    
+    $.ajax({
+        data: createURL("command=listOsTypes&response=json"),
+	    dataType: "json",
+	    success: function(json) {
+		    types = json.listostypesresponse.ostype;
+		    if (types != null && types.length > 0) {
+			    var select = $("#dialog_create_template #create_template_os_type").empty();
+			    for (var i = 0; i < types.length; i++) {
+				    select.append("<option value='" + types[i].id + "'>" + types[i].description + "</option>");
+			    }
+		    }	
+	    }
+    });
+}
+
 function volumeToMidmenu(jsonObj, $midmenuItem1, toRightPanelFn) {  
     $midmenuItem1.attr("id", ("midmenuItem_"+jsonObj.id));                             
     $midmenuItem1.data("id", jsonObj.id); 
@@ -101,11 +125,9 @@ function doCreateTemplate($actionLink, listAPIMap, $singleObject) {
 			var isPublic = thisDialog.find("#create_template_public").val();
             var password = thisDialog.find("#create_template_password").val();				
 			
-			var id = $singleObject.data("id");
-			//for(var id in selectedItemIds) {
-			    var apiCommand = "command=createTemplate&volumeId="+id+"&name="+encodeURIComponent(name)+"&displayText="+encodeURIComponent(desc)+"&osTypeId="+osType+"&isPublic="+isPublic+"&passwordEnabled="+password;
-			    doActionToSingleObject(id, $actionLink, apiCommand, listAPIMap, $singleObject);	
-			//}		
+			var id = $singleObject.data("jsonObj").id;			
+			var apiCommand = "command=createTemplate&volumeId="+id+"&name="+encodeURIComponent(name)+"&displayText="+encodeURIComponent(desc)+"&osTypeId="+osType+"&isPublic="+isPublic+"&passwordEnabled="+password;
+	    	doActionToSingleObject(id, $actionLink, apiCommand, listAPIMap, $singleObject);					
 		}, 
 		"Cancel": function() { 
 			$(this).dialog("close");