- Various fixes

src/components/App/App.scss

@@ -160,7 +160,7 @@ button {
     &:hover {
       opacity: 0.75;
     }
-    &:global(.grey) {
+    &:global(.gray) {
       border-color: $gray;
       color: $black;
     }

src/components/MigrationView/MigrationView.js

@@ -212,7 +212,7 @@ class MigrationView extends Reflux.Component {
                 <Link
                   to={"/" + item.type + "/" + item.id + "/"}
                   className={this.props.type == 'detail' ? "active" : ""}
-                >Migration</Link>
+                >{item.type == 'replica' ? "Replica" : "Migration"}</Link>
                 <Link
                   to={"/" + item.type + "/" + (item.type == 'migration' ? 'tasks' : 'executions') + "/" + item.id + "/"}
                   className={this.props.type == 'tasks' ? "active" : ""}

src/components/ReplicaExecutions/ReplicaExecutions.js

@@ -153,7 +153,7 @@ class ReplicaExecutions extends Component {
                 <span className={s.date}>
                   {this.state.executionRef && moment(this.state.executionRef.created_at).format("MMM Do YYYY HH:mm")}
                 </span>
-                <span className={"status-pill " + this.props.migration.status}>{this.props.migration.status}</span>
+                <span className={"status-pill " + this.state.executionRef.status}>{this.state.executionRef.status}</span>
               </div>
               <div className={s.rightSide}>
                 {executionBtn}

src/components/Tasks/Tasks.js

@@ -119,7 +119,7 @@ class Tasks extends Component {
         </div>
         <div className={s.group}>
           <div className={s.detailTitle}>Depends on</div>
-          <div className={s.detailValue}>{item.depends_on ? item.depends_on[0] : "N/A"}</div>
+          <div className={s.detailValue}>{item.depends_on && item.depends_on[0] ? item.depends_on[0] : "N/A"}</div>
         </div>
         <div className={s.group + " " + s.progressUpdates}>
           <div className={s.detailTitle}>Progress Updates</div>

src/components/WizardVms/WizardVms.js

@@ -176,25 +176,29 @@ class WizardVms extends Component {
   }
 
   nextPage() {
-    this.setState({page: this.state.page + 1}, () => {
-      ConnectionsActions.loadInstances(
-        {id: this.props.data.sourceCloud.credential.id},
-        this.state.page,
-        this.state.queryText
-      )
-      this.processProps({ data: { instances: this.props.data.instances }})
-    })
+    if (this.state.filteredData && this.state.filteredData.length == itemsPerPage) {
+      this.setState({page: this.state.page + 1}, () => {
+        ConnectionsActions.loadInstances(
+          {id: this.props.data.sourceCloud.credential.id},
+          this.state.page,
+          this.state.queryText
+        )
+        this.processProps({data: {instances: this.props.data.instances}})
+      })
+    }
   }
 
   previousPage() {
-    this.setState({page: this.state.page + -1}, () => {
-      ConnectionsActions.loadInstances(
-        {id: this.props.data.sourceCloud.credential.id},
-        this.state.page,
-        this.state.queryText
-      )
-      this.processProps({ data: { instances: this.props.data.instances }})
-    })
+    if (this.state.page > 0) {
+      this.setState({page: this.state.page + -1}, () => {
+        ConnectionsActions.loadInstances(
+          {id: this.props.data.sourceCloud.credential.id},
+          this.state.page,
+          this.state.queryText
+        )
+        this.processProps({data: {instances: this.props.data.instances}})
+      })
+    }
   }
 
   renderSearch() {
@@ -267,7 +271,7 @@ class WizardVms extends Component {
             ></span>
             <span className={s.currentPage}>{this.state.page + 1}</span>
             <span
-              className={(this.state.filteredData && this.state.filteredData.length ? "disabled " : "") + s.next}
+              className={(this.state.filteredData && this.state.filteredData.length == itemsPerPage ? " " : "disabled ") + s.next}
               onClick={(e) => this.nextPage(e)}
             ></span>
           </div>