new UI - update details tab in right panel after action is finished.

This commit is contained in:
Jessica Wang 2010-09-14 11:28:26 -07:00
parent 91813371b4
commit 336634c2f5
3 changed files with 200 additions and 34 deletions

View File

@ -469,10 +469,10 @@ function clickInstanceGroupHeader($arrowIcon) {
$actionMenu.find("#action_list").empty(); $actionMenu.find("#action_list").empty();
if(json.type=="ROOT") { //"create template" is allowed(when stopped), "detach disk" is disallowed. if(json.type=="ROOT") { //"create template" is allowed(when stopped), "detach disk" is disallowed.
if (json.vmstate == "Stopped") if (json.vmstate == "Stopped")
buildActionLinkForSingleObject("Create Template", vmVolumeActionMap, $actionMenu, volumeListAPIMap, template); buildActionLinkForSubgridItem("Create Template", vmVolumeActionMap, $actionMenu, volumeListAPIMap, template);
} }
else { //json.type=="DATADISK": "detach disk" is allowed, "create template" is disallowed. else { //json.type=="DATADISK": "detach disk" is allowed, "create template" is disallowed.
buildActionLinkForSingleObject("Detach Disk", vmVolumeActionMap, $actionMenu, volumeListAPIMap, template); buildActionLinkForSubgridItem("Detach Disk", vmVolumeActionMap, $actionMenu, volumeListAPIMap, template);
} }
} }

View File

@ -100,11 +100,11 @@ function doActionForMidMenu(id, $actionLink, apiCommand, listAPIMap) {
data: createURL("command="+listAPI+"&id="+id), data: createURL("command="+listAPI+"&id="+id),
dataType: "json", dataType: "json",
success: function(json) { success: function(json) {
afterActionSeccessFn(json[listAPIResponse][listAPIResponseObj][0], $midmenuItem); afterActionSeccessFn(json[listAPIResponse][listAPIResponseObj][0], $midmenuItem, $midmenuItem.data("toRightPanelFn"));
} }
}); });
//After Bug 6037 is fixed, remove temporary solution above and uncomment the line below //After Bug 6037 is fixed, remove temporary solution above and uncomment the line below
//afterActionSeccessFn(json[listAPIResponse][listAPIResponseObj][0], $midmenuItem); //afterActionSeccessFn(json[listAPIResponse][listAPIResponseObj][0], $midmenuItem, $midmenuItem.data("toRightPanelFn"));
} else if (result.jobstatus == 2) { // Failed } else if (result.jobstatus == 2) { // Failed
$midmenuItem.find("#info_icon").addClass("error").show(); $midmenuItem.find("#info_icon").addClass("error").show();
@ -148,11 +148,11 @@ function doActionForMidMenu(id, $actionLink, apiCommand, listAPIMap) {
success: function(json) { success: function(json) {
$midmenuItem.find("#info_icon").removeClass("error").show(); $midmenuItem.find("#info_icon").removeClass("error").show();
$midmenuItem.data("afterActionInfo", (label + " action succeeded.")); $midmenuItem.data("afterActionInfo", (label + " action succeeded."));
afterActionSeccessFn(json[listAPIResponse][listAPIResponseObj][0], $midmenuItem); afterActionSeccessFn(json[listAPIResponse][listAPIResponseObj][0], $midmenuItem, $midmenuItem.data("toRightPanelFn"));
} }
}); });
//After Bug 6037 is fixed, remove temporary solution above and uncomment the line below //After Bug 6037 is fixed, remove temporary solution above and uncomment the line below
//afterActionSeccessFn(json[listAPIResponse][listAPIResponseObj][0], $midmenuItem); //afterActionSeccessFn(json[listAPIResponse][listAPIResponseObj][0], $midmenuItem, $midmenuItem.data("toRightPanelFn"));
}, },
error: function(XMLHttpResponse) { error: function(XMLHttpResponse) {
handleErrorInMidMenu(XMLHttpResponse, $midmenuItem); handleErrorInMidMenu(XMLHttpResponse, $midmenuItem);
@ -180,8 +180,8 @@ function handleErrorInMidMenu(XMLHttpResponse, $midmenuItem) {
} }
//***** actions for middle menu (end) ************************************************************************** //***** actions for middle menu (end) **************************************************************************
//***** actions for right panel (begin) ************************************************************************ //***** actions for details tab in right panel (begin) ************************************************************************
function buildActionLinkForSingleObject(label, actionMap, $actionMenu, listAPIMap, $singleObject) { function buildActionLinkForDetailsTab(label, actionMap, $actionMenu, listAPIMap, $detailsTab) {
//debugger; //debugger;
var apiInfo = actionMap[label]; var apiInfo = actionMap[label];
var $listItem = $("#action_list_item").clone(); var $listItem = $("#action_list_item").clone();
@ -195,7 +195,7 @@ function buildActionLinkForSingleObject(label, actionMap, $actionMenu, listAPIMa
$link.data("afterActionSeccessFn", apiInfo.afterActionSeccessFn); $link.data("afterActionSeccessFn", apiInfo.afterActionSeccessFn);
$link.data("dialogBeforeActionFn", apiInfo.dialogBeforeActionFn); $link.data("dialogBeforeActionFn", apiInfo.dialogBeforeActionFn);
var id = $singleObject.data("jsonObj").id; var id = $detailsTab.data("jsonObj").id;
$link.bind("click", function(event) { $link.bind("click", function(event) {
//debugger; //debugger;
@ -204,16 +204,16 @@ function buildActionLinkForSingleObject(label, actionMap, $actionMenu, listAPIMa
var dialogBeforeActionFn = $actionLink.data("dialogBeforeActionFn"); var dialogBeforeActionFn = $actionLink.data("dialogBeforeActionFn");
if(dialogBeforeActionFn == null) { if(dialogBeforeActionFn == null) {
var apiCommand = "command="+$actionLink.data("api")+"&id="+id; var apiCommand = "command="+$actionLink.data("api")+"&id="+id;
doActionToSingleObject(id, $actionLink, apiCommand, listAPIMap, $singleObject); doActionToDetailsTab(id, $actionLink, apiCommand, listAPIMap, $detailsTab);
} }
else { else {
dialogBeforeActionFn($actionLink, listAPIMap, $singleObject); dialogBeforeActionFn($actionLink, listAPIMap, $detailsTab);
} }
return false; return false;
}); });
} }
function doActionToSingleObject(id, $actionLink, apiCommand, listAPIMap, $singleObject) { function doActionToDetailsTab(id, $actionLink, apiCommand, listAPIMap, $detailsTab) {
var label = $actionLink.data("label"); var label = $actionLink.data("label");
var inProcessText = $actionLink.data("inProcessText"); var inProcessText = $actionLink.data("inProcessText");
var isAsyncJob = $actionLink.data("isAsyncJob"); var isAsyncJob = $actionLink.data("isAsyncJob");
@ -224,7 +224,7 @@ function doActionToSingleObject(id, $actionLink, apiCommand, listAPIMap, $single
var listAPIResponseObj = listAPIMap["listAPIResponseObj"]; var listAPIResponseObj = listAPIMap["listAPIResponseObj"];
//debugger; //debugger;
var $spinningWheel = $singleObject.find("#spinning_wheel"); var $spinningWheel = $detailsTab.find("#spinning_wheel");
$spinningWheel.find("#description").text(inProcessText); $spinningWheel.find("#description").text(inProcessText);
$spinningWheel.show(); $spinningWheel.show();
@ -253,7 +253,7 @@ function doActionToSingleObject(id, $actionLink, apiCommand, listAPIMap, $single
$("body").stopTime(timerKey); $("body").stopTime(timerKey);
$spinningWheel.hide(); $spinningWheel.hide();
if (result.jobstatus == 1) { // Succeeded if (result.jobstatus == 1) { // Succeeded
$singleObject.data("afterActionInfo", (label + " action succeeded.")); $detailsTab.data("afterActionInfo", (label + " action succeeded."));
//DestroyVirtualMachine API doesn't return an embedded object on success (Bug 6041) //DestroyVirtualMachine API doesn't return an embedded object on success (Bug 6041)
//Before Bug 6041 get fixed, use the temporary solution below. //Before Bug 6041 get fixed, use the temporary solution below.
@ -262,21 +262,21 @@ function doActionToSingleObject(id, $actionLink, apiCommand, listAPIMap, $single
data: createURL("command="+listAPI+"&id="+id), data: createURL("command="+listAPI+"&id="+id),
dataType: "json", dataType: "json",
success: function(json) { success: function(json) {
afterActionSeccessFn(json[listAPIResponse][listAPIResponseObj][0], $singleObject); afterActionSeccessFn(json[listAPIResponse][listAPIResponseObj][0]);
} }
}); });
//After Bug 6037 is fixed, remove temporary solution above and uncomment the line below //After Bug 6037 is fixed, remove temporary solution above and uncomment the line below
//afterActionSeccessFn(json[listAPIResponse][listAPIResponseObj][0], $singleObject); //afterActionSeccessFn(json[listAPIResponse][listAPIResponseObj][0]);
} else if (result.jobstatus == 2) { // Failed } else if (result.jobstatus == 2) { // Failed
$singleObject.data("afterActionInfo", (label + " action failed. Reason: " + sanitizeXSS(result.jobresult))); $detailsTab.data("afterActionInfo", (label + " action failed. Reason: " + sanitizeXSS(result.jobresult)));
} }
} }
}, },
error: function(XMLHttpResponse) { error: function(XMLHttpResponse) {
//debugger; //debugger;
$("body").stopTime(timerKey); $("body").stopTime(timerKey);
handleErrorInSingleObject(XMLHttpResponse, $singleObject, label); handleErrorInDetailsTab(XMLHttpResponse, $detailsTab, label);
} }
}); });
}, },
@ -285,7 +285,7 @@ function doActionToSingleObject(id, $actionLink, apiCommand, listAPIMap, $single
}, },
error: function(XMLHttpResponse) { error: function(XMLHttpResponse) {
//debugger; //debugger;
handleErrorInSingleObject(XMLHttpResponse, $singleObject, label); handleErrorInDetailsTab(XMLHttpResponse, $detailsTab, label);
} }
}); });
} }
@ -310,25 +310,25 @@ function doActionToSingleObject(id, $actionLink, apiCommand, listAPIMap, $single
dataType: "json", dataType: "json",
async: false, async: false,
success: function(json) { success: function(json) {
$singleObject.data("afterActionInfo", (label + " action succeeded.")); $detailsTab.data("afterActionInfo", (label + " action succeeded."));
afterActionSeccessFn(json[listAPIResponse][listAPIResponseObj][0], $singleObject); afterActionSeccessFn(json[listAPIResponse][listAPIResponseObj][0]);
} }
}); });
//After Bug 6037 is fixed, remove temporary solution above and uncomment the line below //After Bug 6037 is fixed, remove temporary solution above and uncomment the line below
//afterActionSeccessFn(json[listAPIResponse][listAPIResponseObj][0], $singleObject); //afterActionSeccessFn(json[listAPIResponse][listAPIResponseObj][0]);
}, },
error: function(XMLHttpResponse) { error: function(XMLHttpResponse) {
//debugger; //debugger;
handleErrorInSingleObject(XMLHttpResponse, $singleObject, label); handleErrorInDetailsTab(XMLHttpResponse, $detailsTab, label);
} }
}); });
} }
//Sync job (end) ***** //Sync job (end) *****
} }
function handleErrorInSingleObject(XMLHttpResponse, $singleObject, label) { function handleErrorInDetailsTab(XMLHttpResponse, $detailsTab, label) {
//debugger; //debugger;
$singleObject.find("#spinning_wheel").hide(); $detailsTab.find("#spinning_wheel").hide();
var errorMsg = ""; var errorMsg = "";
if(XMLHttpResponse.responseText != null & XMLHttpResponse.responseText.length > 0) { if(XMLHttpResponse.responseText != null & XMLHttpResponse.responseText.length > 0) {
@ -337,11 +337,174 @@ function handleErrorInSingleObject(XMLHttpResponse, $singleObject, label) {
errorMsg = XMLHttpResponse.responseText.substring(start, end); errorMsg = XMLHttpResponse.responseText.substring(start, end);
} }
if(errorMsg.length > 0) if(errorMsg.length > 0)
$singleObject.data("afterActionInfo", ((label + " action failed. Reason: " + sanitizeXSS(unescape(errorMsg))))); $detailsTab.data("afterActionInfo", ((label + " action failed. Reason: " + sanitizeXSS(unescape(errorMsg)))));
else else
$singleObject.data("afterActionInfo", (label + " action failed.")); $detailsTab.data("afterActionInfo", (label + " action failed."));
} }
//***** actions for right panel (end) ************************************************************************** //***** actions for details tab in right panel (end) **************************************************************************
//***** actions for a subgrid item in right panel (begin) ************************************************************************
function buildActionLinkForSubgridItem(label, actionMap, $actionMenu, listAPIMap, $subgridItem) {
//debugger;
var apiInfo = actionMap[label];
var $listItem = $("#action_list_item").clone();
$actionMenu.find("#action_list").append($listItem.show());
var $link = $listItem.find("#link").text(label);
$link.data("label", label);
$link.data("inProcessText", apiInfo.inProcessText);
$link.data("api", apiInfo.api);
$link.data("isAsyncJob", apiInfo.isAsyncJob);
$link.data("asyncJobResponse", apiInfo.asyncJobResponse);
$link.data("afterActionSeccessFn", apiInfo.afterActionSeccessFn);
$link.data("dialogBeforeActionFn", apiInfo.dialogBeforeActionFn);
var id = $subgridItem.data("jsonObj").id;
$link.bind("click", function(event) {
//debugger;
$actionMenu.hide();
var $actionLink = $(this);
var dialogBeforeActionFn = $actionLink.data("dialogBeforeActionFn");
if(dialogBeforeActionFn == null) {
var apiCommand = "command="+$actionLink.data("api")+"&id="+id;
doActionToSubgridItem(id, $actionLink, apiCommand, listAPIMap, $subgridItem);
}
else {
dialogBeforeActionFn($actionLink, listAPIMap, $subgridItem);
}
return false;
});
}
function doActionToSubgridItem(id, $actionLink, apiCommand, listAPIMap, $subgridItem) {
var label = $actionLink.data("label");
var inProcessText = $actionLink.data("inProcessText");
var isAsyncJob = $actionLink.data("isAsyncJob");
var asyncJobResponse = $actionLink.data("asyncJobResponse");
var afterActionSeccessFn = $actionLink.data("afterActionSeccessFn");
var listAPI = listAPIMap["listAPI"];
var listAPIResponse = listAPIMap["listAPIResponse"];
var listAPIResponseObj = listAPIMap["listAPIResponseObj"];
//debugger;
var $spinningWheel = $subgridItem.find("#spinning_wheel");
$spinningWheel.find("#description").text(inProcessText);
$spinningWheel.show();
//Async job (begin) *****
if(isAsyncJob == true) {
$.ajax({
data: createURL(apiCommand),
dataType: "json",
success: function(json) {
//debugger;
var jobId = json[asyncJobResponse].jobid;
var timerKey = "asyncJob_" + jobId;
$("body").everyTime(
10000,
timerKey,
function() {
$.ajax({
data: createURL("command=queryAsyncJobResult&jobId="+jobId),
dataType: "json",
success: function(json) {
//debugger;
var result = json.queryasyncjobresultresponse;
if (result.jobstatus == 0) {
return; //Job has not completed
} else {
$("body").stopTime(timerKey);
$spinningWheel.hide();
if (result.jobstatus == 1) { // Succeeded
$subgridItem.data("afterActionInfo", (label + " action succeeded."));
//DestroyVirtualMachine API doesn't return an embedded object on success (Bug 6041)
//Before Bug 6041 get fixed, use the temporary solution below.
$.ajax({
cache: false,
data: createURL("command="+listAPI+"&id="+id),
dataType: "json",
success: function(json) {
afterActionSeccessFn(json[listAPIResponse][listAPIResponseObj][0], $subgridItem);
}
});
//After Bug 6037 is fixed, remove temporary solution above and uncomment the line below
//afterActionSeccessFn(json[listAPIResponse][listAPIResponseObj][0], $subgridItem);
} else if (result.jobstatus == 2) { // Failed
$subgridItem.data("afterActionInfo", (label + " action failed. Reason: " + sanitizeXSS(result.jobresult)));
}
}
},
error: function(XMLHttpResponse) {
//debugger;
$("body").stopTime(timerKey);
handleErrorInSubgridItem(XMLHttpResponse, $subgridItem, label);
}
});
},
0
);
},
error: function(XMLHttpResponse) {
//debugger;
handleErrorInSubgridItem(XMLHttpResponse, $subgridItem, label);
}
});
}
//Async job (end) *****
//Sync job (begin) *****
else {
//debugger;
$.ajax({
data: createURL(apiCommand),
dataType: "json",
async: false,
success: function(json) {
//debugger;
$spinningWheel.hide();
//RecoverVirtualMachine API doesn't return an embedded object on success (Bug 6037)
//Before Bug 6037 get fixed, use the temporary solution below.
$.ajax({
cache: false,
data: createURL("command="+listAPI+"&id="+id),
dataType: "json",
async: false,
success: function(json) {
$subgridItem.data("afterActionInfo", (label + " action succeeded."));
afterActionSeccessFn(json[listAPIResponse][listAPIResponseObj][0], $subgridItem);
}
});
//After Bug 6037 is fixed, remove temporary solution above and uncomment the line below
//afterActionSeccessFn(json[listAPIResponse][listAPIResponseObj][0], $subgridItem);
},
error: function(XMLHttpResponse) {
//debugger;
handleErrorInSubgridItem(XMLHttpResponse, $subgridItem, label);
}
});
}
//Sync job (end) *****
}
function handleErrorInSubgridItem(XMLHttpResponse, $subgridItem, label) {
//debugger;
$subgridItem.find("#spinning_wheel").hide();
var errorMsg = "";
if(XMLHttpResponse.responseText != null & XMLHttpResponse.responseText.length > 0) {
var start = XMLHttpResponse.responseText.indexOf("h1") + 3;
var end = XMLHttpResponse.responseText.indexOf("</h1");
errorMsg = XMLHttpResponse.responseText.substring(start, end);
}
if(errorMsg.length > 0)
$subgridItem.data("afterActionInfo", ((label + " action failed. Reason: " + sanitizeXSS(unescape(errorMsg)))));
else
$subgridItem.data("afterActionInfo", (label + " action failed."));
}
//***** actions for a subgrid item in right panel (end) **************************************************************************

View File

@ -36,7 +36,10 @@ function volumeToMidmenu(jsonObj, $midmenuItem1, toRightPanelFn) {
function volumeToRigntPanel($midmenuItem) { function volumeToRigntPanel($midmenuItem) {
var json = $midmenuItem.data("jsonObj"); var json = $midmenuItem.data("jsonObj");
volumeJsonToDetailsTab(json);
}
function volumeJsonToDetailsTab(json){
var $rightPanelContent = $("#right_panel_content"); var $rightPanelContent = $("#right_panel_content");
$rightPanelContent.data("jsonObj", json); $rightPanelContent.data("jsonObj", json);
$rightPanelContent.find("#id").text(json.id); $rightPanelContent.find("#id").text(json.id);
@ -71,10 +74,10 @@ function volumeToRigntPanel($midmenuItem) {
$actionMenu.find("#action_list").empty(); $actionMenu.find("#action_list").empty();
if(json.type=="ROOT") { //"create template" is allowed(when stopped), "detach disk" is disallowed. if(json.type=="ROOT") { //"create template" is allowed(when stopped), "detach disk" is disallowed.
if (json.vmstate == "Stopped") if (json.vmstate == "Stopped")
buildActionLinkForSingleObject("Create Template", volumeActionMap, $actionMenu, volumeListAPIMap, $rightPanelContent); buildActionLinkForDetailsTab("Create Template", volumeActionMap, $actionMenu, volumeListAPIMap, $rightPanelContent);
} }
else { //json.type=="DATADISK": "detach disk" is allowed, "create template" is disallowed. else { //json.type=="DATADISK": "detach disk" is allowed, "create template" is disallowed.
buildActionLinkForSingleObject("Detach Disk", volumeActionMap, $actionMenu, volumeListAPIMap, $rightPanelContent); buildActionLinkForDetailsTab("Detach Disk", volumeActionMap, $actionMenu, volumeListAPIMap, $rightPanelContent);
} }
} }
@ -90,7 +93,7 @@ var volumeActionMap = {
isAsyncJob: true, isAsyncJob: true,
asyncJobResponse: "detachvolumeresponse", asyncJobResponse: "detachvolumeresponse",
inProcessText: "Detaching disk....", inProcessText: "Detaching disk....",
afterActionSeccessFn: function(){} afterActionSeccessFn: volumeJsonToDetailsTab
}, },
"Create Template": { "Create Template": {
isAsyncJob: true, isAsyncJob: true,