Closes #3435 - Feature Request: Export container settings to dockerfile

package.json

@@ -56,6 +56,7 @@
     "react-bootstrap": "0.20.3",
     "react-retina-image": "1.3.3",
     "react-router": "0.13.6",
+    "rekcod": "^2.1.1",
     "request": "^2.88.0",
     "request-progress": "0.3.1",
     "rimraf": "2.6.2",

src/components/ContainerSettingsGeneral.react.js

@@ -7,6 +7,7 @@ const dialog = remote.dialog;
 import ContainerUtil from '../utils/ContainerUtil';
 import containerActions from '../actions/ContainerActions';
 import util from '../utils/Util';
+import rekcod from 'rekcod';
 
 var ContainerSettingsGeneral = React.createClass({
   mixins: [React.addons.LinkedStateMixin],
@@ -27,6 +28,7 @@ var ContainerSettingsGeneral = React.createClass({
       slugName: null,
       nameError: null,
       copiedId: false,
+      copiedRunCmd: false,
       env: env
     };
   },
@@ -63,16 +65,14 @@ var ContainerSettingsGeneral = React.createClass({
 
   handleCopyContainerId: function() {
     clipboard.writeText(this.props.container.Id);
-    this.setState({ 
-      copiedId: true
-    });
+ 	this.setState({copiedId: true});
+	setTimeout(() => this.setState({copiedId: false}), 5000);
+  },
 
-    var _this = this;
-    setTimeout(function() {
-      _this.setState({ 
-        copiedId: false
-      });
-    }, 5000);
+  handleCopyDockerRunCmd: function (cmd) {
+	clipboard.writeText(cmd);
+	this.setState({copiedRunCmd: true});
+	setTimeout(() => this.setState({copiedRunCmd: false}), 5000);
   },
 
   handleSaveContainerName: function () {
@@ -169,11 +169,15 @@ var ContainerSettingsGeneral = React.createClass({
       return false;
     }
 
-    var clipboardStatus;
-    var willBeRenamedAs;
-    var btnSaveName = (
+    const runCmd = rekcod.translate(this.props.container).command;
+
+    let idCopiedToClipboard;
+    let runCmdCopiedToClipboard;
+    let willBeRenamedAs;
+    let btnSaveName = (
       <a className="btn btn-action" onClick={this.handleSaveContainerName} disabled="disabled">Save</a>
     );
+
     if (this.state.slugName) {
       willBeRenamedAs = (
         <p>Will be renamed as: <strong>{this.state.slugName}</strong></p>
@@ -188,26 +192,38 @@ var ContainerSettingsGeneral = React.createClass({
     }
 
     if (this.state.copiedId) {
-      clipboardStatus = (
+      idCopiedToClipboard = (
         <p className="fadeOut"><strong>Copied to Clipboard</strong></p>
       );
     }
 
+	if (this.state.copiedRunCmd) {
+	  runCmdCopiedToClipboard = (
+		<p className="fadeOut"><strong>Copied to Clipboard</strong></p>
+	  );
+	}
+
     let containerInfo = (
       <div className="settings-section">
         <h3>Container Info</h3>
         <div className="container-info-row">
           <div className="label-id">ID</div>
           <input type="text" className="line disabled" defaultValue={this.props.container.Id} disabled></input>
           <a className="btn btn-action btn-copy" onClick={this.handleCopyContainerId}>Copy</a>
-          {clipboardStatus}
+          {idCopiedToClipboard}
         </div>
         <div className="container-info-row">
           <div className="label-name">NAME</div>
           <input id="input-container-name" type="text" className="line" placeholder="Container Name" defaultValue={this.props.container.Name} onChange={this.handleNameChange} onKeyUp={this.handleNameOnKeyUp}></input>
           {btnSaveName}
           {willBeRenamedAs}
         </div>
+		<div className="container-info-row">
+		  <div className="label-id">COMMAND</div>
+		  <textarea rows="4" className="line disabled" disabled>{runCmd}</textarea>
+		  <a className="btn btn-action btn-copy" onClick={() => this.handleCopyDockerRunCmd(runCmd)}>Copy</a>
+		  {runCmdCopiedToClipboard}
+		</div>
       </div>
     );
 

styles/container-settings.less

@@ -63,6 +63,8 @@
     }
     .container-info-row {
       margin-bottom: 5px;
+      display: flex;
+      align-items: baseline;
       .label-id, .label-name, .label-hostname {
         .env-vars-labels;
         display: inline-block;
@@ -75,7 +77,7 @@
       a {
         margin-left: 10px;
       }
-      input {
+      input, textarea {
         width: 55%;
         max-width: 500px;
       }

styles/theme.less

@@ -32,7 +32,7 @@ a {
   outline: 0 !important;
 }
 
-input[type="text"] {
+input[type="text"], textarea {
   &.line {
     border: 0;
     border-bottom: 1px solid @gray-lightest;