mirror of https://github.com/apache/cloudstack.git
new UI - host page - details tab - show spinning wheel before tab is fully loaded.
This commit is contained in:
Jessica Wang
parent
37fd3eef22
commit
3342d9361c
268
ui/jsp/host.jsp
268
ui/jsp/host.jsp
|
|
@ -33,145 +33,147 @@
|
|||
</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 …</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid_container">
|
||||
<div class="grid_header">
|
||||
<div id="grid_header_title" class="grid_header_title">
|
||||
(title)</div>
|
||||
<div 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">
|
||||
Waiting …</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid_rows odd">
|
||||
<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 even">
|
||||
<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 odd">
|
||||
<div class="grid_row_cell" style="width: 20%;">
|
||||
<div class="row_celltitles">
|
||||
<%=t.t("state")%>:</div>
|
||||
</div>
|
||||
<div class="grid_row_cell" style="width: 79%;">
|
||||
<div class="row_celltitles" id="state">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid_rows even">
|
||||
<div class="grid_row_cell" style="width: 20%;">
|
||||
<div class="row_celltitles">
|
||||
<%=t.t("type")%>:</div>
|
||||
</div>
|
||||
<div class="grid_row_cell" style="width: 79%;">
|
||||
<div class="row_celltitles" id="type">
|
||||
</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("pod")%>:</div>
|
||||
</div>
|
||||
<div class="grid_row_cell" style="width: 79%;">
|
||||
<div class="row_celltitles" id="podname">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid_rows odd">
|
||||
<div class="grid_row_cell" style="width: 20%;">
|
||||
<div class="row_celltitles">
|
||||
<%=t.t("cluster")%>:</div>
|
||||
</div>
|
||||
<div class="grid_row_cell" style="width: 79%;">
|
||||
<div class="row_celltitles" id="clustername">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid_rows even">
|
||||
<div class="grid_row_cell" style="width: 20%;">
|
||||
<div class="row_celltitles">
|
||||
<%=t.t("ip.address")%>:</div>
|
||||
</div>
|
||||
<div class="grid_row_cell" style="width: 79%;">
|
||||
<div class="row_celltitles" id="ipaddress">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid_rows odd">
|
||||
<div class="grid_row_cell" style="width: 20%;">
|
||||
<div class="row_celltitles">
|
||||
<%=t.t("version")%>:</div>
|
||||
</div>
|
||||
<div class="grid_row_cell" style="width: 79%;">
|
||||
<div class="row_celltitles" id="version">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid_rows even">
|
||||
<div class="grid_row_cell" style="width: 20%;">
|
||||
<div class="row_celltitles">
|
||||
<%=t.t("os.preference")%>:</div>
|
||||
</div>
|
||||
<div class="grid_row_cell" style="width: 79%;">
|
||||
<div class="row_celltitles" id="oscategoryname">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid_rows odd">
|
||||
<div class="grid_row_cell" style="width: 20%;">
|
||||
<div class="row_celltitles">
|
||||
<%=t.t("last.disconnected")%>:</div>
|
||||
</div>
|
||||
<div class="grid_row_cell" style="width: 79%;">
|
||||
<div class="row_celltitles" id="disconnected">
|
||||
</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 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">
|
||||
Waiting …</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid_rows odd">
|
||||
<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 even">
|
||||
<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 odd">
|
||||
<div class="grid_row_cell" style="width: 20%;">
|
||||
<div class="row_celltitles">
|
||||
<%=t.t("state")%>:</div>
|
||||
</div>
|
||||
<div class="grid_row_cell" style="width: 79%;">
|
||||
<div class="row_celltitles" id="state">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid_rows even">
|
||||
<div class="grid_row_cell" style="width: 20%;">
|
||||
<div class="row_celltitles">
|
||||
<%=t.t("type")%>:</div>
|
||||
</div>
|
||||
<div class="grid_row_cell" style="width: 79%;">
|
||||
<div class="row_celltitles" id="type">
|
||||
</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("pod")%>:</div>
|
||||
</div>
|
||||
<div class="grid_row_cell" style="width: 79%;">
|
||||
<div class="row_celltitles" id="podname">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid_rows odd">
|
||||
<div class="grid_row_cell" style="width: 20%;">
|
||||
<div class="row_celltitles">
|
||||
<%=t.t("cluster")%>:</div>
|
||||
</div>
|
||||
<div class="grid_row_cell" style="width: 79%;">
|
||||
<div class="row_celltitles" id="clustername">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid_rows even">
|
||||
<div class="grid_row_cell" style="width: 20%;">
|
||||
<div class="row_celltitles">
|
||||
<%=t.t("ip.address")%>:</div>
|
||||
</div>
|
||||
<div class="grid_row_cell" style="width: 79%;">
|
||||
<div class="row_celltitles" id="ipaddress">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid_rows odd">
|
||||
<div class="grid_row_cell" style="width: 20%;">
|
||||
<div class="row_celltitles">
|
||||
<%=t.t("version")%>:</div>
|
||||
</div>
|
||||
<div class="grid_row_cell" style="width: 79%;">
|
||||
<div class="row_celltitles" id="version">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid_rows even">
|
||||
<div class="grid_row_cell" style="width: 20%;">
|
||||
<div class="row_celltitles">
|
||||
<%=t.t("os.preference")%>:</div>
|
||||
</div>
|
||||
<div class="grid_row_cell" style="width: 79%;">
|
||||
<div class="row_celltitles" id="oscategoryname">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid_rows odd">
|
||||
<div class="grid_row_cell" style="width: 20%;">
|
||||
<div class="row_celltitles">
|
||||
<%=t.t("last.disconnected")%>:</div>
|
||||
</div>
|
||||
<div class="grid_row_cell" style="width: 79%;">
|
||||
<div class="row_celltitles" id="disconnected">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Details tab (end)-->
|
||||
|
||||
|
|
|
|||
|
|
@ -15,26 +15,7 @@
|
|||
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
*
|
||||
*/
|
||||
|
||||
function afterLoadHostJSP($midmenuItem1) {
|
||||
initAddHostButton($("#midmenu_add_link"), "host_page");
|
||||
initAddPrimaryStorageButton($("#midmenu_add2_link"), "host_page");
|
||||
|
||||
initDialog("dialog_add_host");
|
||||
initDialog("dialog_add_pool");
|
||||
initDialog("dialog_confirmation_enable_maintenance");
|
||||
initDialog("dialog_confirmation_cancel_maintenance");
|
||||
initDialog("dialog_confirmation_force_reconnect");
|
||||
initDialog("dialog_confirmation_remove_host");
|
||||
initDialog("dialog_update_os");
|
||||
|
||||
// switch between different tabs
|
||||
var tabArray = [$("#tab_details"), $("#tab_statistics"), $("#tab_instance"), $("#tab_router"), $("#tab_systemvm")];
|
||||
var tabContentArray = [$("#tab_content_details"), $("#tab_content_statistics"), $("#tab_content_instance"), $("#tab_content_router"), $("#tab_content_systemvm")];
|
||||
var afterSwitchFnArray = [hostJsonToDetailsTab, hostJsonToStatisticsTab, hostJsonToInstanceTab, hostJsonToRouterTab, hostJsonToSystemvmTab];
|
||||
switchBetweenDifferentTabs(tabArray, tabContentArray, afterSwitchFnArray);
|
||||
}
|
||||
|
||||
|
||||
|
||||
function hostGetMidmenuId(jsonObj) {
|
||||
return "midmenuItem_host_" + jsonObj.id;
|
||||
|
|
@ -54,7 +35,28 @@ function hostToMidmenu(jsonObj, $midmenuItem1) {
|
|||
}
|
||||
|
||||
function hostToRightPanel($midmenuItem1) {
|
||||
resourceLoadPage("jsp/host.jsp", $midmenuItem1);
|
||||
resourceLoadPage("jsp/host.jsp", $midmenuItem1); //after reloading "jsp/host.jsp", afterLoadHostJSP() will be called.
|
||||
}
|
||||
|
||||
function afterLoadHostJSP($midmenuItem1) {
|
||||
initAddHostButton($("#midmenu_add_link"), "host_page");
|
||||
initAddPrimaryStorageButton($("#midmenu_add2_link"), "host_page");
|
||||
|
||||
initDialog("dialog_add_host");
|
||||
initDialog("dialog_add_pool");
|
||||
initDialog("dialog_confirmation_enable_maintenance");
|
||||
initDialog("dialog_confirmation_cancel_maintenance");
|
||||
initDialog("dialog_confirmation_force_reconnect");
|
||||
initDialog("dialog_confirmation_remove_host");
|
||||
initDialog("dialog_update_os");
|
||||
|
||||
// switch between different tabs
|
||||
var tabArray = [$("#tab_details"), $("#tab_statistics"), $("#tab_instance"), $("#tab_router"), $("#tab_systemvm")];
|
||||
var tabContentArray = [$("#tab_content_details"), $("#tab_content_statistics"), $("#tab_content_instance"), $("#tab_content_router"), $("#tab_content_systemvm")];
|
||||
var afterSwitchFnArray = [hostJsonToDetailsTab, hostJsonToStatisticsTab, hostJsonToInstanceTab, hostJsonToRouterTab, hostJsonToSystemvmTab];
|
||||
switchBetweenDifferentTabs(tabArray, tabContentArray, afterSwitchFnArray);
|
||||
|
||||
$("#right_panel_content").data("$midmenuItem1", $midmenuItem1);
|
||||
}
|
||||
|
||||
function hostJsonToDetailsTab() {
|
||||
|
|
@ -144,7 +146,10 @@ function hostJsonToDetailsTab() {
|
|||
// no available actions
|
||||
if(noAvailableActions == true) {
|
||||
$actionMenu.find("#action_list").append($("#no_available_actions").clone().show());
|
||||
}
|
||||
}
|
||||
|
||||
$thisTab.find("#tab_spinning_wheel").hide();
|
||||
$thisTab.find("#tab_container").show();
|
||||
}
|
||||
|
||||
function hostJsonToStatisticsTab() {
|
||||
|
|
|
|||
Loading…
Reference in New Issue