Revision 55e4b353
| b/ui/static/main.css | ||
|---|---|---|
| 1012 | 1012 |
.machine div.info {
|
| 1013 | 1013 |
float:left; |
| 1014 | 1014 |
margin-bottom: 8px; |
| 1015 |
margin-top:3px;
|
|
| 1015 |
margin-top:5px;
|
|
| 1016 | 1016 |
} |
| 1017 | 1017 |
|
| 1018 | 1018 |
.machine div.info div.info-header {
|
| ... | ... | |
| 4274 | 4274 |
bottom: 5px; |
| 4275 | 4275 |
right: -250px; |
| 4276 | 4276 |
} |
| 4277 |
|
|
| 4278 |
|
|
| 4279 |
.machine-container .build-progress {
|
|
| 4280 |
font-size: 0.7em; |
|
| 4281 |
color: #222; |
|
| 4282 |
margin-bottom: 15px; |
|
| 4283 |
} |
|
| 4284 |
|
|
| 4285 |
.single .progress-message {
|
|
| 4286 |
margin-top: 90px; |
|
| 4287 |
font-size: 0.6em; |
|
| 4288 |
padding: 0 10px; |
|
| 4289 |
text-align: center; |
|
| 4290 |
} |
|
| b/ui/static/synnefo.js | ||
|---|---|---|
| 208 | 208 |
} |
| 209 | 209 |
} |
| 210 | 210 |
|
| 211 |
// simple string format helper (http://stackoverflow.com/questions/610406/javascript-equivalent-to-printf-string-format) |
|
| 212 |
String.prototype.format = function() {
|
|
| 213 |
var formatted = this; |
|
| 214 |
for (var i = 0; i < arguments.length; i++) {
|
|
| 215 |
var regexp = new RegExp('\\{'+i+'\\}', 'gi');
|
|
| 216 |
formatted = formatted.replace(regexp, arguments[i]); |
|
| 217 |
} |
|
| 218 |
return formatted; |
|
| 219 |
}; |
|
| 220 |
|
|
| 221 |
|
|
| 211 | 222 |
function update_confirmations() {
|
| 212 | 223 |
// hide all confirm boxes to begin with |
| 213 | 224 |
$('#machines-pane div.confirm_single').hide();
|
| ... | ... | |
| 2757 | 2768 |
return undefined; |
| 2758 | 2769 |
} |
| 2759 | 2770 |
} |
| 2771 |
|
|
| 2772 |
|
|
| 2773 |
function get_progress_details(id) {
|
|
| 2774 |
var vm = get_machine(id); |
|
| 2775 |
var progress = vm.progress; |
|
| 2776 |
|
|
| 2777 |
// no details for active machines |
|
| 2778 |
if (!vm.status == "BUILD") {
|
|
| 2779 |
return false; |
|
| 2780 |
} |
|
| 2781 |
|
|
| 2782 |
// check if images not loaded yet |
|
| 2783 |
try {
|
|
| 2784 |
var image = get_image_params(vm.imageRef); |
|
| 2785 |
var size = image.size; |
|
| 2786 |
} catch (err) {
|
|
| 2787 |
// images not loaded yet (can this really happen ??) |
|
| 2788 |
return; |
|
| 2789 |
} |
|
| 2790 |
|
|
| 2791 |
var to_copy = size; |
|
| 2792 |
var copied = (size * progress / 100).toFixed(2); |
|
| 2793 |
var status = "INIT" |
|
| 2794 |
|
|
| 2795 |
// apply state |
|
| 2796 |
if (progress > 0) { status = "IMAGE_COPY" }
|
|
| 2797 |
if (progress >= 100) { status = "FINISH" }
|
|
| 2798 |
|
|
| 2799 |
// user information |
|
| 2800 |
var msg = BUILDING_STATUSES[status]; |
|
| 2801 |
|
|
| 2802 |
// image copy state display extended user information |
|
| 2803 |
if (status == "IMAGE_COPY") {
|
|
| 2804 |
msg = msg.format(readablizeBytes(copied*(1024*1024)), readablizeBytes(to_copy*(1024*1024)), progress) |
|
| 2805 |
} |
|
| 2806 |
|
|
| 2807 |
var progress_data = {
|
|
| 2808 |
'percent': vm.progress, |
|
| 2809 |
'build_status': status, |
|
| 2810 |
'copied': copied, |
|
| 2811 |
'to_copy': size, |
|
| 2812 |
'msg': msg |
|
| 2813 |
} |
|
| 2814 |
|
|
| 2815 |
return progress_data; |
|
| 2816 |
} |
|
| 2817 |
|
|
| 2818 |
// display user friendly bytes amount |
|
| 2819 |
function readablizeBytes(bytes) {
|
|
| 2820 |
var s = ['bytes', 'kb', 'MB', 'GB', 'TB', 'PB']; |
|
| 2821 |
var e = Math.floor(Math.log(bytes)/Math.log(1024)); |
|
| 2822 |
return (bytes/Math.pow(1024, Math.floor(e))).toFixed(2)+" "+s[e]; |
|
| 2823 |
} |
|
| 2824 |
|
|
| b/ui/templates/home.html | ||
|---|---|---|
| 77 | 77 |
var APP_DEBUG = {% if DEBUG %}true{% else %}false{% endif %};
|
| 78 | 78 |
var FEEDBACK_URL = "{% url feedback %}";
|
| 79 | 79 |
var FEEDBACK_TITLE = "{% trans "Send feedback" %}";
|
| 80 |
|
|
| 81 |
// building statuses |
|
| 82 |
var BUILDING_STATUSES = {
|
|
| 83 |
'INIT': '{% trans "Initializing..." %}',
|
|
| 84 |
'IMAGE_COPY': '{% trans "{0} of {1} ({2}%)" %}',
|
|
| 85 |
'FINISH': '{% trans "Finalizing..." %}'
|
|
| 86 |
} |
|
| 80 | 87 |
|
| 81 | 88 |
// server statuses and transitions |
| 82 | 89 |
var STATUSES = {
|
| b/ui/templates/machines_icon.html | ||
|---|---|---|
| 58 | 58 |
<span class="ip-version-label">v6</span> <span class="public ipv6-text"></span> |
| 59 | 59 |
</h5> |
| 60 | 60 |
</span> |
| 61 |
<span class="build-progress"></span> |
|
| 61 | 62 |
</div> |
| 62 | 63 |
<div class="info"> |
| 63 | 64 |
<div class="info-header"> |
| ... | ... | |
| 723 | 724 |
list_metadata_keys(server.id, server.metadata.values); |
| 724 | 725 |
} |
| 725 | 726 |
|
| 726 |
// if machine in destroy state keep it that way |
|
| 727 | 727 |
var server = get_machine(server.id); |
| 728 |
if (server.status == "DESTROY") {
|
|
| 729 |
existing = $('#machinesview-icon.standard #' + server.id);
|
|
| 730 |
if (existing.length) {
|
|
| 731 |
$(existing).find('.status').text(TRANSITIONS['Destroying']);
|
|
| 732 |
$(existing).find('.state').removeClass().addClass('state destroying-state');
|
|
| 733 |
$(existing).find('.spinner').show();
|
|
| 734 |
$(existing).find('.wave').hide();
|
|
| 735 |
} |
|
| 728 |
existing = $('#machinesview-icon.standard #' + server.id);
|
|
| 729 |
|
|
| 730 |
// if machine in destroy state keep it that way |
|
| 731 |
if (server.status == "DESTROY" && existing.length >0) {
|
|
| 732 |
$(existing).find('.status').text(TRANSITIONS['Destroying']);
|
|
| 733 |
$(existing).find('.state').removeClass().addClass('state destroying-state');
|
|
| 734 |
$(existing).find('.spinner').show();
|
|
| 735 |
$(existing).find('.wave').hide();
|
|
| 736 |
} |
|
| 737 |
|
|
| 738 |
// update progress |
|
| 739 |
if (server.status == 'BUILD' && existing.length > 0) {
|
|
| 740 |
// update bulding progress |
|
| 741 |
var progress_details = get_progress_details(server.id); |
|
| 742 |
existing.find("span.ip").hide();
|
|
| 743 |
existing.find("span.build-progress").show().text(progress_details.msg);
|
|
| 744 |
} else {
|
|
| 745 |
// hide building progress |
|
| 746 |
existing.find("span.ip").show()
|
|
| 747 |
existing.find("span.build-progress").hide();
|
|
| 736 | 748 |
} |
| 737 | 749 |
}); |
| 738 | 750 |
/* |
| b/ui/templates/machines_single.html | ||
|---|---|---|
| 56 | 56 |
<img class="spinner" style="display:none" src="static/icons/indicators/medium/progress.gif" /> |
| 57 | 57 |
<img class="wave" style="display:none" src="static/icons/indicators/medium/wave.gif" /> |
| 58 | 58 |
</div> |
| 59 |
<div class="progress-message"><span class="build-progress"></span></div> |
|
| 59 | 60 |
</div> |
| 60 | 61 |
<div class="column2"> |
| 61 | 62 |
<div class="machine-labels"> |
| ... | ... | |
| 641 | 642 |
if (server.id == current_serverId()) {
|
| 642 | 643 |
get_server_stats(server.id); |
| 643 | 644 |
} |
| 645 |
|
|
| 646 |
server = get_machine(server.id); |
|
| 647 |
existing = $('#machinesview-single.single div.#' + server.id);
|
|
| 644 | 648 |
|
| 645 | 649 |
// if machine in destroy state keep it that way |
| 646 |
var server = get_machine(server.id); |
|
| 647 | 650 |
if (server.status == "DESTROY") {
|
| 648 | 651 |
existing = $('#machinesview-single.single #' + server.id);
|
| 649 | 652 |
if (existing.length) {
|
| ... | ... | |
| 653 | 656 |
existing.find(".column1 .wave").hide();
|
| 654 | 657 |
} |
| 655 | 658 |
} |
| 659 |
|
|
| 660 |
// update progress |
|
| 661 |
if (server.status == 'BUILD' && existing.length > 0) {
|
|
| 662 |
var progress_details = get_progress_details(server.id); |
|
| 663 |
existing.find("span.build-progress").show().text(progress_details.msg);
|
|
| 664 |
} else {
|
|
| 665 |
existing.find("span.build-progress").hide();
|
|
| 666 |
} |
|
| 667 |
|
|
| 656 | 668 |
}); |
| 657 | 669 |
|
| 658 | 670 |
update_transition_names(); |
Also available in: Unified diff