ui: fix physical network setup in zone wizard (#4892)

Author: Hoang Nguyen

ui/src/views/infra/zone/ZoneWizardLaunchZone.vue

@@ -222,13 +222,13 @@ export default {
         this.$emit('stepError', step, this.stepData)
       }
     },
-    trafficLabelParam (trafficTypeID, physicalNetworkID) {
+    trafficLabelParam (trafficTypeID, physicalNetworkIndex) {
       const hypervisor = this.prefillContent.hypervisor.value
-      physicalNetworkID = this.isAdvancedZone ? physicalNetworkID : 0
+      physicalNetworkIndex = this.isAdvancedZone ? physicalNetworkIndex : 0
       let physicalNetwork = []
       let trafficConfig = null
       if (this.prefillContent.physicalNetworks) {
-        physicalNetwork = this.prefillContent.physicalNetworks[0].traffics.filter(traffic => traffic.type === trafficTypeID)
+        physicalNetwork = this.prefillContent.physicalNetworks[physicalNetworkIndex].traffics.filter(traffic => traffic.type === trafficTypeID)
         trafficConfig = physicalNetwork.length > 0 ? physicalNetwork[0] : null
       }
       let trafficLabel
@@ -476,13 +476,13 @@ export default {
             try {
               if (!this.stepData.stepMove.includes('addTrafficType' + index + key)) {
                 if (traffic.type === 'public') {
-                  await this.addTrafficType('Public')
+                  await this.addTrafficType('Public', index)
                 } else if (traffic.type === 'management') {
-                  await this.addTrafficType('Management')
+                  await this.addTrafficType('Management', index)
                 } else if (traffic.type === 'guest') {
-                  await this.addTrafficType('Guest')
+                  await this.addTrafficType('Guest', index)
                 } else if (traffic.type === 'storage') {
-                  await this.addTrafficType('Storage')
+                  await this.addTrafficType('Storage', index)
                 }
                 this.stepData.stepMove.push('addTrafficType' + index + key)
               }
@@ -1605,8 +1605,8 @@ export default {
         })
       })
     },
-    addTrafficType (trafficType) {
-      const getTrafficParams = this.trafficLabelParam(trafficType.toLowerCase())
+    addTrafficType (trafficType, index) {
+      const getTrafficParams = this.trafficLabelParam(trafficType.toLowerCase(), index)
       let params = {}
 
       params.trafficType = trafficType

ui/src/views/infra/zone/ZoneWizardPhysicalNetworkSetupStep.vue

@@ -60,31 +60,6 @@
             <a-icon type="delete" class="traffic-type-action" @click="deleteTraffic(record.key, traffic, $event)"/>
           </a-tag>
         </div>
-        <a-modal
-          :title="$t('label.edit.traffic.type')"
-          :visible="showEditTraffic"
-          :closable="true"
-          :maskClosable="false"
-          :okText="$t('label.ok')"
-          :cancelText="$t('label.cancel')"
-          @ok="updateTrafficLabel(trafficInEdit)"
-          @cancel="cancelEditTraffic"
-          centered
-        >
-          <a-form :form="form">
-            <span class="ant-form-text"> {{ $t('message.edit.traffic.type') }} </span>
-            <a-form-item v-bind="formItemLayout" style="margin-top:16px;" :label="$t('label.traffic.label')">
-              <a-input
-                v-decorator="['trafficLabel', {
-                  rules: [{
-                    required: true,
-                    message: $t('message.error.traffic.label'),
-                  }]
-                }]"
-              />
-            </a-form-item>
-          </a-form>
-        </a-modal>
         <div v-if="isShowAddTraffic(record.traffics)">
           <div class="traffic-select-item" v-if="addingTrafficForKey === record.key">
             <a-select
@@ -162,6 +137,31 @@
     >
       <span>{{ $t('message.required.traffic.type') }}</span>
     </a-modal>
+    <a-modal
+      :title="$t('label.edit.traffic.type')"
+      :visible="showEditTraffic"
+      :closable="true"
+      :maskClosable="false"
+      :okText="$t('label.ok')"
+      :cancelText="$t('label.cancel')"
+      @ok="updateTrafficLabel(trafficInEdit)"
+      @cancel="cancelEditTraffic"
+      centered
+    >
+      <a-form :form="form">
+        <span class="ant-form-text"> {{ $t('message.edit.traffic.type') }} </span>
+        <a-form-item v-bind="formItemLayout" style="margin-top:16px;" :label="$t('label.traffic.label')">
+          <a-input
+            v-decorator="['trafficLabel', {
+              rules: [{
+                required: true,
+                message: $t('message.error.traffic.label'),
+              }]
+            }]"
+          />
+        </a-form-item>
+      </a-form>
+    </a-modal>
   </div>
 </template>
 <script>