new UI - volume page - show action menu when mouse over action link.

This commit is contained in:
Jessica Wang 2010-09-12 14:49:24 -07:00
parent f1ab608b18
commit c8160cf0d6
4 changed files with 70 additions and 27 deletions

View File

@ -28,7 +28,17 @@
<div class="tabbox" style="margin-top:15px;">
<div class="content_tabs on">
<%=t.t("Details")%></div>
<div class="grid_actionbox" style="margin:-4px 0 0 0;"></div>
<div class="grid_actionbox" id="volume_action_link" style="margin:-4px 0 0 0;background-color:yello;display:block">
<div class="grid_actionsdropdown_box" id="volume_action_menu" style="display: block;background-color:green">
<ul class="actionsdropdown_boxlist" id="action_list">
</ul>
</div>
</div>
<div class="gridheader_loaderbox" id="spinning_wheel" style="display:none">
<div class="gridheader_loader" id="icon"></div>
<p id="description"> Waiting &hellip; </p>
</div>
</div>
<div class="grid_container">
<div class="grid_rows odd">

View File

@ -448,7 +448,7 @@ function clickInstanceGroupHeader($arrowIcon) {
function vmVolumeJSONToTemplate(json, template) {
template.attr("id","vm_volume_"+json.id);
template.data("id", json.id);
//template.data("id", json.id);
template.data("jsonObj", json);
template.find("#id").text(json.id);
template.find("#name").text(json.name);
@ -460,13 +460,26 @@ function clickInstanceGroupHeader($arrowIcon) {
template.find("#size").text((json.size == "0") ? "" : convertBytes(json.size));
setDateField(json.created, template.find("#created"));
var $actionLink = template.find("#volume_action_link");
$actionLink.bind("mouseover", function(event) {
$(this).find("#volume_action_menu").show();
return false;
});
$actionLink.bind("mouseout", function(event) {
$(this).find("#volume_action_menu").hide();
return false;
});
var $actionMenu = $actionLink.find("#volume_action_menu");
$actionMenu.find("#action_list").empty();
if(json.type=="ROOT") { //"create template" is allowed(when stopped), "detach disk" is disallowed.
if (json.vmstate == "Stopped")
buildActionLinkForSingleObject("Create Template", vmVolumeActionMap, template.find("#volume_action_menu"), volumeListAPIMap, template);
buildActionLinkForSingleObject("Create Template", vmVolumeActionMap, $actionMenu, volumeListAPIMap, template);
}
else { //json.type=="DATADISK": "detach disk" is allowed, "create template" is disallowed.
buildActionLinkForSingleObject("Detach Disk", vmVolumeActionMap, template.find("#volume_action_menu"), volumeListAPIMap, template);
}
buildActionLinkForSingleObject("Detach Disk", vmVolumeActionMap, $actionMenu, volumeListAPIMap, template);
}
}
//***** declaration for volume tab (end) *********************************************************
@ -1217,6 +1230,7 @@ function clickInstanceGroupHeader($arrowIcon) {
//***** VM Wizard (end) ********************************************************************************
//***** Volume tab (begin) *****************************************************************************
/*
$("#volume_action_link").live("mouseover", function(event) {
$(this).find("#volume_action_menu").show();
return false;
@ -1225,6 +1239,7 @@ function clickInstanceGroupHeader($arrowIcon) {
$(this).find("#volume_action_menu").hide();
return false;
});
*/
$.ajax({
data: createURL("command=listOsTypes&response=json"),

View File

@ -195,7 +195,7 @@ function buildActionLinkForSingleObject(label, actionMap, $actionMenu, listAPIMa
$link.data("afterActionSeccessFn", apiInfo.afterActionSeccessFn);
$link.data("dialogBeforeActionFn", apiInfo.dialogBeforeActionFn);
var id = $singleObject.data("id");
var id = $singleObject.data("jsonObj").id;
$link.bind("click", function(event) {
//debugger;
@ -214,7 +214,7 @@ function buildActionLinkForSingleObject(label, actionMap, $actionMenu, listAPIMa
}
function doActionToSingleObject(id, $actionLink, apiCommand, listAPIMap, $singleObject) {
//debugger;
debugger;
var label = $actionLink.data("label");
var inProcessText = $actionLink.data("inProcessText");
var isAsyncJob = $actionLink.data("isAsyncJob");
@ -234,7 +234,7 @@ function doActionToSingleObject(id, $actionLink, apiCommand, listAPIMap, $single
data: createURL(apiCommand),
dataType: "json",
success: function(json) {
//debugger;
debugger;
var jobId = json[asyncJobResponse].jobid;
var timerKey = "asyncJob_" + jobId;
$("body").everyTime(

View File

@ -12,29 +12,49 @@ function volumeToMidmenu(jsonObj, $midmenuItem1, toRightPanelFn) {
}
function volumeToRigntPanel($midmenuItem) {
var jsonObj = $midmenuItem.data("jsonObj");
var json = $midmenuItem.data("jsonObj");
var $rightPanelContent = $("#right_panel_content");
$rightPanelContent.find("#id").text(jsonObj.id);
$rightPanelContent.find("#name").text(fromdb(jsonObj.name));
$rightPanelContent.find("#zonename").text(fromdb(jsonObj.zonename));
$rightPanelContent.find("#device_id").text(jsonObj.deviceid);
$rightPanelContent.find("#state").text(jsonObj.state);
$rightPanelContent.find("#storage").text(fromdb(jsonObj.storage));
$rightPanelContent.find("#account").text(fromdb(jsonObj.account));
$rightPanelContent.data("jsonObj", json);
$rightPanelContent.find("#id").text(json.id);
$rightPanelContent.find("#name").text(fromdb(json.name));
$rightPanelContent.find("#zonename").text(fromdb(json.zonename));
$rightPanelContent.find("#device_id").text(json.deviceid);
$rightPanelContent.find("#state").text(json.state);
$rightPanelContent.find("#storage").text(fromdb(json.storage));
$rightPanelContent.find("#account").text(fromdb(json.account));
$rightPanelContent.find("#type").text(jsonObj.type + " (" + jsonObj.storagetype + " storage)");
$rightPanelContent.find("#size").text((jsonObj.size == "0") ? "" : convertBytes(jsonObj.size));
$rightPanelContent.find("#type").text(json.type + " (" + json.storagetype + " storage)");
$rightPanelContent.find("#size").text((json.size == "0") ? "" : convertBytes(json.size));
if (jsonObj.virtualmachineid == null)
if (json.virtualmachineid == null)
$rightPanelContent.find("#vm_name").text("detached");
else
$rightPanelContent.find("#vm_name").text(getVmName(jsonObj.vmname, jsonObj.vmdisplayname) + " (" + jsonObj.vmstate + ")");
$rightPanelContent.find("#vm_name").text(getVmName(json.vmname, json.vmdisplayname) + " (" + json.vmstate + ")");
setDateField(jsonObj.created, $rightPanelContent.find("#created"));
setDateField(json.created, $rightPanelContent.find("#created"));
var $actionLink = $rightPanelContent.find("#volume_action_link");
$actionLink.bind("mouseover", function(event) {
$(this).find("#volume_action_menu").show();
return false;
});
$actionLink.bind("mouseout", function(event) {
$(this).find("#volume_action_menu").hide();
return false;
});
var $actionMenu = $actionLink.find("#volume_action_menu");
$actionMenu.find("#action_list").empty();
if(json.type=="ROOT") { //"create template" is allowed(when stopped), "detach disk" is disallowed.
if (json.vmstate == "Stopped")
buildActionLinkForSingleObject("Create Template", volumeActionMap, $actionMenu, volumeListAPIMap, $rightPanelContent);
}
else { //json.type=="DATADISK": "detach disk" is allowed, "create template" is disallowed.
buildActionLinkForSingleObject("Detach Disk", volumeActionMap, $actionMenu, volumeListAPIMap, $rightPanelContent);
}
}
var volumeListAPIMap = {
listAPI: "listVolumes",
listAPIResponse: "listvolumesresponse",
@ -58,8 +78,6 @@ var volumeActionMap = {
}
}
function doCreateTemplate($actionLink, listAPIMap, $singleObject) {
var jsonObj = $singleObject.data("jsonObj");
$("#dialog_create_template").find("#volume_name").text(jsonObj.name);
@ -93,4 +111,4 @@ function doCreateTemplate($actionLink, listAPIMap, $singleObject) {
$(this).dialog("close");
}
}).dialog("open");
}
}