Merge pull request #181 from kitematic/fix-log-scroll

Fix log scrolling on mini and large logs, fix search cancellation

gulpfile.js

@@ -29,10 +29,6 @@ var options = {
 
 gulp.task('js', function () {
   return gulp.src('src/**/*.js')
-    .pipe(plumber(function(error) {
-      gutil.log(gutil.colors.red('Error (' + error.plugin + '): ' + error.message));
-      this.emit('end');
-    }))
     .pipe(gulpif(options.dev || options.test, sourcemaps.init()))
     .pipe(react())
     .pipe(babel({blacklist: ['regenerator']}))

src/ContainerHomeLogs.react.js

@@ -3,6 +3,8 @@ var React = require('react/addons');
 var LogStore = require('./LogStore');
 var Router = require('react-router');
 
+var _oldScrollTop = 0;
+
 var ContainerHomeLogs = React.createClass({
   mixins: [Router.State, Router.Navigation],
   getInitialState: function () {
@@ -22,14 +24,11 @@ var ContainerHomeLogs = React.createClass({
   },
   componentDidUpdate: function () {
     // Scroll logs to bottom
-    var parent = $('.mini-logs');
-    if (parent.length) {
-      if (parent.scrollTop() >= this._oldHeight) {
-        parent.stop();
-        parent.scrollTop(parent[0].scrollHeight - parent.height());
-      }
-      this._oldHeight = parent[0].scrollHeight - parent.height();
+    var parent = $('.mini-logs > .widget');
+    if (parent.scrollTop() >= _oldScrollTop) {
+      parent.scrollTop(parent[0].scrollHeight - parent.height());
     }
+    _oldScrollTop = parent.scrollTop();
   },
   init: function () {
     this.updateLogs();

src/ContainerLogs.react.js

@@ -3,6 +3,8 @@ var React = require('react/addons');
 var LogStore = require('./LogStore');
 var Router = require('react-router');
 
+var _oldScrollTop = 0;
+
 var ContainerLogs = React.createClass({
   mixins: [Router.State],
   getInitialState: function () {
@@ -23,13 +25,10 @@ var ContainerLogs = React.createClass({
   componentDidUpdate: function () {
     // Scroll logs to bottom
     var parent = $('.details-logs');
-    if (parent.length) {
-      if (parent.scrollTop() >= this._oldHeight) {
-        parent.stop();
-        parent.scrollTop(parent[0].scrollHeight - parent.height());
-      }
-      this._oldHeight = parent[0].scrollHeight - parent.height();
+    if (parent.scrollTop() >= _oldScrollTop) {
+      parent.scrollTop(parent[0].scrollHeight - parent.height());
     }
+    _oldScrollTop = parent.scrollTop();
   },
   init: function () {
     this.updateLogs();

src/ContainerStore.js

@@ -202,13 +202,10 @@ var ContainerStore = assign(Object.create(EventEmitter.prototype), {
         callback();
       }
       var placeholderData = JSON.parse(localStorage.getItem('store.placeholders'));
-      console.log(placeholderData);
-      console.log(_.keys(_containers));
       if (placeholderData) {
         _placeholders = _.omit(placeholderData, _.keys(_containers));
         localStorage.setItem('store.placeholders', JSON.stringify(_placeholders));
       }
-      console.log(_placeholders);
       this.emit(this.CLIENT_CONTAINER_EVENT);
       this._resumePulling();
       this._startListeningToEvents();
@@ -262,8 +259,6 @@ var ContainerStore = assign(Object.create(EventEmitter.prototype), {
         Downloading: true
       }
     };
-    console.log(_placeholders);
-    console.log(JSON.stringify(_placeholders));
     localStorage.setItem('store.placeholders', JSON.stringify(_placeholders));
     self.emit(self.CLIENT_CONTAINER_EVENT, containerName, 'create');
 

src/NewContainer.react.js

@@ -7,9 +7,9 @@ var ImageCard = require('./ImageCard.react');
 var Promise = require('bluebird');
 
 var _recommended = [];
+var _searchPromise = null;
 
 var NewContainer = React.createClass({
-  _searchRequest: null,
   getInitialState: function () {
     return {
       query: '',
@@ -18,46 +18,45 @@ var NewContainer = React.createClass({
     };
   },
   componentDidMount: function () {
-    this.setState({
-      creating: []
-    });
     this.refs.searchInput.getDOMNode().focus();
-    if (!_recommended.length) {
-      this.recommended();
+    this.recommended();
+  },
+  componentWillUnmount: function () {
+    if (_searchPromise) {
+      _searchPromise.cancel();
     }
   },
   search: function (query) {
-    if (this._searchRequest) {
-      this._searchRequest.abort();
-      this._searchRequest = null;
+    if (_searchPromise) {
+      _searchPromise.cancel();
+      _searchPromise = null;
     }
 
     if (!query.length) {
+      this.setState({
+        query: query,
+        results: _recommended,
+        loading: false
+      });
       return;
     }
 
     this.setState({
+      query: query,
       loading: true
     });
 
-    var self = this;
-    this._searchRequest = $.get('https://registry.hub.docker.com/v1/search?q=' + query, function (result) {
-      self.setState({
+    _searchPromise = Promise.delay(200).then(() => Promise.resolve($.get('https://registry.hub.docker.com/v1/search?q=' + query))).cancellable().then(data => {
+      this.setState({
+        results: data.results,
         query: query,
         loading: false
       });
-      self._searchRequest = null;
-      if (self.isMounted()) {
-        self.setState(result);
-      }
+      _searchPromise = null;
+    }).catch(Promise.CancellationError, () => {
     });
   },
   recommended: function () {
-    if (this._searchRequest) {
-      this._searchRequest.abort();
-      this._searchRequest = null;
-    }
-
     if (_recommended.length) {
       return;
     }
@@ -75,12 +74,10 @@ var NewContainer = React.createClass({
       });
     }).then(results => {
       _recommended = results.filter(r => !!r);
-      if (!this.state.query.length) {
-        if (this.isMounted()) {
-          this.setState({
-            results: _recommended
-          });
-        }
+      if (!this.state.query.length && this.isMounted()) {
+        this.setState({
+          results: _recommended
+        });
       }
     }).catch(err => {
       console.log(err);
@@ -88,30 +85,14 @@ var NewContainer = React.createClass({
   },
   handleChange: function (e) {
     var query = e.target.value;
-
     if (query === this.state.query) {
       return;
     }
-
-    clearTimeout(this.timeout);
-    if (!query.length) {
-      this.setState({
-        query: query,
-        results: _recommended
-      });
-    } else {
-      var self = this;
-      this.timeout = setTimeout(function () {
-        self.search(query);
-      }, 200);
-    }
+    this.search(query);
   },
   render: function () {
     var title = this.state.query ? 'Results' : 'Recommended';
-    var data = [];
-    if (this.state.results) {
-      data = this.state.results.slice(0, 6);
-    }
+    var data = this.state.results;
     var results;
     if (data.length) {
       var items = data.map(function (image) {

src/SetupStore.js

@@ -165,7 +165,6 @@ var SetupStore = assign(Object.create(EventEmitter.prototype), {
   run: Promise.coroutine(function* () {
     yield this.updateBinaries();
     var steps = yield this.requiredSteps();
-    console.log(steps);
     for (let step of steps) {
       console.log(step.name);
       _currentStep = step;

styles/containers.less

@@ -52,7 +52,7 @@
         align-content: flex-start;
         flex-flow: row wrap;
         height: 140px;
-        overflow: scroll;
+        overflow: auto;
         .tag {
           display: inline-block;
           flex: 0 auto;