Fauxton: Spin.js improvements and Active Task clean

We now have a spinner for the route object that spins until a
view is ready to show a spinner on its section.

Removed the event listenOnce and added showData to the beforeRender

7 files changed, 196 insertions, 178 deletions

diff --git a/src/fauxton/app/addons/activetasks/routes.js b/src/fauxton/app/addons/activetasks/routes.js
index 46041eb14..03ece4781 100644
--- a/src/fauxton/app/addons/activetasks/routes.js
+++ b/src/fauxton/app/addons/activetasks/routes.js
@@ -32,6 +32,9 @@ function (app, FauxtonAPI, Activetasks, Views) {
     apiUrl: function(){
       return app.host+"/_active_tasks";
     }, 
+
+    roles: ["_admin"],
+
     defaultView: function(id){
       var newtasks = new Activetasks.Tasks({
         currentView: "all", 
diff --git a/src/fauxton/app/addons/activetasks/views.js b/src/fauxton/app/addons/activetasks/views.js
index 348fb2aa7..ca5e853f4 100644
--- a/src/fauxton/app/addons/activetasks/views.js
+++ b/src/fauxton/app/addons/activetasks/views.js
@@ -11,159 +11,163 @@
 // the License.
 
 define([
-  "app",
-  "api",
-  "addons/activetasks/resources"
+       "app",
+       "api",
+       "addons/activetasks/resources"
 ],
 
 function (app, FauxtonAPI, activetasks) {
 
   var Views = {},
-			Events = {},
-			pollingInfo ={
-				rate: "5",
-				intervalId: null
-			};
-
-
-	_.extend(Events, Backbone.Events);
-
-	Views.TabMenu = FauxtonAPI.View.extend({
-		template: "addons/activetasks/templates/tabs",
-		events: {
-			"click .task-tabs li": "requestByType",
-			"change #pollingRange": "changePollInterval"
-		},
-		establish: function(){
-			return [this.model.fetch({reset: true})];
-		},
-		serialize: function(){
-			return {
-				filters: this.model.alltypes
-			};
-		},
-		afterRender: function(){
-			$('.task-tabs').find('li').eq(0).addClass('active');
-		},
-		changePollInterval: function(e){
-			var range = $(e.currentTarget).val();
-			$('label[for="pollingRange"] span').text(range);
-			pollingInfo.rate = range;
-			clearInterval(pollingInfo.intervalId);
-			Events.trigger('update:poll');
-		},
-		requestByType: function(e){
-			var currentTarget = e.currentTarget;
-					datatype = $(currentTarget).attr("data-type");
-
-			$('.task-tabs').find('li').removeClass('active');
-			$(currentTarget).addClass('active');
-			this.model.changeView(datatype);
-		}
-	});
-
-	Views.DataSection = FauxtonAPI.View.extend({
-		initialize: function(){
-			this.listenToOnce(this.model, "change", this.showData); //check why I needed to do this
-		},
-		showData: function(){
-			var that = this,
-					currentData = this.model.getCurrentViewData();
-			//remove the old stuff in a nice clean way
-			if (this.dataView) {
-				this.dataView.remove();
-			}
-
-				//add the new stuff
-			this.dataView = that.insertView( new Views.tableData({ 
-				collection: currentData,
-				currentView: this.model.get('currentView').replace('_',' ')
-			}));
-
-			this.dataView.render();
-		},
-		establish: function(){
-			return [this.model.fetch()];
-		},
-		setPolling: function(){
-			var that = this;
-			clearInterval(pollingInfo.intervalId);
-			pollingInfo.intervalId = setInterval(function() {
-				that.establish();
-			}, pollingInfo.rate*1000);
-		},
-		cleanup: function(){
-			clearInterval(pollingInfo.intervalId);
-		},
-		afterRender: function(){
-			this.listenTo(this.model, "change", this.showData);
-			Events.bind('update:poll', this.setPolling, this);
-			this.setPolling();
-		}
-	});
-
-	Views.tableData = FauxtonAPI.View.extend({
-		tagName: "table",
-		className: "table table-bordered table-striped active-tasks",
-		template: "addons/activetasks/templates/table",
-		events: {
-			"click th": "sortByType"
-		},
-		initialize: function(){
-			currentView = this.options.currentView;
-		},
-		sortByType:  function(e){
-			var currentTarget = e.currentTarget;
-					datatype = $(currentTarget).attr("data-type");
-			this.collection.sortByColumn(datatype);
-			this.render();
-		},
-		serialize: function(){
-			return {
-				currentView: currentView,
-				collection: this.collection
-			};
-		},
-		beforeRender: function(){
-			//iterate over the collection to add each
-			this.collection.forEach(function(item) {
-				this.insertView("#tasks_go_here", new Views.TableDetail({ 
-					model: item
-				}));
-			}, this);
-		}
-	});
-
-	Views.TableDetail = FauxtonAPI.View.extend({
-		tagName: 'tr',
-		template: "addons/activetasks/templates/tabledetail",
-		initialize: function(){
-			this.type = this.model.get('type');
-		},
-		getObject: function(){
-			var objectField = this.model.get('database');
-			if (this.type === "replication"){
-				objectField = this.model.get('source') + " to " + this.model.get('target');
-			}
-			return objectField;
-		},
-		getProgress:  function(){
-			var progress = "";
-			if (this.type === "indexer"){
-				progress = "Processed " +this.model.get('changes_done')+ " of "+this.model.get('total_changes')+ ' changes';
-			}
-			return progress;
-		},
-		serialize: function(){
-			return {
-				model: this.model,
-				objectField: this.getObject(),
-				progress: this.getProgress()
-			};
-		}
-	});
-
-
- 
+      Events = {},
+      pollingInfo ={
+        rate: "5",
+        intervalId: null
+      };
+
+
+  _.extend(Events, Backbone.Events);
+
+  Views.TabMenu = FauxtonAPI.View.extend({
+    template: "addons/activetasks/templates/tabs",
+    events: {
+      "click .task-tabs li": "requestByType",
+      "change #pollingRange": "changePollInterval"
+    },
+    establish: function(){
+      return [this.model.fetch({reset: true})];
+    },
+    serialize: function(){
+      return {
+        filters: this.model.alltypes
+      };
+    },
+    afterRender: function(){
+      $('.task-tabs').find('li').eq(0).addClass('active');
+    },
+    changePollInterval: function(e){
+      var range = $(e.currentTarget).val();
+      $('label[for="pollingRange"] span').text(range);
+      pollingInfo.rate = range;
+      clearInterval(pollingInfo.intervalId);
+      Events.trigger('update:poll');
+    },
+    requestByType: function(e){
+      var currentTarget = e.currentTarget;
+      datatype = $(currentTarget).attr("data-type");
+
+      $('.task-tabs').find('li').removeClass('active');
+      $(currentTarget).addClass('active');
+      this.model.changeView(datatype);
+    }
+  });
+
+  Views.DataSection = FauxtonAPI.View.extend({
+    showData: function(){
+      var that = this,
+      currentData = this.model.getCurrentViewData();
+      //remove the old stuff in a nice clean way
+      if (this.dataView) {
+        this.dataView.remove();
+      }
+
+      //add the new stuff
+      this.dataView = that.insertView( new Views.TableData({ 
+        collection: currentData,
+        currentView: this.model.get('currentView').replace('_',' ')
+      }));
+
+    },
+    showDataAndRender: function () {
+      this.showData();
+      this.render();
+    },
+
+    beforeRender: function () {
+      this.showData();
+    },
+    establish: function(){
+      return [this.model.fetch()];
+    },
+    setPolling: function(){
+      var that = this;
+      clearInterval(pollingInfo.intervalId);
+      pollingInfo.intervalId = setInterval(function() {
+        that.establish();
+      }, pollingInfo.rate*1000);
+    },
+    cleanup: function(){
+      clearInterval(pollingInfo.intervalId);
+    },
+    afterRender: function(){
+      this.listenTo(this.model, "change", this.showDataAndRender);
+      Events.bind('update:poll', this.setPolling, this);
+      this.setPolling();
+    }
+  });
+
+  Views.TableData = FauxtonAPI.View.extend({
+    tagName: "table",
+    className: "table table-bordered table-striped active-tasks",
+    template: "addons/activetasks/templates/table",
+    events: {
+      "click th": "sortByType"
+    },
+    initialize: function(){
+      currentView = this.options.currentView;
+    },
+    sortByType:  function(e){
+      var currentTarget = e.currentTarget;
+      datatype = $(currentTarget).attr("data-type");
+      this.collection.sortByColumn(datatype);
+      this.render();
+    },
+    serialize: function(){
+      return {
+        currentView: currentView,
+        collection: this.collection
+      };
+    },
+    beforeRender: function(){
+      //iterate over the collection to add each
+      this.collection.forEach(function(item) {
+        this.insertView("#tasks_go_here", new Views.TableDetail({ 
+          model: item
+        }));
+      }, this);
+    }
+  });
+
+  Views.TableDetail = FauxtonAPI.View.extend({
+    tagName: 'tr',
+    template: "addons/activetasks/templates/tabledetail",
+    initialize: function(){
+      this.type = this.model.get('type');
+    },
+    getObject: function(){
+      var objectField = this.model.get('database');
+      if (this.type === "replication"){
+        objectField = this.model.get('source') + " to " + this.model.get('target');
+      }
+      return objectField;
+    },
+    getProgress:  function(){
+      var progress = "";
+      if (this.type === "indexer"){
+        progress = "Processed " +this.model.get('changes_done')+ " of "+this.model.get('total_changes')+ ' changes';
+      }
+      return progress;
+    },
+    serialize: function(){
+      return {
+        model: this.model,
+        objectField: this.getObject(),
+        progress: this.getProgress()
+      };
+    }
+  });
+
+
+
   return Views;
 });
diff --git a/src/fauxton/app/addons/auth/resources.js b/src/fauxton/app/addons/auth/resources.js
index 087a247a0..d36563453 100644
--- a/src/fauxton/app/addons/auth/resources.js
+++ b/src/fauxton/app/addons/auth/resources.js
@@ -192,7 +192,6 @@ function (app, FauxtonAPI) {
     initialize: function (options) {
       options = options || {};
       this.login_after = options.login_after === false ? false : true;
-      console.log(this.login_after, 'lo');
     },
 
     events: {
diff --git a/src/fauxton/app/api.js b/src/fauxton/app/api.js
index 9c34705df..b8e144939 100644
--- a/src/fauxton/app/api.js
+++ b/src/fauxton/app/api.js
@@ -274,30 +274,35 @@ function(app, Fauxton) {
         }));
       }
 
-      // if (!this.disableLoader){ 
-      //   var opts = {
-      //     lines: 16, // The number of lines to draw
-      //     length: 8, // The length of each line
-      //     width: 4, // The line thickness
-      //     radius: 12, // The radius of the inner circle
-      //     color: '#aaa', // #rbg or #rrggbb
-      //     speed: 1, // Rounds per second
-      //     trail: 10, // Afterglow percentage
-      //     shadow: false // Whether to render a shadow
-      //   };
-
-      //   if (!$('.spinner').length) {
-      //     $('<div class="spinner"></div>').appendTo('#app-container');
-      //   }
-
-      //   var spinner = new Spinner(opts).spin();
-      //   $('.spinner').append(spinner.el);
-      // }
+       if (!this.disableLoader){ 
+         var opts = {
+           lines: 16, // The number of lines to draw
+           length: 8, // The length of each line
+           width: 4, // The line thickness
+           radius: 12, // The radius of the inner circle
+           color: '#aaa', // #rbg or #rrggbb
+           speed: 1, // Rounds per second
+           trail: 10, // Afterglow percentage
+           shadow: false // Whether to render a shadow
+         };
+
+         if (!$('.spinner').length) {
+           $('<div class="spinner"></div>')
+            .appendTo('#app-container')
+         }
+
+         var routeObjectSpinner = new Spinner(opts).spin();
+         $('.spinner').append(routeObjectSpinner.el);
+       }
 
       FauxtonAPI.when(this.establish()).done(function(resp) {
         _.each(routeObject.getViews(), function(view, selector) {
           if(view.hasRendered()) { return; }
 
+          if (!routeObject.disableLoader) {
+            routeObjectSpinner.stop();
+          }
+
           if (!view.disableLoader){ 
             var opts = {
               lines: 16, // The number of lines to draw
@@ -309,16 +314,17 @@ function(app, Fauxton) {
               trail: 10, // Afterglow percentage
               shadow: false // Whether to render a shadow
             };
-            $('<div class="spinner"></div>').appendTo(selector);
-            var spinner = new Spinner(opts).spin();
-            $('.spinner').append(spinner.el);
+            var viewSpinner = new Spinner(opts).spin();
+            $('<div class="spinner"></div>')
+              .appendTo(selector)
+              .append(viewSpinner.el);
           }
           
           FauxtonAPI.when(view.establish()).then(function(resp) {
             masterLayout.setView(selector, view);
 
             if (!view.disableLoader){
-              spinner.stop();
+              viewSpinner.stop();
             }
 
             masterLayout.renderView(selector);
@@ -328,7 +334,11 @@ function(app, Fauxton) {
                 reason: resp
               };
 
-            masterLayout.renderView(selector);
+              FauxtonAPI.addNotification({
+                msg: 'An Error occurred ' + resp,
+                type: 'error' 
+              });
+              masterLayout.renderView(selector);
           });
 
           var hooks = masterLayout.hooks[selector];
diff --git a/src/fauxton/app/app.js b/src/fauxton/app/app.js
index e1e4f4e5e..c63864679 100644
--- a/src/fauxton/app/app.js
+++ b/src/fauxton/app/app.js
@@ -27,7 +27,11 @@ function($, _, Backbone, Helpers, Mixins) {
     // The root path to run the application.
     root: "/",
     version: "0.0.1",
-    mixins: Mixins
+    mixins: Mixins,
+    // move this to here otherwise every once in a while,
+    // the footer fails to configure as the url for it is not configured.
+    // Having the host declared here fixes it
+    host: window.location.protocol + "//" + window.location.host,
   };
 
   // Localize or create a new JavaScript Template object.
diff --git a/src/fauxton/app/initialize.js b/src/fauxton/app/initialize.js
index 4826c5ee3..c0cca4446 100644
--- a/src/fauxton/app/initialize.js
+++ b/src/fauxton/app/initialize.js
@@ -28,7 +28,6 @@ function(app, _, Bootstrap) {
     // TODO: pick this up wither at build time or from the browser
     root: "/_utils/fauxton/",
 
-    host: window.location.protocol + "//" + window.location.host,
 
     renderView: function(baseView, selector, view, options, callback) {
       baseView.setView(selector, new view(options)).render().then(callback);
diff --git a/src/fauxton/app/modules/fauxton/base.js b/src/fauxton/app/modules/fauxton/base.js
index a4895f2b7..4b4690ff1 100644
--- a/src/fauxton/app/modules/fauxton/base.js
+++ b/src/fauxton/app/modules/fauxton/base.js
@@ -21,12 +21,11 @@ define([
 function(app, Backbone, ResizeAnimation) {
 
 
- //resizeAnimation
+   //resizeAnimation
    app.ResizeAnimation = new ResizeAnimation({
         selectorElements: '#dashboard-content'
    });
 
-
   var Fauxton = app.module();
 
   Fauxton.Breadcrumbs = Backbone.View.extend({