diff --git a/src/components/ContainerHomePreview.react.js b/src/components/ContainerHomePreview.react.js index 5358cc41d0..f4dcb3ce16 100644 --- a/src/components/ContainerHomePreview.react.js +++ b/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 = (
@@ -72,7 +72,7 @@ var ContainerHomePreview = React.createClass({ var val = pair[1]; return ( - {key} + {key + '/' + val.portType} {val.url} ); diff --git a/src/components/ContainerSettingsPorts.react.js b/src/components/ContainerSettingsPorts.react.js index 9234189c98..8739bf67c2 100644 --- a/src/components/ContainerSettingsPorts.react.js +++ b/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) { - res[key + '/tcp'] = [{ - HostIp: value.ip, - HostPort: value.port, - }]; - return res; - }, {}) + Ports: bindings } }); }, @@ -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) ? ({ip}):({ip}); return ( @@ -96,6 +111,12 @@ var ContainerSettingsPorts = React.createClass({ onChange={this.handleChangePort.bind(this, key)} defaultValue={port} /> + + + TCP + UDP + + {error} ); diff --git a/src/utils/ContainerUtil.js b/src/utils/ContainerUtil.js index b30e5203df..2a9496a6e0 100644 --- a/src/utils/ContainerUtil.js +++ b/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; - localUrl = 'http://' + ip + ':' + port; + port = value[0].HostPort; } + localUrl = (port) ? ip + ':' + port : ip + ':' + ''; + res[dockerPort] = { url: localUrl, ip: ip, - port: port + port: port, + portType: portType }; }); return res; diff --git a/src/utils/DockerUtil.js b/src/utils/DockerUtil.js index df4344976a..7091482feb 100644 --- a/src/utils/DockerUtil.js +++ b/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); diff --git a/styles/container-home.less b/styles/container-home.less index 3dde3e42be..b8dbc3f20b 100644 --- a/styles/container-home.less +++ b/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;