Merge pull request #661 from kitematic/design-polish-ttystdin

Design polish TTY and STDIN

src/components/ContainerDetailsSubheader.react.js

@@ -1,16 +1,9 @@
-var $ = require('jquery');
 var _ = require('underscore');
 var React = require('react');
-var exec = require('exec');
 var shell = require('shell');
 var metrics = require('../utils/MetricsUtil');
 var ContainerUtil = require('../utils/ContainerUtil');
-var util = require('../utils/Util');
-var machine = require('../utils/DockerMachineUtil');
-var RetinaImage = require('react-retina-image');
 var classNames = require('classnames');
-var resources = require('../utils/ResourcesUtil');
-var dockerUtil = require('../utils/DockerUtil');
 var containerActions = require('../actions/ContainerActions');
 var dockerMachineUtil = require('../utils/DockerMachineUtil');
 

src/components/ContainerSettings.react.js

@@ -55,6 +55,11 @@ var ContainerSettings = React.createClass({
                   Volumes
                 </li>
               </Router.Link>
+              <Router.Link to="containerSettingsAdvanced" params={{name: container.Name}}>
+                <li>
+                  Advanced
+                </li>
+              </Router.Link>
             </ul>
           </div>
           <Router.RouteHandler {...this.props}/>

src/components/ContainerSettingsAdvanced.react.js

@@ -0,0 +1,60 @@
+var React = require('react/addons');
+var metrics = require('../utils/MetricsUtil');
+var ContainerUtil = require('../utils/ContainerUtil');
+var containerActions = require('../actions/ContainerActions');
+
+var ContainerSettingsAdvanced = React.createClass({
+  mixins: [React.addons.LinkedStateMixin],
+
+  contextTypes: {
+    router: React.PropTypes.func
+  },
+
+  getInitialState: function () {
+    let [tty, openStdin] = ContainerUtil.mode(this.props.container) || [true, true];
+    return {
+      tty: tty,
+      openStdin: openStdin
+    };
+  },
+
+  handleSaveAdvancedOptions: function () {
+    metrics.track('Saved Advanced Options');
+    let tty = this.state.tty;
+    let openStdin = this.state.openStdin;
+    containerActions.update(this.props.container.Name, {Tty: tty, OpenStdin: openStdin});
+  },
+
+  handleChangeTty: function () {
+    this.setState({
+      tty: !this.state.tty
+    });
+  },
+
+  handleChangeOpenStdin: function () {
+    this.setState({
+      openStdin: !this.state.openStdin
+    });
+  },
+
+  render: function () {
+    if (!this.props.container) {
+      return false;
+    }
+
+    return (
+      <div className="settings-panel">
+        <div className="settings-section">
+          <h3>Advanced Options</h3>
+          <div className="checkboxes">
+            <p><input type="checkbox" checked={this.state.tty} onChange={this.handleChangeTty}/>Allocate a TTY for this container</p>
+            <p><input type="checkbox" checked={this.state.openStdin} onChange={this.handleChangeOpenStdin}/>Keep STDIN open even if not attached</p>
+          </div>
+          <a className="btn btn-action" disabled={this.props.container.State.Updating} onClick={this.handleSaveAdvancedOptions}>Save</a>
+        </div>
+      </div>
+    );
+  }
+});
+
+module.exports = ContainerSettingsAdvanced;

src/components/ContainerSettingsGeneral.react.js

@@ -22,14 +22,10 @@ var ContainerSettingsGeneral = React.createClass({
       return [util.randomId(), e[0], e[1]];
     });
 
-    let [tty, openStdin] = ContainerUtil.mode(this.props.container) || [true, true];
-
     return {
       slugName: null,
       nameError: null,
-      env: env,
-      tty: tty,
-      openStdin: openStdin
+      env: env
     };
   },
 
@@ -94,9 +90,7 @@ var ContainerSettingsGeneral = React.createClass({
         list.push(key + '=' + value);
       }
     });
-    let tty = this.state.tty;
-    let openStdin = this.state.openStdin;
-    containerActions.update(this.props.container.Name, {Env: list, Tty: tty, OpenStdin: openStdin});
+    containerActions.update(this.props.container.Name, {Env: list});
   },
 
   handleChangeEnvKey: function (index, event) {
@@ -139,18 +133,6 @@ var ContainerSettingsGeneral = React.createClass({
     metrics.track('Removed Environment Variable');
   },
 
-  handleChangeTty: function () {
-    this.setState({
-      tty: !this.state.tty
-    });
-  },
-
-  handleChangeOpenStdin: function () {
-    this.setState({
-      openStdin: !this.state.openStdin
-    });
-  },
-
   handleDeleteContainer: function () {
     dialog.showMessageBox({
       message: 'Are you sure you want to delete this container?',
@@ -230,14 +212,6 @@ var ContainerSettingsGeneral = React.createClass({
             {vars}
           </div>
         </div>
-        <div className="settings-section">
-          <div className="env-vars">
-            <h4>Advanced Options</h4>
-            <p><input type="checkbox" checked={this.state.tty} onChange={this.handleChangeTty}/> Attach standard streams to a tty, including stdin if it is not closed</p>
-            <p><input type="checkbox" checked={this.state.openStdin} onChange={this.handleChangeOpenStdin}/> Keep STDIN open even if not attached</p>
-          </div>
-          <a className="btn btn-action" disabled={this.props.container.State.Updating} onClick={this.handleSaveEnvVars}>Save</a>
-        </div>
         <div className="settings-section">
           <h3>Delete Container</h3>
           <a className="btn btn-action" onClick={this.handleDeleteContainer}>Delete Container</a>

src/components/Containers.react.js

@@ -6,7 +6,6 @@ var containerStore = require('../stores/ContainerStore');
 var ContainerList = require('./ContainerList.react');
 var Header = require('./Header.react');
 var metrics = require('../utils/MetricsUtil');
-var RetinaImage = require('react-retina-image');
 var shell = require('shell');
 var machine = require('../utils/DockerMachineUtil');
 

src/routes.js

@@ -11,6 +11,7 @@ var ContainerSettings = require('./components/ContainerSettings.react');
 var ContainerSettingsGeneral = require('./components/ContainerSettingsGeneral.react');
 var ContainerSettingsPorts = require('./components/ContainerSettingsPorts.react');
 var ContainerSettingsVolumes = require('./components/ContainerSettingsVolumes.react');
+var ContainerSettingsAdvanced = require('./components/ContainerSettingsAdvanced.react');
 var Preferences = require('./components/Preferences.react');
 var NewContainerSearch = require('./components/NewContainerSearch.react');
 var NewContainerPull = require('./components/NewContainerPull.react');
@@ -42,6 +43,7 @@ var routes = (
           <Route name="containerSettingsGeneral" path="containers/details/:name/settings/general" handler={ContainerSettingsGeneral}/>
           <Route name="containerSettingsPorts" path="containers/details/:name/settings/ports" handler={ContainerSettingsPorts}/>
           <Route name="containerSettingsVolumes" path="containers/details/:name/settings/volumes" handler={ContainerSettingsVolumes}/>
+          <Route name="containerSettingsAdvanced" path="containers/details/:name/settings/advanced" handler={ContainerSettingsAdvanced}/>
         </Route>
       </Route>
       <Route name="new" path="containers/new">

src/stores/ContainerStore.js

@@ -1,9 +1,7 @@
 import _ from 'underscore';
-import deepExtend from 'deep-extend';
 import alt from '../alt';
 import containerServerActions from '../actions/ContainerServerActions';
 import containerActions from '../actions/ContainerActions';
-var LogStore = require('./LogStore');
 
 class ContainerStore {
   constructor () {

src/utils/RegHubUtil.js

@@ -5,7 +5,6 @@ var util = require('../utils/Util');
 var hubUtil = require('../utils/HubUtil');
 var repositoryServerActions = require('../actions/RepositoryServerActions');
 var tagServerActions = require('../actions/TagServerActions');
-var Promise = require('bluebird');
 
 let REGHUB2_ENDPOINT = process.env.REGHUB2_ENDPOINT || 'https://registry.hub.docker.com/v2';
 let searchReq = null;
@@ -62,7 +61,7 @@ module.exports = {
       let data = JSON.parse(body);
       let repos = data.repos;
       async.map(repos, (repo, cb) => {
-        let name = repo.repo;
+        var name = repo.repo;
         if (util.isOfficialRepo(name)) {
           name = 'library/' + name;
         }

styles/container-settings.less

@@ -138,5 +138,14 @@
         margin-right: 0.5rem;
       }
     }
+    .checkboxes {
+      padding: 1rem 0;
+      p {
+        color: @gray-normal;
+      }
+      input[type="checkbox"] {
+        margin-right: 0.8rem;
+      }
+    }
   }
 }

styles/preferences.less

@@ -16,7 +16,6 @@
 
     .title {
       margin-top: 40px;
-      border-bottom: 1px solid #EEE;
       text-align: left;
       font-size: 18px;
       font-weight: 400;