Merge pull request #1702 from ClemMakesApps/add-container-id

Add container ID to sidebar

src/components/ContainerSettingsGeneral.react.js

@@ -1,7 +1,7 @@
 import _ from 'underscore';
 import React from 'react/addons';
 import metrics from '../utils/MetricsUtil';
-import electron from 'electron';
+import electron, { clipboard } from 'electron';
 const remote = electron.remote;
 const dialog = remote.dialog;
 import ContainerUtil from '../utils/ContainerUtil';
@@ -26,6 +26,7 @@ var ContainerSettingsGeneral = React.createClass({
     return {
       slugName: null,
       nameError: null,
+      copiedId: false,
       env: env
     };
   },
@@ -60,6 +61,20 @@ var ContainerSettingsGeneral = React.createClass({
     }
   },
 
+  handleCopyContainerId: function() {
+    clipboard.writeText(this.props.container.Id);
+    this.setState({ 
+      copiedId: true
+    });
+
+    var _this = this;
+    setTimeout(function() {
+      _this.setState({ 
+        copiedId: false
+      });
+    }, 5000);
+  },
+
   handleSaveContainerName: function () {
     var newName = this.state.slugName;
     if (newName === this.props.container.Name) {
@@ -154,6 +169,7 @@ var ContainerSettingsGeneral = React.createClass({
       return false;
     }
 
+    var clipboardStatus;
     var willBeRenamedAs;
     var btnSaveName = (
       <a className="btn btn-action" onClick={this.handleSaveContainerName} disabled="disabled">Save</a>
@@ -171,14 +187,27 @@ var ContainerSettingsGeneral = React.createClass({
       );
     }
 
-    let rename = (
+    if (this.state.copiedId) {
+      clipboardStatus = (
+        <p className="fadeOut"><strong>Copied to Clipboard</strong></p>
+      );
+    }
+
+    let containerInfo = (
       <div className="settings-section">
-        <h3>Container Name</h3>
+        <h3>Container Info</h3>
-        <div className="container-name">
+        <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}
+        </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>
-        {btnSaveName}
       </div>
     );
 
@@ -202,7 +231,7 @@ var ContainerSettingsGeneral = React.createClass({
 
     return (
       <div className="settings-panel">
-        {rename}
+        {containerInfo}
         <div className="settings-section">
           <h3>Environment Variables</h3>
           <div className="env-vars-labels">

styles/container-settings.less

@@ -61,12 +61,37 @@
     .settings-section {
       margin-bottom: 4rem;
     }
-    .container-name {
+    .container-info-row {
-      margin-bottom: 2rem;
+      margin-bottom: 5px;
+      .label-id, .label-name {
+        .env-vars-labels;
+        display: inline-block;
+        width: 5%;
+        min-width: 75px;
+      }
+      a {
+        margin-left: 10px;
+      }
       input {
-        width: 100%;
+        width: 55%;
         max-width: 500px;
       }
+      .btn-copy {
+        border: none;
+        margin-left: 11px;
+      }
+      .disabled {
+        border-bottom: none;
+      }
+      .fadeOut {
+        animation: fade-out 5s ease-in-out forwards;
+      }
+      @keyframes fade-out {
+        0%  { opacity: 0; }
+        10% { opacity: 1; }
+        85% { opacity: 1; }
+        100% { opacity: 0; }
+      }
       p {
         font-weight: 300;
         margin-top: 5px;
@@ -75,6 +100,8 @@
         strong {
           font-weight: 500;
         }
+        margin-left: 75px;
+        padding-left: 10px;
       }
     }
     .env-vars-labels {