Container Store per-container emits

README.md

@@ -12,10 +12,12 @@ Kitematic's documentation and other information can be found at [http://kitemati
 
 ### Development
 
-Kitematic uses a special version of node npm (found under `script/npm`) so packages are built against the same v8 headers as atom-shell. To run the app in development:
+- `sudo npm install -g less`
-
 - `./script/npm install`
-- `./script/run`
+
+To run the app in development:
+
+- `./script/gulp`
 
 ### Building the Mac OS X Package
 

app/ContainerDetails.react.js

@@ -60,6 +60,7 @@ var ContainerDetails = React.createClass({
         });
       });
     });
+
   },
   componentWillMount: function () {
     this.update();
@@ -105,10 +106,12 @@ var ContainerDetails = React.createClass({
     });
   },
   componentDidMount: function () {
-    ContainerStore.addChangeListener(this.update);
+    var containerName = this.getParams().name;
+    ContainerStore.addChangeListener(containerName, this.update);
   },
   componentWillUnmount: function () {
-    ContainerStore.removeChangeListener(this.update);
+    var containerName = this.getParams().name;
+    ContainerStore.removeChangeListener(containerName, this.update);
   },
   update: function () {
     var containerName = this.getParams().name;
@@ -123,6 +126,7 @@ var ContainerDetails = React.createClass({
     return div.innerHTML;
   },
   render: function () {
+    console.log('render details');
     var self = this;
 
     if (!this.state) {

app/ContainerStore.js

@@ -7,6 +7,8 @@ var _ = require('underscore');
 
 // Merge our store with Node's Event Emitter
 var ContainerStore = assign(EventEmitter.prototype, {
+  CONTAINERS: 'containers',
+  ACTIVE: 'active',
   _containers: {},
   _logs: {},
   _active: null,
@@ -70,11 +72,14 @@ var ContainerStore = assign(EventEmitter.prototype, {
           return;
         }
         var containers = {};
-        results.map(function (r) {
+        results.forEach(function (r) {
           containers[r.Name.replace('/', '')] = r;
         });
         self._containers = containers;
-        self.emit('change');
+        _.keys(self._containers).forEach(function(c) {
+          self.emit(c);
+        });
+        self.emit(self.CONTAINERS);
         callback(null);
       });
     });
@@ -211,7 +216,7 @@ var ContainerStore = assign(EventEmitter.prototype, {
   },
   setActive: function (containerName) {
     this._active = containerName;
-    this.emit('change');
+    this.emit(self.ACTIVE);
   },
   active: function () {
     return this._active;
@@ -219,11 +224,11 @@ var ContainerStore = assign(EventEmitter.prototype, {
   logs: function (containerName) {
     return logs[containerId];
   },
-  addChangeListener: function(callback) {
+  addChangeListener: function(eventType, callback) {
-    this.on('change', callback);
+    this.on(eventType, callback);
   },
-  removeChangeListener: function(callback) {
+  removeChangeListener: function(eventType, callback) {
-    this.removeListener('change', callback);
+    this.removeListener(eventType, callback);
   },
 });
 

app/Containers.react.js

@@ -9,6 +9,7 @@ var Header = require('./Header.react');
 var async = require('async');
 var _ = require('underscore');
 var docker = require('./docker');
+var $ = require('jquery');
 
 var Link = Router.Link;
 var RouteHandler = Router.RouteHandler;
@@ -29,13 +30,18 @@ var ContainerList = React.createClass({
       active = name;
       ContainerStore.setActive(name);
     }
-    ContainerStore.addChangeListener(this.update);
+    ContainerStore.addChangeListener(ContainerStore.CONTAINERS, this.update);
+    ContainerStore.addChangeListener(ContainerStore.ACTIVE, this.update);
   },
   componentWillMount: function () {
     this._start = Date.now();
   },
   componentWillUnmount: function () {
-    ContainerStore.removeChangeListener(this.update);
+    ContainerStore.removeChangeListener(ContainerStore.CONTAINERS, this.update);
+    ContainerStore.removeChangeListener(ContainerStore.ACTIVE, this.update);
+  },
+  componentDidUpdate: function () {
+
   },
   update: function () {
     var containers = _.values(ContainerStore.containers()).sort(function (a, b) {

app/styles/containers.less

@@ -10,14 +10,15 @@
     .sidebar {
       display: flex;
       flex-direction: column;
-      min-width: 260px;
+      min-width: 240px;
       margin: 0;
       box-sizing: border-box;
       border-right: 1px solid #eee;
 
       .sidebar-header {
         flex: 0 auto;
-        min-width: 260px;
+        min-width: 240px;
+        min-height: 42px;
         display: flex;
         border-bottom: 1px solid transparent;
         transition: border-bottom 0.25s;
@@ -79,14 +80,9 @@
         }
 
         ul {
-          padding: 0;
           margin: 0;
-          min-width: 260px;
+          min-width: 240px;
-          position: absolute;
+          padding: 0;
-          top: 0;
-          bottom: 0;
-          right: 0;
-          left: 0;
 
           display: flex;
           flex-direction: column;

app/util.js

@@ -3,7 +3,6 @@ var fs = require('fs');
 var nodeCrypto = require('crypto');
 var request = require('request');
 var progress = require('request-progress');
-var ncp = require('ncp').ncp;
 var exec = require('exec');
 
 var Util = {