Skip to content

Commit d8f4764

Browse files
author
Dorin Paslaru
authored
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
2 parents 54ed838 + db9948b commit d8f4764

5 files changed

Lines changed: 91 additions & 48 deletions

File tree

‎src/actions/MigrationActions/MigrationActions.js‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -266,9 +266,11 @@ MigrationActions.addMigration.listen((migration, callback = null, errorCallback
266266
})
267267

268268
let networkMap = {}
269-
migration.networks.forEach(network => {
270-
networkMap[network.network_name] = network.migrateNetwork
271-
})
269+
if (migration.networks) {
270+
migration.networks.forEach(network => {
271+
networkMap[network.network_name] = network.migrateNetwork
272+
})
273+
}
272274

273275
let destinationEnv = {}
274276

@@ -300,7 +302,7 @@ MigrationActions.addMigration.listen((migration, callback = null, errorCallback
300302
}
301303
}
302304

303-
destinationEnv["network_map"] = networkMap // eslint-disable-line dot-notation
305+
destinationEnv.network_map = networkMap
304306

305307
payload[migration.migrationType] = {
306308
origin_endpoint_id: migration.sourceCloud.credential.id,

‎src/components/MigrationWizard/MigrationWizard.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -168,7 +168,7 @@ class MigrationWizard extends Reflux.Component {
168168
step = <WizardVms setWizardState={(e) => this.setWizardState(e)} data={this.state} />
169169
break;
170170
case "WizardNetworks":
171-
step = <WizardNetworks setWizardState={(e) => this.setWizardState(e)} data={this.state} />
171+
step = <WizardNetworks data={this.state} />
172172
break;
173173
case "WizardMigrationType":
174174
step = (<WizardMigrationType

‎src/components/WizardNetworks/WizardNetworks.js‎

Lines changed: 40 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,6 @@ class WizardNetworks extends Component {
3333

3434
static propTypes = {
3535
data: PropTypes.object,
36-
setWizardState: PropTypes.func
3736
}
3837

3938
constructor(props) {
@@ -65,7 +64,8 @@ class WizardNetworks extends Component {
6564
this.state = {
6665
networks: networks || null,
6766
nextStep: "WizardSummary",
68-
valid: valid
67+
valid: valid,
68+
hasNoNics: false
6969
}
7070
}
7171

@@ -80,9 +80,14 @@ class WizardNetworks extends Component {
8080

8181
processProps(props) {
8282
let networks = []
83+
let hasNoNics = false
8384

8485
props.data.selectedInstances.forEach((vm) => {
8586
if (vm.devices && vm.devices.nics) {
87+
if (vm.devices.nics.length === 0) {
88+
hasNoNics = true
89+
}
90+
8691
vm.devices.nics.forEach((item) => {
8792
let exists = false
8893
networks.forEach(network => {
@@ -100,9 +105,12 @@ class WizardNetworks extends Component {
100105
}
101106
})
102107

103-
if (networks.length == 0) {
108+
if (networks.length === 0) {
104109
networks = null
110+
} else {
111+
hasNoNics = false
105112
}
113+
106114
if (props.data.targetNetworks && props.data.targetNetworks.length) {
107115
this.networkOptions = []
108116

@@ -116,7 +124,14 @@ class WizardNetworks extends Component {
116124
})
117125
}, this)
118126
}
119-
this.setState({ networks: networks })
127+
128+
if (!this.state.valid && hasNoNics) {
129+
this.setState({ networks, hasNoNics, valid: true }, () => {
130+
WizardActions.updateWizardState({ networks, valid: true })
131+
})
132+
} else {
133+
this.setState({ networks, hasNoNics })
134+
}
120135
}
121136

122137
handleChangeNetwork(event, network) {
@@ -139,6 +154,18 @@ class WizardNetworks extends Component {
139154
}
140155

141156
render() {
157+
if (this.state.hasNoNics) {
158+
return (
159+
<div className={s.root}>
160+
<div className={s.container}>
161+
<div className="items-list">
162+
<div className={s.message}>The selected instances have no NICs.</div>
163+
</div>
164+
</div>
165+
</div>
166+
)
167+
}
168+
142169
if (this.state.networks != null) {
143170
let networks = this.state.networks.map((network, index) => {
144171
let networkDropdown
@@ -180,17 +207,17 @@ class WizardNetworks extends Component {
180207
</div>
181208
</div>
182209
);
183-
} else {
184-
return (
185-
<div className={s.root}>
186-
<div className={s.container}>
187-
<div className="items-list">
188-
<LoadingIcon text="Loading networks..." />
189-
</div>
210+
}
211+
212+
return (
213+
<div className={s.root}>
214+
<div className={s.container}>
215+
<div className="items-list">
216+
<LoadingIcon text="Loading networks..." />
190217
</div>
191218
</div>
192-
);
193-
}
219+
</div>
220+
);
194221
}
195222

196223
}

‎src/components/WizardNetworks/WizardNetworks.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,4 +60,10 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
6060
margin: 0 auto;
6161
padding: 0 0 40px;
6262
max-width: $max-content-width;
63+
64+
.message {
65+
font-size: 16px;
66+
text-align: center;
67+
margin-top: 32px;
68+
}
6369
}

‎src/components/WizardSummary/WizardSummary.js‎

Lines changed: 38 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -78,29 +78,44 @@ class WizardSummary extends Component {
7878
</div>
7979
))
8080

81-
let networks = this.props.summary.networks.map((network, index) => {
82-
if (network.selected || true) {
83-
return (
84-
<div className="item" key={"Network_" + index}>
85-
<span className="cell">
86-
<TextTruncate line={1} text={network.network_name} truncateText="..." />
87-
</span>
88-
<span className="cell">
89-
<div className="arrow"></div>
90-
</span>
91-
<span className="cell">
92-
<TextTruncate
93-
line={1}
94-
text={network.migrateNetwork ? network.migrateNetwork : "Create new"}
95-
truncateText="..."
96-
/>
97-
</span>
81+
let networksContainer = null
82+
if (this.props.summary.networks) {
83+
let networks = this.props.summary.networks && this.props.summary.networks.map((network, index) => {
84+
if (network.selected || true) {
85+
return (
86+
<div className="item" key={"Network_" + index}>
87+
<span className="cell">
88+
<TextTruncate line={1} text={network.network_name} truncateText="..." />
89+
</span>
90+
<span className="cell">
91+
<div className="arrow"></div>
92+
</span>
93+
<span className="cell">
94+
<TextTruncate
95+
line={1}
96+
text={network.migrateNetwork ? network.migrateNetwork : "Create new"}
97+
truncateText="..."
98+
/>
99+
</span>
100+
</div>
101+
)
102+
} else {
103+
return null
104+
}
105+
})
106+
107+
networksContainer = (
108+
<div className={s.group}>
109+
<h3>
110+
Networks
111+
</h3>
112+
<div className={s.networks + " items-list"}>
113+
{networks}
98114
</div>
99-
)
100-
} else {
101-
return null
102-
}
103-
})
115+
</div>
116+
)
117+
}
118+
104119
return (
105120
<div className={s.root}>
106121
<div className={s.container}>
@@ -151,14 +166,7 @@ class WizardSummary extends Component {
151166
{instances}
152167
</div>
153168
</div>
154-
<div className={s.group}>
155-
<h3>
156-
Networks
157-
</h3>
158-
<div className={s.networks + " items-list"}>
159-
{networks}
160-
</div>
161-
</div>
169+
{networksContainer}
162170
</div>
163171
</div>
164172
</div>

0 commit comments

Comments
 (0)