Merge pull request #433 from TeckniX/master

Added support for container stop

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

@@ -398,6 +398,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;