UI: Fixes some issues from zone wizard with VMWare hypervisor (#6480)

* hide html warning in message

* hidden ip address step

* refill value of edit tariff

* close modal when icon-close clicked

* fixes modal not show when error

* check valid traffic label with VMWare

* remove automatic change clustername

Author: Hoang Nguyen

ui/src/locales/index.js

@@ -26,7 +26,8 @@ export const i18n = createI18n({
   fallbackLocale: 'en',
   silentTranslationWarn: true,
   messages: messages,
-  silentFallbackWarn: true
+  silentFallbackWarn: true,
+  warnHtmlInMessage: 'off'
 })
 
 export function loadLanguageAsync (lang) {

ui/src/views/infra/ClusterAdd.vue

@@ -269,10 +269,12 @@ export default {
       this.addCluster()
     },
     addCluster () {
+      let clustername = this.clustername
+
       if (this.hypervisor === 'VMware') {
         const clusternameVal = this.clustername
         this.url = `http://${this.host}/${this.dataCenter}/${clusternameVal}`
-        this.clustername = `${this.host}/${this.dataCenter}/${clusternameVal}`
+        clustername = `${this.host}/${this.dataCenter}/${clusternameVal}`
       }
       this.loading = true
       this.parentToggleLoading()
@@ -281,7 +283,7 @@ export default {
         hypervisor: this.hypervisor,
         clustertype: this.clustertype,
         podId: this.podId,
-        clustername: this.clustername,
+        clustername: clustername,
         url: this.url
       }
       if (this.ovm3pool) {

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

@@ -137,14 +137,14 @@ export default {
       return this.prefillContent?.hypervisor || null
     },
     localstorageenabled () {
-      return this.prefillContent?.localstorageenabled?.value || false
+      return this.prefillContent?.localstorageenabled || false
     },
     localstorageenabledforsystemvm () {
-      return this.prefillContent?.localstorageenabledforsystemvm?.value || false
+      return this.prefillContent?.localstorageenabledforsystemvm || false
     },
     steps () {
       const steps = []
-      const hypervisor = this.prefillContent.hypervisor ? this.prefillContent.hypervisor.value : null
+      const hypervisor = this.prefillContent.hypervisor ? this.prefillContent.hypervisor : null
       steps.push({
         title: 'label.cluster',
         fromKey: 'clusterResource',

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

@@ -143,15 +143,15 @@
       </a-button>
     </div>
     <a-modal
-      :visible="showError"
+      v-model:visible="showError"
       :title="`${$t('label.error')}!`"
       :maskClosable="false"
       :closable="true"
       :footer="null"
       @cancel="() => { showError = false }"
       centered
     >
-      <div v-ctrl-enter="showError = false">
+      <div v-ctrl-enter="() => showError = false">
         <span>{{ $t('message.required.traffic.type') }}</span>
         <div :span="24" class="action-button">
           <a-button @click="showError = false">{{ $t('label.cancel') }}</a-button>
@@ -161,7 +161,7 @@
     </a-modal>
     <a-modal
       :title="$t('label.edit.traffic.type')"
-      :visible="showEditTraffic"
+      v-model:visible="showEditTraffic"
       :closable="true"
       :maskClosable="false"
       centered
@@ -323,7 +323,7 @@ export default {
       return traffics
     },
     hypervisor () {
-      return this.prefillContent.hypervisor?.value || null
+      return this.prefillContent.hypervisor || null
     }
   },
   created () {
@@ -414,14 +414,22 @@ export default {
       const shouldHaveLabels = this.physicalNetworks.length > 1
       let isValid = true
       this.requiredTrafficTypes.forEach(type => {
+        if (!isValid) return false
         let foundType = false
         this.physicalNetworks.forEach(net => {
           net.traffics.forEach(traffic => {
+            if (!isValid) return false
             if (traffic.type === type) {
               foundType = true
             }
-            if (shouldHaveLabels && (!traffic.label || traffic.label.length === 0)) {
-              isValid = false
+            if (this.hypervisor !== 'VMware') {
+              if (shouldHaveLabels && (!traffic.label || traffic.label.length === 0)) {
+                isValid = false
+              }
+            } else {
+              if (shouldHaveLabels && (!traffic.vSwitchName || traffic.vSwitchName.length === 0)) {
+                isValid = false
+              }
             }
           })
         })
@@ -477,12 +485,12 @@ export default {
       const fields = {}
       if (this.hypervisor === 'VMware') {
         delete this.trafficInEdit.traffic.label
-        fields.vSwitchName = null
-        fields.vlanId = null
+        fields.vSwitchName = this.trafficInEdit?.traffic?.vSwitchName || null
+        fields.vlanId = this.trafficInEdit?.traffic?.vlanId || null
         if (traffic.type === 'guest') {
           fields.vSwitchName = this.trafficInEdit?.traffic?.vSwitchName || 'vSwitch0'
         }
-        fields.vSwitchType = 'vmwaresvs'
+        fields.vSwitchType = this.trafficInEdit?.traffic?.vSwitchType || 'vmwaresvs'
       } else {
         delete this.trafficInEdit.traffic.vSwitchName
         delete this.trafficInEdit.traffic.vlanId