Added delete container functionality.

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 = <a className="btn btn-primary disabled" onClick={this.handleClick}>View</a>;
     }
 
+    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 (
+        <div className="keyval-row">
+          <input type="text" className="key line" defaultValue={key}></input>
+          <input type="text" className="val line" defaultValue={val}></input>
+        </div>
+      );
+    });
+
     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 = (
-          <div className="details-logs">
+          <div className="details-panel">
             <div className="logs">
               {logs}
             </div>
@@ -153,8 +176,17 @@ var ContainerDetails = React.createClass({
         );
       } else {
         body = (
-          <div className="details-logs">
+          <div className="details-panel">
             <div className="settings">
+              <h4>Container Detail</h4>
+              <input id="input-container-name" type="text" className="line" placeholder="Container Name" defaultValue={name}></input>
+              <h4>Environment Variables</h4>
+              <div className="env-vars">
+                {envVars}
+              </div>
+              <a className="btn btn-action" onClick={this.saveEnvVar}>Save</a>
+              <h4>Delete Container</h4>
+              <a className="btn btn-action" onClick={this.deleteContainer}>Delete Container</a>
             </div>
           </div>
         );
@@ -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 (
       <div className="details">
         <div className="details-header">

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) {

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;
+        }
       }
     }
   }

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
 // --------------------------------------------------