Datatables load-in: log various stages, use async processing for filling.

These changes are supposed to address current browser non-responsiveness while
preparing recordset data for whole bunch (25+) of DataTables in various tabs.
Currently, there's ~5s lock-up when loading the index page. This change a little
improves the situation, but only a little - instead of complete lock up, it's now
possibly to jerkily scroll it while loading. There's also possible drawback -
it's possible to switch to another tab, which is not loaded yet and thus will be
empty for some seconds (and complete async loading takes more time than sync).

So, while this is arguably a step in right direction, even more fine-grained async
handling won't be a panacea, the algorithm for loading data into multiple tables
should be optimized.

Change-Id: I12d7adfcbfd5d648fffb8a9332648000f867d489

1 files changed, 13 insertions, 2 deletions

diff --git a/static/index.js b/static/index.js
index c8dd759..d9840c1 100644
--- a/static/index.js
+++ b/static/index.js
@@ -1,5 +1,5 @@
 YUI(Yconfig).use(
-  'node', 'tabview', 'datatable', 'history', 'recordset-base', 'recordset-filter', 'io', 'json', 'linaro-trivia',
+  'node', 'async-queue', 'tabview', 'datatable', 'history', 'recordset-base', 'recordset-filter', 'io', 'json', 'linaro-trivia',
   function (Y) {
     var history = new Y.HistoryHash(),
     esubteam_tabview = new Y.TabView({ srcNode: '#esubteams' });
@@ -550,16 +550,27 @@ YUI(Yconfig).use(
       return results;
     }
 
+    console.log("Fetching jobs");
+    console.log(tables);
     Y.io(
       globalConfig.jenkinsURL + "/api/json?tree=" + treeExp,
       {
         method: "GET",
         on: {
           success: function (e, response) {
+            console.log("Fetched jobs");
             var jobs = extractJobsFromResponse(response.responseText);
+            console.log("Parsed jobs");
+            var q = new Y.AsyncQueue();
             for (var i = 0; i < tables.length; i++) {
-              tables[i].datafilter.newData(jobs);
+                // Replaced synchronous table filling with async below
+                //tables[i].datafilter.newData(jobs);
+                q.add((function(i) {
+                    return function() { tables[i].datafilter.newData(jobs); }
+                })(i));
             }
+            q.run();
+            console.log("Populated job tables");
           }
         }
       }