Merge pull request #75 from smiclea/CORWEB-102

Fix infinite loading animation if the selected instances have no NICs in Wizard's Networks page CORWEB-102

src/actions/MigrationActions/MigrationActions.js

@@ -266,9 +266,11 @@ MigrationActions.addMigration.listen((migration, callback = null, errorCallback
   })
 
   let networkMap = {}
-  migration.networks.forEach(network => {
-    networkMap[network.network_name] = network.migrateNetwork
-  })
+  if (migration.networks) {
+    migration.networks.forEach(network => {
+      networkMap[network.network_name] = network.migrateNetwork
+    })
+  }
 
   let destinationEnv = {}
 
@@ -300,7 +302,7 @@ MigrationActions.addMigration.listen((migration, callback = null, errorCallback
     }
   }
 
-  destinationEnv["network_map"] = networkMap // eslint-disable-line dot-notation
+  destinationEnv.network_map = networkMap
 
   payload[migration.migrationType] = {
     origin_endpoint_id: migration.sourceCloud.credential.id,

src/components/MigrationWizard/MigrationWizard.js

@@ -168,7 +168,7 @@ class MigrationWizard extends Reflux.Component {
         step = <WizardVms setWizardState={(e) => this.setWizardState(e)} data={this.state} />
         break;
       case "WizardNetworks":
-        step = <WizardNetworks setWizardState={(e) => this.setWizardState(e)} data={this.state} />
+        step = <WizardNetworks data={this.state} />
         break;
       case "WizardMigrationType":
         step = (<WizardMigrationType

src/components/WizardNetworks/WizardNetworks.js

@@ -33,7 +33,6 @@ class WizardNetworks extends Component {
 
   static propTypes = {
     data: PropTypes.object,
-    setWizardState: PropTypes.func
   }
 
   constructor(props) {
@@ -65,7 +64,8 @@ class WizardNetworks extends Component {
     this.state = {
       networks: networks || null,
       nextStep: "WizardSummary",
-      valid: valid
+      valid: valid,
+      hasNoNics: false
     }
   }
 
@@ -80,9 +80,14 @@ class WizardNetworks extends Component {
 
   processProps(props) {
     let networks = []
+    let hasNoNics = false
 
     props.data.selectedInstances.forEach((vm) => {
       if (vm.devices && vm.devices.nics) {
+        if (vm.devices.nics.length === 0) {
+          hasNoNics = true
+        }
+
         vm.devices.nics.forEach((item) => {
           let exists = false
           networks.forEach(network => {
@@ -100,9 +105,12 @@ class WizardNetworks extends Component {
       }
     })
 
-    if (networks.length == 0) {
+    if (networks.length === 0) {
       networks = null
+    } else {
+      hasNoNics = false
     }
+
     if (props.data.targetNetworks && props.data.targetNetworks.length) {
       this.networkOptions = []
 
@@ -116,7 +124,14 @@ class WizardNetworks extends Component {
         })
       }, this)
     }
-    this.setState({ networks: networks })
+
+    if (!this.state.valid && hasNoNics) {
+      this.setState({ networks, hasNoNics, valid: true }, () => {
+        WizardActions.updateWizardState({ networks, valid: true })
+      })
+    } else {
+      this.setState({ networks, hasNoNics })
+    }
   }
 
   handleChangeNetwork(event, network) {
@@ -139,6 +154,18 @@ class WizardNetworks extends Component {
   }
 
   render() {
+    if (this.state.hasNoNics) {
+      return (
+        <div className={s.root}>
+          <div className={s.container}>
+            <div className="items-list">
+              <div className={s.message}>The selected instances have no NICs.</div>
+            </div>
+          </div>
+        </div>
+      )
+    }
+
     if (this.state.networks != null) {
       let networks = this.state.networks.map((network, index) => {
         let networkDropdown
@@ -180,17 +207,17 @@ class WizardNetworks extends Component {
           </div>
         </div>
       );
-    } else {
-      return (
-        <div className={s.root}>
-          <div className={s.container}>
-            <div className="items-list">
-              <LoadingIcon text="Loading networks..." />
-            </div>
+    }
+
+    return (
+      <div className={s.root}>
+        <div className={s.container}>
+          <div className="items-list">
+            <LoadingIcon text="Loading networks..." />
           </div>
         </div>
-      );
-    }
+      </div>
+    );
   }
 
 }

src/components/WizardNetworks/WizardNetworks.scss

@@ -60,4 +60,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   margin: 0 auto;
   padding: 0 0 40px;
   max-width: $max-content-width;
+
+  .message {
+    font-size: 16px;
+    text-align: center;
+    margin-top: 32px;
+  }
 }

src/components/WizardSummary/WizardSummary.js

@@ -78,29 +78,44 @@ class WizardSummary extends Component {
       </div>
     ))
 
-    let networks = this.props.summary.networks.map((network, index) => {
-      if (network.selected || true) {
-        return (
-          <div className="item" key={"Network_" + index}>
-            <span className="cell">
-              <TextTruncate line={1} text={network.network_name} truncateText="..." />
-            </span>
-            <span className="cell">
-              <div className="arrow"></div>
-            </span>
-            <span className="cell">
-              <TextTruncate
-                line={1}
-                text={network.migrateNetwork ? network.migrateNetwork : "Create new"}
-                truncateText="..."
-              />
-            </span>
+    let networksContainer = null
+    if (this.props.summary.networks) {
+      let networks = this.props.summary.networks && this.props.summary.networks.map((network, index) => {
+        if (network.selected || true) {
+          return (
+            <div className="item" key={"Network_" + index}>
+              <span className="cell">
+                <TextTruncate line={1} text={network.network_name} truncateText="..." />
+              </span>
+              <span className="cell">
+                <div className="arrow"></div>
+              </span>
+              <span className="cell">
+                <TextTruncate
+                  line={1}
+                  text={network.migrateNetwork ? network.migrateNetwork : "Create new"}
+                  truncateText="..."
+                />
+              </span>
+            </div>
+          )
+        } else {
+          return null
+        }
+      })
+
+      networksContainer = (
+        <div className={s.group}>
+          <h3>
+            Networks
+              </h3>
+          <div className={s.networks + " items-list"}>
+            {networks}
           </div>
-        )
-      } else {
-        return null
-      }
-    })
+        </div>
+      )
+    }
+
     return (
       <div className={s.root}>
         <div className={s.container}>
@@ -151,14 +166,7 @@ class WizardSummary extends Component {
                 {instances}
               </div>
             </div>
-            <div className={s.group}>
-              <h3>
-                Networks
-              </h3>
-              <div className={s.networks + " items-list"}>
-                {networks}
-              </div>
-            </div>
+            {networksContainer}
           </div>
         </div>
       </div>