Merge pull request #1201 from FrenchBen/344-udp

Added port type support - fixes #344

src/components/ContainerHomePreview.react.js

@@ -34,7 +34,7 @@ var ContainerHomePreview = React.createClass({
       metrics.track('Opened In Browser', {
         from: 'preview'
       });
-      shell.openExternal(this.props.ports[this.props.defaultPort].url);
+      shell.openExternal('http://' + this.props.ports[this.props.defaultPort].url);
     }
   },
 
@@ -48,7 +48,7 @@ var ContainerHomePreview = React.createClass({
   render: function () {
     var preview;
     if (this.props.defaultPort) {
-      var frame = React.createElement('webview', {className: 'frame', id: 'webview', src: this.props.ports[this.props.defaultPort].url, autosize: 'on'});
+      var frame = React.createElement('webview', {className: 'frame', id: 'webview', src: 'http://' + this.props.ports[this.props.defaultPort].url, autosize: 'on'});
       preview = (
         <div className="web-preview wrapper">
           <div className="widget">
@@ -72,7 +72,7 @@ var ContainerHomePreview = React.createClass({
         var val = pair[1];
         return (
           <tr key={key}>
-            <td>{key}</td>
+            <td>{key + '/' + val.portType}</td>
             <td>{val.url}</td>
           </tr>
         );

src/components/ContainerSettingsPorts.react.js

@@ -6,6 +6,7 @@ import containerActions from '../actions/ContainerActions';
 import containerStore from '../stores/ContainerStore';
 import metrics from '../utils/MetricsUtil';
 import {webPorts} from '../utils/Util';
+import {DropdownButton, MenuItem} from 'react-bootstrap';
 
 var ContainerSettingsPorts = React.createClass({
   contextTypes: {
@@ -61,16 +62,29 @@ var ContainerSettingsPorts = React.createClass({
     }
     this.setState({ports: ports});
   },
-  handleSave: function() {
+  handleChangePortType: function (key, portType) {
+    let ports = this.state.ports;
+    let port = ports[key].port;
+
+    // save updated port
+    ports[key] = _.extend(ports[key], {
+      url: ports[key].ip + ':' + port,
+      port: port,
+      portType: portType,
+      error: null
+    });
+    this.setState({ports: ports});
+  },
+  handleSave: function () {
+    let bindings = _.reduce(this.state.ports, (res, value, key) => {
+      res[key + '/' + value.portType] = [{
+        HostPort: value.port
+      }];
+      return res;
+    }, {});
     containerActions.update(this.props.container.Name, {
       NetworkSettings: {
-        Ports: _.reduce(this.state.ports, function(res, value, key) {
+        Ports: bindings
-          res[key + '/tcp'] = [{
-            HostIp: value.ip,
-            HostPort: value.port,
-          }];
-          return res;
-        }, {})
       }
     });
   },
@@ -80,9 +94,10 @@ var ContainerSettingsPorts = React.createClass({
     }
     var isUpdating = (this.props.container.State.Updating);
     var isValid = true;
+
     var ports = _.map(_.pairs(this.state.ports), pair => {
       var key = pair[0];
-      var {ip, port, url, error} = pair[1];
+      var {ip, port, url, portType, error} = pair[1];
       isValid = (error) ? false : isValid;
       let ipLink = (this.props.container.State.Running && !this.props.container.State.Paused && !this.props.container.State.ExitCode && !this.props.container.State.Restarting) ? (<a onClick={this.handleViewLink.bind(this, url)}>{ip}</a>):({ip});
       return (
@@ -96,6 +111,12 @@ var ContainerSettingsPorts = React.createClass({
               onChange={this.handleChangePort.bind(this, key)}
               defaultValue={port} />
           </td>
+          <td>
+            <DropdownButton bsStyle="primary" title={portType}>
+              <MenuItem onSelect={this.handleChangePortType.bind(this, key, 'tcp')} key={key + '-tcp'}>TCP</MenuItem>
+              <MenuItem onSelect={this.handleChangePortType.bind(this, key, 'udp')} key={key + '-udp'}>UDP</MenuItem>
+            </DropdownButton>
+          </td>
           <td className="error">{error}</td>
         </tr>
       );

src/utils/ContainerUtil.js

@@ -28,20 +28,22 @@ var ContainerUtil = {
     }
     var res = {};
     var ip = docker.host;
-    var ports = (container.NetworkSettings.Ports) ? container.NetworkSettings.Ports : (container.HostConfig.PortBindings) ? container.HostConfig.PortBindings : container.Config.ExposedPorts;
+    var ports = (container.NetworkSettings.Ports) ? container.NetworkSettings.Ports : ((container.HostConfig.PortBindings) ? container.HostConfig.PortBindings : container.Config.ExposedPorts);
     _.each(ports, function (value, key) {
-      var dockerPort = key.split('/')[0];
+      var [dockerPort, portType] = key.split('/');
       var localUrl = null;
-      var localUrlDisplay = null;
       var port = null;
+
       if (value && value.length) {
-        var port = value[0].HostPort;
+        port = value[0].HostPort;
-        localUrl = 'http://' + ip + ':' + port;
       }
+      localUrl = (port) ? ip + ':' + port : ip + ':' + '<not set>';
+
       res[dockerPort] = {
         url: localUrl,
         ip: ip,
-        port: port
+        port: port,
+        portType: portType
       };
     });
     return res;

src/utils/DockerUtil.js

@@ -231,6 +231,19 @@ export default {
         existingData.Tty = existingData.Config.Tty;
         existingData.OpenStdin = existingData.Config.OpenStdin;
       }
+      let networking = _.extend(existingData.NetworkSettings, data.NetworkSettings);
+      if (networking && networking.Ports) {
+        let exposed = _.reduce(networking.Ports, (res, value, key) => {
+          res[key] = {};
+          return res;
+        }, {});
+        data = _.extend(data, {
+          HostConfig: {
+            PortBindings: networking.Ports
+          },
+          ExposedPorts: exposed
+        });
+      }
 
       var fullData = _.extend(existingData, data);
       this.createContainer(name, fullData);

styles/container-home.less

@@ -48,6 +48,7 @@
               }
             }
             td {
+              -webkit-user-select: auto;
               border-color: @color-divider;
               &.right {
                 text-align: right;
@@ -165,7 +166,7 @@
             .text {
               margin-top: 0.3rem;
               margin-left: 1rem;
-              width: 180px;  
+              width: 180px;
               text-overflow: ellipsis;
               white-space: nowrap;
               overflow: hidden;