- Adjusted Migration View to new design

- Fixes various issues

src/components/App/App.scss

@@ -151,8 +151,8 @@ button {
   }
   &:global(.wire) {
     color: $blue;
-    border-color: $blue;
     background-color: #FFF;
+    border: 1px solid $blue;
     &:hover {
       opacity: 0.75;
     }
@@ -273,7 +273,8 @@ button {
 :global(button.transparent) {
   background-color: #FFF;
   color: $black;
-  border-color: $gray;
+  border: 1px solid $gray;
+  width: 196px;
   &:hover {
     background-color: $blue;
     border: 1px solid $blue;

src/components/ExecutionsTimeline/ExecutionsTimeline.scss

@@ -37,7 +37,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     margin-left: -44px;
     margin-top: -8px;
     text-align: center;
-    transition: all $animation-swift-out;
+    transition: all 0.3s ease-out;
     cursor: pointer;
     :global(.taskIcon) {
       float: none;

src/components/MigrationDetail/MigrationDetail.js

@@ -21,6 +21,8 @@ import s from './MigrationDetail.scss';
 import Moment from 'react-moment';
 import LoadingIcon from "../LoadingIcon";
 import EndpointLink from '../EndpointLink';
+import ConfirmationDialog from '../ConfirmationDialog'
+import MigrationActions from '../../actions/MigrationActions';
 
 const title = 'Migration details';
 
@@ -33,14 +35,51 @@ class MigrationDetail extends Component {
     migration: PropTypes.object
   }
 
+  constructor(props) {
+    super(props)
+    this.state = {
+      confirmationDialog: {
+        visible: false,
+        message: "Are you sure?",
+        onConfirm: null,
+        onCancel: null
+      }
+    }
+  }
+
   componentWillMount() {
     this.context.onSetTitle(title);
   }
 
+  createMigrationFromReplica(e, replica) {
+    MigrationActions.createMigrationFromReplica(replica)
+  }
+
+  deleteMigration() {
+    this.setState({
+      confirmationDialog: {
+        visible: true,
+        onConfirm: () => {
+          this.setState({ confirmationDialog: { visible: false }})
+          let item = this.state.migrations.filter(migration => migration.id == this.props.migrationId)[0]
+          MigrationActions.deleteMigration(item)
+          Location.push('/cloud-endpoints')
+        },
+        onCancel: () => {
+          this.setState({ confirmationDialog: { visible: false }})
+        }
+      }
+    })
+  }
+
   render() {
     let item = this.props.migration
     let output = null
     if (item) {
+      let disabled = item.executions.length && item.executions[item.executions.length - 1].status != "COMPLETED"
+      if (item.executions.length == 0) {
+        disabled = true
+      }
       output = (
         <div className={s.root}>
           <div className={s.container}>
@@ -116,6 +155,20 @@ class MigrationDetail extends Component {
                </div>*/}
             </div>
           </div>
+          <div className={s.container + " " + s.buttons}>
+            <button
+              onClick={(e) => this.createMigrationFromReplica(e, item)}
+              disabled={disabled} className={disabled ? "disabled": ""}>
+              Create Migration
+            </button>
+            <button className="wire" onClick={(e) => this.deleteMigration(e)}>Delete</button>
+          </div>
+          <ConfirmationDialog
+            visible={this.state.confirmationDialog.visible}
+            message={this.state.confirmationDialog.message}
+            onConfirm={(e) => this.state.confirmationDialog.onConfirm(e)}
+            onCancel={(e) => this.state.confirmationDialog.onCancel(e)}
+          />
         </div>
       )
     }

src/components/MigrationDetail/MigrationDetail.scss

@@ -35,6 +35,15 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     display: block;
     content: ' ';
   }
+  &.buttons {
+    margin-top: 16px;
+    button:first-child {
+      float: left;
+    }
+    button:nth-child(2) {
+      float: right;
+    }
+  }
 }
 .columnLeft, .columnRight {
   width: 50%;

src/components/MigrationView/MigrationView.js

@@ -75,24 +75,6 @@ class MigrationView extends Reflux.Component {
     this.context.onSetTitle(this.state.title);
   }
 
-  deleteMigration() {
-    this.setState({
-      confirmationDialog: {
-        visible: true,
-        onConfirm: () => {
-          this.setState({ confirmationDialog: { visible: false }})
-          let item = this.state.migrations.filter(migration => migration.id == this.props.migrationId)[0]
-          MigrationActions.deleteMigration(item)
-          Location.push('/cloud-endpoints')
-        },
-        onCancel: () => {
-          this.setState({ confirmationDialog: { visible: false }})
-        }
-      }
-    })
-
-  }
-
   cancelMigration() {
     let item = this.state.migrations.filter(migration => migration.id == this.props.migrationId)[0]
     MigrationActions.cancelMigration(item)
@@ -131,10 +113,6 @@ class MigrationView extends Reflux.Component {
     }
   }
 
-  createMigrationFromReplica(e, replica) {
-    MigrationActions.createMigrationFromReplica(replica)
-  }
-
   currentMigration(migrationId) {
     if (this.state.migrations) {
       return this.state.migrations.filter(migration => migration.id == migrationId)[0]
@@ -165,11 +143,6 @@ class MigrationView extends Reflux.Component {
               onClick={(e) => this.executeReplica(e)}>
               Execute Now
             </button>
-            <button
-            onClick={(e) => this.createMigrationFromReplica(e, item)}
-            disabled={disabled} className={disabled ? "disabled": ""}>
-            Migrate Now
-            </button>
           </div>)
       } else {
         if (item.status == "RUNNING") {

src/components/ReplicaExecutions/ReplicaExecutions.js

@@ -140,7 +140,7 @@ class ReplicaExecutions extends Component {
 
   render() {
     if (this.props.migration) {
-      let executionBtn = <button className="red wire" onClick={(e) => this.deleteExecution(e)}>Delete execution</button>
+      let executionBtn = <button className="wire" onClick={(e) => this.deleteExecution(e)}>Delete</button>
       if (this.props.migration.executions &&
         this.props.migration.executions[this.props.migration.executions.length - 1].status == "RUNNING") {
         executionBtn = <button className="gray wire" onClick={(e) => this.cancelExecution(e)}>Cancel execution</button>

src/components/ReplicaExecutions/ReplicaExecutions.scss

@@ -51,6 +51,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     }
     .leftSide {
       float: left;
+      margin-top: 5px;
       h4 {
         margin: 0;
         font-weight: 300;

src/components/WithSidebar/WithSidebar.js

@@ -30,14 +30,14 @@ class WithSidebar extends Component {
     super(props)
     this.state = {
       menuItems: [
-        {
-          label: "Migrations",
-          route: "/migrations"
-        },
         {
           label: "Replicas",
           route: "/replicas"
         },
+        {
+          label: "Migrations",
+          route: "/migrations"
+        },
         {
           label: "Cloud Endpoints",
           route: "/cloud-endpoints"