From d8a61bd28867dbc191188d9d17871a27181ccb66 Mon Sep 17 00:00:00 2001 From: Thomas Rueckstiess Date: Wed, 14 Oct 2015 22:08:30 -0400 Subject: [PATCH 1/5] :construction: first attempt with nprogress module --- package.json | 1 + src/models/sampled-schema.js | 18 ++++ src/statusbar/index.jade | 6 +- src/statusbar/index.js | 38 +++++-- src/statusbar/index.less | 191 ++++++++++++++++++++++++----------- 5 files changed, 186 insertions(+), 68 deletions(-) diff --git a/package.json b/package.json index 59c055bbe48..dbc689d9b0a 100644 --- a/package.json +++ b/package.json @@ -139,6 +139,7 @@ "mongodb-schema": "^3.3.1", "mousetrap": "^1.5.3", "node-notifier": "^4.3.1", + "nprogress": "^0.2.0", "numeral": "^1.5.3", "octicons": "https://github.com/github/octicons/archive/v3.1.0.tar.gz", "pluralize": "^1.2.1", diff --git a/src/models/sampled-schema.js b/src/models/sampled-schema.js index c158f4f50b9..79324bb2b2a 100644 --- a/src/models/sampled-schema.js +++ b/src/models/sampled-schema.js @@ -165,6 +165,7 @@ module.exports = Schema.extend({ } model.documents.reset(docs); model.documents.trigger('sync'); + app.statusbar.hide(); // @note (imlucas): Any other metrics? Feedback on `Schema *`? var totalTime = new Date() - start; @@ -200,8 +201,25 @@ module.exports = Schema.extend({ } debug('creating sample stream'); + var status = 0; + var counter = 0; + app.statusbar.show(); app.client.sample(model.ns, options) .pipe(es.map(parse)) + .once('data', function() { + // disable trickling + status = app.statusbar.status(); + debug('first doc arrived', status); + }) + .on('data', function() { + counter ++; + if (counter % 7 === 0) { + var inc = (1.0 - status) * 7 / options.size; + app.statusbar.inc(inc); + } + // inc statusbar + // debug('more docs', inc); + }) .pipe(es.map(addToDocuments)) .pipe(es.wait(onEnd)); }); diff --git a/src/statusbar/index.jade b/src/statusbar/index.jade index 629fe09857b..4a329acbb6d 100644 --- a/src/statusbar/index.jade +++ b/src/statusbar/index.jade @@ -1,6 +1,6 @@ -#statusbar - .progress(data-hook='outer-bar') - .progress-bar.progress-bar-striped.active(data-hook='inner-bar') +#statusbar.progress + //- .progress(data-hook='outer-bar') + //- .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') diff --git a/src/statusbar/index.js b/src/statusbar/index.js index 34297f0a4aa..d8af0457c48 100644 --- a/src/statusbar/index.js +++ b/src/statusbar/index.js @@ -1,9 +1,12 @@ var View = require('ampersand-view'); +var NProgress = require('nprogress'); +var debug = require('debug')('scout:statusbar:index'); + var StatusbarView = View.extend({ props: { width: { type: 'number', - default: 0 + default: 100 }, message: { type: 'string' @@ -61,14 +64,18 @@ var StatusbarView = View.extend({ } } }, + render: function() { + this.renderWithTemplate(this); + NProgress.configure({ parent: '#statusbar', easing: 'ease', speed: 800, trickle: true }); + }, watch: function(view, collection) { - view.listenTo(collection, 'sync', this.onComplete.bind(this)); - view.listenTo(collection, 'request', this.onRequest.bind(this)); + // view.listenTo(collection, 'sync', this.onComplete.bind(this)); + // view.listenTo(collection, 'request', this.onRequest.bind(this)); return this; }, unwatch: function(view, collection) { - view.stopListening(collection, 'sync', this.onComplete.bind(this)); - view.stopListening(collection, 'request', this.onRequest.bind(this)); + // view.stopListening(collection, 'sync', this.onComplete.bind(this)); + // view.stopListening(collection, 'request', this.onRequest.bind(this)); return this; }, onRequest: function(model, resp, options) { @@ -81,16 +88,31 @@ var StatusbarView = View.extend({ fatal: function(err) { this.loading = false; this.message = 'Fatal Error: ' + err.message; - this.width = 100; }, show: function(message) { + debug('show'); + NProgress.start() this.message = message || ''; - this.width = 100; + // this.width = 100; this.loading = true; }, + inc: function(val) { + NProgress.inc(val); + debug('NProgress', NProgress); + }, + trickle: function(bool) { + NProgress.configure({ trickle: bool }); + }, + status: function() { + return NProgress.status; + }, hide: function() { + NProgress.set(1); + _.delay(function() { + NProgress.done(); + }, 800); this.message = ''; - this.width = 0; + // this.width = 0; this.loading = false; } }); diff --git a/src/statusbar/index.less b/src/statusbar/index.less index ff3bdd0455a..2cb870969c9 100644 --- a/src/statusbar/index.less +++ b/src/statusbar/index.less @@ -1,68 +1,145 @@ -#statusbar { - background: 0 0; +/* Make clicks pass-through */ +#nprogress { + pointer-events: none; +} + +#nprogress .bar { + background: #6ba442; + position: fixed; + z-index: 1031; top: 0; left: 0; - right: 0; - z-index: 1020; - height: 100%; + width: 100%; + height: 3px; +} + +/* Fancy blur effect */ +#nprogress .peg { + display: block; + position: absolute; + right: 0px; + width: 100px; + height: 100%; + box-shadow: 0 0 10px #6ba442, 0 0 5px #6ba442; + opacity: 1.0; + + -webkit-transform: rotate(3deg) translate(0px, -4px); + -ms-transform: rotate(3deg) translate(0px, -4px); + transform: rotate(3deg) translate(0px, -4px); +} + +/* Remove these to get rid of the spinner */ +#nprogress .spinner { + display: block; + position: fixed; + z-index: 1031; + top: 15px; + right: 15px; +} + +#nprogress .spinner-icon { + width: 18px; + height: 18px; + box-sizing: border-box; - .progress { - position: fixed; - top: 0; - left: 0; - right: 0; - text-align: center; - height: 4px; - z-index: 2000; - border-radius: 0; - transition: height 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045); + border: solid 2px transparent; + border-top-color: #6ba442; + border-left-color: #6ba442; + border-radius: 50%; - .progress-bar { - background-color: #6ba442; - } - } - .message-background { - .spinner-circles { - width: 40px; - height: 40px; - position: relative; - margin: 40px auto; + -webkit-animation: nprogress-spinner 400ms linear infinite; + animation: nprogress-spinner 400ms linear infinite; +} - .circle-1, .circle-2 { - width: 100%; - height: 100%; - border-radius: 50%; - background-color: @mc-blue0; - opacity: 0.6; - position: absolute; - top: 0; - left: 0; +.nprogress-custom-parent { + overflow: hidden; + position: relative; +} - -webkit-animation: bounce 2.0s infinite ease-in-out; - animation: bounce 2.0s infinite ease-in-out; - } +.nprogress-custom-parent #nprogress .spinner, +.nprogress-custom-parent #nprogress .bar { + position: absolute; +} - .circle-2 { - -webkit-animation-delay: -1.0s; - animation-delay: -1.0s; - } +@-webkit-keyframes nprogress-spinner { + 0% { -webkit-transform: rotate(0deg); } + 100% { -webkit-transform: rotate(360deg); } +} +@keyframes nprogress-spinner { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +} - @-webkit-keyframes bounce { - 0%, 100% { -webkit-transform: scale(0.0) } - 50% { -webkit-transform: scale(1.0) } - } +#statusbar { + height: 5px; +} - @keyframes bounce { - 0%, 100% { - transform: scale(0.0); - -webkit-transform: scale(0.0); - } 50% { - transform: scale(1.0); - -webkit-transform: scale(1.0); - } - } - } - } - } +// background: 0 0; +// position: fixed; +// top: 0; +// left: 0; +// right: 0; +// z-index: 1020; +// height: 100%; +// width: 100%; +// +// .progress { +// position: fixed; +// top: 0; +// left: 0; +// right: 0; +// text-align: center; +// height: 4px; +// z-index: 2000; +// border-radius: 0; +// transition: height 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045); +// +// .progress-bar { +// background-color: #6ba442; +// } +// } +// .message-background { +// .spinner-circles { +// width: 40px; +// height: 40px; +// position: relative; +// margin: 40px auto; +// +// .circle-1, .circle-2 { +// width: 100%; +// height: 100%; +// border-radius: 50%; +// background-color: @mc-blue0; +// opacity: 0.6; +// position: absolute; +// top: 0; +// left: 0; +// +// -webkit-animation: bounce 2.0s infinite ease-in-out; +// animation: bounce 2.0s infinite ease-in-out; +// } +// +// .circle-2 { +// -webkit-animation-delay: -1.0s; +// animation-delay: -1.0s; +// } +// +// @-webkit-keyframes bounce { +// 0%, 100% { -webkit-transform: scale(0.0) } +// 50% { -webkit-transform: scale(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); +// } +// } +// } +// } +// } From da9e359c81e7484dedec3a293413fd46d9804216 Mon Sep 17 00:00:00 2001 From: Thomas Rueckstiess Date: Wed, 14 Oct 2015 23:23:38 -0400 Subject: [PATCH 2/5] use new behavior but old styling. delete nprogress. --- package.json | 1 - src/models/sampled-schema.js | 16 +-- src/statusbar/index.jade | 6 +- src/statusbar/index.js | 45 ++++----- src/statusbar/index.less | 191 +++++++++++------------------------ styles/10strap.less | 8 +- 6 files changed, 93 insertions(+), 174 deletions(-) diff --git a/package.json b/package.json index dbc689d9b0a..59c055bbe48 100644 --- a/package.json +++ b/package.json @@ -139,7 +139,6 @@ "mongodb-schema": "^3.3.1", "mousetrap": "^1.5.3", "node-notifier": "^4.3.1", - "nprogress": "^0.2.0", "numeral": "^1.5.3", "octicons": "https://github.com/github/octicons/archive/v3.1.0.tar.gz", "pluralize": "^1.2.1", diff --git a/src/models/sampled-schema.js b/src/models/sampled-schema.js index 79324bb2b2a..45b7731a9ad 100644 --- a/src/models/sampled-schema.js +++ b/src/models/sampled-schema.js @@ -203,22 +203,22 @@ module.exports = Schema.extend({ debug('creating sample stream'); var status = 0; var counter = 0; - app.statusbar.show(); + app.statusbar.show('Sampling collection...'); + app.statusbar.width = 1; + app.statusbar.trickle(true); app.client.sample(model.ns, options) .pipe(es.map(parse)) .once('data', function() { - // disable trickling - status = app.statusbar.status(); - debug('first doc arrived', status); + status = app.statusbar.width; + app.statusbar.message = 'Analyzing documents...'; + app.statusbar.trickle(false); }) .on('data', function() { counter ++; if (counter % 7 === 0) { - var inc = (1.0 - status) * 7 / options.size; - app.statusbar.inc(inc); + var inc = (100 - status) * 7 / options.size; + app.statusbar.width += inc; } - // inc statusbar - // debug('more docs', inc); }) .pipe(es.map(addToDocuments)) .pipe(es.wait(onEnd)); diff --git a/src/statusbar/index.jade b/src/statusbar/index.jade index 4a329acbb6d..629fe09857b 100644 --- a/src/statusbar/index.jade +++ b/src/statusbar/index.jade @@ -1,6 +1,6 @@ -#statusbar.progress - //- .progress(data-hook='outer-bar') - //- .progress-bar.progress-bar-striped.active(data-hook='inner-bar') +#statusbar + .progress(data-hook='outer-bar') + .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') diff --git a/src/statusbar/index.js b/src/statusbar/index.js index d8af0457c48..d33f01a2d2c 100644 --- a/src/statusbar/index.js +++ b/src/statusbar/index.js @@ -1,12 +1,12 @@ var View = require('ampersand-view'); -var NProgress = require('nprogress'); var debug = require('debug')('scout:statusbar:index'); var StatusbarView = View.extend({ props: { + trickleTimer: 'any', width: { type: 'number', - default: 100 + default: 0 }, message: { type: 'string' @@ -64,10 +64,6 @@ var StatusbarView = View.extend({ } } }, - render: function() { - this.renderWithTemplate(this); - NProgress.configure({ parent: '#statusbar', easing: 'ease', speed: 800, trickle: true }); - }, watch: function(view, collection) { // view.listenTo(collection, 'sync', this.onComplete.bind(this)); // view.listenTo(collection, 'request', this.onRequest.bind(this)); @@ -88,32 +84,33 @@ var StatusbarView = View.extend({ fatal: function(err) { this.loading = false; this.message = 'Fatal Error: ' + err.message; + this.width = 100; + clearInterval(this.trickleTimer); + }, + trickle: function(bool) { + if (bool) { + this.trickleTimer = setInterval(function() { + var inc = _.random(1, 5); + this.width = Math.min(96, this.width + inc); + }.bind(this), 800); + } else { + clearInterval(this.trickleTimer); + } }, show: function(message) { - debug('show'); - NProgress.start() this.message = message || ''; - // this.width = 100; + this.width = 100; this.loading = true; }, - inc: function(val) { - NProgress.inc(val); - debug('NProgress', NProgress); - }, - trickle: function(bool) { - NProgress.configure({ trickle: bool }); - }, - status: function() { - return NProgress.status; - }, hide: function() { - NProgress.set(1); - _.delay(function() { - NProgress.done(); - }, 800); + this.width = 100; this.message = ''; - // this.width = 0; this.loading = false; + clearInterval(this.trickleTimer); + var model = this; + _.delay(function() { + model.width = 0; + }, 1000); } }); diff --git a/src/statusbar/index.less b/src/statusbar/index.less index 2cb870969c9..ff3bdd0455a 100644 --- a/src/statusbar/index.less +++ b/src/statusbar/index.less @@ -1,145 +1,68 @@ -/* Make clicks pass-through */ -#nprogress { - pointer-events: none; -} - -#nprogress .bar { - background: #6ba442; - +#statusbar { + background: 0 0; position: fixed; - z-index: 1031; top: 0; left: 0; - - width: 100%; - height: 3px; -} - -/* Fancy blur effect */ -#nprogress .peg { - display: block; - position: absolute; - right: 0px; - width: 100px; + right: 0; + z-index: 1020; height: 100%; - box-shadow: 0 0 10px #6ba442, 0 0 5px #6ba442; - opacity: 1.0; - - -webkit-transform: rotate(3deg) translate(0px, -4px); - -ms-transform: rotate(3deg) translate(0px, -4px); - transform: rotate(3deg) translate(0px, -4px); -} - -/* Remove these to get rid of the spinner */ -#nprogress .spinner { - display: block; - position: fixed; - z-index: 1031; - top: 15px; - right: 15px; -} - -#nprogress .spinner-icon { - width: 18px; - height: 18px; - box-sizing: border-box; + width: 100%; - border: solid 2px transparent; - border-top-color: #6ba442; - border-left-color: #6ba442; - border-radius: 50%; + .progress { + position: fixed; + top: 0; + left: 0; + right: 0; + text-align: center; + height: 4px; + z-index: 2000; + border-radius: 0; + transition: height 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045); - -webkit-animation: nprogress-spinner 400ms linear infinite; - animation: nprogress-spinner 400ms linear infinite; -} + .progress-bar { + background-color: #6ba442; + } + } + .message-background { + .spinner-circles { + width: 40px; + height: 40px; + position: relative; + margin: 40px auto; -.nprogress-custom-parent { - overflow: hidden; - position: relative; -} + .circle-1, .circle-2 { + width: 100%; + height: 100%; + border-radius: 50%; + background-color: @mc-blue0; + opacity: 0.6; + position: absolute; + top: 0; + left: 0; -.nprogress-custom-parent #nprogress .spinner, -.nprogress-custom-parent #nprogress .bar { - position: absolute; -} + -webkit-animation: bounce 2.0s infinite ease-in-out; + animation: bounce 2.0s infinite ease-in-out; + } -@-webkit-keyframes nprogress-spinner { - 0% { -webkit-transform: rotate(0deg); } - 100% { -webkit-transform: rotate(360deg); } -} -@keyframes nprogress-spinner { - 0% { transform: rotate(0deg); } - 100% { transform: rotate(360deg); } -} + .circle-2 { + -webkit-animation-delay: -1.0s; + animation-delay: -1.0s; + } -#statusbar { - height: 5px; -} + @-webkit-keyframes bounce { + 0%, 100% { -webkit-transform: scale(0.0) } + 50% { -webkit-transform: scale(1.0) } + } -// background: 0 0; -// position: fixed; -// top: 0; -// left: 0; -// right: 0; -// z-index: 1020; -// height: 100%; -// width: 100%; -// -// .progress { -// position: fixed; -// top: 0; -// left: 0; -// right: 0; -// text-align: center; -// height: 4px; -// z-index: 2000; -// border-radius: 0; -// transition: height 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045); -// -// .progress-bar { -// background-color: #6ba442; -// } -// } -// .message-background { -// .spinner-circles { -// width: 40px; -// height: 40px; -// position: relative; -// margin: 40px auto; -// -// .circle-1, .circle-2 { -// width: 100%; -// height: 100%; -// border-radius: 50%; -// background-color: @mc-blue0; -// opacity: 0.6; -// position: absolute; -// top: 0; -// left: 0; -// -// -webkit-animation: bounce 2.0s infinite ease-in-out; -// animation: bounce 2.0s infinite ease-in-out; -// } -// -// .circle-2 { -// -webkit-animation-delay: -1.0s; -// animation-delay: -1.0s; -// } -// -// @-webkit-keyframes bounce { -// 0%, 100% { -webkit-transform: scale(0.0) } -// 50% { -webkit-transform: scale(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 bounce { + 0%, 100% { + transform: scale(0.0); + -webkit-transform: scale(0.0); + } 50% { + transform: scale(1.0); + -webkit-transform: scale(1.0); + } + } + } + } + } diff --git a/styles/10strap.less b/styles/10strap.less index 0016061290f..4d44aa36ccd 100644 --- a/styles/10strap.less +++ b/styles/10strap.less @@ -649,10 +649,10 @@ fieldset[disabled] .btn-link:focus { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; - -webkit-transition: width 0.6s ease; - -moz-transition: width 0.6s ease; - -o-transition: width 0.6s ease; - transition: width 0.6s ease; + -webkit-transition: width 0.8s ease; + -moz-transition: width 0.8s ease; + -o-transition: width 0.8s ease; + transition: width 0.8s ease; } .progress.active .progress-bar { -webkit-animation: progress-bar-stripes 0.6s linear infinite; From 90644dae1bd4d0aa033e10be54df91c4d7535127 Mon Sep 17 00:00:00 2001 From: Thomas Rueckstiess Date: Thu, 15 Oct 2015 11:31:49 -0400 Subject: [PATCH 3/5] smaller trickles in progress bar, lowercase metrics --- src/models/sampled-schema.js | 19 ++++++++++--------- src/statusbar/index.js | 3 +-- 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/src/models/sampled-schema.js b/src/models/sampled-schema.js index 45b7731a9ad..66d62e0a36b 100644 --- a/src/models/sampled-schema.js +++ b/src/models/sampled-schema.js @@ -172,15 +172,16 @@ module.exports = Schema.extend({ var timeToFirstDoc = timeAtFirstDoc - start; metrics.track('Schema: Complete', { - Duration: totalTime, - 'Total Document Count': model.total, - 'Sample Size': model.documents.length, - 'Errored Document Count': erroredOnDocs.length, - 'Time to First Doc': timeToFirstDoc, - 'Average Time Per Doc': (totalTime - timeToFirstDoc) / model.documents.length - // 'Schema Height': model.height, // # of top level keys - // 'Schema Width': model.width, // max nesting depth - // 'Schema Sparsity': model.sparsity // lots of fields missing or consistent + duration: totalTime, + 'total document count': model.total, + 'sample size': model.documents.length, + 'errored document count': erroredOnDocs.length, + 'total sample time': timeToFirstDoc, + 'total analysis time': totalTime - timeToFirstDoc, + 'average analysis time per doc': (totalTime - timeToFirstDoc) / model.documents.length + // 'Schema Height': model.height, // # of top level keys + // 'Schema Width': model.width, // max nesting depth + // 'Schema Sparsity': model.sparsity // lots of fields missing or consistent }); options.success({}); }; diff --git a/src/statusbar/index.js b/src/statusbar/index.js index d33f01a2d2c..42cc485b0f9 100644 --- a/src/statusbar/index.js +++ b/src/statusbar/index.js @@ -90,8 +90,7 @@ var StatusbarView = View.extend({ trickle: function(bool) { if (bool) { this.trickleTimer = setInterval(function() { - var inc = _.random(1, 5); - this.width = Math.min(96, this.width + inc); + this.width = Math.min(98, this.width + _.random(1, 3)); }.bind(this), 800); } else { clearInterval(this.trickleTimer); From cebb8eb6bf123646326c5564adc492f41c89ec0c Mon Sep 17 00:00:00 2001 From: Thomas Rueckstiess Date: Thu, 15 Oct 2015 11:58:33 -0400 Subject: [PATCH 4/5] re-enable watch/unwatch, but don't use currently --- src/home/collection.js | 1 - src/statusbar/index.js | 8 ++++---- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/src/home/collection.js b/src/home/collection.js index 63a4c3da720..15f3c677ffc 100644 --- a/src/home/collection.js +++ b/src/home/collection.js @@ -67,7 +67,6 @@ var MongoDBCollectionView = View.extend({ }, initialize: function() { this.model = new MongoDBCollection(); - app.statusbar.watch(this, this.schema); this.listenTo(this.schema, 'sync', this.schemaIsSynced.bind(this)); this.listenTo(this.schema, 'request', this.schemaIsRequested.bind(this)); this.listenToAndRun(this.parent, 'change:ns', this.onCollectionChanged.bind(this)); diff --git a/src/statusbar/index.js b/src/statusbar/index.js index 42cc485b0f9..15c9d2b18b7 100644 --- a/src/statusbar/index.js +++ b/src/statusbar/index.js @@ -65,13 +65,13 @@ var StatusbarView = View.extend({ } }, watch: function(view, collection) { - // view.listenTo(collection, 'sync', this.onComplete.bind(this)); - // view.listenTo(collection, 'request', this.onRequest.bind(this)); + view.listenTo(collection, 'sync', this.onComplete.bind(this)); + view.listenTo(collection, 'request', this.onRequest.bind(this)); return this; }, unwatch: function(view, collection) { - // view.stopListening(collection, 'sync', this.onComplete.bind(this)); - // view.stopListening(collection, 'request', this.onRequest.bind(this)); + view.stopListening(collection, 'sync', this.onComplete.bind(this)); + view.stopListening(collection, 'request', this.onRequest.bind(this)); return this; }, onRequest: function(model, resp, options) { From 98512d45d642940c1d0a81a2504cdf7593b64f69 Mon Sep 17 00:00:00 2001 From: Thomas Rueckstiess Date: Tue, 10 Nov 2015 19:00:06 +1100 Subject: [PATCH 5/5] INT-708 new spinner, progress bar improvements --- src/bugsnag.js | 3 +- src/models/sampled-schema.js | 11 +++-- src/statusbar/index.jade | 9 ++-- src/statusbar/index.js | 47 ++++++++++++++------- src/statusbar/index.less | 81 +++++++++++++++++++++--------------- 5 files changed, 94 insertions(+), 57 deletions(-) diff --git a/src/bugsnag.js b/src/bugsnag.js index bef82d3a64c..17170df5e89 100644 --- a/src/bugsnag.js +++ b/src/bugsnag.js @@ -14,10 +14,10 @@ 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); @@ -25,7 +25,6 @@ function beforeNotify(d) { 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)); } diff --git a/src/models/sampled-schema.js b/src/models/sampled-schema.js index 66d62e0a36b..ef53def2c1d 100644 --- a/src/models/sampled-schema.js +++ b/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; } }) diff --git a/src/statusbar/index.jade b/src/statusbar/index.jade index 629fe09857b..0d1065bc057 100644 --- a/src/statusbar/index.jade +++ b/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 diff --git a/src/statusbar/index.js b/src/statusbar/index.js index 15c9d2b18b7..419570ed441 100644 --- a/src/statusbar/index.js +++ b/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; + } } }); diff --git a/src/statusbar/index.less b/src/statusbar/index.less index ff3bdd0455a..4cbec6d80c8 100644 --- a/src/statusbar/index.less +++ b/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); } } } - } +}