Merge branch 'master' into revert-382-revert-374-hub-button

package.json

@@ -27,6 +27,7 @@
   "jest": {
     "scriptPreprocessor": "<rootDir>/util/preprocessor.js",
     "setupEnvScriptFile": "<rootDir>/util/testenv.js",
+    "setupTestFrameworkScriptFile": "<rootDir>/util/prepare.js",
     "collectCoverage": true,
     "testDirectoryName": "src",
     "testPathIgnorePatterns": [
@@ -42,7 +43,8 @@
       "<rootDir>/node_modules/.*JSONStream",
       "<rootDir>/node_modules/object-assign",
       "<rootDir>/node_modules/underscore",
-      "<rootDir>/node_modules/bluebird"
+      "<rootDir>/node_modules/bluebird",
+      "<rootDir>/node_modules/source-map-support"
     ]
   },
   "docker-version": "1.6.0",
@@ -93,6 +95,7 @@
     "jsxhint": "^0.14.0",
     "minimist": "^1.1.1",
     "react-tools": "^0.13.1",
-    "run-sequence": "^1.0.2"
+    "run-sequence": "^1.0.2",
+    "source-map-support": "^0.2.10"
   }
 }

src/components/ContainerDetailsHeader.react.js

@@ -6,7 +6,7 @@ var ContainerDetailsHeader = React.createClass({
     if (!this.props.container) {
       return false;
     }
-    if (this.props.container.State.Running && !this.props.container.State.Paused && !this.props.container.State.Restarting) {
+    if (this.props.container.State.Running && !this.props.container.State.Paused && !this.props.container.State.ExitCode && !this.props.container.State.Restarting) {
       state = <span className="status running">RUNNING</span>;
     } else if (this.props.container.State.Restarting) {
       state = <span className="status restarting">RESTARTING</span>;

src/components/ContainerDetailsSubheader.react.js

@@ -54,6 +54,12 @@ var ContainerDetailsSubheader = React.createClass({
     }
     return (this.props.container.State.Downloading || this.props.container.State.Restarting);
   },
+  stopDisabled: function () {
+    if (!this.props.container) {
+      return false;
+    }
+    return (this.props.container.State.Downloading || this.props.container.State.ExitCode);
+  },
   disableTerminal: function () {
     if (!this.props.container) {
       return false;
@@ -103,6 +109,13 @@ var ContainerDetailsSubheader = React.createClass({
       });
     }
   },
+  handleStop: function () {
+    if (!this.stopDisabled()) {
+      metrics.track('Stopped Container');
+      ContainerStore.stop(this.props.container.Name, function () {
+      });
+    }
+  },
   handleTerminal: function () {
     if (!this.disableTerminal()) {
       metrics.track('Terminaled Into Container');
@@ -134,6 +147,14 @@ var ContainerDetailsSubheader = React.createClass({
     var $action = $(this.getDOMNode()).find('.action .restart');
     $action.css("visibility", "hidden");
   },
+  handleItemMouseEnterStop: function () {
+    var $action = $(this.getDOMNode()).find('.action .stop');
+    $action.css("visibility", "visible");
+  },
+  handleItemMouseLeaveStop: function () {
+    var $action = $(this.getDOMNode()).find('.action .stop');
+    $action.css("visibility", "hidden");
+  },
   handleItemMouseEnterTerminal: function () {
     var $action = $(this.getDOMNode()).find('.action .terminal');
     $action.css("visibility", "visible");
@@ -151,6 +172,10 @@ var ContainerDetailsSubheader = React.createClass({
       action: true,
       disabled: this.disableRestart()
     });
+    var stopActionClass = classNames({
+      action: true,
+      disabled: this.stopDisabled()
+    });
     var terminalActionClass = classNames({
       action: true,
       disabled: this.disableTerminal()
@@ -181,6 +206,10 @@ var ContainerDetailsSubheader = React.createClass({
             <div className="action-icon" onClick={this.handleRestart}><RetinaImage src="button-restart.png"/></div>
             <span className="btn-label restart">Restart</span>
           </div>
+          <div className={stopActionClass} onMouseEnter={this.handleItemMouseEnterStop} onMouseLeave={this.handleItemMouseLeaveStop}>
+            <div className="action-icon" onClick={this.handleStop}><RetinaImage src="button-stop.png"/></div>
+            <span className="btn-label stop">Stop</span>
+          </div>
           <div className={terminalActionClass} onMouseEnter={this.handleItemMouseEnterTerminal} onMouseLeave={this.handleItemMouseLeaveTerminal}>
             <div className="action-icon" onClick={this.handleTerminal}><RetinaImage src="button-terminal.png"/></div>
             <span className="btn-label terminal">Terminal</span>

src/stores/ContainerStore.js

@@ -402,6 +402,19 @@ var ContainerStore = assign(Object.create(EventEmitter.prototype), {
       }
     });
   },
+  stop: function (name, callback) {
+    var container = docker.client().getContainer(name);
+    _muted[name] = true;
+    container.stop(err => {
+      if (err && err.statusCode !== 304) {
+        _muted[name] = false;
+        callback(err);
+      } else {
+        _muted[name] = false;
+        this.fetchContainer(name, callback);
+      }
+    });
+  },
   remove: function (name, callback) {
     if (_placeholders[name]) {
       delete _placeholders[name];

styles/right-panel.less

@@ -46,6 +46,10 @@
             left: 2px;
             //left: -18px;
           }
+          &.stop {
+            left: 7px;
+            //left: -18px;
+          }
           &.terminal {
             left: -1px;
             //left: -30px;

util/prepare.js

@@ -0,0 +1,14 @@
+require.requireActual('babel/polyfill');
+require.requireActual('source-map-support').install({
+  retrieveSourceMap: function(filename) {
+    if (filename.indexOf('node_modules') === -1) {
+      try {
+        return {
+          map: require.requireActual('fs').readFileSync('/tmp/' + require('crypto').createHash('md5').update(filename).digest('hex') + '.map', 'utf8')
+        };
+      } catch (err) {
+        return undefined;
+      }
+    }
+  }
+});

util/preprocessor.js

@@ -1,12 +1,14 @@
+var babel = require('babel');
+var fs = require('fs');
+var crypto = require('crypto');
+
 module.exports = {
   process: function(src, filename) {
-    if (filename.indexOf('node_modules') === -1) {
-      var res = require('babel').transform(src).code;
-      if (filename.indexOf('-test') !== -1) {
-        res = 'require(\'babel/polyfill\');' + res;
-      }
-      return res;
+    if (filename.indexOf('node_modules') !== -1) {
+      return src;
     }
-    return src;
+    var compiled = babel.transform(src, {filename: filename, sourceMap: true});
+    fs.writeFileSync('/tmp/' + crypto.createHash('md5').update(filename).digest('hex') + '.map', JSON.stringify(compiled.map));
+    return compiled.code;
   }
 };