Commit c63ae6a2 authored by Kostas Papadimitriou's avatar Kostas Papadimitriou
Browse files

UI loading view improvements

Refs #3396
Refs #3397

- Use separate loading messages for each action to avoid confusion
  caused due to aynchronous progress
- Enforce resolving of unknown machine image ids before the main view
  gets rendered.
parent 85be6bd7
......@@ -4833,12 +4833,36 @@ table.list-machines .wave {
}
#loading-view {
width: 600px;
width: 400px;
margin: 0 auto;
padding: 20px 0;
font-size: 0.8em;
}
#loading-view .header.off {
color: #829096;
}
#loading-view .header.on {
color: #fff;
background-image: url("../images/icons/indicators/small/progress.gif");
}
#loading-view .header.done {
color: #2B6681;
background-image: url("../images/check.png");
}
#loading-view .header {
font-size: 0.9em;
text-align: left;
border-bottom: 1px solid #578BA3;
margin-bottom: 10px;
padding-bottom: 6px;
background-repeat: no-repeat;
background-position: 380px 0px;
}
#loading-view .header span {
font-weight: bold;
color: #4085A5;
......
......@@ -2119,6 +2119,19 @@
opts = _.extend(opts, extra);
this.api_call(this.path, "create", {'server': opts}, undefined, undefined, callback, {critical: true});
},
load_missing_images: function(callback) {
var missing_ids = [];
this.each(function(el) {
var imgid = el.get("imageRef");
var existing = synnefo.storage.images.get(imgid);
if (!existing && missing_ids.indexOf(imgid) == -1) {
missing_ids.push(imgid);
synnefo.storage.images.update_unknown_id(imgid, function(){});
}
});
callback(missing_ids);
}
})
......
......@@ -600,27 +600,33 @@
if (this.completed_items == 2) {
this.load_nets_and_vms();
}
if (this.completed_items == this.items_to_load) {
this.update_status("Rendering layout...");
this.update_status("layout", 1);
var self = this;
window.setTimeout(function(){
self.after_load();
}, 10)
}
},
load_missing_images: function(cb) {
synnefo.storage.vms.load_missing_images(cb);
},
load_nets_and_vms: function() {
var self = this;
this.update_status("Loading vms...");
this.update_status("vms", 0);
storage.vms.fetch({refresh:true, update:false, success: function(){
self.update_status("VMS Loaded.");
self.check_status();
self.load_missing_images(function(){
self.update_status("vms", 1);
self.update_status("layout", 0);
self.check_status();
});
}});
this.update_status("Loading networks...");
this.update_status("networks", 0);
storage.networks.fetch({refresh:true, update:false, success: function(){
self.update_status("Networks loaded.");
self.update_status("networks", 1);
self.check_status();
}});
},
......@@ -664,10 +670,9 @@
after_load: function() {
var self = this;
this.update_status("Setting vms update interval...");
this.init_intervals();
this.update_intervals();
this.update_status("Showing initial view...");
this.update_status("layout", 0);
// bypass update_hidden_views in initial view
// rendering to force all views to get render
......@@ -678,7 +683,7 @@
snf.config.update_hidden_views = uhv;
window.setTimeout(function() {
self.update_status("Initializing overlays...");
self.update_status("layout", 0);
self.load_initialize_overlays();
}, 20);
},
......@@ -717,21 +722,26 @@
// display loading message
this.show_loading_view();
// sync load initial data
this.update_status("Loading images...");
this.update_status("images", 0);
storage.images.fetch({refresh:true, update:false, success: function(){
self.update_status("images", 1);
self.check_status()
}});
this.update_status("Loading flavors...");
this.update_status("flavors", 0);
storage.flavors.fetch({refresh:true, update:false, success:function(){
self.update_status("flavors", 1);
self.check_status()
}});
},
update_status: function(msg) {
//this.log.debug(msg)
this.status = msg;
$("#loading-view .info").removeClass("hidden")
$("#loading-view .info").text(this.status);
update_status: function(ns, state) {
var el = $("#loading-view .header."+ns);
if (state == 0) {
el.removeClass("off").addClass("on");
}
if (state == 1) {
el.removeClass("on").addClass("done");
}
},
initialize_views: function() {
......
......@@ -557,10 +557,12 @@
</div>
</div>
<div id="loading-view" class="hidden">
<img src="{{ SYNNEFO_IMAGES_URL }}icons/indicators/small/progress.gif" />
<div class="header">Loading <span>~okeanos</span></div>
<div class="info hidden"></div>
<div id="loading-view" class="hidden clearfix">
<div class="header clearfix images off">Loading images...<span></span></div>
<div class="header clearfix flavors off">Loading flavors...<span></span></div>
<div class="header clearfix vms off">Loading machines...<span></span></div>
<div class="header clearfix networks off">Loading networks...<span></span></div>
<div class="header clearfix layout off">Rendering layout...<span></span></div>
</div>
<div id="user_public_keys" class="overlay-content overlay-content hidden">
{% include "userdata/public_keys_view.html" %}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment