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.

snf-cyclades-app/synnefo/ui/static/snf/css/main.css

@@ -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;

snf-cyclades-app/synnefo/ui/static/snf/js/models.js

@@ -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);
         }
 
     })

snf-cyclades-app/synnefo/ui/static/snf/js/ui/web/ui_main_view.js

@@ -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() {

snf-cyclades-app/synnefo/ui/templates/home.html

@@ -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" %}