bug 7135 - new resource menu - implement new systemVM page.

This commit is contained in:
Jessica Wang 2010-11-09 12:45:19 -08:00
parent 46bd12fa60
commit a1a5bd3393
5 changed files with 214 additions and 214 deletions

View File

@ -25,154 +25,156 @@
</div>
<!-- Details tab (start)-->
<div id="tab_content_details">
<div class="rightpanel_mainloader_panel" style="display: none;">
<div id="tab_spinning_wheel" class="rightpanel_mainloader_panel" style="display: none;">
<div class="rightpanel_mainloaderbox">
<div class="rightpanel_mainloader_animatedicon">
</div>
<p>
Loading &hellip;</p>
</div>
</div>
<div class="grid_container">
<div class="grid_header">
<div id="grid_header_title" class="grid_header_title">
(title)</div>
<div id="action_link" 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>
<%=t.t("no.available.actions")%></li>
</ul>
</div>
</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 &hellip;</p>
</div>
</div>
<div class="grid_rows odd">
<div class="vm_statusbox">
<div id="view_console_container" style="float: left;">
<div id="view_console_template" style="display: block">
<div class="vm_consolebox" id="box0">
</div>
<div class="vm_consolebox" id="box1" style="display: none">
</div>
</div>
</div>
<div class="vm_status_textbox">
<div class="vm_status_textline green" id="state">
</div>
<br />
<p id="ipAddress">
</p>
</div>
</div>
</div>
<div class="grid_rows even">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
<%=t.t("system.vm.type")%>:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="systemvmtype">
</div>
</div>
</div>
<div class="grid_rows odd">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
<%=t.t("zone")%>:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="zonename">
</div>
</div>
</div>
<div class="grid_rows even">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
<%=t.t("ID")%>:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="id">
</div>
</div>
</div>
<div class="grid_rows odd">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
<%=t.t("name")%>:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="name">
</div>
</div>
</div>
<div class="grid_rows even">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
<%=t.t("active.sessions")%>:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="activeviewersessions">
</div>
</div>
</div>
<div class="grid_rows odd">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
<%=t.t("public.ip")%>:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="publicip">
</div>
</div>
</div>
<div class="grid_rows even">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
<%=t.t("private.ip")%>:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="privateip">
</div>
</div>
</div>
<div class="grid_rows odd">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
<%=t.t("host")%>:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="hostname">
</div>
</div>
</div>
<div class="grid_rows even">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
<%=t.t("gateway")%>:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="gateway">
</div>
</div>
</div>
<div class="grid_rows odd">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
<%=t.t("created")%>:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="created">
</div>
</div>
</div>
</div>
</div>
<div id="tab_container">
<div class="grid_container">
<div class="grid_header">
<div id="grid_header_title" class="grid_header_title">
(title)</div>
<div id="action_link" 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>
<%=t.t("no.available.actions")%></li>
</ul>
</div>
</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 &hellip;</p>
</div>
</div>
<div class="grid_rows odd">
<div class="vm_statusbox">
<div id="view_console_container" style="float: left;">
<div id="view_console_template" style="display: block">
<div class="vm_consolebox" id="box0">
</div>
<div class="vm_consolebox" id="box1" style="display: none">
</div>
</div>
</div>
<div class="vm_status_textbox">
<div class="vm_status_textline green" id="state">
</div>
<br />
<p id="ipAddress">
</p>
</div>
</div>
</div>
<div class="grid_rows even">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
<%=t.t("system.vm.type")%>:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="systemvmtype">
</div>
</div>
</div>
<div class="grid_rows odd">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
<%=t.t("zone")%>:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="zonename">
</div>
</div>
</div>
<div class="grid_rows even">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
<%=t.t("ID")%>:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="id">
</div>
</div>
</div>
<div class="grid_rows odd">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
<%=t.t("name")%>:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="name">
</div>
</div>
</div>
<div class="grid_rows even">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
<%=t.t("active.sessions")%>:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="activeviewersessions">
</div>
</div>
</div>
<div class="grid_rows odd">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
<%=t.t("public.ip")%>:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="publicip">
</div>
</div>
</div>
<div class="grid_rows even">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
<%=t.t("private.ip")%>:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="privateip">
</div>
</div>
</div>
<div class="grid_rows odd">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
<%=t.t("host")%>:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="hostname">
</div>
</div>
</div>
<div class="grid_rows even">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
<%=t.t("gateway")%>:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="gateway">
</div>
</div>
</div>
<div class="grid_rows odd">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
<%=t.t("created")%>:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="created">
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Details tab (end)-->
</div>

View File

@ -126,6 +126,7 @@ $(document).ready(function() {
bindAndListMidMenuItems($("#leftmenu_disk_offering"), "listDiskOfferings", "listdiskofferingsresponse", "diskoffering", "jsp/diskoffering.jsp", afterLoadDiskOfferingJSP, diskOfferingToMidmenu, diskOfferingToRightPanel, getMidmenuId, false);
bindAndListMidMenuItems($("#leftmenu_submenu_virtual_router"), "listRouters", "listroutersresponse", "router", "jsp/router.jsp", afterLoadRouterJSP, routerToMidmenu, routerToRightPanel, getMidmenuId, false);
bindAndListMidMenuItems($("#leftmenu_submenu_systemvm"), "listSystemVms", "listsystemvmsresponse", "systemvm", "jsp/systemvm.jsp", afterLoadSystemVmJSP, systemvmToMidmenu, systemvmToRightPanel, getMidmenuId, false);
$("#leftmenu_global_setting").bind("click", function(event) {
selectLeftSubMenu($(this));

View File

@ -937,7 +937,7 @@ function listMidMenuItems2(commandString, jsonResponse1, jsonResponse2, toMidmen
var items = json[jsonResponse1][jsonResponse2];
if(items != null && items.length > 0) {
for(var i=0; i<items.length;i++) {
var $midmenuItem1 = $("#midmenu_item").clone();
var $midmenuItem1 = $("#midmenu_item").clone();
$midmenuItem1.data("toRightPanelFn", toRightPanelFn);
toMidmenuFn(items[i], $midmenuItem1);
bindClickToMidMenu($midmenuItem1, toRightPanelFn, getMidmenuIdFn);
@ -946,8 +946,8 @@ function listMidMenuItems2(commandString, jsonResponse1, jsonResponse2, toMidmen
$midMenuContainer = $("#midmenu_container");
$midMenuContainer.append($midmenuItem1.show());
if(clickFirstItem == true && i == 0) { //click the 1st item in middle menu as default
$midmenuItem1.click();
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

View File

@ -35,7 +35,7 @@ function routerToRightPanel($midmenuItem1) {
routerJsonToDetailsTab();
}
function routerJsonToDetailsTab($midmenuItem1) {
function routerJsonToDetailsTab() {
var $thisTab = $("#right_panel_content #tab_content_details");
$thisTab.find("#tab_container").hide();
$thisTab.find("#tab_spinning_wheel").show();

View File

@ -17,42 +17,62 @@
*/
function afterLoadSystemVmJSP($midmenuItem1) {
hideMiddleMenu();
systemvmJsonToRightPanel($midmenuItem1);
//hideMiddleMenu();
//systemvmToRightPanel($midmenuItem1);
initDialog("dialog_confirmation_start_systemVM");
initDialog("dialog_confirmation_stop_systemVM");
initDialog("dialog_confirmation_reboot_systemVM");
}
function systemvmJsonToRightPanel($leftmenuItem1) {
systemvmJsonToDetailsTab($leftmenuItem1);
function systemvmToMidmenu(jsonObj, $midmenuItem1) {
$midmenuItem1.attr("id", getMidmenuId(jsonObj));
$midmenuItem1.data("jsonObj", jsonObj);
var $iconContainer = $midmenuItem1.find("#icon_container").show();
$iconContainer.find("#icon").attr("src", "images/midmenuicon_resource_systemvm.png");
$midmenuItem1.find("#first_row").text(fromdb(jsonObj.name).substring(0,25));
$midmenuItem1.find("#second_row").text(fromdb(jsonObj.publicip));
updateVmStateInMidMenu(jsonObj, $midmenuItem1);
}
function systemvmJsonToDetailsTab($leftmenuItem1) {
var jsonObj = $leftmenuItem1.data("jsonObj");
var $detailsTab = $("#tab_content_details");
$detailsTab.data("jsonObj", jsonObj);
$detailsTab.find("#grid_header_title").text(fromdb(jsonObj.name));
resetViewConsoleAction(jsonObj, $detailsTab);
setVmStateInRightPanel(jsonObj.state, $detailsTab.find("#state"));
$detailsTab.find("#ipAddress").text(jsonObj.publicip);
function systemvmToRightPanel($midmenuItem1) {
copyActionInfoFromMidMenuToRightPanel($midmenuItem1);
$("#right_panel_content").data("$midmenuItem1", $midmenuItem1);
systemvmJsonToDetailsTab();
}
function systemvmJsonToDetailsTab() {
var $thisTab = $("#right_panel_content #tab_content_details");
$thisTab.find("#tab_container").hide();
$thisTab.find("#tab_spinning_wheel").show();
var $midmenuItem1 = $("#right_panel_content").data("$midmenuItem1");
var jsonObj = $midmenuItem1.data("jsonObj");
$thisTab.data("jsonObj", jsonObj);
$thisTab.find("#grid_header_title").text(fromdb(jsonObj.name));
resetViewConsoleAction(jsonObj, $thisTab);
setVmStateInRightPanel(jsonObj.state, $thisTab.find("#state"));
$thisTab.find("#ipAddress").text(jsonObj.publicip);
$detailsTab.find("#state").text(jsonObj.state);
$detailsTab.find("#systemvmtype").text(toSystemVMTypeText(jsonObj.systemvmtype));
$detailsTab.find("#zonename").text(fromdb(jsonObj.zonename));
$detailsTab.find("#id").text(fromdb(jsonObj.id));
$detailsTab.find("#name").text(fromdb(jsonObj.name));
$detailsTab.find("#activeviewersessions").text(fromdb(jsonObj.activeviewersessions));
$detailsTab.find("#publicip").text(fromdb(jsonObj.publicip));
$detailsTab.find("#privateip").text(fromdb(jsonObj.privateip));
$detailsTab.find("#hostname").text(fromdb(jsonObj.hostname));
$detailsTab.find("#gateway").text(fromdb(jsonObj.gateway));
$detailsTab.find("#created").text(fromdb(jsonObj.created));
$thisTab.find("#state").text(jsonObj.state);
$thisTab.find("#systemvmtype").text(toSystemVMTypeText(jsonObj.systemvmtype));
$thisTab.find("#zonename").text(fromdb(jsonObj.zonename));
$thisTab.find("#id").text(fromdb(jsonObj.id));
$thisTab.find("#name").text(fromdb(jsonObj.name));
$thisTab.find("#activeviewersessions").text(fromdb(jsonObj.activeviewersessions));
$thisTab.find("#publicip").text(fromdb(jsonObj.publicip));
$thisTab.find("#privateip").text(fromdb(jsonObj.privateip));
$thisTab.find("#hostname").text(fromdb(jsonObj.hostname));
$thisTab.find("#gateway").text(fromdb(jsonObj.gateway));
$thisTab.find("#created").text(fromdb(jsonObj.created));
//actions ***
var $actionLink = $detailsTab.find("#action_link");
var $actionLink = $thisTab.find("#action_link");
$actionLink.bind("mouseover", function(event) {
$(this).find("#action_menu").show();
return false;
@ -63,14 +83,17 @@ function systemvmJsonToDetailsTab($leftmenuItem1) {
});
var $actionMenu = $actionLink.find("#action_menu");
$actionMenu.find("#action_list").empty();
if (jsonObj.state == 'Running') { //Show "Stop System VM", "Reboot System VM"
buildActionLinkForTab("Stop System VM", systemVmActionMap, $actionMenu, $leftmenuItem1, $detailsTab);
buildActionLinkForTab("Reboot System VM", systemVmActionMap, $actionMenu, $leftmenuItem1, $detailsTab);
buildActionLinkForTab("Stop System VM", systemVmActionMap, $actionMenu, $midmenuItem1, $thisTab);
buildActionLinkForTab("Reboot System VM", systemVmActionMap, $actionMenu, $midmenuItem1, $thisTab);
}
else if (jsonObj.state == 'Stopped') { //show "Start System VM"
buildActionLinkForTab("Start System VM", systemVmActionMap, $actionMenu, $leftmenuItem1, $detailsTab);
}
buildActionLinkForTab("Start System VM", systemVmActionMap, $actionMenu, $midmenuItem1, $thisTab);
}
$thisTab.find("#tab_spinning_wheel").hide();
$thisTab.find("#tab_container").show();
}
function toSystemVMTypeText(value) {
@ -90,10 +113,10 @@ var systemVmActionMap = {
asyncJobResponse: "startsystemvmresponse",
inProcessText: "Starting System VM....",
dialogBeforeActionFn : doStartSystemVM,
afterActionSeccessFn: function(json, $leftmenuItem1, id) {
var item = json.queryasyncjobresultresponse.jobresult.startsystemvmresponse;
$leftmenuItem1.data("jsonObj", item);
systemvmJsonToRightPanel($leftmenuItem1);
afterActionSeccessFn: function(json, $midmenuItem1, id) {
var jsonObj = json.queryasyncjobresultresponse.jobresult.systemvm;
systemvmToMidmenu(jsonObj, $midmenuItem1);
systemvmToRightPanel($midmenuItem1);
}
},
"Stop System VM": {
@ -101,23 +124,10 @@ var systemVmActionMap = {
asyncJobResponse: "stopsystemvmresponse",
inProcessText: "Stopping System VM....",
dialogBeforeActionFn : doStopSystemVM,
afterActionSeccessFn: function(json, $leftmenuItem1, id) {
//var item = json.queryasyncjobresultresponse.jobresult.stopsystemvmresponse; //waiting for Bug 6859 to be fixed ("The embedded object returned by StopSystemVM on success is not up-to-date. "state" property in the embedded object should be "Stopped" instead of "Running")
var item;
$.ajax({
data: createURL("command=listSystemVms&id="+id),
dataType: "json",
async: false,
success: function(json) {
var items = json.listsystemvmsresponse.systemvm;
if (items != null && items.length > 0) {
item = items[0];
}
}
});
$leftmenuItem1.data("jsonObj", item);
systemvmJsonToRightPanel($leftmenuItem1);
afterActionSeccessFn: function(json, $midmenuItem1, id) {
var jsonObj = json.queryasyncjobresultresponse.jobresult.systemvm;
systemvmToMidmenu(jsonObj, $midmenuItem1);
systemvmToRightPanel($midmenuItem1);
}
},
"Reboot System VM": {
@ -125,23 +135,10 @@ var systemVmActionMap = {
asyncJobResponse: "rebootsystemvmresponse",
inProcessText: "Rebooting System VM....",
dialogBeforeActionFn : doRebootSystemVM,
afterActionSeccessFn: function(json, $leftmenuItem1, id) {
//var item = json.queryasyncjobresultresponse.jobresult.rebootsystemvmresponse; //waiting for Bug 6860 to be fixed ("RebootSystemVM should return an embedded object on success")
var item;
$.ajax({
data: createURL("command=listSystemVms&id="+id),
dataType: "json",
async: false,
success: function(json) {
var items = json.listsystemvmsresponse.systemvm;
if (items != null && items.length > 0) {
item = items[0];
}
}
});
$leftmenuItem1.data("jsonObj", item);
systemvmJsonToRightPanel($leftmenuItem1);
afterActionSeccessFn: function(json, $midmenuItem1, id) {
var jsonObj = json.queryasyncjobresultresponse.jobresult.systemvm;
systemvmToMidmenu(jsonObj, $midmenuItem1);
systemvmToRightPanel($midmenuItem1);
}
}
}