diff --git a/app/ContainerDetails.react.js b/app/ContainerDetails.react.js index f185a214e8..e7d568f6c2 100644 --- a/app/ContainerDetails.react.js +++ b/app/ContainerDetails.react.js @@ -102,6 +102,14 @@ var ContainerDetails = React.createClass({ }); }); }, + saveEnvVar: function () { + console.log('Saved Vars!'); + }, + deleteContainer: function () { + var container = this.props.container; + var name = container.Name.replace('/', ''); + ContainerStore.remove(name); + }, render: function () { var self = this; @@ -135,6 +143,21 @@ var ContainerDetails = React.createClass({ button = View; } + var name = this.props.container.Name; + var image = this.props.container.Config.Image; + + var envVars = this.props.container.Config.Env.map(function (keyval) { + var keyvalTokens = keyval.split('='); + var key = keyvalTokens[0]; + var val = keyvalTokens[1]; + return ( +
+ + +
+ ); + }); + var body; if (this.props.container.State.Downloading) { body = ( @@ -145,7 +168,7 @@ var ContainerDetails = React.createClass({ } else { if (this.state.page === this.PAGE_LOGS) { body = ( -
+
{logs}
@@ -153,8 +176,17 @@ var ContainerDetails = React.createClass({ ); } else { body = ( -
+
+

Container Detail

+ +

Environment Variables

+
+ {envVars} +
+ Save +

Delete Container

+ Delete Container
); @@ -175,9 +207,6 @@ var ContainerDetails = React.createClass({ 'active': this.state.page === this.PAGE_SETTINGS }); - var name = this.props.container.Name; - var image = this.props.container.Config.Image; - return (
diff --git a/app/ContainerStore.js b/app/ContainerStore.js index 05a9c84998..de5055cc82 100644 --- a/app/ContainerStore.js +++ b/app/ContainerStore.js @@ -130,6 +130,47 @@ var ContainerStore = assign(EventEmitter.prototype, { }); }); }, + rename: function (name, newName, callback) { + var existing = docker.client().getContainer(name); + var existingImage = existing.Image; + var self = this; + existing.remove(function (err, data) { + docker.client().createContainer({ + Image: existingImage, + Tty: false, + name: newName, + User: 'root' + }, function (err, container) { + if (err) { + callback(err, null); + return; + } + container.start({ + PublishAllPorts: true + }, function (err) { + if (err) { + callback(err); + return; + } + self.fetchContainer(newName, callback); + }); + }); + }); + }, + remove: function (name, callback) { + var existing = docker.client().getContainer(name); + existing.kill(function (err) { + if (err) { + console.log(err); + } else { + existing.remove(function (err) { + if (err) { + console.log(err); + } + }); + } + }); + }, _createPlaceholderContainer: function (imageName, name, callback) { var self = this; this._pullScratchImage(function (err) { diff --git a/app/styles/containers.less b/app/styles/containers.less index 9d9e18d59c..54a17ebbbb 100644 --- a/app/styles/containers.less +++ b/app/styles/containers.less @@ -329,25 +329,23 @@ width: 300px; } - .details-logs { + .details-panel { flex: 1; overflow: auto; - h4 { - font-size: 14px; - margin-top: 16px; - margin-left: 40px; - } .logs { -webkit-user-select: text; font-family: Menlo; font-size: 12px; - padding: 18px 45px; + padding: 18px 35px; color: lighten(@gray-normal, 6%); white-space: pre-wrap; p { margin: 0 6px; } } + .settings { + padding: 18px 35px; + } } } } diff --git a/app/styles/theme.less b/app/styles/theme.less index f860fcd4da..79dfb38d89 100644 --- a/app/styles/theme.less +++ b/app/styles/theme.less @@ -17,6 +17,22 @@ h4 { font-size: 13px; } +input[type="text"] { + &.line { + border: 0; + border-bottom: 1px solid @gray-normal; + color: @gray-normal; + font-weight: 300; + &:focus { + outline: 0; + } + &::-webkit-input-placeholder { + color: #ddd; + font-weight: 300; + } + } +} + // // Buttons // --------------------------------------------------