INT-708 new spinner, progress bar improvements

Author: rueckstiess

src/bugsnag.js

@@ -14,18 +14,17 @@ var _ = require('lodash');
 var debug = require('debug')('scout:bugsnag');
 
 var TOKEN = '0d11ab5f4d97452cc83d3365c21b491c';
-
 // @todo (imlucas): use mongodb-redact
 function beforeNotify(d) {
   app.sendMessage('show bugsnag OS notification', d.message);
+  app.statusbar.hide();
 
   d.stacktrace = redact(d.stacktrace);
   d.context = redact(d.context);
   d.file = redact(d.file);
   d.message = redact(d.message);
   d.url = redact(d.url);
   d.name = redact(d.name);
-  d.file = redact(d.file);
   d.metaData = redact(d.metaData);
   debug('redacted bugsnag report\n', JSON.stringify(d, null, 2));
 }

src/models/sampled-schema.js

@@ -165,7 +165,7 @@ module.exports = Schema.extend({
       }
       model.documents.reset(docs);
       model.documents.trigger('sync');
-      app.statusbar.hide();
+      app.statusbar.hide(true);
 
       // @note (imlucas): Any other metrics?  Feedback on `Schema *`?
       var totalTime = new Date() - start;
@@ -201,9 +201,11 @@ module.exports = Schema.extend({
         return onEmpty();
       }
 
-      debug('creating sample stream');
       var status = 0;
       var counter = 0;
+      var numSamples = Math.min(options.size, count.count);
+      var stepSize = Math.ceil(Math.max(1, numSamples / 10));
+
       app.statusbar.show('Sampling collection...');
       app.statusbar.width = 1;
       app.statusbar.trickle(true);
@@ -216,8 +218,9 @@ module.exports = Schema.extend({
         })
         .on('data', function() {
           counter ++;
-          if (counter % 7 === 0) {
-            var inc = (100 - status) * 7 / options.size;
+          if (counter % stepSize === 0) {
+            var inc = (100 - status) * stepSize / numSamples;
+            debug(inc);
             app.statusbar.width += inc;
           }
         })

src/statusbar/index.jade

@@ -3,6 +3,9 @@
     .progress-bar.progress-bar-striped.active(data-hook='inner-bar')
   ul.message-background.with-sidebar.centered(data-hook='message-container'): li
     p(data-hook='message')
-    .spinner-circles(data-hook='loading')
-      .circle-1
-      .circle-2
+    .spinner(data-hook='loading')
+      .rect1
+      .rect2
+      .rect3
+      .rect4
+      .rect5

src/statusbar/index.js

@@ -1,5 +1,6 @@
 var View = require('ampersand-view');
-var debug = require('debug')('scout:statusbar:index');
+var _ = require('lodash');
+// var debug = require('debug')('scout:statusbar:index');
 
 var StatusbarView = View.extend({
   props: {
@@ -11,14 +12,18 @@ var StatusbarView = View.extend({
     message: {
       type: 'string'
     },
-    loading: {
+    loadingIndicator: {
       type: 'boolean',
       default: true
+    },
+    visible: {
+      type: 'boolean',
+      default: false
     }
   },
   template: require('./index.jade'),
   bindings: {
-    loading: {
+    loadingIndicator: {
       hook: 'loading',
       type: 'booleanClass',
       yes: 'visible',
@@ -49,9 +54,14 @@ var StatusbarView = View.extend({
       },
       {
         type: 'booleanClass',
+        hook: 'outer-bar',
         no: 'hidden'
       }
-    ]
+    ],
+    visible: {
+      type: 'booleanClass',
+      no: 'hidden'
+    }
   },
   derived: {
     /**
@@ -82,9 +92,11 @@ var StatusbarView = View.extend({
     this.hide();
   },
   fatal: function(err) {
-    this.loading = false;
+    this.visible = true;
+    this.loadingIndicator = false;
     this.message = 'Fatal Error: ' + err.message;
-    this.width = 100;
+    this.width = 0;
+    this.trickle(false);
     clearInterval(this.trickleTimer);
   },
   trickle: function(bool) {
@@ -97,19 +109,26 @@ var StatusbarView = View.extend({
     }
   },
   show: function(message) {
+    this.visible = true;
     this.message = message || '';
     this.width = 100;
-    this.loading = true;
+    this.loadingIndicator = true;
   },
-  hide: function() {
-    this.width = 100;
+  hide: function(completed) {
     this.message = '';
-    this.loading = false;
+    this.loadingIndicator = false;
     clearInterval(this.trickleTimer);
-    var model = this;
-    _.delay(function() {
-      model.width = 0;
-    }, 1000);
+    if (completed) {
+      this.width = 100;
+      var model = this;
+      _.delay(function() {
+        model.width = 0;
+        model.visible = false;
+      }, 1000);
+    } else {
+      this.width = 0;
+      this.visible = false;
+    }
   }
 });
 

src/statusbar/index.less

@@ -24,45 +24,58 @@
     }
   }
   .message-background {
-    .spinner-circles {
-      width: 40px;
-      height: 40px;
-      position: relative;
-      margin: 40px auto;
+    .spinner {
+      margin: 50px auto;
+      width: 65px;
+      height: 60px;
+      text-align: center;
+      font-size: 10px;
+    }
 
-      .circle-1, .circle-2 {
-        width: 100%;
-        height: 100%;
-        border-radius: 50%;
-        background-color: @mc-blue0;
-        opacity: 0.6;
-        position: absolute;
-        top: 0;
-        left: 0;
+    .spinner > div {
+      background-color: rgba(0, 0, 0, 0.2);;
+      margin: 0 3px 0 0;
+      height: 100%;
+      width: 10px;
+      display: inline-block;
 
-        -webkit-animation: bounce 2.0s infinite ease-in-out;
-        animation: bounce 2.0s infinite ease-in-out;
-      }
+      -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
+      animation: sk-stretchdelay 1.2s infinite ease-in-out;
+    }
 
-      .circle-2 {
-        -webkit-animation-delay: -1.0s;
-        animation-delay: -1.0s;
-      }
+    .spinner .rect2 {
+      -webkit-animation-delay: -1.1s;
+      animation-delay: -1.1s;
+    }
 
-      @-webkit-keyframes bounce {
-        0%, 100% { -webkit-transform: scale(0.0) }
-        50% { -webkit-transform: scale(1.0) }
-      }
+    .spinner .rect3 {
+      -webkit-animation-delay: -1.0s;
+      animation-delay: -1.0s;
+    }
+
+    .spinner .rect4 {
+      -webkit-animation-delay: -0.9s;
+      animation-delay: -0.9s;
+    }
+
+    .spinner .rect5 {
+      -webkit-animation-delay: -0.8s;
+      animation-delay: -0.8s;
+    }
+
+    @-webkit-keyframes sk-stretchdelay {
+      0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
+      20% { -webkit-transform: scaleY(1.0) }
+    }
 
-      @keyframes bounce {
-        0%, 100% {
-          transform: scale(0.0);
-          -webkit-transform: scale(0.0);
-        } 50% {
-          transform: scale(1.0);
-          -webkit-transform: scale(1.0);
-        }
+    @keyframes sk-stretchdelay {
+      0%, 40%, 100% {
+        transform: scaleY(0.4);
+        -webkit-transform: scaleY(0.4);
+      }  20% {
+        transform: scaleY(1.0);
+        -webkit-transform: scaleY(1.0);
       }
     }
   }
- }
+}