mirror of
https://github.com/apache/cloudstack.git
synced 2025-11-03 04:12:31 +01:00
new UI - instance page - refactor submenu.
This commit is contained in:
Jessica Wang
parent
4326070a88
commit
e9d56d473d
@ -335,22 +335,10 @@ long milliseconds = new Date().getTime();
|
||||
<%=t.t("instance")%>
|
||||
</div>
|
||||
</div>
|
||||
<div class="leftmenu_expandedbox" style="display: none">
|
||||
<div id="leftmenu_instance_group">
|
||||
<div class="leftmenu_expandedlist">
|
||||
<div class="leftmenu_content" id="leftmenu_instance_group_header">
|
||||
<div class="leftmenu_secondindent">
|
||||
<div class="leftmenu_arrows expanded_close" id="arrow_icon">
|
||||
|
||||
<div id="leftmenu_instance_expandedbox" class="leftmenu_expandedbox" style="display: none">
|
||||
</div>
|
||||
|
||||
<%=t.t("instance")%>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="leftmenu_instance_group_container">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="leftmenu_list">
|
||||
<div class="leftmenu_content_flevel" id="leftmenu_storage">
|
||||
@ -671,6 +659,16 @@ long milliseconds = new Date().getTime();
|
||||
</p>
|
||||
</div>
|
||||
<!-- ***** templates (begin) *************************************************************************************************-->
|
||||
<div id="leftmenu_secondindent_template" class="leftmenu_expandedlist">
|
||||
<div class="leftmenu_content">
|
||||
<div class="leftmenu_secondindent">
|
||||
<div class="leftmenu_arrows white_nonexpanded_close" id="arrowIcon">
|
||||
</div>
|
||||
<span id="label"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="leftmenu_content" id="leftmenu_submenu_template" style="display: none">
|
||||
<div class="leftmenu_thirdindent">
|
||||
<div class="leftmenu_list_icons">
|
||||
|
||||
@ -37,10 +37,6 @@ $(document).ready(function() {
|
||||
});
|
||||
return false;
|
||||
});
|
||||
$("#leftmenu_instances").bind("click", function(event) {
|
||||
selectLeftMenu($(this), true);
|
||||
return false;
|
||||
});
|
||||
$("#leftmenu_storage").bind("click", function(event) {
|
||||
selectLeftMenu($(this), true);
|
||||
return false;
|
||||
@ -69,24 +65,38 @@ $(document).ready(function() {
|
||||
|
||||
// Setup 2nd level navigation
|
||||
|
||||
bindAndListMidMenuItems("leftmenu_event", "listEvents", "listeventsresponse", "event", "jsp/event.jsp", afterLoadEventJSP, eventToMidmenu, eventToRigntPanel, getMidmenuId);
|
||||
bindAndListMidMenuItems("leftmenu_alert", "listAlerts", "listalertsresponse", "alert", "jsp/alert.jsp", afterLoadAlertJSP, alertToMidmenu, alertToRigntPanel, getMidmenuId);
|
||||
bindAndListMidMenuItems("leftmenu_volume", "listVolumes", "listvolumesresponse", "volume", "jsp/volume.jsp", afterLoadVolumeJSP, volumeToMidmenu, volumeToRigntPanel, getMidmenuId);
|
||||
bindAndListMidMenuItems("leftmenu_snapshot", "listSnapshots", "listsnapshotsresponse", "snapshot", "jsp/snapshot.jsp", afterLoadSnapshotJSP, snapshotToMidmenu, snapshotToRigntPanel, getMidmenuId);
|
||||
bindAndListMidMenuItems("leftmenu_ip", "listPublicIpAddresses", "listpublicipaddressesresponse", "publicipaddress", "jsp/ipaddress.jsp", afterLoadIpJSP, ipToMidmenu, ipToRigntPanel, ipGetMidmenuId);
|
||||
//bindAndListMidMenuItems("leftmenu_router", "listRouters", "listroutersresponse", "router", "jsp/router.jsp", afterLoadRouterJSP, routerToMidmenu, routerToRigntPanel, getMidmenuId);
|
||||
bindAndListMidMenuItems($("#leftmenu_event"), "listEvents", "listeventsresponse", "event", "jsp/event.jsp", afterLoadEventJSP, eventToMidmenu, eventToRigntPanel, getMidmenuId, false);
|
||||
bindAndListMidMenuItems($("#leftmenu_alert"), "listAlerts", "listalertsresponse", "alert", "jsp/alert.jsp", afterLoadAlertJSP, alertToMidmenu, alertToRigntPanel, getMidmenuId, false);
|
||||
bindAndListMidMenuItems($("#leftmenu_volume"), "listVolumes", "listvolumesresponse", "volume", "jsp/volume.jsp", afterLoadVolumeJSP, volumeToMidmenu, volumeToRigntPanel, getMidmenuId, false);
|
||||
bindAndListMidMenuItems($("#leftmenu_snapshot"), "listSnapshots", "listsnapshotsresponse", "snapshot", "jsp/snapshot.jsp", afterLoadSnapshotJSP, snapshotToMidmenu, snapshotToRigntPanel, getMidmenuId, false);
|
||||
bindAndListMidMenuItems($("#leftmenu_ip"), "listPublicIpAddresses", "listpublicipaddressesresponse", "publicipaddress", "jsp/ipaddress.jsp", afterLoadIpJSP, ipToMidmenu, ipToRigntPanel, ipGetMidmenuId, false);
|
||||
//bindAndListMidMenuItems("leftmenu_router", "listRouters", "listroutersresponse", "router", "jsp/router.jsp", afterLoadRouterJSP, routerToMidmenu, routerToRigntPanel, getMidmenuId, false);
|
||||
|
||||
bindAndListMidMenuItems("leftmenu_submenu_my_template", "listTemplates&templatefilter=self", "listtemplatesresponse", "template", "jsp/template.jsp", afterLoadTemplateJSP, templateToMidmenu, templateToRigntPanel, templateGetMidmenuId);
|
||||
bindAndListMidMenuItems("leftmenu_submenu_featured_template", "listTemplates&templatefilter=featured", "listtemplatesresponse", "template", "jsp/template.jsp", afterLoadTemplateJSP, templateToMidmenu, templateToRigntPanel, templateGetMidmenuId);
|
||||
bindAndListMidMenuItems("leftmenu_submenu_community_template", "listTemplates&templatefilter=community", "listtemplatesresponse", "template", "jsp/template.jsp", afterLoadTemplateJSP, templateToMidmenu, templateToRigntPanel, templateGetMidmenuId);
|
||||
bindAndListMidMenuItems($("#leftmenu_submenu_my_template"), "listTemplates&templatefilter=self", "listtemplatesresponse", "template", "jsp/template.jsp", afterLoadTemplateJSP, templateToMidmenu, templateToRigntPanel, templateGetMidmenuId, false);
|
||||
bindAndListMidMenuItems($("#leftmenu_submenu_featured_template"), "listTemplates&templatefilter=featured", "listtemplatesresponse", "template", "jsp/template.jsp", afterLoadTemplateJSP, templateToMidmenu, templateToRigntPanel, templateGetMidmenuId, false);
|
||||
bindAndListMidMenuItems($("#leftmenu_submenu_community_template"), "listTemplates&templatefilter=community", "listtemplatesresponse", "template", "jsp/template.jsp", afterLoadTemplateJSP, templateToMidmenu, templateToRigntPanel, templateGetMidmenuId, false);
|
||||
|
||||
bindAndListMidMenuItems("leftmenu_submenu_my_iso", "listIsos&isofilter=self", "listisosresponse", "iso", "jsp/iso.jsp", afterLoadIsoJSP, isoToMidmenu, isoToRigntPanel, isoGetMidmenuId);
|
||||
bindAndListMidMenuItems("leftmenu_submenu_featured_iso", "listIsos&isofilter=featured", "listisosresponse", "iso", "jsp/iso.jsp", afterLoadIsoJSP, isoToMidmenu, isoToRigntPanel, isoGetMidmenuId);
|
||||
bindAndListMidMenuItems("leftmenu_submenu_community_iso", "listIsos&isofilter=community", "listisosresponse", "iso", "jsp/iso.jsp", afterLoadIsoJSP, isoToMidmenu, isoToRigntPanel, isoGetMidmenuId);
|
||||
bindAndListMidMenuItems($("#leftmenu_submenu_my_iso"), "listIsos&isofilter=self", "listisosresponse", "iso", "jsp/iso.jsp", afterLoadIsoJSP, isoToMidmenu, isoToRigntPanel, isoGetMidmenuId, false);
|
||||
bindAndListMidMenuItems($("#leftmenu_submenu_featured_iso"), "listIsos&isofilter=featured", "listisosresponse", "iso", "jsp/iso.jsp", afterLoadIsoJSP, isoToMidmenu, isoToRigntPanel, isoGetMidmenuId, false);
|
||||
bindAndListMidMenuItems($("#leftmenu_submenu_community_iso"), "listIsos&isofilter=community", "listisosresponse", "iso", "jsp/iso.jsp", afterLoadIsoJSP, isoToMidmenu, isoToRigntPanel, isoGetMidmenuId, false);
|
||||
|
||||
bindAndListMidMenuItems("leftmenu_service_offering", "listServiceOfferings", "listserviceofferingsresponse", "serviceoffering", "jsp/serviceoffering.jsp", afterLoadServiceOfferingJSP, serviceOfferingToMidmenu, serviceOfferingToRigntPanel, getMidmenuId);
|
||||
bindAndListMidMenuItems("leftmenu_disk_offering", "listDiskOfferings", "listdiskofferingsresponse", "diskoffering", "jsp/diskoffering.jsp", afterLoadDiskOfferingJSP, diskOfferingToMidmenu, diskOfferingToRigntPanel, getMidmenuId);
|
||||
bindAndListMidMenuItems("leftmenu_global_setting", "listConfigurations", "listconfigurationsresponse", "configuration", "jsp/globalsetting.jsp", afterLoadGlobalSettingJSP, globalSettingToMidmenu, globalSettingToRigntPanel, globalSettingGetMidmenuId, getMidmenuId);
|
||||
bindAndListMidMenuItems($("#leftmenu_service_offering"), "listServiceOfferings", "listserviceofferingsresponse", "serviceoffering", "jsp/serviceoffering.jsp", afterLoadServiceOfferingJSP, serviceOfferingToMidmenu, serviceOfferingToRigntPanel, getMidmenuId, false);
|
||||
bindAndListMidMenuItems($("#leftmenu_disk_offering"), "listDiskOfferings", "listdiskofferingsresponse", "diskoffering", "jsp/diskoffering.jsp", afterLoadDiskOfferingJSP, diskOfferingToMidmenu, diskOfferingToRigntPanel, getMidmenuId, false);
|
||||
bindAndListMidMenuItems($("#leftmenu_global_setting"), "listConfigurations", "listconfigurationsresponse", "configuration", "jsp/globalsetting.jsp", afterLoadGlobalSettingJSP, globalSettingToMidmenu, globalSettingToRigntPanel, globalSettingGetMidmenuId, getMidmenuId, false);
|
||||
|
||||
$("#leftmenu_instances").bind("click", function(event) {
|
||||
selectLeftMenu($(this), true);
|
||||
instanceBuildSubMenu();
|
||||
return false;
|
||||
});
|
||||
$("#leftmenu_instance_group_header").bind("click", function(event) {
|
||||
showMiddleMenu();
|
||||
clearMiddleMenu();
|
||||
enableMultipleSelectionInMidMenu(); //multiple-selection is needeed for actions like start VM, stop VM, reboot VM.
|
||||
var $arrowIcon = $(this).find("#arrow_icon");
|
||||
clickInstanceGroupHeader($arrowIcon);
|
||||
return false;
|
||||
});
|
||||
|
||||
$("#leftmenu_domain").bind("click", function(event) {
|
||||
selectLeftMenu($(this), true);
|
||||
@ -118,14 +128,8 @@ $(document).ready(function() {
|
||||
return false;
|
||||
});
|
||||
|
||||
$("#leftmenu_instance_group_header").bind("click", function(event) {
|
||||
showMiddleMenu();
|
||||
clearMiddleMenu();
|
||||
enableMultipleSelectionInMiddleMenu(); //multiple-selection is needeed for actions like start VM, stop VM, reboot VM.
|
||||
var $arrowIcon = $(this).find("#arrow_icon");
|
||||
clickInstanceGroupHeader($arrowIcon);
|
||||
return false;
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -16,43 +16,27 @@
|
||||
*
|
||||
*/
|
||||
|
||||
// Version: @VERSION@
|
||||
|
||||
function clickInstanceGroupHeader($arrowIcon) {
|
||||
function instanceBuildSubMenu() {
|
||||
var $subMenuContainer = $("#leftmenu_instance_expandedbox").empty();
|
||||
|
||||
var $newSubMenu = $("#leftmenu_secondindent_template").clone();
|
||||
$newSubMenu.find("#label").text("All Instances");
|
||||
bindAndListMidMenuItems($newSubMenu, "listVirtualMachines", "listvirtualmachinesresponse", "virtualmachine", "jsp/instance.jsp", afterLoadInstanceJSP, vmToMidmenu, vmToRightPanel, getMidmenuId, true);
|
||||
$subMenuContainer.append($newSubMenu.show());
|
||||
}
|
||||
|
||||
function afterLoadInstanceJSP() {
|
||||
//Add VM button
|
||||
$("#midmenu_add_link").find("#label").text("Add VM");
|
||||
$("#midmenu_add_link").show();
|
||||
|
||||
if($arrowIcon.hasClass("expanded_close") == true) {
|
||||
$arrowIcon.removeClass("expanded_close").addClass("expanded_open");
|
||||
appendInstanceGroup(-1, noGroupName);
|
||||
|
||||
$.ajax({
|
||||
cache: false,
|
||||
data: createURL("command=listInstanceGroups"),
|
||||
dataType: "json",
|
||||
success: function(json) {
|
||||
var instancegroups = json.listinstancegroupsresponse.instancegroup;
|
||||
if(instancegroups!=null && instancegroups.length>0) {
|
||||
for(var i=0; i < instancegroups.length; i++) {
|
||||
appendInstanceGroup(instancegroups[i].id, fromdb(instancegroups[i].name));
|
||||
}
|
||||
}
|
||||
|
||||
//action menu
|
||||
$("#midmenu_action_link").show();
|
||||
$("#action_menu #action_list").empty();
|
||||
for(var label in vmActionMap)
|
||||
buildActionLinkForMidMenu(label, vmActionMap, $("#action_menu"));
|
||||
}
|
||||
});
|
||||
}
|
||||
else if($arrowIcon.hasClass("expanded_open") == true) {
|
||||
$arrowIcon.removeClass("expanded_open").addClass("expanded_close");
|
||||
$("#leftmenu_instance_group_container").empty();
|
||||
}
|
||||
|
||||
//***** VM Detail (end) ********************************************************************************
|
||||
$("#right_panel").load("jsp/instance.jsp", function() {
|
||||
if (isAdmin() || isDomainAdmin())
|
||||
$("#right_panel_content").find("#tab_router,#tab_router").show();
|
||||
|
||||
@ -633,8 +617,38 @@ function clickInstanceGroupHeader($arrowIcon) {
|
||||
}
|
||||
}
|
||||
});
|
||||
//***** Volume tab (end) *******************************************************************************
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
function clickInstanceGroupHeader($arrowIcon) {
|
||||
if($arrowIcon.hasClass("expanded_close") == true) {
|
||||
$arrowIcon.removeClass("expanded_close").addClass("expanded_open");
|
||||
appendInstanceGroup(-1, noGroupName);
|
||||
|
||||
$.ajax({
|
||||
cache: false,
|
||||
data: createURL("command=listInstanceGroups"),
|
||||
dataType: "json",
|
||||
success: function(json) {
|
||||
var instancegroups = json.listinstancegroupsresponse.instancegroup;
|
||||
if(instancegroups!=null && instancegroups.length>0) {
|
||||
for(var i=0; i < instancegroups.length; i++) {
|
||||
appendInstanceGroup(instancegroups[i].id, fromdb(instancegroups[i].name));
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
else if($arrowIcon.hasClass("expanded_open") == true) {
|
||||
$arrowIcon.removeClass("expanded_open").addClass("expanded_close");
|
||||
$("#leftmenu_instance_group_container").empty();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -730,7 +730,7 @@ function initDialogWithOK(elementId, width1) {
|
||||
function disableMultipleSelectionInMidMenu() {
|
||||
$("#midmenu_container").selectable("destroy"); //Most pages don't need multiple selection in middle menu.
|
||||
}
|
||||
function enableMultipleSelectionInMiddleMenu() {
|
||||
function enableMultipleSelectionInMidMenu() {
|
||||
$("#midmenu_container").selectable({
|
||||
selecting: function(event, ui) {
|
||||
if(ui.selecting.id.indexOf("midmenuItem") != -1) {
|
||||
@ -762,7 +762,7 @@ function getMidmenuId(jsonObj) {
|
||||
return "midmenuItem_" + jsonObj.id;
|
||||
}
|
||||
|
||||
function listMidMenuItems2(commandString, jsonResponse1, jsonResponse2, toMidmenuFn, toRightPanelFn, getMidmenuIdFn, clickFirstItem) {
|
||||
function listMidMenuItems2(commandString, jsonResponse1, jsonResponse2, toMidmenuFn, toRightPanelFn, getMidmenuIdFn, clickFirstItem, isMultipleSelectionInMidMenu) {
|
||||
$.ajax({
|
||||
cache: false,
|
||||
data: createURL("command="+commandString+"&pagesize="+midmenuItemCount),
|
||||
@ -777,17 +777,21 @@ function listMidMenuItems2(commandString, jsonResponse1, jsonResponse2, toMidmen
|
||||
toMidmenuFn(items[i], $midmenuItem1);
|
||||
bindClickToMidMenu($midmenuItem1, toRightPanelFn, getMidmenuIdFn);
|
||||
$("#midmenu_container").append($midmenuItem1.show());
|
||||
if(clickFirstItem == true && i == 0) //click the 1st item in middle menu as default
|
||||
if(clickFirstItem == true && i == 0) { //click the 1st item in middle menu as default
|
||||
$midmenuItem1.click();
|
||||
if(isMultipleSelectionInMidMenu == true) {
|
||||
$midmenuItem1.addClass("ui-selected"); //because instance page is using JQuery selectable widget to do multiple-selection
|
||||
selectedItemsInMidMenu[items[i].id] = $midmenuItem1; //because instance page is using JQuery selectable widget to do multiple-selection
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function listMidMenuItems(commandString, jsonResponse1, jsonResponse2, rightPanelJSP, afterLoadRightPanelJSPFn, toMidmenuFn, toRightPanelFn, getMidmenuIdFn) {
|
||||
function listMidMenuItems(commandString, jsonResponse1, jsonResponse2, rightPanelJSP, afterLoadRightPanelJSPFn, toMidmenuFn, toRightPanelFn, getMidmenuIdFn, isMultipleSelectionInMidMenu) {
|
||||
showMiddleMenu();
|
||||
disableMultipleSelectionInMidMenu();
|
||||
clearMiddleMenu();
|
||||
|
||||
$("#right_panel").load(rightPanelJSP, function(){
|
||||
@ -802,15 +806,20 @@ function listMidMenuItems(commandString, jsonResponse1, jsonResponse2, rightPane
|
||||
});
|
||||
|
||||
afterLoadRightPanelJSPFn();
|
||||
listMidMenuItems2(commandString, jsonResponse1, jsonResponse2, toMidmenuFn, toRightPanelFn, getMidmenuIdFn, true);
|
||||
listMidMenuItems2(commandString, jsonResponse1, jsonResponse2, toMidmenuFn, toRightPanelFn, getMidmenuIdFn, true, isMultipleSelectionInMidMenu);
|
||||
});
|
||||
return false;
|
||||
}
|
||||
|
||||
function bindAndListMidMenuItems(leftmenuId, commandString, jsonResponse1, jsonResponse2, rightPanelJSP, afterLoadRightPanelJSPFn, toMidmenuFn, toRightPanelFn, getMidmenuIdFn) {
|
||||
$("#"+leftmenuId).bind("click", function(event) {
|
||||
function bindAndListMidMenuItems($leftmenu, commandString, jsonResponse1, jsonResponse2, rightPanelJSP, afterLoadRightPanelJSPFn, toMidmenuFn, toRightPanelFn, getMidmenuIdFn, isMultipleSelectionInMidMenu) {
|
||||
if(isMultipleSelectionInMidMenu == true)
|
||||
enableMultipleSelectionInMidMenu();
|
||||
else
|
||||
disableMultipleSelectionInMidMenu();
|
||||
|
||||
$leftmenu.bind("click", function(event) {
|
||||
selectLeftSubMenu($(this));
|
||||
listMidMenuItems(commandString, jsonResponse1, jsonResponse2, rightPanelJSP, afterLoadRightPanelJSPFn, toMidmenuFn, toRightPanelFn, getMidmenuIdFn);
|
||||
listMidMenuItems(commandString, jsonResponse1, jsonResponse2, rightPanelJSP, afterLoadRightPanelJSPFn, toMidmenuFn, toRightPanelFn, getMidmenuIdFn, isMultipleSelectionInMidMenu);
|
||||
return false;
|
||||
});
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user