Display a message if the selected instances have no NICs in Wizard's Networks page

Author: Sergiu Miclea

src/components/WizardNetworks/WizardNetworks.js

@@ -65,7 +65,8 @@ class WizardNetworks extends Component {
     this.state = {
       networks: networks || null,
       nextStep: "WizardSummary",
-      valid: valid
+      valid: valid,
+      hasNoNics: false
     }
   }
 
@@ -80,9 +81,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 +106,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 +125,11 @@ class WizardNetworks extends Component {
         })
       }, this)
     }
-    this.setState({ networks: networks })
+
+    this.setState({
+      networks: networks,
+      hasNoNics: hasNoNics
+    })
   }
 
   handleChangeNetwork(event, network) {
@@ -139,6 +152,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 +205,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;
+  }
 }