mirror of https://github.com/apache/cloudstack.git
new UI - virtual router page - show loading image before page is fully loaded.
This commit is contained in:
Jessica Wang
parent
21f8bfde8b
commit
9a0908ab28
|
|
@ -29,140 +29,141 @@
|
|||
<%=t.t("Details")%></div>
|
||||
</div>
|
||||
<div id="tab_content_details">
|
||||
<div class="rightpanel_mainloader_panel" style="display:block;">
|
||||
<div id="tab_spinning_wheel" class="rightpanel_mainloader_panel" style="display:none;">
|
||||
<div class="rightpanel_mainloaderbox">
|
||||
<div class="rightpanel_mainloader_animatedicon"></div>
|
||||
<p>Loading …</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="account_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 …</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid_rows odd">
|
||||
<div class="vm_statusbox">
|
||||
<div id="view_console_container">
|
||||
<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 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="account_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 …</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid_rows odd">
|
||||
<div class="vm_statusbox">
|
||||
<div id="view_console_container">
|
||||
<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("Zone")%>:</div>
|
||||
</div>
|
||||
<div class="grid_row_cell" style="width: 79%;">
|
||||
<div class="row_celltitles" id="zonename">
|
||||
</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("Zone")%>:</div>
|
||||
</div>
|
||||
<div class="grid_row_cell" style="width: 79%;">
|
||||
<div class="row_celltitles" id="zonename">
|
||||
<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>
|
||||
<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 class="grid_rows even">
|
||||
<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>
|
||||
<div class="grid_rows even">
|
||||
<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 class="grid_rows odd">
|
||||
<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>
|
||||
<div class="grid_rows odd">
|
||||
<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 class="grid_rows even">
|
||||
<div class="grid_row_cell" style="width: 20%;">
|
||||
<div class="row_celltitles">
|
||||
<%=t.t("Guest IP")%>:</div>
|
||||
</div>
|
||||
<div class="grid_row_cell" style="width: 79%;">
|
||||
<div class="row_celltitles" id="guestipaddress">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid_rows even">
|
||||
<div class="grid_row_cell" style="width: 20%;">
|
||||
<div class="row_celltitles">
|
||||
<%=t.t("Guest IP")%>:</div>
|
||||
</div>
|
||||
<div class="grid_row_cell" style="width: 79%;">
|
||||
<div class="row_celltitles" id="guestipaddress">
|
||||
<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>
|
||||
<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 class="grid_rows even">
|
||||
<div class="grid_row_cell" style="width: 20%;">
|
||||
<div class="row_celltitles">
|
||||
<%=t.t("Network Domain")%>:</div>
|
||||
</div>
|
||||
<div class="grid_row_cell" style="width: 79%;">
|
||||
<div class="row_celltitles" id="networkdomain">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid_rows even">
|
||||
<div class="grid_row_cell" style="width: 20%;">
|
||||
<div class="row_celltitles">
|
||||
<%=t.t("Network Domain")%>:</div>
|
||||
</div>
|
||||
<div class="grid_row_cell" style="width: 79%;">
|
||||
<div class="row_celltitles" id="networkdomain">
|
||||
<div class="grid_rows odd">
|
||||
<div class="grid_row_cell" style="width: 20%;">
|
||||
<div class="row_celltitles">
|
||||
<%=t.t("Account")%>:</div>
|
||||
</div>
|
||||
<div class="grid_row_cell" style="width: 79%;">
|
||||
<div class="row_celltitles" id="account">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid_rows odd">
|
||||
<div class="grid_row_cell" style="width: 20%;">
|
||||
<div class="row_celltitles">
|
||||
<%=t.t("Account")%>:</div>
|
||||
</div>
|
||||
<div class="grid_row_cell" style="width: 79%;">
|
||||
<div class="row_celltitles" id="account">
|
||||
<div class="grid_rows even">
|
||||
<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 class="grid_rows even">
|
||||
<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>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -41,6 +41,10 @@ function routerToRightPanel($midmenuItem1) {
|
|||
}
|
||||
|
||||
function routerJsonToDetailsTab($midmenuItem1) {
|
||||
var $thisTab = $("#right_panel_content #tab_content_details");
|
||||
$thisTab.find("#tab_container").hide();
|
||||
$thisTab.find("#tab_spinning_wheel").show();
|
||||
|
||||
var jsonObj = $midmenuItem1.data("jsonObj");
|
||||
var $detailsTab = $("#right_panel_content #tab_content_details");
|
||||
$detailsTab.data("jsonObj", jsonObj);
|
||||
|
|
@ -77,7 +81,10 @@ function routerJsonToDetailsTab($midmenuItem1) {
|
|||
if(noAvailableActions == true) {
|
||||
$actionMenu.find("#action_list").append($("#no_available_actions").clone().show());
|
||||
}
|
||||
//***** actions (end) *****
|
||||
//***** actions (end) *****
|
||||
|
||||
$thisTab.find("#tab_spinning_wheel").hide();
|
||||
$thisTab.find("#tab_container").show();
|
||||
}
|
||||
|
||||
var routerActionMap = {
|
||||
|
|
|
|||
|
|
@ -57,7 +57,7 @@ function snapshotToRightPanel($midmenuItem1) {
|
|||
}
|
||||
|
||||
function snapshotJsonToDetailsTab() {
|
||||
var $thisTab = $("#right_panel_content #tab_content_details");
|
||||
var $thisTab = $("#right_panel_content #tab_content_details");
|
||||
$thisTab.find("#tab_container").hide();
|
||||
$thisTab.find("#tab_spinning_wheel").show();
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue