mirror of
https://github.com/apache/cloudstack.git
synced 2025-11-04 00:02:37 +01:00
new UI - domain page - implement update resource limits. Make right panel editable when clicking edit button instead of pop up dialog box.
This commit is contained in:
Jessica Wang
parent
319d4f1aa0
commit
7c247b2fa8
@ -22,31 +22,12 @@
|
||||
</p>
|
||||
</div>
|
||||
<div class="tabbox" style="margin-top: 15px;">
|
||||
<div class="content_tabs on">
|
||||
<div class="content_tabs on" id="tab_details">
|
||||
<%=t.t("Details")%></div>
|
||||
<div class="content_tabs off" id="tab_resource_limits">
|
||||
<%=t.t("Resource.Limits")%></div>
|
||||
</div>
|
||||
<div id="tab_content_details">
|
||||
<div class="grid_actionpanel">
|
||||
<div class="grid_actionbox" id="action_link">
|
||||
<div class="grid_actionsdropdown_box" id="action_menu" style="display: none;">
|
||||
<ul class="actionsdropdown_boxlist" id="action_list">
|
||||
<!--
|
||||
<li> <a href="#"> Delete </a> </li>
|
||||
<li> <a href="#"> Attach Disk </a> </li>
|
||||
-->
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid_editbox">
|
||||
</div>
|
||||
<div class="gridheader_loaderbox" id="spinning_wheel" style="border: 1px solid #999;
|
||||
display: none;">
|
||||
<div class="gridheader_loader" id="icon">
|
||||
</div>
|
||||
<p id="description">
|
||||
Detaching Disk …</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid_container">
|
||||
<div class="grid_rows odd">
|
||||
<div class="grid_row_cell" style="width: 20%;">
|
||||
@ -100,6 +81,87 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="tab_content_resource_limits" style="display:none">
|
||||
<div class="grid_actionpanel">
|
||||
<div class="grid_editbox" id="edit_button">
|
||||
</div>
|
||||
<div class="gridheader_loaderbox" id="spinning_wheel" style="border: 1px solid #999;
|
||||
display: none;">
|
||||
<div class="gridheader_loader" id="Div1">
|
||||
</div>
|
||||
<p id="description">
|
||||
Updating Resource Limits.... …</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid_container">
|
||||
<div class="grid_rows even">
|
||||
<div class="grid_row_cell" style="width: 20%;">
|
||||
<div class="row_celltitles">
|
||||
<%=t.t("Instance.Limit")%>:</div>
|
||||
</div>
|
||||
<div class="grid_row_cell" style="width: 79%;">
|
||||
<div class="row_celltitles" id="limits_vm">
|
||||
</div>
|
||||
<input class="text" id="limits_vm_edit" value="-1" style="width: 200px; display: none;" type="text" />
|
||||
<div id="limits_vm_edit_errormsg" style="display:none"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid_rows even">
|
||||
<div class="grid_row_cell" style="width: 20%;">
|
||||
<div class="row_celltitles">
|
||||
<%=t.t("Public.IP.Limit")%>:</div>
|
||||
</div>
|
||||
<div class="grid_row_cell" style="width: 79%;">
|
||||
<div class="row_celltitles" id="limits_ip">
|
||||
</div>
|
||||
<input class="text" id="limits_ip_edit" value="-1" style="width: 200px; display: none;" type="text" />
|
||||
<div id="limits_ip_edit_errormsg" style="display:none"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid_rows even">
|
||||
<div class="grid_row_cell" style="width: 20%;">
|
||||
<div class="row_celltitles">
|
||||
<%=t.t("Disk.Volume.Limit")%>:</div>
|
||||
</div>
|
||||
<div class="grid_row_cell" style="width: 79%;">
|
||||
<div class="row_celltitles" id="limits_volume">
|
||||
</div>
|
||||
<input class="text" id="limits_volume_edit" value="-1" style="width: 200px; display: none;" type="text" />
|
||||
<div id="limits_volume_edit_errormsg" style="display:none"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid_rows even">
|
||||
<div class="grid_row_cell" style="width: 20%;">
|
||||
<div class="row_celltitles">
|
||||
<%=t.t("Snapshot.Limit")%>:</div>
|
||||
</div>
|
||||
<div class="grid_row_cell" style="width: 79%;">
|
||||
<div class="row_celltitles" id="limits_snapshot">
|
||||
</div>
|
||||
<input class="text" id="limits_snapshot_edit" value="-1" style="width: 200px; display: none;" type="text" />
|
||||
<div id="limits_snapshot_edit_errormsg" style="display:none"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid_rows even">
|
||||
<div class="grid_row_cell" style="width: 20%;">
|
||||
<div class="row_celltitles">
|
||||
<%=t.t("Template.Limit")%>:</div>
|
||||
</div>
|
||||
<div class="grid_row_cell" style="width: 79%;">
|
||||
<div class="row_celltitles" id="limits_template">
|
||||
</div>
|
||||
<input class="text" id="limits_template_edit" value="-1" style="width: 200px; display: none;" type="text" />
|
||||
<div id="limits_template_edit_errormsg" style="display:none"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid_botactionpanel">
|
||||
<div class="gridbot_buttons" id="save_button" style="display:none;">Save</div>
|
||||
<div class="gridbot_buttons" id="cancel_button" style="display:none;">Cancel</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- domain detail panel (end) -->
|
||||
|
||||
|
||||
@ -22,6 +22,9 @@ function afterLoadDomainJSP() {
|
||||
var childParentMap = {}; //map childDomainId to parentDomainId
|
||||
var domainIdNameMap = {}; //map domainId to domainName
|
||||
|
||||
var $detailsTab = $("#right_panel_content #tab_content_details");
|
||||
var $resourceLimitsTab = $("#right_panel_content #tab_content_resource_limits");
|
||||
|
||||
/*
|
||||
activateDialog($("#dialog_resource_limits").dialog({
|
||||
autoOpen: false,
|
||||
@ -87,11 +90,12 @@ function afterLoadDomainJSP() {
|
||||
template.find("#grid_row_cell2").text(json.name);
|
||||
}
|
||||
|
||||
function updateResourceLimit(domainId, type, max) {
|
||||
function updateResourceLimit(domainId, type, max, $readonlyField) {
|
||||
$.ajax({
|
||||
data: createURL("command=updateResourceLimit&domainid="+domainId+"&resourceType="+type+"&max="+max),
|
||||
dataType: "json",
|
||||
success: function(json) {
|
||||
$readonlyField.text(max);
|
||||
}
|
||||
});
|
||||
}
|
||||
@ -135,7 +139,6 @@ function afterLoadDomainJSP() {
|
||||
clickExpandIcon(domainId);
|
||||
}
|
||||
else if(action.indexOf("domain_name")!=-1) {
|
||||
var $detailsTab = $("#right_panel_content #tab_content_details");
|
||||
$detailsTab.data("jsonObj", jsonObj);
|
||||
$detailsTab.find("#id").text(domainId);
|
||||
$detailsTab.find("#name").text(domainName);
|
||||
@ -204,13 +207,14 @@ function afterLoadDomainJSP() {
|
||||
});
|
||||
|
||||
if (isAdmin() || (isDomainAdmin() && (g_domainid != domainId))) {
|
||||
$("#limits_container").show();
|
||||
/*
|
||||
$("#account_resource_limits").data("domainId", domainId).unbind("click").bind("click", function() {
|
||||
var domainId = $(this).data("domainId");
|
||||
$("#tab_resource_limits").show();
|
||||
|
||||
//???
|
||||
//$("#account_resource_limits").data("domainId", domainId).unbind("click").bind("click", function() {
|
||||
//debugger;
|
||||
$.ajax({
|
||||
cache: false,
|
||||
data: createURL("command=listResourceLimits&domainid="+domainId+"&response=json"),
|
||||
data: createURL("command=listResourceLimits&domainid="+domainId+"&response=json"),
|
||||
dataType: "json",
|
||||
success: function(json) {
|
||||
var limits = json.listresourcelimitsresponse.resourcelimit;
|
||||
@ -221,27 +225,34 @@ function afterLoadDomainJSP() {
|
||||
switch (limit.resourcetype) {
|
||||
case "0":
|
||||
preInstanceLimit = limit.max;
|
||||
$("#dialog_resource_limits #limits_vm").val(limit.max);
|
||||
$resourceLimitsTab.find("#limits_vm").text(preInstanceLimit);
|
||||
$resourceLimitsTab.find("#limits_vm_edit").val(preInstanceLimit);
|
||||
break;
|
||||
case "1":
|
||||
preIpLimit = limit.max;
|
||||
$("#dialog_resource_limits #limits_ip").val(limit.max);
|
||||
$resourceLimitsTab.find("#limits_ip").text(preIpLimit);
|
||||
$resourceLimitsTab.find("#limits_ip_edit").val(preIpLimit);
|
||||
break;
|
||||
case "2":
|
||||
preDiskLimit = limit.max;
|
||||
$("#dialog_resource_limits #limits_volume").val(limit.max);
|
||||
$resourceLimitsTab.find("#limits_volume").text(preDiskLimit);
|
||||
$resourceLimitsTab.find("#limits_volume_edit").val(preDiskLimit);
|
||||
break;
|
||||
case "3":
|
||||
preSnapshotLimit = limit.max;
|
||||
$("#dialog_resource_limits #limits_snapshot").val(limit.max);
|
||||
$resourceLimitsTab.find("#limits_snapshot").text(preSnapshotLimit);
|
||||
$resourceLimitsTab.find("#limits_snapshot_edit").val(preSnapshotLimit);
|
||||
break;
|
||||
case "4":
|
||||
preTemplateLimit = limit.max;
|
||||
$("#dialog_resource_limits #limits_template").val(limit.max);
|
||||
$resourceLimitsTab.find("#limits_template").text(preTemplateLimit);
|
||||
$resourceLimitsTab.find("#limits_template_edit").val(preTemplateLimit);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
$("#dialog_resource_limits")
|
||||
.dialog('option', 'buttons', {
|
||||
"Save": function() {
|
||||
@ -281,13 +292,18 @@ function afterLoadDomainJSP() {
|
||||
$(this).dialog("close");
|
||||
}
|
||||
}).dialog("open");
|
||||
*/
|
||||
|
||||
|
||||
}
|
||||
});
|
||||
return false;
|
||||
});
|
||||
*/
|
||||
//return false;
|
||||
//});
|
||||
//???
|
||||
|
||||
|
||||
} else {
|
||||
$("#limits_container").hide();
|
||||
$("#tab_resource_limits").hide();
|
||||
}
|
||||
|
||||
rightPanelDetailContent.show();
|
||||
@ -401,4 +417,62 @@ function afterLoadDomainJSP() {
|
||||
}
|
||||
|
||||
refreshWholeTree(defaultRootDomainId, defaultRootLevel);
|
||||
|
||||
//***** switch to different tab (begin) ********************************************************************
|
||||
$("#tab_details").bind("click", function(event){
|
||||
$(this).removeClass("off").addClass("on");
|
||||
$("#tab_resource_limits").removeClass("on").addClass("off");
|
||||
$("#tab_content_details").show();
|
||||
$("#tab_content_resource_limits").hide();
|
||||
return false;
|
||||
});
|
||||
|
||||
$("#tab_resource_limits").bind("click", function(event){
|
||||
$(this).removeClass("off").addClass("on");
|
||||
$("#tab_details").removeClass("on").addClass("off");
|
||||
$("#tab_content_resource_limits").show();
|
||||
$("#tab_content_details").hide();
|
||||
return false;
|
||||
});
|
||||
//***** switch to different tab (end) **********************************************************************
|
||||
|
||||
//edit button ***
|
||||
var $readonlyFields = $resourceLimitsTab.find("#limits_vm, #limits_ip, #limits_volume, #limits_snapshot, #limits_template");
|
||||
var $editFields = $resourceLimitsTab.find("#limits_vm_edit, #limits_ip_edit, #limits_volume_edit, #limits_snapshot_edit, #limits_template_edit");
|
||||
initializeEditFunction($readonlyFields, $editFields, doUpdateResourceLimits);
|
||||
|
||||
function doUpdateResourceLimits() {
|
||||
var isValid = true;
|
||||
isValid &= validateNumber("Instance Limit", $resourceLimitsTab.find("#limits_vm_edit"), $resourceLimitsTab.find("#limits_vm_edit_errormsg"), -1, 32000, false);
|
||||
isValid &= validateNumber("Public IP Limit", $resourceLimitsTab.find("#limits_ip_edit"), $resourceLimitsTab.find("#limits_ip_edit_errormsg"), -1, 32000, false);
|
||||
isValid &= validateNumber("Disk Volume Limit", $resourceLimitsTab.find("#limits_volume_edit"), $resourceLimitsTab.find("#limits_volume_edit_errormsg"), -1, 32000, false);
|
||||
isValid &= validateNumber("Snapshot Limit", $resourceLimitsTab.find("#limits_snapshot_edit"), $resourceLimitsTab.find("#limits_snapshot_edit_errormsg"), -1, 32000, false);
|
||||
isValid &= validateNumber("Template Limit", $resourceLimitsTab.find("#limits_template_edit"), $resourceLimitsTab.find("#limits_template_edit_errormsg"), -1, 32000, false);
|
||||
if (!isValid) return;
|
||||
|
||||
var jsonObj = $detailsTab.data("jsonObj");
|
||||
var domainId = jsonObj.id;
|
||||
|
||||
var instanceLimit = trim($resourceLimitsTab.find("#limits_vm_edit").val());
|
||||
var ipLimit = trim($resourceLimitsTab.find("#limits_ip_edit").val());
|
||||
var diskLimit = trim($resourceLimitsTab.find("#limits_volume_edit").val());
|
||||
var snapshotLimit = trim($resourceLimitsTab.find("#limits_snapshot_edit").val());
|
||||
var templateLimit = trim($resourceLimitsTab.find("#limits_template_edit").val());
|
||||
|
||||
if (instanceLimit != $resourceLimitsTab.find("#limits_vm").text()) {
|
||||
updateResourceLimit(domainId, 0, instanceLimit, $resourceLimitsTab.find("#limits_vm"));
|
||||
}
|
||||
if (ipLimit != $resourceLimitsTab.find("#limits_ip").text()) {
|
||||
updateResourceLimit(domainId, 1, ipLimit, $resourceLimitsTab.find("#limits_ip"));
|
||||
}
|
||||
if (diskLimit != $resourceLimitsTab.find("#limits_volume").text()) {
|
||||
updateResourceLimit(domainId, 2, diskLimit, $resourceLimitsTab.find("#limits_volume"));
|
||||
}
|
||||
if (snapshotLimit != $resourceLimitsTab.find("#limits_snapshot").text()) {
|
||||
updateResourceLimit(domainId, 3, snapshotLimit, $resourceLimitsTab.find("#limits_snapshot"));
|
||||
}
|
||||
if (templateLimit != $resourceLimitsTab.find("#limits_template").text()) {
|
||||
updateResourceLimit(domainId, 4, templateLimit, $resourceLimitsTab.find("#limits_template"));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -642,7 +642,27 @@ function bindClickToMidMenu($midmenuItem1, toRightPanel, getMidmenuId) {
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
function initializeEditFunction($readonlyFields, $editFields, doUpdateFn) {
|
||||
$("#edit_button").bind("click", function(event){
|
||||
$readonlyFields.hide();
|
||||
$editFields.show();
|
||||
$("#cancel_button, #save_button").show()
|
||||
return false;
|
||||
});
|
||||
$("#cancel_button").bind("click", function(event){
|
||||
$editFields.hide();
|
||||
$readonlyFields.show();
|
||||
$("#save_button, #cancel_button").hide();
|
||||
return false;
|
||||
});
|
||||
$("#save_button").bind("click", function(event){
|
||||
doUpdateFn();
|
||||
$editFields.hide();
|
||||
$readonlyFields.show();
|
||||
$("#save_button, #cancel_button").hide();
|
||||
return false;
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@ -83,26 +83,7 @@ function afterLoadTemplateJSP() {
|
||||
//edit button ***
|
||||
var $readonlyFields = $detailsTab.find("#name, #displaytext, #passwordenabled, #ispublic, #isfeatured, #ostypename");
|
||||
var $editFields = $detailsTab.find("#name_edit, #displaytext_edit, #passwordenabled_edit, #ispublic_edit, #isfeatured_edit, #ostypename_edit");
|
||||
$("#edit_button").bind("click", function(event){
|
||||
$readonlyFields.hide();
|
||||
$editFields.show();
|
||||
$("#cancel_button, #save_button").show()
|
||||
return false;
|
||||
});
|
||||
$("#cancel_button").bind("click", function(event){
|
||||
$editFields.hide();
|
||||
$readonlyFields.show();
|
||||
$("#save_button, #cancel_button").hide();
|
||||
return false;
|
||||
});
|
||||
$("#save_button").bind("click", function(event){
|
||||
doUpdateTemplate();
|
||||
$editFields.hide();
|
||||
$readonlyFields.show();
|
||||
$("#save_button, #cancel_button").hide();
|
||||
return false;
|
||||
});
|
||||
|
||||
initializeEditFunction($readonlyFields, $editFields, doUpdateTemplate);
|
||||
|
||||
//populate dropdown ***
|
||||
var addTemplateZoneField = $("#dialog_add_template #add_template_zone");
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user