apache/cloudstack
1
0
Fork 0
mirror of https://github.com/apache/cloudstack.git synced 2025-11-03 04:12:31 +01:00
Code Issues Packages Projects Releases Wiki Activity

template page - add Download Progress Bar that shows when download progress is not finished and hides when download progress finishes.

Browse Source
This commit is contained in:
Jessica Wang 2011-02-15 16:26:48 -08:00
parent a05400604b
commit eb33345f2e
3 changed files with 104 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
ui/jsp/template.jsp
View File

@ -17,7 +17,8 @@ dictionary = {
'label.action.create.vm' : '<fmt:message key="label.action.create.vm"/>',
'label.action.create.vm.processing' : '<fmt:message key="label.action.create.vm.processing"/>',
'label.action.download.template' : '<fmt:message key="label.action.download.template"/>',
'message.download.template': '<fmt:message key="message.download.template"/>'
'message.download.template': '<fmt:message key="message.download.template"/>',
'label.download.progress' : '<fmt:message key="label.download.progress"/>'
};
</script>
@ -129,18 +130,8 @@ dictionary = {
<div class="row_celltitles" id="templatetype">
</div>
</div>
</div>
</div>
<div class="grid_rows odd">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
<fmt:message key="label.status"/>:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="status">
</div>
</div>
</div>
<div class="grid_rows even">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
<fmt:message key="label.size"/>:</div>
@ -150,7 +141,7 @@ dictionary = {
</div>
</div>
</div>
<div class="grid_rows odd">
<div class="grid_rows even">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
<fmt:message key="label.password.enabled"/>:</div>
@ -164,7 +155,7 @@ dictionary = {
</select>
</div>
</div>
<div class="grid_rows even">
<div class="grid_rows odd">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
<fmt:message key="label.public"/>:</div>
@ -178,7 +169,7 @@ dictionary = {
</select>
</div>
</div>
<div class="grid_rows odd">
<div class="grid_rows even">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
<fmt:message key="label.featured"/>:</div>
@ -192,7 +183,7 @@ dictionary = {
</select>
</div>
</div>
<div class="grid_rows even">
<div class="grid_rows odd">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
<fmt:message key="label.cross.zones"/>:</div>
@ -202,7 +193,7 @@ dictionary = {
</div>
</div>
</div>
<div class="grid_rows odd">
<div class="grid_rows even">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
<fmt:message key="label.os.type"/>:</div>
@ -214,7 +205,7 @@ dictionary = {
</select>
</div>
</div>
<div class="grid_rows even">
<div class="grid_rows odd">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
<fmt:message key="label.account"/>:</div>
@ -224,7 +215,7 @@ dictionary = {
</div>
</div>
</div>
<div class="grid_rows odd">
<div class="grid_rows even">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
<fmt:message key="label.domain"/>:</div>
@ -234,7 +225,7 @@ dictionary = {
</div>
</div>
</div>
<div class="grid_rows even">
<div class="grid_rows odd">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
<fmt:message key="label.created"/>:</div>
@ -243,7 +234,27 @@ dictionary = {
<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">
<fmt:message key="label.status"/>:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="status">
</div>
</div>
</div>
<div class="grid_rows odd" id="progressbar_container">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
<fmt:message key="label.download.progress"/>:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div id="progressbar"></div>
</div>
</div>
</div>
<div class="grid_botactionpanel">
<div class="gridbot_buttons" id="save_button" style="display:none;"><fmt:message key="label.save"/></div>

4
ui/scripts/cloud.core.iso.js
View File

@ -376,7 +376,7 @@ function isoJsonToDetailsTab() {
2000,
timerKey,
function() {
refreshStatusDownloadProgress(jsonObj, $thisTab, $midmenuItem1, timerKey);
isoRefreshStatusDownloadProgress(jsonObj, $thisTab, $midmenuItem1, timerKey);
}
)
}
@ -467,7 +467,7 @@ function isoJsonToDetailsTab() {
$thisTab.find("#tab_container").show();
}
function refreshStatusDownloadProgress(oldJsonObj, $thisTab, $midmenuItem1, timerKey) {
function isoRefreshStatusDownloadProgress(oldJsonObj, $thisTab, $midmenuItem1, timerKey) {
var strCmd = "command=listIsos&isofilter=self&id="+oldJsonObj.id;
if(oldJsonObj.zoneid != null)
strCmd = strCmd + "&zoneid="+oldJsonObj.zoneid;

70
ui/scripts/cloud.core.template.js
View File

@ -350,11 +350,44 @@ function templateJsonToDetailsTab() {
$thisTab.find("#hypervisor").text(fromdb(jsonObj.hypervisor));
$thisTab.find("#templatetype").text(fromdb(jsonObj.templatetype));
/*
var status = "Ready";
if (jsonObj.isready == false)
status = fromdb(jsonObj.status);
setTemplateStateInRightPanel(status, $thisTab.find("#status"));
*/
var timerKey = "templateDownloadProgress";
$("body").stopTime(timerKey); //stop timer on previously selected middle menu item in template page
if(jsonObj.isready == true){
setTemplateStateInRightPanel("Ready", $thisTab.find("#status"));
$("#progressbar_container").hide();
}
else {
$("#progressbar_container").show();
setTemplateStateInRightPanel(fromdb(jsonObj.status), $thisTab.find("#status"));
var progressBarValue = 0;
if(jsonObj.status != null && jsonObj.status.indexOf("%") != -1) { //e.g. jsonObj.status == "95% Downloaded"
var s = jsonObj.status.substring(0, jsonObj.status.indexOf("%")); //e.g. s == "95"
if(isNaN(s) == false) {
progressBarValue = parseInt(s); //e.g. progressBarValue == 95
}
}
$("#progressbar").progressbar({
value: progressBarValue //e.g. progressBarValue == 95
});
$("body").everyTime(
2000,
timerKey,
function() {
templateRefreshStatusDownloadProgress(jsonObj, $thisTab, $midmenuItem1, timerKey);
}
)
}
if(jsonObj.size != null)
$thisTab.find("#size").text(convertBytes(parseInt(jsonObj.size)));
else
@ -428,6 +461,43 @@ function templateJsonToDetailsTab() {
$thisTab.find("#tab_container").show();
}
function templateRefreshStatusDownloadProgress(oldJsonObj, $thisTab, $midmenuItem1, timerKey) {
var strCmd = "command=listTemplates&templatefilter=self&id="+oldJsonObj.id;
if(oldJsonObj.zoneid != null)
strCmd = strCmd +"&zoneid="+oldJsonObj.zoneid;
$.ajax({
data: createURL(strCmd),
dataType: "json",
success: function(json) {
var items = json.listtemplatesresponse.template;
if(items != null && items.length > 0) {
var jsonObj = items[0];
$midmenuItem1.data("jsonObj", jsonObj);
if(jsonObj.isready == true) {
setTemplateStateInRightPanel("Ready", $thisTab.find("#status"));
$("#progressbar_container").hide();
$("body").stopTime(timerKey);
}
else {
setTemplateStateInRightPanel(fromdb(jsonObj.status), $thisTab.find("#status"));
var progressBarValue = 0;
if(jsonObj.status != null && jsonObj.status.indexOf("%") != -1) { //e.g. jsonObj.status == "95% Downloaded"
var s = jsonObj.status.substring(0, jsonObj.status.indexOf("%")); //e.g. s == "95"
if(isNaN(s) == false) {
progressBarValue = parseInt(s); //e.g. progressBarValue == 95
}
}
$("#progressbar").progressbar({
value: progressBarValue //e.g. progressBarValue == 95
});
}
}
}
});
}
//setIconByOsType() is shared by template page and ISO page
function setIconByOsType(osType, $field) {
if (osType == null || osType.length == 0)