new UI - volumes page - implement add volume action.

This commit is contained in:
Jessica Wang 2010-09-21 16:57:41 -07:00
parent 67cfa3582e
commit 57c099a647
4 changed files with 155 additions and 6 deletions

View File

@ -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) -->

View File

@ -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("&nbsp;");
}
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("&nbsp;");
}
//***** actions for middle menu (end) **************************************************************************

View File

@ -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', {

View File

@ -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) {