Added ID label to replica executions list CORWEB-60

Included the ability to copy it to clipboard.
Refactored executions header CSS, removing floats and absolute positioning.

src/components/ReplicaExecutions/ReplicaExecutions.js

@@ -21,6 +21,7 @@ import s from './ReplicaExecutions.scss';
 import Helper from '../Helper';
 import LoadingIcon from '../LoadingIcon';
 import moment from 'moment';
+import NotificationActions from '../../actions/NotificationActions'
 import MigrationActions from '../../actions/MigrationActions';
 import Tasks from '../Tasks';
 import ExecutionsTimeline from '../ExecutionsTimeline';
@@ -182,6 +183,16 @@ class ReplicaExecutions extends Component {
     }
   }
 
+  handleExecutionIdCopy() {
+    let succesful = Helper.copyTextToClipboard(this.state.executionRef.id)
+
+    if (succesful) {
+      NotificationActions.notify('The ID has been copied to clipboard.')
+    } else {
+      NotificationActions.notify('The ID couldn\'t be copied', 'error')
+    }
+  }
+
   render() {
     if (this.props.replica) {
       if (this.props.replica.executions.length && this.state.executionRef) {
@@ -207,12 +218,18 @@ class ReplicaExecutions extends Component {
               <div className={s.executionsWrapper}>
                 <div className={s.leftSide}>
                   <h4>Execution #{this.state.executionRef && this.state.executionRef.number}</h4>
+                  <span className={"status-pill " + this.state.executionRef.status}>
+                    {this.state.executionRef.status}
+                  </span>
                   <span className={s.date}>
                     {this.state.executionRef && moment(executionTime).format("MMM Do YYYY HH:mm")}
                   </span>
-                  <span
-                    className={"status-pill " + this.state.executionRef.status}
-                  >{this.state.executionRef.status}</span>
+                  <div className={s.id} onClick={this.handleExecutionIdCopy.bind(this)}>
+                    <div className={s.idLabel}>
+                      {this.state.executionRef && this.state.executionRef.id ? 'ID: ' + this.state.executionRef.id : ''}
+                    </div>
+                    <div className="copyButton"></div>
+                  </div>
                 </div>
                 <div className={s.rightSide}>
                   {executionBtn}

src/components/ReplicaExecutions/ReplicaExecutions.scss

@@ -53,25 +53,41 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     .leftSide {
       float: left;
       margin-top: 5px;
+      display: flex;
+      align-items: center;
       h4 {
         margin: 0;
         font-weight: 300;
         font-size: 18px;
         color: $black;
-        float: left;
       }
       .date {
         font-size: 14px;
         color: $gray-dark;
-        float: left;
         letter-spacing: 0;
         margin-left: 16px;
-        margin-top: 4px;
       }
       :global(.status-pill) {
-        position: absolute;
-        top: 24px;
-        left: 38%;
+        margin-left: 16px;
+      }
+      .id {
+        margin-left: 16px;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        .idLabel {
+          max-width: 133px;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          color: $gray-dark;
+        }
+        :global(.copyButton) { 
+          margin-top: -7px;
+        }
+        &:hover :global(.copyButton) {
+          opacity: 1;
+        }
       }
       &:after {
         clear: both;