UI: Improve startup responsiveness

It now defers loading any data until the UI has been drawn, avoiding a blank
screen. Now the dashboard is drawn (~1s) and then filled in with data. The
remaining bottleneck is probably the number of XHRs; concatenating JS and
templates and fetching switch data in bulk instead of individually would
reduce the number of XHRs dramatically.

src/main/resources/web/js/main.js

@@ -91,11 +91,13 @@ var AppRouter = Backbone.Router.extend({
 var swl = new SwitchCollection();
 var hl  = new HostCollection();
 
+var updating = true;
+
 tpl.loadTemplates(['home', 'status', 'topology', 'header', 'switch', 'switch-list', 'switch-list-item', 'host', 'host-list', 'host-list-item', 'port-list', 'port-list-item', 'flow-list', 'flow-list-item'],
     function () {
         app = new AppRouter();
         Backbone.history.start({pushState: true});
-        // console.log("started history")
+        //console.log("started history")
         
         $(document).ready(function () {
             // trigger Backbone routing when clicking on links, thanks to Atinux and pbnv
@@ -113,15 +115,16 @@ tpl.loadTemplates(['home', 'status', 'topology', 'header', 'switch', 'switch-lis
             window.addEventListener('popstate', function(e) {
                 app.navigate(location.pathname.substr(1), true);
             });
-
+            
+            // wait for the page to be rendered before loading any data
+            swl.fetch();
+            hl.fetch();
+            
+            setInterval(function () {
+                if(updating) {
+                    swl.fetch();
+                    hl.fetch();
+                }
+            }, 3000);
         });
     });
-
-var updating = true;
-
-setInterval(function () {
-    if(updating) {
-        swl.fetch();
-        hl.fetch();
-    }
-}, 3000);

src/main/resources/web/js/models/hostmodel.js

@@ -31,7 +31,7 @@ window.HostCollection = Backbone.Collection.extend({
 
     model:Host,
 
-    initialize:function () {
+    fetch:function () {
         var self = this;
         //console.log("fetching host list")
         $.ajax({
@@ -66,10 +66,6 @@ window.HostCollection = Backbone.Collection.extend({
 
     },
 
-    fetch:function () {
-        this.initialize();
-    }
-
     /*
      * findByName:function (key) { // TODO: Modify service to include firstName
      * in search var url = (key == '') ? '/host/' : "/host/search/" + key;

src/main/resources/web/js/models/switchmodel.js

@@ -265,7 +265,7 @@ window.SwitchCollection = Backbone.Collection.extend({
 
     model:Switch,
     
-    initialize:function () {
+    fetch:function () {
         var self = this;
         //console.log("fetching switch list")
         $.ajax({
@@ -292,9 +292,4 @@ window.SwitchCollection = Backbone.Collection.extend({
         });
     },
 
-  fetch:function () {
-	this.initialize()
-    }
-
-
 });