Fixes new wizard state, makes deeper copies of attributes CORWEB-46

Adds loading state for instances, Adds Retry button in case of error CORWEB-21

src/components/App/App.scss

@@ -698,6 +698,9 @@ button {
   font-size: 16px;
   text-align: center;
   padding: 40px 0;
+  button {
+    margin-top: 24px;
+  }
 }
 :global {
   .noResultsLarge {

src/components/MigrationWizard/MigrationWizard.js

@@ -61,7 +61,7 @@ class MigrationWizard extends Reflux.Component {
   componentWillMount() {
     super.componentWillMount.call(this)
     this.context.onSetTitle(title);
-    if (this.props.wizard_type == "replica") {
+    if (this.props.wizard_type === "replica") {
       WizardActions.updateWizardState({
         migrationType: "replica"
       })
@@ -70,13 +70,13 @@ class MigrationWizard extends Reflux.Component {
 
 
   back() {
-    if (this.state.backCallback != null) {
+    if (typeof this.state.backCallback === "function") {
       this.state.backCallback((e) => this.initBackStep(e))
     } else {
       if (this.state.currentStep != "WizardMigrationType") {
         this.initBackStep()
       } else {
-        if (this.props.wizard_type == "replica") {
+        if (this.props.wizard_type === "replica") {
           Location.push("/replicas")
         } else {
           Location.push("/migrations")
@@ -97,11 +97,11 @@ class MigrationWizard extends Reflux.Component {
   }
 
   next() {
-    if (this.state.currentStep == "WizardSummary") {
+    if (this.state.currentStep === "WizardSummary") {
       this.finish()
     } else if (this.state.valid) {
       // Callback to run before next step
-      if (this.state.nextCallback != null) {
+      if (typeof this.state.nextCallback === "function") {
         this.state.nextCallback((e) => this.initNextStep(e))
       } else {
         this.initNextStep()
@@ -139,7 +139,7 @@ class MigrationWizard extends Reflux.Component {
     MigrationActions.addMigration(newMigration, () => {
       ConnectionsActions.resetSelections()
       WizardActions.newState()
-      if (newMigration.migrationType == "replica") {
+      if (newMigration.migrationType === "replica") {
         Location.push('/replicas')
       } else {
         Location.push('/migrations')

src/components/WizardVms/WizardVms.js

@@ -49,6 +49,9 @@ class WizardVms extends Component {
         }
       })
     }
+
+    this.retryLoadingInstances = this.retryLoadingInstances.bind(this)
+
     this.state = {
       valid,
       queryText: '',
@@ -198,35 +201,54 @@ class WizardVms extends Component {
     }
   }
 
+  retryLoadingInstances() {
+    ConnectionsActions.loadInstances(
+      { id: this.props.data.sourceCloud.credential.id },
+      this.state.page,
+      this.state.queryText,
+      false
+    )
+  }
+
   renderSearch() {
     let _this = this
-    if (this.state.filteredData && this.state.filteredData.length) {
-      let instances = this.state.filteredData.map((item, index) =>
-        <div className="item" key={ "vm_" + index } onClick={ (e) => _this.checkVm(e, item) }>
-          <div className="checkbox-container">
-            <input
-              id={"vm_check_" + index}
-              type="checkbox"
-              checked={this.isSelected(item)}
-              onChange={(e) => _this.checkVm(e, item)}
-              className="checkbox-normal"
-            />
-            <label htmlFor={ "vm_check_" + index }></label>
-          </div>
-          <span className="cell cell-icon">
-            <div className="icon vm"></div>
-            <span className="details">
-              {item.instance_name}
-            </span>
-          </span>
-          <span className="cell">{item.num_cpu} vCPU | {item.memory_mb} MB RAM | {item.flavor_name}</span>
-        </div>
-       )
-      return instances
-    } else if (this.props.data.instances && this.props.data.instances.length == 0) {
-      return <div className="no-results">Your search returned no results</div>
-    } else {
-      return <LoadingIcon padding={64} text="Loading instances.." />
+    switch (this.props.data.instancesLoadState) {
+      case "success":
+        if (this.state.filteredData && this.state.filteredData.length) {
+          let instances = this.state.filteredData.map((item, index) =>
+            <div className="item" key={ "vm_" + index } onClick={ (e) => _this.checkVm(e, item) }>
+              <div className="checkbox-container">
+                <input
+                  id={"vm_check_" + index}
+                  type="checkbox"
+                  checked={this.isSelected(item)}
+                  onChange={(e) => _this.checkVm(e, item)}
+                  className="checkbox-normal"
+                />
+                <label htmlFor={ "vm_check_" + index }></label>
+              </div>
+              <span className="cell cell-icon">
+                <div className="icon vm"></div>
+                <span className="details">
+                  {item.instance_name}
+                </span>
+              </span>
+              <span className="cell">{item.num_cpu} vCPU | {item.memory_mb} MB RAM | {item.flavor_name}</span>
+            </div>
+          )
+          return instances
+        } else {
+          return <div className="no-results">Your search returned no results</div>
+        }
+      case "error":
+        return (<div className="no-results">
+          An error occurred while searching for instances <br />
+          <button onClick={this.retryLoadingInstances}>Retry</button>
+        </div>)
+      case "loading":
+        return <LoadingIcon padding={64} text="Loading instances.." />
+      default:
+        return <LoadingIcon padding={64} text="Loading instances.." />
     }
   }
 

src/stores/WizardStore/WizardStore.js

@@ -41,6 +41,7 @@ class WizardStore extends Reflux.Store
     schedules: [],
     instances: null,
     selectedInstances: [],
+    instancesLoadState: null,
     vms: null,
     showAdvancedOptions: false,
     destination_environment: {},
@@ -53,11 +54,11 @@ class WizardStore extends Reflux.Store
   constructor() {
     super()
     this.listenables = [WizardActions, ConnectionsActions]
-
-    this.state = Object.assign({}, this.blankState)
+    this.state = this._assignNewState()
   }
 
   onLoadInstances(endpoint, page = 0, queryText = "", cache = true, clearSelection = false) {
+    this.setState({ instancesLoadState: 'loading' })
     if (cache && (this.state.instances && this.state.instances[page * itemsPerPage])) {
       return;
     }
@@ -102,11 +103,11 @@ class WizardStore extends Reflux.Store
       instances[(page * itemsPerPage) + index] = instance
     })
 
-    this.setState({ instances: instances })
+    this.setState({ instances: instances, instancesLoadState: 'success' })
   }
 
   onLoadInstancesFailed() {
-    this.setState({ instances: [] })
+    this.setState({ instances: [], instancesLoadState: 'error' })
   }
 
   onLoadInstanceDetail(endpoint, instance) {
@@ -148,7 +149,7 @@ class WizardStore extends Reflux.Store
   }
 
   onNewState() {
-    this.setState(this.blankState)
+    this.setState(this._assignNewState())
   }
 
   onUpdateWizardState(state, callback = null) {
@@ -156,6 +157,19 @@ class WizardStore extends Reflux.Store
     if (callback) callback()
   }
 
+  _assignNewState() {
+    let newState = {}
+    for (let i in this.blankState) {
+      if (typeof this.blankState[i] === "object" && this.blankState[i] != null &&
+        this.blankState[i].constructor !== Array) {
+        newState[i] = Object.assign({}, this.blankState[i])
+      } else {
+        newState[i] = this.blankState[i]
+      }
+    }
+    return newState
+  }
+
 }
 
 WizardStore.id = "wizardStore"