new UI - volume page - adjust position of spinning wheel and add dialog box that will appear after action is finished.

This commit is contained in:
Jessica Wang 2010-09-14 09:53:18 -07:00
parent 8f955c2889
commit ef6f5b6181
10 changed files with 67 additions and 54 deletions

View File

@ -39,7 +39,7 @@
<div class="grid_editbox"></div>
<div class="gridheader_loaderbox" style="border:1px solid #999; display:none;">
<div class="gridheader_loader"></div>
<p>Dettaching Disk &hellip;</p>
<p>Detaching Disk &hellip;</p>
</div>
<div class="gridheader_message" style="border:1px solid #999; display:block;">

View File

@ -140,6 +140,16 @@
</div>
</div>
</div>
<div class="grid_rows odd">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
<%=t.t("Group")%>:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="group">
</div>
</div>
</div>
</div>
<!--Details tab (end)-->

View File

@ -24,32 +24,38 @@
<div class="contentbox" id="right_panel_content">
<div class="info_detailbox errorbox" id="after_action_info_container" style="display:none">
<p id="after_action_info"></p>
</div>
<div class="grid_actionpanel">
<div class="grid_actionbox" id="volume_action_link">
<div class="grid_actionsdropdown_box" id="volume_action_menu" style="display:none">
<ul class="actionsdropdown_boxlist" id="action_list">
<!--
<li> <a href="#"> Delete </a> </li>
<li> <a href="#"> Attach Disk </a> </li>
-->
</ul>
</div>
</div>
<!--
<div class="grid_editbox"></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="tabbox" style="margin-top:15px;">
<div class="content_tabs on">
<%=t.t("Details")%></div>
<div class="grid_actionpanel">
<div class="grid_actionbox" id="volume_action_link">
<div class="grid_actionsdropdown_box" id="volume_action_menu" style="display:none;">
<ul class="actionsdropdown_boxlist" id="action_list">
<!--
<li> <a href="#"> Delete </a> </li>
<li> <a href="#"> Attach Disk </a> </li>
-->
</ul>
</div>
</div>
<div class="grid_editbox"></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 class="gridheader_message" id="message_box" style="border:1px solid #999; display:none;">
<p>Disk has been succesfully dettached &hellip;</p>
<div class="close_button"></div>
</div>
<div class="gridheader_message error" style="border:1px solid #999; display:none;">
<p>Some problem occured while dettaching disk &hellip;</p>
<div class="close_button"></div>
</div>
</div>
</div>
<div class="grid_container">

View File

@ -14,8 +14,8 @@ function accountToMidmenu(jsonObj, $midmenuItem1, toRightPanelFn) {
else if (jsonObj.accounttype == roleTypeDomainAdmin)
$iconContainer.find("#icon").attr("src", "images/midmenuicon_account_domain.png");
$midmenuItem1.find("#first_row").text(jsonObj.name.substring(0,25));
$midmenuItem1.find("#second_row").text(jsonObj.domain.substring(0,25));
$midmenuItem1.find("#first_row").text(fromdb(jsonObj.name).substring(0,25));
$midmenuItem1.find("#second_row").text(fromdb(jsonObj.domain).substring(0,25));
$midmenuItem1.data("toRightPanelFn", toRightPanelFn);
}

View File

@ -349,22 +349,6 @@ function clickInstanceGroupHeader($arrowIcon) {
});
}
function vmClearRightPanel(jsonObj) {
$rightPanelHeader.find("#vm_name").text("");
updateVirtualMachineStateInRightPanel("");
$rightPanelContent.find("#ipAddress").text("");
$rightPanelContent.find("#zoneName").text("");
$rightPanelContent.find("#templateName").text("");
$rightPanelContent.find("#serviceOfferingName").text("");
$rightPanelContent.find("#ha").hide();
$rightPanelContent.find("#created").text("");
$rightPanelContent.find("#account").text("");
$rightPanelContent.find("#domain").text("");
$rightPanelContent.find("#hostName").text("");
$rightPanelContent.find("#group").text("");
$rightPanelContent.find("#iso").hide();
}
function vmToRightPanel($midmenuItem) {
//details tab
if($midmenuItem.find("#info_icon").css("display") != "none") {
@ -418,6 +402,22 @@ function clickInstanceGroupHeader($arrowIcon) {
}
});
}
function vmClearRightPanel(jsonObj) {
$rightPanelHeader.find("#vm_name").text("");
updateVirtualMachineStateInRightPanel("");
$rightPanelContent.find("#ipAddress").text("");
$rightPanelContent.find("#zoneName").text("");
$rightPanelContent.find("#templateName").text("");
$rightPanelContent.find("#serviceOfferingName").text("");
$rightPanelContent.find("#ha").hide();
$rightPanelContent.find("#created").text("");
$rightPanelContent.find("#account").text("");
$rightPanelContent.find("#domain").text("");
$rightPanelContent.find("#hostName").text("");
$rightPanelContent.find("#group").text("");
$rightPanelContent.find("#iso").hide();
}
//***** declaration for volume tab (begin) *********************************************************
var vmVolumeActionMap = {

View File

@ -10,15 +10,12 @@ function ipToMidmenu(jsonObj, $midmenuItem1, toRightPanelFn) {
$iconContainer.find("#icon").attr("src", "images/midmenuicon_network_networkgroup.png");
$midmenuItem1.find("#first_row").text(jsonObj.ipaddress.substring(0,25));
$midmenuItem1.find("#second_row").text(jsonObj.account.substring(0,25));
$midmenuItem1.find("#second_row").text(fromdb(jsonObj.account).substring(0,25));
$midmenuItem1.data("toRightPanelFn", toRightPanelFn);
}
function ipToRigntPanel($midmenuItem) {
var jsonObj = $midmenuItem.data("jsonObj");
var $rightPanelContent = $("#right_panel_content");
//$rightPanelContent.find("#type").text(jsonObj.type);
//$rightPanelContent.find("#description").text(jsonObj.description);
//setDateField(jsonObj.sent, $rightPanelContent.find("#sent"));
var $rightPanelContent = $("#right_panel_content");
}

View File

@ -9,8 +9,8 @@ function isoToMidmenu(jsonObj, $midmenuItem1, toRightPanelFn) {
var $iconContainer = $midmenuItem1.find("#icon_container").show();
setIconByOsType(jsonObj.ostypename, $iconContainer.find("#icon"));
$midmenuItem1.find("#first_row").text(jsonObj.name.substring(0,25));
$midmenuItem1.find("#second_row").text(jsonObj.zonename.substring(0,25));
$midmenuItem1.find("#first_row").text(fromdb(jsonObj.name).substring(0,25));
$midmenuItem1.find("#second_row").text(fromdb(jsonObj.zonename).substring(0,25));
$midmenuItem1.data("toRightPanelFn", toRightPanelFn);
}

View File

@ -9,8 +9,8 @@ function snapshotToMidmenu(jsonObj, $midmenuItem1, toRightPanelFn) {
var $iconContainer = $midmenuItem1.find("#icon_container").show();
$iconContainer.find("#icon").attr("src", "images/midmenuicon_storage_snapshots.png");
$midmenuItem1.find("#first_row").text(jsonObj.name.substring(0,25));
$midmenuItem1.find("#second_row").text(jsonObj.volumename.substring(0,25));
$midmenuItem1.find("#first_row").text(fromdb(jsonObj.name).substring(0,25));
$midmenuItem1.find("#second_row").text(fromdb(jsonObj.volumename).substring(0,25));
$midmenuItem1.data("toRightPanelFn", toRightPanelFn);
}

View File

@ -16,8 +16,8 @@ function templateToMidmenu(jsonObj, $midmenuItem1, toRightPanelFn) {
else if(jsonObj.level == "WARN")
iconContainer.find("#icon").attr("src", "images/midmenuicon_events_warning.png");
$midmenuItem1.find("#first_row").text(jsonObj.name.substring(0,25));
$midmenuItem1.find("#second_row").text(jsonObj.zonename.substring(0,25));
$midmenuItem1.find("#first_row").text(fromdb(jsonObj.name).substring(0,25));
$midmenuItem1.find("#second_row").text(fromdb(jsonObj.zonename).substring(0,25));
$midmenuItem1.data("toRightPanelFn", toRightPanelFn);
}

View File

@ -29,7 +29,7 @@ function volumeToMidmenu(jsonObj, $midmenuItem1, toRightPanelFn) {
var $iconContainer = $midmenuItem1.find("#icon_container").show();
$iconContainer.find("#icon").attr("src", "images/midmenuicon_storage_volume.png");
$midmenuItem1.find("#first_row").text(jsonObj.name.substring(0,25));
$midmenuItem1.find("#first_row").text(fromdb(jsonObj.name).substring(0,25));
$midmenuItem1.find("#second_row").text(jsonObj.type.substring(0,25));
$midmenuItem1.data("toRightPanelFn", toRightPanelFn);
}