new UI - volumes page - implement add volume action.

ui/new/jsp/volume.jsp

@@ -532,4 +532,39 @@
         </div>
     </div>
 </div>
-<!-- Take Snapshots Dialog (end) -->
+<!-- Take Snapshots Dialog (end) -->
+
+<!-- Add Volume Dialog (begin) -->
+<div id="dialog_add_volume" title="Add Volume" style="display: none">
+    <p>
+        Please fill in the following data to add a new volume.</p>
+    <div class="dialog_formcontent">
+        <form action="#" method="post" id="form2">
+        <ol>
+            <li>
+                <label for="add_volume_name">
+                    Name:</label>
+                <input class="text" type="text" name="add_volume_name" id="add_volume_name" />
+                <div id="add_volume_name_errormsg" class="dialog_formcontent_errormsg" style="display: none;">
+                </div>
+            </li>
+            <li>
+                <label for="volume_zone">
+                    Availability Zone:</label>
+                <select class="select" name="volume_zone" id="volume_zone">
+                    <option value="default">Please wait...</option>
+                </select>
+            </li>
+            <li>
+                <label for="volume_diskoffering">
+                    Disk Offering:</label>
+                <select class="select" name="volume_diskoffering" id="volume_diskoffering">
+                    <option value="default">Please wait...</option>
+                </select>
+            </li>
+        </ol>
+        </form>
+    </div>
+</div>
+<!-- Add Volume Dialog (end) -->
+

ui/new/scripts/cloud.core2.js

@@ -349,8 +349,20 @@ function handleErrorInMidMenu(XMLHttpResponse, $midmenuItem1) {
     if(errorMsg.length > 0) 
         $midmenuItem1.find("#second_row").text(fromdb(errorMsg));   
     else
-        $midmenuItem1.find("#second_row").text("");     
+        $midmenuItem1.find("#second_row").html(" ");     
-}       	                
+}  
+
+function handleAsyncJobFailInMidMenu(errorMsg, $midmenuItem1) { 
+    $midmenuItem1.find("#content").removeClass("inaction");
+	$midmenuItem1.find("#spinning_wheel").hide();	
+	$midmenuItem1.find("#info_icon").addClass("error").show();		
+	$midmenuItem1.find("#first_row").text("Adding failed");			                       
+    
+    if(errorMsg.length > 0) 
+        $midmenuItem1.find("#second_row").text(fromdb(errorMsg));   
+    else
+        $midmenuItem1.find("#second_row").html(" ");   
+}       	     	                
 //***** actions for middle menu (end) **************************************************************************
 
 

ui/new/scripts/cloud.core2.template.js

@@ -16,8 +16,8 @@ function afterLoadTemplateJSP() {
 	else
 	    $("#dialog_add_template #add_template_featured_container, #dialog_edit_template #edit_template_featured_container").hide();		
 	
-    $("#midmenu_add_link").show(); 
+	//add button ***
-    
+    $("#midmenu_add_link").show();     
     $("#midmenu_add_link").unbind("click").bind("click", function(event) {        
         $("#dialog_add_template")
 		.dialog('option', 'buttons', { 				

ui/new/scripts/cloud.core2.volume.js

@@ -16,7 +16,12 @@ function afterLoadVolumeJSP() {
 	    modal: true,
 	    zIndex: 2000
     }));
-	    
+	activateDialog($("#dialog_add_volume").dialog({ 
+	    autoOpen: false,
+	    modal: true,
+	    zIndex: 2000
+    }));	
+	        
     $.ajax({
         data: createURL("command=listOsTypes"),
 	    dataType: "json",
@@ -30,6 +35,103 @@ function afterLoadVolumeJSP() {
 		    }	
 	    }
     });   
+     
+    $.ajax({
+        data: createURL("command=listZones&available=true"+maxPageSize),
+	    dataType: "json",
+	    success: function(json) {
+		    var zones = json.listzonesresponse.zone;
+		    var volumeZoneSelect = $("#dialog_add_volume").find("#volume_zone").empty();			
+		    if (zones != null && zones.length > 0) {
+		        for (var i = 0; i < zones.length; i++) {
+			        volumeZoneSelect.append("<option value='" + zones[i].id + "'>" + sanitizeXSS(zones[i].name) + "</option>"); 
+		        }
+		    }				
+	    }
+	});	
+	
+	$.ajax({
+        data: createURL("command=listDiskOfferings"),
+	    dataType: "json",
+	    success: function(json) {			    
+	        var offerings = json.listdiskofferingsresponse.diskoffering;								
+		    var volumeDiskOfferingSelect = $("#dialog_add_volume").find("#volume_diskoffering").empty();	
+		    if (offerings != null && offerings.length > 0) {								
+		        if (offerings != null && offerings.length > 0) {
+		            for (var i = 0; i < offerings.length; i++) 				
+			            volumeDiskOfferingSelect.append("<option value='" + offerings[i].id + "'>" + sanitizeXSS(offerings[i].displaytext) + "</option>"); 		
+			    }	
+			}	
+	    }
+    });	     
+      
+    //add button ***
+    $("#midmenu_add_link").show();     
+    $("#midmenu_add_link").unbind("click").bind("click", function(event) {   
+        $("#dialog_add_volume")
+	    .dialog('option', 'buttons', { 			    
+		    "Add": function() { 
+		        var thisDialog = $(this);
+		    			            										
+		        // validate values							
+			    var isValid = true;									
+			    isValid &= validateString("Name", thisDialog.find("#add_volume_name"), thisDialog.find("#add_volume_name_errormsg"));					
+			    if (!isValid) return;
+			    
+			    thisDialog.dialog("close");		
+				
+				var name = trim(thisDialog.find("#add_volume_name").val());					
+			    var zoneId = thisDialog.find("#volume_zone").val();					    				
+			    var diskofferingId = thisDialog.find("#volume_diskoffering").val();	
+				
+				var $midmenuItem1 = beforeAddingMidMenuItem() ;
+				    					
+			    $.ajax({
+				    data: createURL("command=createVolume&zoneId="+zoneId+"&name="+encodeURIComponent(name)+"&diskOfferingId="+diskofferingId+"&accountId="+"1"), 
+				    dataType: "json",
+				    success: function(json) {						        
+				        var jobId = json.createvolumeresponse.jobid;				        
+				        var timerKey = "createVolumeJob_"+jobId;
+							    
+				        $("body").everyTime(2000, timerKey, function() {
+						    $.ajax({
+							    data: createURL("command=queryAsyncJobResult&jobId="+json.createvolumeresponse.jobid),
+							    dataType: "json",
+							    success: function(json) {										       						   
+								    var result = json.queryasyncjobresultresponse;
+								    if (result.jobstatus == 0) {
+									    return; //Job has not completed
+								    } else {											    
+									    $("body").stopTime(timerKey);
+									    if (result.jobstatus == 1) {
+										    // Succeeded										   
+										    volumeToMidmenu(result.volume[0], $midmenuItem1);
+						                    bindClickToMidMenu($midmenuItem1, volumeToRigntPanel);  
+						                    afterAddingMidMenuItem($midmenuItem1, true);	         
+									    } else if (result.jobstatus == 2) {
+									        handleAsyncJobFailInMidMenu(result.jobresult, $midmenuItem1);											   				    
+									    }
+								    }
+							    },
+							    error: function(XMLHttpResponse) {
+								    $("body").stopTime(timerKey);
+								    handleErrorInMidMenu(XMLHttpResponse, $midmenuItem1);	
+							    }
+						    });
+					    }, 0);						    					
+				    },
+				    error: function(XMLHttpResponse) {							    
+						handleErrorInMidMenu(XMLHttpResponse, $midmenuItem1);	
+				    }
+			    });
+		    }, 
+		    "Cancel": function() { 				        				        
+			    $(this).dialog("close"); 
+		    } 
+	    }).dialog("open");
+	    
+        return false;
+    });  
        
     // *** recurring snapshot dialog - event binding (begin) ******************************		
 	$("#dialog_recurring_snapshot").bind("click", function(event) {