migrate Vmware to KVM ui issues

ui/public/locales/en.json

@@ -3006,7 +3006,7 @@
 "message.license.agreements.not.accepted": "License agreements not accepted.",
 "message.linstor.resourcegroup.description": "Linstor resource group to use for primary storage.",
 "message.list.zone.vmware.datacenter.empty": "No VMware Datacenter exists in the selected Zone",
-"message.list.zone.vmware.hosts.empty": "No VMware hosts were found in the selected Datacenter",
+"message.list.zone.vmware.hosts.empty": "No EXSi hosts were found in the selected Datacenter.\nAre the credentials complete?\n",
 "message.listnsp.not.return.providerid": "error: listNetworkServiceProviders API doesn't return VirtualRouter provider ID.",
 "message.load.host.failed": "Failed to load hosts.",
 "message.loadbalancer.stickypolicy.configuration": "Customize the load balancer stickiness policy:",

ui/src/views/tools/SelectVmwareVcenter.vue

@@ -125,16 +125,17 @@
       </div>
       <div
         v-if="selectedExistingVcenterId || (vcenterSelectedOption === 'new')">
-        <a-form-item :label="$t('label.vcenter.host')" ref="host" name="host" v-if="hosts.length > 0">
+        <a-form-item :label="$t('label.esx.host')" ref="host" name="host" v-if="hosts.length > 0">
           <a-select
             v-model:value="form.host"
             :loading="loading"
             optionFilterProp="label"
             :filterOption="(input, option) => {
               return  option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
             }"
-            :placeholder="$t('label.vcenter.host')"
+            :placeholder="$t('label.esx.host')"
             @change="onSelectExistingVmwareHost">
+            <a-select-option key="" label="">{{ }}</a-select-option>
             <a-select-option v-for="opt in hosts" :key="opt.name">
                 {{ 'ESXi: ' + opt.name }}
             </a-select-option>
@@ -283,7 +284,7 @@ export default {
         this.loading = false
       })
     },
-    listZoneVmwareDcHosts () {
+    loadZoneVmwareDcHosts (doNotify) {
       this.loading = true
       const params = {}
       if (this.vcenterSelectedOption === 'new') {
@@ -299,18 +300,23 @@ export default {
           this.hosts = response.listvmwaredchostsresponse.host
         }
       }).catch(error => {
-        this.$notifyError(error)
+        if (doNotify) {
+          this.$notifyError(error)
+        }
+        this.hosts = []
+        return false
       }).finally(() => {
         this.loading = false
+        return true
       })
     },
     onSelectExistingVmwareDatacenter (value) {
       this.selectedExistingVcenterId = value
-      this.listZoneVmwareDcHosts()
+      this.loadZoneVmwareDcHosts(true)
     },
     onSelectExternalVmwareDatacenter (value) {
       if (this.vcenterSelectedOption === 'new' && !(this.vcenter === '' || this.datacentername === '' || this.username === '' || this.password === '')) {
-        this.listZoneVmwareDcHosts()
+        this.loadZoneVmwareDcHosts(false)
       }
     },
     onSelectExistingVmwareHost (value) {