Added hostname settings to container (#2509)

Signed-off-by: Fabio Gollinucci <fbgolly@gmail.com>

src/components/ContainerSettings.react.js

@@ -47,7 +47,7 @@ var ContainerSettings = React.createClass({
               </Router.Link>
               <Router.Link to="containerSettingsPorts" params={{name: container.Name}}>
                 <li>
-                  Ports
+                  Hostname / Ports 
                 </li>
               </Router.Link>
               <Router.Link to="containerSettingsVolumes" params={{name: container.Name}}>

src/components/ContainerSettingsPorts.react.js

@@ -25,7 +25,8 @@ var ContainerSettingsPorts = React.createClass({
     };
     return {
       ports: ports,
-      initialPorts: initialPorts
+      initialPorts: initialPorts,
+      hostname: this.props.container.Config.Hostname
     };
   },
   handleViewLink: function (url) {
@@ -167,6 +168,12 @@ var ContainerSettingsPorts = React.createClass({
     }
     return false;
   },
+  handleChangeHostnameEnabled: function (e) {
+    var value = e.target.value;
+    this.setState({
+      hostname: value
+    });
+  },
   handleSave: function () {
     let ports = this.state.ports;
     ports = this.addPort();
@@ -182,8 +189,9 @@ var ContainerSettingsPorts = React.createClass({
       return res;
     }, {});
 
-    let hostConfig = _.extend(this.props.container.HostConfig, {PortBindings: portBindings});
-    containerActions.update(this.props.container.Name, {ExposedPorts: exposedPorts, HostConfig: hostConfig});
+    let hostConfig = _.extend(this.props.container.HostConfig, {PortBindings: portBindings, Hostname: this.state.hostname});
+    let config = _.extend(this.props.container.Config, {Hostname: this.state.hostname});
+    containerActions.update(this.props.container.Name, {ExposedPorts: exposedPorts, HostConfig: hostConfig, Config: config});
 
   },
   render: function () {
@@ -234,6 +242,13 @@ var ContainerSettingsPorts = React.createClass({
     });
     return (
       <div className="settings-panel">
+        <div className="settings-section">
+          <h3>Configure Hostname</h3>
+          <div className="container-info-row">
+            <div className="label-hostname">HOSTNAME</div>
+            <input id="hostname" className="line" type="text" disabled={isUpdating} value={this.state.hostname} onChange={this.handleChangeHostnameEnabled}/>
+          </div>
+        </div>
         <div className="settings-section">
           <h3>Configure Ports</h3>
           <table className="table ports">

src/utils/DockerUtil.js

@@ -143,6 +143,10 @@ var DockerUtil = {
       containerData.Image = containerData.Config.Image;
     }
 
+    if (containerData.Config && containerData.Config.Hostname) {
+      containerData.Hostname = containerData.Config.Hostname;
+    }
+
     if (!containerData.Env && containerData.Config && containerData.Config.Env) {
       containerData.Env = containerData.Config.Env;
     }
@@ -186,6 +190,7 @@ var DockerUtil = {
         existing.remove(() => {
           this.client.createContainer(containerData, (error) => {
             if (error) {
+              console.error(err);
               containerServerActions.error({name, error});
               return;
             }

styles/container-settings.less

@@ -63,12 +63,15 @@
     }
     .container-info-row {
       margin-bottom: 5px;
-      .label-id, .label-name {
+      .label-id, .label-name, .label-hostname {
         .env-vars-labels;
         display: inline-block;
         width: 5%;
         min-width: 75px;
       }
+      .label-hostname {
+        min-width: 100px;
+      }
       a {
         margin-left: 10px;
       }