etan39
/
cloudstack
mirror of https://github.com/apache/cloudstack.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

new UI - instance page - Add spinning wheel to each tab. Show spinning wheel before loading is finished in each tab.

This commit is contained in:
Jessica Wang 2010-10-29 20:38:26 -07:00
parent c026bceb6d
commit cf69ee0b0d
3 changed files with 61 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
ui/new/jsp/instance.jsp
View File

@ -34,7 +34,7 @@
</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 &hellip;</p>
@ -216,12 +216,19 @@
<!--Details tab (end)-->
<!--Volume tab (start)-->
<div style="display: none;" id="tab_content_volume">
Volume
<div id="tab_spinning_wheel" class="rightpanel_mainloader_panel" style="display:none;">
<div class="rightpanel_mainloaderbox">
<div class="rightpanel_mainloader_animatedicon"></div>
<p>Loading &hellip;</p>
</div>
</div>
<div id="tab_container">
</div>
</div>
<!--Volume tab (end)-->
<!--Statistics tab (start)-->
<div style="display: none;" id="tab_content_statistics">
<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 &hellip;</p>
@ -280,7 +287,14 @@
<!--Statistics tab (start)-->
<!--Routers tab (start)-->
<div style="display: none;" id="tab_content_router">
Routers
<div id="tab_spinning_wheel" class="rightpanel_mainloader_panel" style="display:none;">
<div class="rightpanel_mainloaderbox">
<div class="rightpanel_mainloader_animatedicon"></div>
<p>Loading &hellip;</p>
</div>
</div>
<div id="tab_container">
</div>
</div>
<!--Routers tab (start)-->
</div>
@ -817,13 +831,7 @@
<!-- VM Wizard - disk Offering template (end)-->
<!-- volume tab template (begin) -->
<div class="grid_container" id="volume_tab_template" style="display: none">
<div class="rightpanel_mainloader_panel" style="display:none;">
<div class="rightpanel_mainloaderbox">
<div class="rightpanel_mainloader_animatedicon"></div>
<p>Loading &hellip;</p>
</div>
</div>
<div class="grid_container" id="volume_tab_template" style="display: none">
<div class="grid_header">
<div class="grid_header_title" id="title">
</div>
@ -912,13 +920,7 @@
<!-- view console template (end) -->
<!-- router tab template (begin) -->
<div class="grid_container" id="router_tab_template" style="display: none">
<div class="rightpanel_mainloader_panel" style="display:none;">
<div class="rightpanel_mainloaderbox">
<div class="rightpanel_mainloader_animatedicon"></div>
<p>Loading &hellip;</p>
</div>
</div>
<div class="grid_container" id="router_tab_template" style="display: none">
<div class="grid_header">
<div class="grid_header_title" id="title">
</div>

32
ui/new/scripts/cloud.core2.instance.js
View File

@ -1410,11 +1410,12 @@ function vmToRightPanel($midmenuItem1) {
*/
}
function vmJsonToDetailsTab(){
function vmJsonToDetailsTab(){
var $detailsTab = $("#right_panel_content #tab_content_details");
$detailsTab.find("#tab_spinning_wheel").show();
var $midmenuItem1 = $("#right_panel_content").data("$midmenuItem1");
var jsonObj = $midmenuItem1.data("jsonObj");
var $detailsTab = $("#right_panel_content #tab_content_details");
$detailsTab.data("jsonObj", jsonObj);
resetViewConsoleAction(jsonObj, $detailsTab);
@ -1491,13 +1492,17 @@ function vmJsonToDetailsTab(){
//instanceTemplate.find("#vm_action_start, #vm_action_stop, #vm_action_reboot, #vm_action_attach_iso, #vm_action_detach_iso, #vm_action_reset_password, #vm_action_change_service").removeClass().addClass("vmaction_links_off");
}
//to hide view console in details tab....(to-do)
}
}
$detailsTab.find("#tab_spinning_wheel").hide();
}
function vmJsonToVolumeTab() {
//if (getHypervisorType() == "kvm")
//detail.find("#volume_action_create_template").show();
var $thisTab = $("#right_panel_content #tab_content_volume");
beforeLoadingToTab($thisTab);
var $midmenuItem1 = $("#right_panel_content").data("$midmenuItem1");
var jsonObj = $midmenuItem1.data("jsonObj");
@ -1508,19 +1513,23 @@ function vmJsonToVolumeTab() {
success: function(json) {
var items = json.listvolumesresponse.volume;
if (items != null && items.length > 0) {
var container = $("#right_panel_content #tab_content_volume").empty();
var $container = $thisTab.find("#tab_container").empty();
var template = $("#volume_tab_template");
for (var i = 0; i < items.length; i++) {
var newTemplate = template.clone(true);
vmVolumeJSONToTemplate(items[i], newTemplate);
container.append(newTemplate.show());
$container.append(newTemplate.show());
}
}
}
afterLoadingToTab($thisTab);
}
});
}
function vmJsonToRouterTab($midmenuItem1) {
var $thisTab = $("#right_panel_content #tab_content_router");
beforeLoadingToTab($thisTab);
var $midmenuItem1 = $("#right_panel_content").data("$midmenuItem1");
var vmObj = $midmenuItem1.data("jsonObj");
@ -1531,14 +1540,15 @@ function vmJsonToRouterTab($midmenuItem1) {
success: function(json) {
var items = json.listroutersresponse.router;
if (items != null && items.length > 0) {
var container = $("#right_panel_content #tab_content_router").empty();
var $container = $thisTab.find("#tab_container").empty();
var template = $("#router_tab_template");
for (var i = 0; i < items.length; i++) {
var newTemplate = template.clone(true);
vmRouterJSONToTemplate(items[i], newTemplate);
container.append(newTemplate.show());
$container.append(newTemplate.show());
}
}
}
afterLoadingToTab($thisTab);
}
});
}

20
ui/new/scripts/cloud.core2.js
View File

@ -993,6 +993,26 @@ function handleErrorInDialog(XMLHttpResponse, $thisDialog) {
$infoContainer.show();
}
function beforeLoadingToTab($thisTab) {
$thisTab.find("#tab_spinning_wheel").show();
$thisTab.find("#tab_container").hide();
}
function afterLoadingToTab($thisTab) {
$thisTab.find("#tab_spinning_wheel").hide();
$thisTab.find("#tab_container").show();
}