new UI - volume page - implement create template action.

This commit is contained in:
Jessica Wang 2010-09-12 17:48:55 -07:00
parent ab66269038
commit f75b17383a
10 changed files with 128 additions and 56 deletions

View File

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

View File

@ -165,5 +165,54 @@
</div>
</div>
</div>
<!-- volume detail panel (end) -->
<!-- volume detail panel (end) -->
<!-- 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>

View File

@ -1,3 +1,7 @@
function afterLoadAccountJSP() {
}
function accountToMidmenu(jsonObj, $midmenuItem1, toRightPanelFn) {
$midmenuItem1.attr("id", ("midmenuItem_"+jsonObj.id));
$midmenuItem1.data("id", jsonObj.id);

View File

@ -1,3 +1,7 @@
function afterLoadAlertJSP() {
}
function alertToMidmenu(jsonObj, $midmenuItem1, toRightPanelFn) {
$midmenuItem1.attr("id", ("midmenuItem_"+jsonObj.id));
$midmenuItem1.data("id", jsonObj.id);

View File

@ -1,3 +1,7 @@
function afterLoadEventJSP() {
}
function eventToMidmenu(jsonObj, $midmenuItem1, toRightPanelFn) {
$midmenuItem1.attr("id", ("midmenuItem_"+jsonObj.id));
$midmenuItem1.data("id", jsonObj.id);

View File

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

View File

@ -1,3 +1,7 @@
function afterLoadIpJSP() {
}
function ipToMidmenu(jsonObj, $midmenuItem1, toRightPanelFn) {
$midmenuItem1.attr("id", ("midmenuItem_"+jsonObj.id));
$midmenuItem1.data("id", jsonObj.id);

View File

@ -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."));

View File

@ -1,3 +1,7 @@
function afterLoadSnapshotJSP() {
}
function snapshotToMidmenu(jsonObj, $midmenuItem1, toRightPanelFn) {
$midmenuItem1.attr("id", ("midmenuItem_"+jsonObj.id));
$midmenuItem1.data("id", jsonObj.id);

View File

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