@@ -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} />
+
+
+
+
+
+ |
{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;