WIP new events

2015-01-23 16:49:25 -05:00 · 2015-01-23 16:49:25 -05:00 · 1f1ec98a29
parent 638d6b71f9
commit 1f1ec98a29
28 changed files with 502 additions and 431 deletions
--- a/README.md
+++ b/README.md
@ -13,15 +13,15 @@ Kitematic's documentation and other information can be found at [http://kitemati
 ### Development

 - `sudo npm install -g less`
- `./script/npm install`
+- `npm install`

 To run the app in development:

- `./script/gulp`
+- `npm start`

 ### Building the Mac OS X Package

- `./script/release`
+- `npm run release`

 ## Uninstalling

--- a/app/ContainerDetails.react.js
+++ b/app/ContainerDetails.react.js
@ -1,5 +1,6 @@
 var _ = require('underscore');
-var React = require('react');
+var $ = require('jquery');
+var React = require('react/addons');
 var Router = require('react-router');
 var Convert = require('ansi-to-html');
 var convert = new Convert();
@ -17,17 +18,15 @@ var RouteHandler = Router.RouteHandler;

 var ContainerDetails = React.createClass({
  mixins: [Router.State],
+  _oldHeight: 0,
  getInitialState: function () {
    return {
      logs: []
    };
  },
-  componentWillReceiveProps: function () {
-    this.update();
-    this.setState({
-      logs: []
-    });
-    var self = this;
+  logs: function () {
+    this.updateProgress(this.getParams().name);
+    /*var self = this;
    var logs = [];
    var index = 0;
    docker.client().getContainer(this.getParams().name).logs({
@ -68,25 +67,37 @@ var ContainerDetails = React.createClass({
          });
        });
      });
-    });
+    });*/
+  },
+  componentWillReceiveProps: function () {
+    this.logs();
  },
  componentWillMount: function () {
-    this.update();
+    this.logs();
  },
  componentDidMount: function () {
-    ContainerStore.addChangeListener(ContainerStore.CONTAINERS, this.update);
-    ContainerStore.addChangeListener(ContainerStore.PROGRESS, this.update);
+    ContainerStore.on(ContainerStore.SERVER_PROGRESS_EVENT, this.updateProgress);
  },
  componentWillUnmount: function () {
-    ContainerStore.removeChangeListener(ContainerStore.CONTAINERS, this.update);
-    ContainerStore.removeChangeListener(ContainerStore.PROGRESS, this.update);
+    ContainerStore.removeListener(ContainerStore.SERVER_PROGRESS_EVENT, this.updateProgress);
  },
-  update: function () {
-    var name = this.getParams().name;
+  componentDidUpdate: function () {
+    var parent = $('.details-logs');
+    if (!parent.length) {
+      return;
+    }
+    if (parent.scrollTop() >= this._oldHeight) {
+      parent.stop();
+      parent.scrollTop(parent[0].scrollHeight - parent.height());
+    }
+    this._oldHeight = parent[0].scrollHeight - parent.height();
+  },
+  updateProgress: function (name) {
+    if (name === this.getParams().name) {
      this.setState({
-      container: ContainerStore.container(name),
        progress: ContainerStore.progress(name)
      });
+    }
  },
  _escapeHTML: function (html) {
    var text = document.createTextNode(html);
@ -95,7 +106,7 @@ var ContainerDetails = React.createClass({
    return div.innerHTML;
  },
  handleClick: function (name) {
-    var container = this.state.container;
+    var container = this.props.container;
    boot2docker.ip(function (err, ip) {
      var ports = _.map(container.NetworkSettings.Ports, function (value, key) {
        var portProtocolPair = key.split('/');
@ -113,7 +124,6 @@ var ContainerDetails = React.createClass({
        }
        return res;
      });
-      console.log(ports);
      exec(['open', ports[0].url], function (err) {
        if (err) { throw err; }
      });
@ -130,14 +140,14 @@ var ContainerDetails = React.createClass({
      return <p key={i} dangerouslySetInnerHTML={{__html: l}}></p>;
    });

-    if (!this.state.container) {
+    if (!this.props.container) {
      return false;
    }

    var state;
-    if (this.state.container.State.Running) {
+    if (this.props.container.State.Running) {
      state = <h2 className="status">running</h2>;
-    } else if (this.state.container.State.Restarting) {
+    } else if (this.props.container.State.Restarting) {
      state = <h2 className="status">restarting</h2>;
    }

@ -159,12 +169,10 @@ var ContainerDetails = React.createClass({
      button = <a className="btn btn-primary disabled" onClick={this.handleClick}>View</a>;
    }

-    var name = this.state.container.Name.replace('/', '');
-
    return (
      <div className="details">
        <div className="details-header">
-          <h1>{name}</h1> <a className="btn btn-primary" onClick={this.handleClick}>View</a>
+          <h1>{this.getParams().name}</h1> <a className="btn btn-primary" onClick={this.handleClick}>View</a>
        </div>
        {progress}
        <div className="details-logs">
--- a/app/ContainerList.react.js
+++ b/app/ContainerList.react.js
@ -7,40 +7,16 @@ var Modal = require('react-bootstrap/Modal');
 var RetinaImage = require('react-retina-image');
 var ModalTrigger = require('react-bootstrap/ModalTrigger');
 var ContainerModal = require('./ContainerModal.react');
-var ContainerStore = require('./ContainerStore');
 var Header = require('./Header.react');
 var docker = require('./docker');

-var Link = Router.Link;
-var RouteHandler = Router.RouteHandler;
-var Navigation= Router.Navigation;
-
 var ContainerList = React.createClass({
-  getInitialState: function () {
-    return {
-      containers: []
-    };
-  },
-  componentDidMount: function () {
-    this.updateContainers();
-    ContainerStore.addChangeListener(ContainerStore.CONTAINERS, this.updateContainers);
-  },
  componentWillMount: function () {
    this._start = Date.now();
  },
-  componentWillUnmount: function () {
-    ContainerStore.removeChangeListener(ContainerStore.CONTAINERS, this.updateContainers);
-  },
-  updateContainers: function () {
-    // Sort by name
-    var containers = _.values(ContainerStore.containers()).sort(function (a, b) {
-      return a.Name.localeCompare(b.Name);
-    });
-    this.setState({containers: containers});
-  },
  render: function () {
    var self = this;
-    var containers = this.state.containers.map(function (container) {
+    var containers = this.props.containers.map(function (container) {
      var downloadingImage = null, downloading = false;
      var env = container.Config.Env;
      if (env.length) {
@ -76,22 +52,20 @@ var ContainerList = React.createClass({
        state = <div className="state state-stopped"></div>;
      }

-      var name = container.Name.replace('/', '');
-
      return (
-        <Link key={name} data-container={name} to="container" params={{name: name}}>
+        <Router.Link key={container.Name} data-container={name} to="container" params={{name: container.Name}}>
          <li>
            {state}
            <div className="info">
              <div className="name">
-                {name}
+                {container.Name}
              </div>
              <div className="image">
                {imageName}
              </div>
            </div>
          </li>
-        </Link>
+        </Router.Link>
      );
    });
    return (
--- a/app/ContainerModal.react.js
+++ b/app/ContainerModal.react.js
@ -1,6 +1,6 @@
 var async = require('async');
 var $ = require('jquery');
-var React = require('react');
+var React = require('react/addons');
 var Modal = require('react-bootstrap/Modal');
 var RetinaImage = require('react-retina-image');
 var ContainerStore = require('./ContainerStore');
@ -10,21 +10,32 @@ var ContainerModal = React.createClass({
  getInitialState: function () {
    return {
      query: '',
-      results: [],
-      recommended: ContainerStore.recommended()
+      results: ContainerStore.recommended(),
+      loading: false,
    };
  },
  componentDidMount: function () {
    this.refs.searchInput.getDOMNode().focus();
  },
  search: function (query) {
+    if (this._searchRequest) {
+      this._searchRequest.abort();
+      this._searchRequest = null;
+    }
+
+    this.setState({
+      loading: true
+    });
+
    var self = this;
    this._searchRequest = $.get('https://registry.hub.docker.com/v1/search?q=' + query, function (result) {
-      self._searchRequest.abort();
+      self.setState({
+        query: query,
+        loading: false
+      });
      self._searchRequest = null;
      if (self.isMounted()) {
        self.setState(result);
-        console.log(result);
      }
    });
  },
@ -35,35 +46,33 @@ var ContainerModal = React.createClass({
      return;
    }

-    if (this._searchRequest) {
-      console.log('Cancel');
-      this._searchRequest.abort();
-      this._searchRequest = null;
-    }
    clearTimeout(this.timeout);
+    if (!query.length) {
+      this.setState({
+        query: query,
+        results: ContainerStore.recommended()
+      });
+    } else {
      var self = this;
      this.timeout = setTimeout(function () {
        self.search(query);
-    }, 250);
+      }, 200);
+    }
  },
  handleClick: function (event) {
    var name = event.target.getAttribute('name');
    var self = this;
    ContainerStore.create(name, 'latest', function (err, containerName) {
-      require('./router').transitionTo('container', {name: containerName});
      self.props.onRequestHide();
-    }.bind(this));
+    });
  },
  render: function () {
    var self = this;
+    var data = this.state.results.slice(0, 7);

-    var data;
-    if (this.state.query) {
-      data = this.state.results.splice(0, 7);
-    } else {
-      data = this.state.recommended;
-    }
-    var results = data.map(function (r) {
+    var results;
+    if (data.length) {
+      var items = data.map(function (r) {
        var name;
        if (r.is_official) {
          name = <span><RetinaImage src="official.png"/>{r.name}</span>;
@ -76,38 +85,55 @@ var ContainerModal = React.createClass({
              <div className="name">
                {name}
              </div>
-            <div className="stars">
+              <div className="properties">
                <div className="icon icon-star-9"></div>
                <div className="star-count">{r.star_count}</div>
              </div>
            </div>
            <div className="action">
-            <button className="btn btn-primary" name={r.name} onClick={self.handleClick}>Create</button>
+              <RetinaImage src="loading.png"/> <button className="btn btn-primary" name={r.name} onClick={self.handleClick}>Create</button>
            </div>
          </li>
        );
      });

-    var title;
-    if (this.state.query) {
-      title = <div className="title">Results</div>;
+      results = (
+        <div className="result-list">
+          <ul>
+            {items}
+          </ul>
+        </div>
+      );
    } else {
-      title = <div className="title">Recommended</div>;
+      results = (
+        <div className="no-results">
+          <h3>
+            No Results
+          </h3>
+        </div>
+      );
    }

+    var title = this.state.query ? 'Results' : 'Recommended';
+    var loadingClasses = React.addons.classSet({
+      hidden: !this.state.loading,
+      loading: true
+    });
+
    return (
      <Modal {...this.props} animation={false} className="create-modal">
        <div className="modal-body">
          <section className="search">
+            <div className="search-bar">
              <input type="search" ref="searchInput" className="form-control" placeholder="Find an existing image" onChange={this.handleChange}/>
+              <RetinaImage className={loadingClasses} src="loading.png"/>
+            </div>
            <div className="question">
              <a href="#"><span>What&#39;s an image?</span></a>
            </div>
            <div className="results">
-              {title}
-              <ul>
+              <div className="title">{title}</div>
              {results}
-              </ul>
            </div>
          </section>
          <aside className="custom">
--- a/app/ContainerStore.js
+++ b/app/ContainerStore.js
@ -1,24 +1,28 @@
 var EventEmitter = require('events').EventEmitter;
 var async = require('async');
-var assign = require('react/lib/Object.assign');
+var assign = require('object-assign');
 var docker = require('./docker');
 var registry = require('./registry');
 var $ = require('jquery');
 var _ = require('underscore');

-// Merge our store with Node's Event Emitter
+var _recommended = [];
+var _containers = {};
+var _progress = {};
+
 var ContainerStore = assign(EventEmitter.prototype, {
-  CONTAINERS: 'containers',
-  PROGRESS: 'progress',
-  LOGS: 'logs',
-  RECOMMENDED: 'recommended',
-  _recommended: [],
-  _containers: {},
-  _progress: {},
-  _logs: {},
+  CLIENT_CONTAINER_EVENT: 'client_container',
+  SERVER_CONTAINER_EVENT: 'server_container',
+  SERVER_PROGRESS_EVENT: 'server_progress',
+  SERVER_RECOMMENDED_EVENT: 'server_recommended_event',
+  SERVER_LOGS_EVENT: 'server_logs',
  _pullScratchImage: function (callback) {
    var image = docker.client().getImage('scratch:latest');
    image.inspect(function (err, data) {
+      if (err) {
+        callback(err);
+        return;
+      }
      if (!data) {
        docker.client().pull('scratch:latest', function (err, stream) {
          if (err) {
@ -36,177 +40,8 @@ var ContainerStore = assign(EventEmitter.prototype, {
      }
    });
  },
-  _createContainer: function (image, name, callback) {
-    var existing = docker.client().getContainer(name);
-    existing.remove(function (err, data) {
-      docker.client().createContainer({
-        Image: image,
-        Tty: false,
-        name: name
-      }, function (err, container) {
-        if (err) {
-          callback(err, null);
-          return;
-        }
-        container.start({
-          PublishAllPorts: true
-        }, function (err) {
-          if (err) { callback(err, null); return; }
-          callback(null, container);
-        });
-      });
-    });
-  },
-  _createPlaceholderContainer: function (imageName, name, callback) {
-    console.log('_createPlaceholderContainer', imageName, name);
-    this._pullScratchImage(function (err) {
-      if (err) {
-        callback(err);
-        return;
-      }
-      docker.client().createContainer({
-        Image: 'scratch:latest',
-        Tty: false,
-        Env: [
-          'KITEMATIC_DOWNLOADING=true',
-          'KITEMATIC_DOWNLOADING_IMAGE=' + imageName
-        ],
-        Cmd: 'placeholder',
-        name: name
-      }, function (err, container) {
-        callback(err, container);
-      });
-    });
-  },
-  _generateName: function (repository) {
-    var base = _.last(repository.split('/'));
-    var count = 1;
-    var name = base;
-    while (true) {
-      var exists = _.findWhere(_.values(this._containers), {Name: '/' + name}) || _.findWhere(_.values(this._containers), {Name: name});
-      if (!exists) {
-        return name;
-      } else {
-        count++;
-        name = base + '-' + count;
-      }
-    }
-  },
-  init: function (callback) {
-    // TODO: Load cached data from db on loading
-
-    // Refresh with docker & hook into events
-    var self = this;
-    this.update(function (err) {
-      self.updateRecommended(function (err) {
-        callback();
-      });
-      var downloading = _.filter(_.values(self._containers), function (container) {
-        var env = container.Config.Env;
-        return _.indexOf(env, 'KITEMATIC_DOWNLOADING=true') !== -1;
-      });
-
-      // Recover any pulls that were happening
-      downloading.forEach(function (container) {
-        var env = _.object(container.Config.Env.map(function (e) {
-          return e.split('=');
-        }));
-        docker.client().pull(env.KITEMATIC_DOWNLOADING_IMAGE, function (err, stream) {
-          stream.setEncoding('utf8');
-          stream.on('data', function (data) {
-            console.log(data);
-          });
-          stream.on('end', function () {
-            self._createContainer(env.KITEMATIC_DOWNLOADING_IMAGE, container.Name.replace('/', ''), function () {
-
-            });
-          });
-        });
-      });
-
-      docker.client().getEvents(function (err, stream) {
-        stream.setEncoding('utf8');
-        stream.on('data', function (data) {
-
-          // TODO: Dont refresh on deleting placeholder containers
-          var deletingPlaceholder = data.status === 'destroy' && self.container(data.id) && self.container(data.id).Config.Env.indexOf('KITEMATIC_DOWNLOADING=true') !== -1;
-          console.log(deletingPlaceholder);
-          if (!deletingPlaceholder) {
-            self.update(function (err) {
-            });
-          }
-        });
-      });
-    });
-  },
-  update: function (callback) {
-    var self = this;
-    docker.client().listContainers({all: true}, function (err, containers) {
-      if (err) {
-        callback(err);
-        return;
-      }
-      async.map(containers, function(container, callback) {
-        docker.client().getContainer(container.Id).inspect(function (err, data) {
-          callback(err, data);
-        });
-      }, function (err, results) {
-        if (err) {
-          callback(err);
-          return;
-        }
-        var containers = {};
-        results.forEach(function (r) {
-          containers[r.Name.replace('/', '')] = r;
-        });
-        self._containers = containers;
-        self.emit(self.CONTAINERS);
-        callback(null);
-      });
-    });
-  },
-  updateRecommended: function (callback) {
-    var self = this;
-    $.ajax({
-      url: 'https://kitematic.com/recommended.json',
-      dataType: 'json',
-      success: function (res, status) {
-        var recommended = res.recommended;
-        async.map(recommended, function (repository, callback) {
-          $.get('https://registry.hub.docker.com/v1/search?q=' + repository, function (data) {
-            var results = data.results;
-            callback(null, _.find(results, function (r) {
-              return r.name === repository;
-            }));
-          });
-        }, function (err, results) {
-          self._recommended = results;
-          callback();
-        });
-      },
-      error: function (err) {
-        console.log(err);
-      }
-    });
-  },
-  create: function (repository, tag, callback) {
-    tag = tag || 'latest';
-    var self = this;
-    var imageName = repository + ':' + tag;
-    var containerName = this._generateName(repository);
-    var image = docker.client().getImage(imageName);
-
-    image.inspect(function (err, data) {
-      if (!data) {
-        // Pull image
-        self._createPlaceholderContainer(imageName, containerName, function (err, container) {
-          if (err) {
-            console.log(err);
-          }
+  _pullImage: function (repository, tag, callback, progressCallback) {
    registry.layers(repository, tag, function (err, layerSizes) {
-            if (err) {
-              callback(err);
-            }

      // TODO: Support v2 registry API
      // TODO: clean this up- It's messy to work with pulls from both the v1 and v2 registry APIs
@ -220,8 +55,7 @@ var ContainerStore = assign(EventEmitter.prototype, {
        });

        var totalBytes = layersToDownload.map(function (s) { return s.size; }).reduce(function (pv, sv) { return pv + sv; }, 0);
-              docker.client().pull(imageName, function (err, stream) {
-                callback(null, containerName);
+        docker.client().pull(repository + ':' + tag, function (err, stream) {
          stream.setEncoding('utf8');

          var layerProgress = layersToDownload.reduce(function (r, layer) {
@ -233,10 +67,7 @@ var ContainerStore = assign(EventEmitter.prototype, {
            return r;
          }, {});

-                self._progress[containerName] = 0;
-
          stream.on('data', function (str) {
-                  console.log(str);
            var data = JSON.parse(str);

            if (data.status === 'Already exists') {
@ -257,47 +88,258 @@ var ContainerStore = assign(EventEmitter.prototype, {
            });

            var totalProgress = totalReceived / totalBytes;
-                  self._progress[containerName] = totalProgress;
-                  self.emit(self.PROGRESS);
+            progressCallback(totalProgress);
          });
          stream.on('end', function () {
-                  self._createContainer(imageName, containerName, function () {
-                    delete self._progress[containerName];
+            callback();
          });
        });
      });
    });
+  },
+  _createContainer: function (image, name, callback) {
+    var existing = docker.client().getContainer(name);
+    var self = this;
+    existing.remove(function (err, data) {
+      docker.client().createContainer({
+        Image: image,
+        Tty: false,
+        name: name,
+        User: 'root'
+      }, function (err, container) {
+        if (err) {
+          callback(err, null);
+          return;
+        }
+        container.start({
+          PublishAllPorts: true
+        }, function (err) {
+          if (err) {
+            callback(err);
+            return;
+          }
+          self.fetchContainer(name, callback);
        });
      });
+    });
+  },
+  _createPlaceholderContainer: function (imageName, name, callback) {
+    console.log('_createPlaceholderContainer', imageName, name);
+    var self = this;
+    this._pullScratchImage(function (err) {
+      if (err) {
+        callback(err);
+        return;
+      }
+      docker.client().createContainer({
+        Image: 'scratch:latest',
+        Tty: false,
+        Env: [
+          'KITEMATIC_DOWNLOADING=true',
+          'KITEMATIC_DOWNLOADING_IMAGE=' + imageName
+        ],
+        Cmd: 'placeholder',
+        name: name
+      }, function (err, container) {
+        if (err) {
+          callback(err);
+          return;
+        }
+        self.fetchContainer(name, callback);
+      });
+    });
+  },
+  _generateName: function (repository) {
+    var base = _.last(repository.split('/'));
+    var count = 1;
+    var name = base;
+    while (true) {
+      var exists = _.findWhere(_.values(_containers), {Name: name}) || _.findWhere(_.values(_containers), {Name: name});
+      if (!exists) {
+        return name;
+      } else {
+        count++;
+        name = base + '-' + count;
+      }
+    }
+  },
+  _resumePulling: function () {
+    var downloading = _.filter(_.values(_containers), function (container) {
+      return container.State.Downloading;
+    });
+
+    // Recover any pulls that were happening
+    var self = this;
+    downloading.forEach(function (container) {
+      docker.client().pull(container.KitematicDownloadingImage, function (err, stream) {
+        stream.setEncoding('utf8');
+        stream.on('data', function (data) {});
+        stream.on('end', function () {
+          self._createContainer(container.KitematicDownloadingImage, container.Name, function () {});
+        });
+      });
+    });
+  },
+  _startListeningToEvents: function () {
+    docker.client().getEvents(function (err, stream) {
+      if (stream) {
+        stream.setEncoding('utf8');
+        stream.on('data', this._dockerEvent.bind(this));
+      }
+    }.bind(this));
+  },
+  _dockerEvent: function (json) {
+    var data = JSON.parse(json);
+    console.log(data);
+
+    // If the event is delete, remove the container
+    if (data.status === 'destroy') {
+      console.log('destroy');
+      var container = _.findWhere(_.values(_containers), {Id: data.id});
+      delete _containers[container.Name];
+      this.emit(this.SERVER_CONTAINER_EVENT, container.Name, data.status);
+    } else {
+      this.fetchContainer(data.id, function (err) {
+        var container = _.findWhere(_.values(_containers), {Id: data.id});
+        this.emit(this.SERVER_CONTAINER_EVENT, container ? container.Name : null, data.status);
+      }.bind(this));
+    }
+  },
+  init: function (callback) {
+    // TODO: Load cached data from db on loading
+    this.fetchAllContainers(function (err) {
+      callback();
+      this.emit(this.CLIENT_CONTAINER_EVENT);
+      this.fetchRecommended(function (err) {
+        this.emit(this.SERVER_RECOMMENDED_EVENT);
+      }.bind(this));
+      this._resumePulling();
+      this._startListeningToEvents();
+    }.bind(this));
+  },
+  fetchContainer: function (id, callback) {
+    docker.client().getContainer(id).inspect(function (err, container) {
+      if (err) {
+        callback(err);
+      } else {
+        // Fix leading slash in container names
+        container.Name = container.Name.replace('/', '');
+
+        // Add Downloading State (stored in environment variables) to containers for Kitematic
+        var env = _.object(container.Config.Env.map(function (e) { return e.split('='); }));
+        container.State.Downloading = !!env.KITEMATIC_DOWNLOADING;
+        container.KitematicDownloadingImage = env.KITEMATIC_DOWNLOADING_IMAGE;
+
+        _containers[container.Name] = container;
+        callback(null, container);
+      }
+    });
+  },
+  fetchAllContainers: function (callback) {
+    var self = this;
+    docker.client().listContainers({all: true}, function (err, containers) {
+      if (err) {
+        callback(err);
+        return;
+      }
+      async.map(containers, function (container, callback) {
+        self.fetchContainer(container.Id, function (err) {
+          callback(err);
+        });
+      }, function (err, results) {
+        callback(err);
+      });
+    });
+  },
+  fetchRecommended: function (callback) {
+    if (_recommended.length) {
+     return;
+   }
+    var self = this;
+    $.ajax({
+      url: 'https://kitematic.com/recommended.json',
+      dataType: 'json',
+      success: function (res, status) {
+        var recommended = res.recommended;
+        async.map(recommended, function (repository, callback) {
+          $.get('https://registry.hub.docker.com/v1/search?q=' + repository, function (data) {
+            var results = data.results;
+            callback(null, _.find(results, function (r) {
+              return r.name === repository;
+            }));
+          });
+        }, function (err, results) {
+          _recommended = results;
+          callback();
+        });
+      },
+      error: function (err) {
+        console.log(err);
+      }
+    });
+  },
+  create: function (repository, tag, callback) {
+    tag = tag || 'latest';
+    var self = this;
+    var imageName = repository + ':' + tag;
+    var containerName = this._generateName(repository);
+    var image = docker.client().getImage(imageName);
+
+    image.inspect(function (err, data) {
+      if (!data) {
+        // Pull image
+        self._createPlaceholderContainer(imageName, containerName, function (err, container) {
+          _containers[containerName] = container;
+          self.emit(self.CLIENT_CONTAINER_EVENT, containerName, 'create');
+          _progress[containerName] = 0;
+          self._pullImage(repository, tag, function () {
+            self._createContainer(imageName, containerName, function (err, container) {
+              delete _progress[containerName];
+            });
+          }, function (progress) {
+            _progress[containerName] = progress;
+            self.emit(self.SERVER_PROGRESS_EVENT, containerName);
+          });
+          callback(null, containerName);
+        });
      } else {
        // If not then directly create the container
-        self._createContainer(imageName, containerName, function () {
+        self._createContainer(imageName, containerName, function (err, container) {
+          self.emit(ContainerStore.CLIENT_CONTAINER_EVENT, containerName, 'create');
          callback(null, containerName);
        });
      }
    });
  },
  containers: function() {
-    return this._containers;
+    return _containers;
  },
  container: function (name) {
-    return this._containers[name];
+    return _containers[name];
+  },
+  sorted: function () {
+    return _.values(_containers).sort(function (a, b) {
+      var active = function (container) {
+        return container.State.Running || container.State.Restarting || container.State.Downloading;
+      };
+      if (active(a) && !active(b)) {
+        return -1;
+      } else if (!active(a) && active(b)) {
+        return 1;
+      } else {
+        return a.Name.localeCompare(b.Name);
+      }
+    });
  },
  recommended: function () {
-    return this._recommended;
+    return _recommended;
  },
  progress: function (name) {
-    return this._progress[name];
+    return _progress[name];
  },
  logs: function (name) {
    return logs[name];
-  },
-  addChangeListener: function(eventType, callback) {
-    this.on(eventType, callback);
-  },
-  removeChangeListener: function(eventType, callback) {
-    this.removeListener(eventType, callback);
-  },
+  }
 });

 module.exports = ContainerStore;
--- a/app/Containers.react.js
+++ b/app/Containers.react.js
@ -12,15 +12,51 @@ var _ = require('underscore');
 var docker = require('./docker');
 var $ = require('jquery');

-var Link = Router.Link;
-var RouteHandler = Router.RouteHandler;
-
 var Containers = React.createClass({
+  mixins: [Router.Navigation, Router.State],
  getInitialState: function () {
    return {
-      sidebarOffset: 0
+      sidebarOffset: 0,
+      containers: ContainerStore.containers(),
+      sorted: ContainerStore.sorted(),
    };
  },
+  componentDidMount: function () {
+    this.update();
+    ContainerStore.on(ContainerStore.SERVER_CONTAINER_EVENT, this.update);
+    ContainerStore.on(ContainerStore.CLIENT_CONTAINER_EVENT, this.updateFromClient);
+
+    if (this.state.sorted.length) {
+      this.transitionTo('container', {name: this.state.sorted[0].Name});
+    }
+  },
+  componentDidUnmount: function () {
+    ContainerStore.removeListener(ContainerStore.SERVER_CONTAINER_EVENT, this.update);
+    ContainerStore.removeListener(ContainerStore.CLIENT_CONTAINER_EVENT, this.updateFromClient);
+  },
+  update: function (name, status) {
+    this.setState({
+      containers: ContainerStore.containers(),
+      sorted: ContainerStore.sorted()
+    });
+    if (status === 'destroy') {
+      if (this.state.sorted.length) {
+        this.transitionTo('container', {name: this.state.sorted[0].Name});
+      } else {
+        this.transitionTo('containers');
+      }
+    }
+  },
+  updateFromClient: function (name, status) {
+    this.setState({
+      containers: ContainerStore.containers(),
+      sorted: ContainerStore.sorted()
+    });
+    if (status === 'create') {
+      console.log('transition');
+      this.transitionTo('container', {name: name});
+    }
+  },
  handleScroll: function (e) {
    if (e.target.scrollTop > 0 && !this.state.sidebarOffset) {
      this.setState({
@ -37,6 +73,7 @@ var Containers = React.createClass({
    if (this.state.sidebarOffset) {
      sidebarHeaderClass += ' sep';
    }
+
    return (
      <div className="containers">
        <Header/>
@ -53,10 +90,10 @@ var Containers = React.createClass({
              </div>
            </section>
            <section className="sidebar-containers" onScroll={this.handleScroll}>
-              <ContainerList/>
+              <ContainerList containers={this.state.sorted}/>
            </section>
          </div>
-          <RouteHandler/>
+          <Router.RouteHandler container={this.state.containers[this.getParams().name]}/>
        </div>
      </div>
    );
--- a/app/Header.react.js
+++ b/app/Header.react.js
@ -2,6 +2,11 @@ var React = require('react/addons');
 var remote = require('remote');

 var Header = React.createClass({
+  getInitialState: function () {
+    return {
+      fullscreen: false
+    };
+  },
  componentDidMount: function () {
    document.addEventListener('keyup', this.handleDocumentKeyUp, false);
  },
@ -22,14 +27,16 @@ var Header = React.createClass({
  },
  handleFullscreen: function () {
    remote.getCurrentWindow().setFullScreen(!remote.getCurrentWindow().isFullScreen());
-    this.forceUpdate();
+    this.setState({
+      fullscreen: remote.getCurrentWindow().isFullScreen()
+    });
  },
  handleFullscreenHover: function () {
    this.update();
  },
  render: function () {
    var buttons;
-    if (remote.getCurrentWindow().isFullScreen()) {
+    if (this.state.fullscreen) {
      return (
        <div className="header no-drag">
          <div className="buttons">
--- a/app/NoContainers.react.js
+++ b/app/NoContainers.react.js
@ -0,0 +1,15 @@
+var React = require('react/addons');
+var RetinaImage = require('react-retina-image');
+
+var NoContainers = React.createClass({
+  render: function () {
+    return (
+      <div className="no-containers">
+        <RetinaImage src="roundedcontainer.png"/>
+        <h3>No Containers</h3>
+      </div>
+    );
+  }
+});
+
+module.exports = NoContainers;
--- a/app/Setup.react.js
+++ b/app/Setup.react.js
@ -1,4 +1,4 @@
-var React = require('react');
+var React = require('react/addons');
 var Router = require('react-router');
 var Radial = require('./Radial.react.js');
 var async = require('async');
@ -134,6 +134,12 @@ var setupSteps = [

 var Setup = React.createClass({
  mixins: [ Router.Navigation ],
+  getInitialState: function () {
+    return {
+      message: '',
+      progress: 0
+    };
+  },
  render: function () {
    var radial;
    if (this.state.progress) {
--- a/app/images/downloading-arrow.png
+++ b/app/images/downloading-arrow.png
--- a/app/images/downloading-arrow@2x.png
+++ b/app/images/downloading-arrow@2x.png
--- a/app/images/loading.png
+++ b/app/images/loading.png
--- a/app/images/loading@2x.png
+++ b/app/images/loading@2x.png
--- a/app/images/roundedcontainer.png
+++ b/app/images/roundedcontainer.png
--- a/app/images/roundedcontainer@2x.png
+++ b/app/images/roundedcontainer@2x.png
--- a/app/main.js
+++ b/app/main.js
@ -1,12 +1,16 @@
+var module = require('module');
+require.main.paths.splice(0, 0, process.env.NODE_PATH);
+
+var Bugsnag = require('bugsnag-js');
 var React = require('react');
 var Router = require('react-router');
 var RetinaImage = require('react-retina-image');
-var Raven = require('raven');
 var async = require('async');
 var docker = require('./docker');
 var router = require('./router');
 var boot2docker = require('./boot2docker');
 var ContainerStore = require('./ContainerStore');
+var app = require('remote').require('app');

 var Route = Router.Route;
 var NotFoundRoute = Router.NotFoundRoute;
@ -14,22 +18,23 @@ var DefaultRoute = Router.DefaultRoute;
 var Link = Router.Link;
 var RouteHandler = Router.RouteHandler;

+Bugsnag.apiKey = 'fc51aab02ce9dd1bb6ebc9fe2f4d43d7';
+Bugsnag.autoNotify = true;
+Bugsnag.releaseStage = process.env.NODE_ENV === 'development' ? 'development' : 'production';
+Bugsnag.notifyReleaseStages = [];
+Bugsnag.appVersion = app.getVersion();
+
+if (window.location.hash === '#/') {
+  router.run(function (Handler) {
+    React.render(<Handler/>, document.body);
+  });
+} else {
  boot2docker.ip(function (err, ip) {
-  if (window.location.hash !== '#/') {
    docker.setHost(ip);
    ContainerStore.init(function () {
      router.run(function (Handler) {
        React.render(<Handler/>, document.body);
      });
    });
-  } else {
-    Router.run(routes, function (Handler) {
-      React.render(<Handler/>, document.body);
  });
 }
-});
-
-if (process.env.NODE_ENV !== 'development') {
-  Raven.config('https://0a5f032d745d4acaae94ce46f762c586@app.getsentry.com/35057', {
-  }).install();
-}
--- a/app/routes.js
+++ b/app/routes.js
@ -1,7 +1,8 @@
-var React = require('react');
+var React = require('react/addons');
 var Setup = require('./Setup.react');
 var Containers = require('./Containers.react');
 var ContainerDetails = require('./ContainerDetails.react');
+var NoContainers = require('./NoContainers.react');
 var Router = require('react-router');

 var Route = Router.Route;
@ -16,16 +17,6 @@ var App = React.createClass({
  }
 });

-var NoContainers = React.createClass({
-  render: function () {
-    return (
-      <div>
-        No Containers
-      </div>
-    );
-  }
-});
-
 var routes = (
  <Route name="app" path="/" handler={App}>
    <Route name="containers" handler={Containers}>
--- a/app/styles/containers.less
+++ b/app/styles/containers.less
@ -218,6 +218,19 @@
      }
    }

+    .no-containers {
+      flex: 1 auto;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-direction: column;
+
+      h3 {
+        font-size: 16px;
+        color: #C7D7D7;
+      }
+    }
+
    .details {
      margin: 0;
      padding: 0;
@ -267,7 +280,7 @@
        flex: 1;
        overflow: auto;
        .logs {
-          user-select: text;
+          -webkit-user-select: text;
          font-family: Menlo;
          font-size: 12px;
          padding: 44px 45px;
--- a/app/styles/main.less
+++ b/app/styles/main.less
@ -13,7 +13,7 @@ html, body {
  width: 100%;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
-  user-select: none;
+  -webkit-user-select: none;
  font-family: 'Clear Sans', sans-serif;
 }

@ -49,8 +49,10 @@ html, body {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.10);
    border: none; //1px solid #ccc;
    height: 610px;
+    display: flex;
  }
  .modal-body {
+    flex: 1 auto;
    display: flex;
    flex-direction: row;
    padding: 32px 32px;
@ -68,7 +70,6 @@ html, body {
    }

    section.search {
-      flex: 0 auto;
      min-width: 404px;
      padding-right: 32px;
      border-right: 1px solid #eee;
@ -81,6 +82,20 @@ html, body {
        text-align: right;
      }

+      .search-bar {
+        position: relative;
+        .loading {
+          position: absolute;
+          right: 9px;
+          top: 7px;
+          width: 24px;
+          height: 24px;
+          -webkit-animation-name: spin;
+          -webkit-animation-duration: 1.8s;
+          -webkit-animation-iteration-count: infinite;
+          -webkit-animation-timing-function: linear;
+        }
+
        input {
          border-radius: 20px;
          font-size: 13px;
@ -99,11 +114,22 @@ html, body {
            font-weight: 300;
          }
        }
+      }

      .results {
        overflow: auto;

+        .no-results {
+          text-align: center;
+          h3 {
+            color: #ABC0C0;
+            font-size: 16px;
+            margin-top: 160px;
+          }
+        }
+
        .title {
+          flex: 0 auto;
          margin-top: 16px;
        }

@ -129,7 +155,7 @@ html, body {
                overflow: hidden;
                text-overflow: ellipsis;
              }
-              .stars {
+              .properties {
                color: #A7A7A7;
                margin-top: 2px;

@ -168,7 +194,7 @@ html, body {
  height: 100%;
 }

-@-webkit-keyframes translatedownload {
+@-webkit-keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
  }
--- a/browser/main.js
+++ b/browser/main.js
@ -16,6 +16,8 @@ if (argv.test) {
  console.log('Running tests');
 }

+process.env.NODE_PATH = __dirname + '/../node_modules';
+
 app.on('activate-with-no-open-windows', function () {
  if (mainWindow) {
    mainWindow.show();
@ -32,6 +34,7 @@ app.on('ready', function() {
    resizable: true,
    frame: false
  };
+
  mainWindow = new BrowserWindow(windowOptions);
  mainWindow.hide();

--- a/gulpfile.js
+++ b/gulpfile.js
@ -4,8 +4,7 @@ var browserify = require('browserify');
 var watchify = require('watchify');
 var reactify = require('reactify');
 var gulpif = require('gulp-if');
-var uglify = require('gulp-uglify');
-var streamify = require('gulp-streamify');
+var uglify = require('gulp-uglifyjs');
 var notify = require('gulp-notify');
 var concat = require('gulp-concat');
 var less = require('gulp-less');
@ -22,6 +21,7 @@ var ecstatic = require('ecstatic');
 var downloadatomshell = require('gulp-download-atom-shell');
 var packagejson = require('./package.json');
 var http = require('http');
+var react = require('gulp-react');

 var dependencies = Object.keys(packagejson.dependencies);
 var devDependencies = Object.keys(packagejson.devDependencies);
@ -34,44 +34,9 @@ var options = {
 };

 gulp.task('js', function () {
-  var bundler = browserify({
-    entries: ['./app/main.js'], // Only need initial file, browserify finds the rest
-    transform: [reactify], // We want to convert JSX to normal javascript
-    debug: options.dev, // Gives us sourcemapping
-    builtins: false,
-    commondir: false,
-    insertGlobals: false,
-    detectGlobals: false,
-    bundleExternal: false,
-    cache: {}, packageCache: {}, fullPaths: options.dev // Requirement of watchify
-  });
-
-  // We set our dependencies as externals on our app bundler when developing
-  dependencies.forEach(function (dep) {
-    bundler.external(dep);
-  });
-
-  devDependencies.forEach(function (dep) {
-    bundler.external(dep);
-  });
-
-  bundler.external('./app');
-
-  var bundle = function () {
-    return bundler.bundle()
-      .on('error', gutil.log)
-      .pipe(source('main.js'))
-      .pipe(gulpif(!options.dev, streamify(uglify())))
-      .pipe(gulp.dest(options.dev ? './build' : './dist/osx/' + options.filename + '/Contents/Resources/app/build'))
-      .pipe(gulpif(options.dev && !options.test, livereload()));
-  };
-
-  if (options.dev) {
-    bundler = watchify(bundler);
-    bundler.on('update', bundle);
-  }
-
-  return bundle();
+  gulp.src('./app/**/*.js')
+    .pipe(react())
+    .pipe(gulp.dest(options.dev ? './build' : './dist/osx/' + options.filename + '/Contents/Resources/app/build'));
 });

 gulp.task('specs', function () {
@ -147,7 +112,7 @@ gulp.task('copy', function () {

 gulp.task('dist', function (cb) {
  var stream = gulp.src('').pipe(shell([
-    'rm -rf ./dist/osx',
+    'rm -Rf ./dist',
    'mkdir -p ./dist/osx',
    'cp -R ./cache/Atom.app ./dist/osx/<%= filename %>',
    'mv ./dist/osx/<%= filename %>/Contents/MacOS/Atom ./dist/osx/<%= filename %>/Contents/MacOS/<%= name %>',
@ -213,6 +178,7 @@ gulp.task('test', ['download', 'copy', 'js', 'images', 'styles', 'specs'], funct
 });

 gulp.task('default', ['download', 'copy', 'js', 'images', 'styles'], function () {
+  gulp.watch('./app/**/*.js', ['js']);
  gulp.watch('./app/**/*.html', ['copy']);
  gulp.watch('./app/styles/**/*.less', ['styles']);
  gulp.watch('./app/images/**', ['images']);
--- a/package.json
+++ b/package.json
@ -11,7 +11,10 @@
  },
  "bugs": "https://github.com/kitematic/kitematic/issues",
  "scripts": {
-    "start": "./script/run"
+    "start": "gulp",
+    "preinstall": "./script/deps",
+    "test": "gulp test",
+    "release": ". ./script/identity && gulp release"
  },
  "licenses": [
    {
@ -24,26 +27,22 @@
  "dependencies": {
    "ansi-to-html": "0.2.0",
    "async": "^0.9.0",
+    "bugsnag-js": "git+https://git@github.com/bugsnag/bugsnag-js",
    "dockerode": "2.0.4",
    "exec": "0.1.2",
-    "flux-react": "^2.6.1",
+    "gulp-react": "^2.0.0",
    "jquery": "^2.1.3",
-    "leveldown": "^1.0.0",
-    "levelup": "git+https://github.com/kitematic/node-levelup.git",
    "minimist": "^1.1.0",
    "moment": "2.8.1",
-    "ncp": "0.6.0",
    "node-uuid": "1.4.1",
    "open": "0.0.5",
-    "raven": "^0.7.2",
-    "react": "^0.12.1",
+    "react": "^0.12.2",
    "react-bootstrap": "^0.13.2",
    "react-retina-image": "^1.1.2",
    "react-router": "^0.11.6",
    "request": "2.42.0",
    "request-progress": "0.3.1",
    "retina.js": "^1.1.0",
-    "tar": "0.1.20",
    "underscore": "^1.7.0"
  },
  "devDependencies": {
@ -65,9 +64,9 @@
    "gulp-sourcemaps": "^1.2.8",
    "gulp-streamify": "0.0.5",
    "gulp-uglify": "^0.3.1",
+    "gulp-uglifyjs": "^0.5.0",
    "gulp-util": "^3.0.0",
    "jasmine-tagged": "^1.1.2",
-    "object-assign": "^2.0.0",
    "reactify": "^0.15.2",
    "run-sequence": "^1.0.2",
    "vinyl-source-stream": "^0.1.1",
--- a/script/deps
+++ b/script/deps
@ -0,0 +1,19 @@
+#!/bin/bash
+
+DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"
+BASE=$DIR/..
+export BOOT2DOCKER_CLI_VERSION=$(node -pe "JSON.parse(process.argv[1])['boot2docker-version']" "$(cat $BASE/package.json)")
+export BOOT2DOCKER_CLI_VERSION_FILE=boot2docker-$BOOT2DOCKER_CLI_VERSION
+
+mkdir -p $BASE/cache
+
+pushd $BASE/resources > /dev/null
+
+if [ ! -f $BOOT2DOCKER_CLI_VERSION_FILE ]; then
+  echo "-----> Downloading Boot2docker CLI..."
+  rm -rf boot2docker-*
+  curl -L -o $BOOT2DOCKER_CLI_VERSION_FILE https://github.com/boot2docker/boot2docker-cli/releases/download/v${BOOT2DOCKER_CLI_VERSION}/boot2docker-v${BOOT2DOCKER_CLI_VERSION}-darwin-amd64
+  chmod +x $BOOT2DOCKER_CLI_VERSION_FILE
+fi
+
+popd > /dev/null
--- a/script/env
+++ b/script/env
@ -1,35 +0,0 @@
-#!/bin/bash
-
-DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"
-BASE=$DIR/..
-export NODE_VERSION="0.11.14"
-export NPM="$BASE/cache/node-v$NODE_VERSION/bin/npm"
-export NODE="$BASE/cache/node-v$NODE_VERSION/bin/node"
-export PATH="$BASE/cache/node-v$NODE_VERSION/bin/:$BASE/node_modules/.bin:$PATH"
-export NODE_PATH="$BASE/node_modules"
-export BOOT2DOCKER_CLI_VERSION=$($NODE -pe "JSON.parse(process.argv[1])['boot2docker-version']" "$(cat $BASE/package.json)")
-export BOOT2DOCKER_CLI_VERSION_FILE=boot2docker-$BOOT2DOCKER_CLI_VERSION
-
-mkdir -p $BASE/cache
-
-pushd $BASE/cache > /dev/null
-
-if [ ! -f "$NODE" ]; then
-  curl -L -o node-v$NODE_VERSION-darwin-x64.tar.gz http://nodejs.org/dist/v$NODE_VERSION/node-v$NODE_VERSION-darwin-x64.tar.gz
-  mkdir -p node-v$NODE_VERSION
-  tar -xzf node-v$NODE_VERSION-darwin-x64.tar.gz --strip-components 1 -C node-v$NODE_VERSION
-  rm -rf node-v$NODE_VERSION-darwin-x64.tar.gz
-fi
-
-popd > /dev/null
-
-pushd $BASE/resources > /dev/null
-
-if [ ! -f $BOOT2DOCKER_CLI_VERSION_FILE ]; then
-  cecho "-----> Downloading Boot2docker CLI..." $purple
-  rm -rf boot2docker-*
-  curl -L -o $BOOT2DOCKER_CLI_VERSION_FILE https://github.com/boot2docker/boot2docker-cli/releases/download/v${BOOT2DOCKER_CLI_VERSION}/boot2docker-v${BOOT2DOCKER_CLI_VERSION}-darwin-amd64
-  chmod +x $BOOT2DOCKER_CLI_VERSION_FILE
-fi
-
-popd > /dev/null
--- a/script/gulp
+++ b/script/gulp
@ -1,5 +0,0 @@
-#!/bin/bash
-DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"
-source $DIR/env
-
-gulp $*
--- a/script/npm
+++ b/script/npm
@ -1,11 +0,0 @@
-#!/bin/bash
-
-DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"
-source $DIR/env
-
-ATOM_SHELL_VERSION=$($NODE -pe "JSON.parse(process.argv[1])['atom-shell-version']" "$(cat package.json)")
-export npm_config_disturl=https://gh-contractor-zcbenz.s3.amazonaws.com/atom-shell/dist
-export npm_config_target=$ATOM_SHELL_VERSION
-export npm_config_arch=ia64
-
-HOME=~/.atom-shell-gyp $NPM $*
--- a/script/release
+++ b/script/release
@ -1,10 +0,0 @@
-#!/bin/bash
-
-DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"
-source $DIR/env
-
-if [ -f $DIR/identity ]; then
-  source $DIR/identity
-fi
-
-gulp release
--- a/script/test
+++ b/script/test
@ -1,5 +0,0 @@
-#!/bin/bash
-DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"
-source $DIR/env
-
-gulp test