mirror of https://github.com/apache/cloudstack.git
new UI - global setting page - refactor the whole page, make it grid-base. When clicking Edit Global Setting link, the whole grid is editable. When clicking Save Button, only rows whose value have been changed will have updateConfiguration API call.
This commit is contained in:
Jessica Wang
parent
e2f725308d
commit
ea0a4dc522
|
|
@ -36,18 +36,15 @@
|
|||
</div>
|
||||
<div class="grid_container">
|
||||
<div class="grid_header">
|
||||
<div class="grid_header_cell" style="width:25%; border:none;">
|
||||
<div class="grid_header_cell" style="width:35%; border:none;">
|
||||
<div class="grid_header_title">Name</div>
|
||||
</div>
|
||||
<div class="grid_header_cell" style="width:18%; border:none;">
|
||||
<div class="grid_header_cell" style="width:23%; border:none;">
|
||||
<div class="grid_header_title">Value</div>
|
||||
</div>
|
||||
<div class="grid_header_cell" style="width:22%; border:none;">
|
||||
<div class="grid_header_cell" style="width:27%; border:none;">
|
||||
<div class="grid_header_title">Description</div>
|
||||
</div>
|
||||
<div class="grid_header_cell" style="width:20%; border:none;">
|
||||
<div class="grid_header_title">Category</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid_header_cell" style="width:15%; border:none;">
|
||||
<div id="action_link" class="grid_actionbox" id="account_action_link">
|
||||
<div class="grid_actionsdropdown_box" id="action_menu" style="display: none;">
|
||||
|
|
@ -57,54 +54,10 @@
|
|||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="grid_rows even">
|
||||
<div class="grid_row_cell" style="width: 25%;">
|
||||
<div class="row_celltitles" id="name"></div>
|
||||
</div>
|
||||
<div class="grid_row_cell" style="width: 18%;">
|
||||
<div class="row_celltitles" id="value">
|
||||
</div>
|
||||
<input class="text" id="value_edit" style="width: 200px; display: none;" type="text" />
|
||||
<div id="value_edit_errormsg" style="display:none"></div>
|
||||
</div>
|
||||
<div class="grid_row_cell" style="width: 22%;">
|
||||
<div class="row_celltitles" id="description">
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid_row_cell" style="width: 20%;">
|
||||
<div class="row_celltitles" id="category">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="grid_rows odd">
|
||||
<div class="grid_row_cell" style="width: 25%;">
|
||||
<div class="row_celltitles" id="name"></div>
|
||||
</div>
|
||||
<div class="grid_row_cell" style="width: 18%;">
|
||||
<div class="row_celltitles" id="value">
|
||||
</div>
|
||||
<input class="text" id="value_edit" style="width: 200px; display: none;" type="text" />
|
||||
<div id="value_edit_errormsg" style="display:none"></div>
|
||||
</div>
|
||||
<div class="grid_row_cell" style="width: 22%;">
|
||||
<div class="row_celltitles" id="description">
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid_row_cell" style="width: 20%;">
|
||||
<div class="row_celltitles" id="category">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div id="grid_content">
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid_botactionpanel">
|
||||
<div class="gridbot_buttons" id="save_button" style="display:none;">Save</div>
|
||||
|
|
@ -112,6 +65,25 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- global setting grid template (begin) -->
|
||||
<div id="globalsetting_template" class="grid_rows even" style="display:none">
|
||||
<div class="grid_row_cell" style="width: 35%;">
|
||||
<div class="row_celltitles" id="name">
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid_row_cell" style="width: 23%;">
|
||||
<div class="row_celltitles" id="value">
|
||||
</div>
|
||||
<input class="text" id="value_edit" style="width: 200px; display: none;" type="text" />
|
||||
<div id="value_edit_errormsg" style="display: none">
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid_row_cell" style="width: 27%;">
|
||||
<div class="row_celltitles" id="description">description
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- global setting grid template (end) -->
|
||||
|
||||
<div id="dialog_alert_restart_management_server" title="Alert" style="display:none">
|
||||
<p>
|
||||
|
|
|
|||
|
|
@ -17,82 +17,107 @@
|
|||
*/
|
||||
|
||||
function afterLoadGlobalSettingJSP() {
|
||||
var $detailsTab = $("#right_panel_content #tab_content_details");
|
||||
|
||||
//edit button ***
|
||||
var $readonlyFields = $detailsTab.find("#value");
|
||||
var $editFields = $detailsTab.find("#value_edit");
|
||||
initializeEditFunction($readonlyFields, $editFields, doUpdateGlobalSetting);
|
||||
populateGlobalSettingGrid();
|
||||
|
||||
//initialize dialogs
|
||||
//actions
|
||||
var $actionList = $("#right_panel_content #tab_content_details #action_link #action_menu").find("#action_list").empty();
|
||||
var $listItem = $("#action_list_item").clone();
|
||||
$listItem.find("#link").text("Edit Global Setting");
|
||||
$listItem.bind("click", function(event) {
|
||||
doEditGlobalSetting();
|
||||
return false;
|
||||
});
|
||||
$actionList.append($listItem.show());
|
||||
|
||||
//dialogs
|
||||
initDialogWithOK("dialog_alert_restart_management_server");
|
||||
}
|
||||
|
||||
function doUpdateGlobalSetting() {
|
||||
// validate values
|
||||
var $detailsTab = $("#right_panel_content #tab_content_details");
|
||||
function populateGlobalSettingGrid() {
|
||||
$.ajax({
|
||||
data: createURL("command=listConfigurations"+maxPageSize),
|
||||
dataType: "json",
|
||||
success: function(json) {
|
||||
var items = json.listconfigurationsresponse.configuration;
|
||||
$container = $("#tab_content_details").find("#grid_content").empty();
|
||||
$template = $("#globalsetting_template");
|
||||
if(items != null && items.length > 0) {
|
||||
for(var i=0; i<items.length; i++) {
|
||||
var $newTemplate = $template.clone();
|
||||
globalsettingJSONToTemplate(items[i], $newTemplate);
|
||||
$container.append($newTemplate.show());
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
var globalsettingGridIndex = 0;
|
||||
function globalsettingJSONToTemplate(jsonObj, template) {
|
||||
(globalsettingGridIndex++ % 2 == 0)? template.addClass("even"): template.addClass("odd");
|
||||
template.find("#name").text(fromdb(jsonObj.name));
|
||||
template.find("#value").text(fromdb(jsonObj.value));
|
||||
template.find("#value_edit").val(fromdb(jsonObj.value));
|
||||
template.find("#description").text(fromdb(jsonObj.description));
|
||||
}
|
||||
|
||||
function doEditGlobalSetting() {
|
||||
var $detailsTab = $("#right_panel_content #tab_content_details");
|
||||
var $readonlyFields = $detailsTab.find("#value");
|
||||
var $editFields = $detailsTab.find("#value_edit");
|
||||
|
||||
$readonlyFields.hide();
|
||||
$editFields.show();
|
||||
$detailsTab.find("#cancel_button, #save_button").show();
|
||||
|
||||
var isValid = true;
|
||||
isValid &= validateString("Value", $detailsTab.find("#value_edit"), $detailsTab.find("#value_edit_errormsg"), true);
|
||||
if (!isValid)
|
||||
return;
|
||||
|
||||
var jsonObj = $detailsTab.data("jsonObj");
|
||||
var name = jsonObj.name;
|
||||
var value = trim($detailsTab.find("#value_edit").val());
|
||||
|
||||
$.ajax({
|
||||
data: createURL("command=updateConfiguration&name="+todb(name)+"&value="+todb(value)+"&response=json"),
|
||||
dataType: "json",
|
||||
success: function(json) {
|
||||
//call listConfigurations before bug 6506("What updateConfiguration API returns should include an embedded object") is fixed.
|
||||
var jsonObj;
|
||||
$.ajax({
|
||||
data: createURL("command=listConfigurations&name="+name),
|
||||
dataType: "json",
|
||||
async: false,
|
||||
success: function(json) {
|
||||
jsonObj = json.listconfigurationsresponse.configuration[0];
|
||||
}
|
||||
});
|
||||
var $midmenuItem1 = $("#"+globalSettingGetMidmenuId(jsonObj));
|
||||
globalSettingToMidmenu(jsonObj, $midmenuItem1);
|
||||
globalSettingToRightPanel($midmenuItem1);
|
||||
|
||||
$("#dialog_alert_restart_management_server").dialog("open");
|
||||
}
|
||||
});
|
||||
$detailsTab.find("#cancel_button").unbind("click").bind("click", function(event){
|
||||
$editFields.hide();
|
||||
$readonlyFields.show();
|
||||
$("#save_button, #cancel_button").hide();
|
||||
return false;
|
||||
});
|
||||
$detailsTab.find("#save_button").unbind("click").bind("click", function(event){
|
||||
doEditGlobalSetting2();
|
||||
$editFields.hide();
|
||||
$readonlyFields.show();
|
||||
$("#save_button, #cancel_button").hide();
|
||||
return false;
|
||||
});
|
||||
}
|
||||
|
||||
function globalSettingGetMidmenuId(jsonObj) {
|
||||
return "midmenuItem_" + fromdb(jsonObj.name).replace(/\./g, "_").replace(/\s/g, ""); //remove all spaces in jsonObj.name
|
||||
function doEditGlobalSetting2() {
|
||||
$("#right_panel_content #tab_content_details").find("#globalsetting_template").each(function(index) {
|
||||
var $thisRow =$(this);
|
||||
if($thisRow.find("#value_edit").val() != $thisRow.find("#value").text()) {
|
||||
// validate values
|
||||
var isValid = true;
|
||||
isValid &= validateString("Value", $thisRow.find("#value_edit"), $thisRow.find("#value_edit_errormsg"), true);
|
||||
if (!isValid)
|
||||
return;
|
||||
|
||||
var name = $thisRow.find("#name").text();
|
||||
var value = $thisRow.find("#value_edit").val();
|
||||
|
||||
$.ajax({
|
||||
data: createURL("command=updateConfiguration&name="+todb(name)+"&value="+todb(value)),
|
||||
dataType: "json",
|
||||
async: false,
|
||||
success: function(json) {
|
||||
//call listConfigurations before bug 6506("What updateConfiguration API returns should include an embedded object") is fixed.
|
||||
var jsonObj;
|
||||
$.ajax({
|
||||
data: createURL("command=listConfigurations&name="+name),
|
||||
dataType: "json",
|
||||
async: false,
|
||||
success: function(json) {
|
||||
jsonObj = json.listconfigurationsresponse.configuration[0];
|
||||
}
|
||||
});
|
||||
globalsettingJSONToTemplate(jsonObj, $thisRow);
|
||||
|
||||
$("#dialog_alert_restart_management_server").dialog("open");
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function globalSettingToMidmenu(jsonObj, $midmenuItem1) {
|
||||
var id = globalSettingGetMidmenuId(jsonObj);
|
||||
$midmenuItem1.attr("id", id);
|
||||
|
||||
$midmenuItem1.data("jsonObj", jsonObj);
|
||||
|
||||
var $iconContainer = $midmenuItem1.find("#icon_container").show();
|
||||
$iconContainer.find("#icon").attr("src", "images/midmenuicon_system_globalsettings.png");
|
||||
|
||||
$midmenuItem1.find("#first_row").text(fromdb(jsonObj.name).substring(0,25));
|
||||
$midmenuItem1.find("#second_row").text(fromdb(jsonObj.value).substring(0,25));
|
||||
}
|
||||
|
||||
function globalSettingToRightPanel($midmenuItem1) {
|
||||
copyActionInfoFromMidMenuToRightPanel($midmenuItem1);
|
||||
globalSettingJsonToDetailsTab($midmenuItem1);
|
||||
}
|
||||
|
||||
function globalSettingJsonToDetailsTab($midmenuItem1) {
|
||||
var jsonObj = $midmenuItem1.data("jsonObj");
|
||||
var $detailsTab = $("#right_panel_content #tab_content_details");
|
||||
$detailsTab.data("jsonObj", jsonObj);
|
||||
$detailsTab.find("#name").text(fromdb(jsonObj.name));
|
||||
$detailsTab.find("#value").text(fromdb(jsonObj.value));
|
||||
$detailsTab.find("#value_edit").val(fromdb(jsonObj.value));
|
||||
$detailsTab.find("#description").text(fromdb(jsonObj.description));
|
||||
$detailsTab.find("#category").text(fromdb(jsonObj.category));
|
||||
}
|
||||
|
|
@ -102,8 +102,7 @@ $(document).ready(function() {
|
|||
bindAndListMidMenuItems($("#leftmenu_volume"), "listVolumes", "listvolumesresponse", "volume", "jsp/volume.jsp", afterLoadVolumeJSP, volumeToMidmenu, volumeToRightPanel, getMidmenuId, false);
|
||||
bindAndListMidMenuItems($("#leftmenu_snapshot"), "listSnapshots", "listsnapshotsresponse", "snapshot", "jsp/snapshot.jsp", afterLoadSnapshotJSP, snapshotToMidmenu, snapshotToRightPanel, getMidmenuId, false);
|
||||
bindAndListMidMenuItems($("#leftmenu_ip"), "listPublicIpAddresses", "listpublicipaddressesresponse", "publicipaddress", "jsp/ipaddress.jsp", afterLoadIpJSP, ipToMidmenu, ipToRightPanel, ipGetMidmenuId, false);
|
||||
//bindAndListMidMenuItems("leftmenu_router", "listRouters", "listroutersresponse", "router", "jsp/router.jsp", afterLoadRouterJSP, routerToMidmenu, routerToRightPanel, getMidmenuId, false);
|
||||
|
||||
|
||||
bindAndListMidMenuItems($("#leftmenu_submenu_my_template"), "listTemplates&templatefilter=self", "listtemplatesresponse", "template", "jsp/template.jsp", afterLoadTemplateJSP, templateToMidmenu, templateToRightPanel, templateGetMidmenuId, false);
|
||||
bindAndListMidMenuItems($("#leftmenu_submenu_featured_template"), "listTemplates&templatefilter=featured", "listtemplatesresponse", "template", "jsp/template.jsp", afterLoadTemplateJSP, templateToMidmenu, templateToRightPanel, templateGetMidmenuId, false);
|
||||
bindAndListMidMenuItems($("#leftmenu_submenu_community_template"), "listTemplates&templatefilter=community", "listtemplatesresponse", "template", "jsp/template.jsp", afterLoadTemplateJSP, templateToMidmenu, templateToRightPanel, templateGetMidmenuId, false);
|
||||
|
|
@ -114,7 +113,26 @@ $(document).ready(function() {
|
|||
|
||||
bindAndListMidMenuItems($("#leftmenu_service_offering"), "listServiceOfferings", "listserviceofferingsresponse", "serviceoffering", "jsp/serviceoffering.jsp", afterLoadServiceOfferingJSP, serviceOfferingToMidmenu, serviceOfferingToRightPanel, getMidmenuId, false);
|
||||
bindAndListMidMenuItems($("#leftmenu_disk_offering"), "listDiskOfferings", "listdiskofferingsresponse", "diskoffering", "jsp/diskoffering.jsp", afterLoadDiskOfferingJSP, diskOfferingToMidmenu, diskOfferingToRightPanel, getMidmenuId, false);
|
||||
bindAndListMidMenuItems($("#leftmenu_global_setting"), "listConfigurations", "listconfigurationsresponse", "configuration", "jsp/globalsetting.jsp", afterLoadGlobalSettingJSP, globalSettingToMidmenu, globalSettingToRightPanel, globalSettingGetMidmenuId, false);
|
||||
|
||||
$("#leftmenu_global_setting").bind("click", function(event) {
|
||||
selectLeftSubMenu($(this));
|
||||
|
||||
$("#right_panel").load("jsp/globalsetting.jsp", function(){
|
||||
var $actionLink = $("#right_panel_content #tab_content_details #action_link");
|
||||
$actionLink.bind("mouseover", function(event) {
|
||||
$(this).find("#action_menu").show();
|
||||
return false;
|
||||
});
|
||||
$actionLink.bind("mouseout", function(event) {
|
||||
$(this).find("#action_menu").hide();
|
||||
return false;
|
||||
});
|
||||
|
||||
afterLoadGlobalSettingJSP();
|
||||
});
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
$("#leftmenu_resource").bind("click", function(event) {
|
||||
showMiddleMenu();
|
||||
|
|
|
|||
Loading…
Reference in New Issue