ui: fix labels when migrating instances from vmware (#8490)

Fixes #8474
Renames labels when importing from VMware

ui/public/locales/en.json

@@ -2932,6 +2932,7 @@
 "message.installwizard.tooltip.tungsten.provider.vrouterport": "Tungsten provider vrouter port is required",
 "message.instances.managed": "Instances controlled by CloudStack.",
 "message.instances.unmanaged": "Instances not controlled by CloudStack.",
+"message.instances.migrate.vmware": "Instances that can be migrated from VMware.",
 "message.interloadbalance.not.return.elementid": "error: listInternalLoadBalancerElements API doesn't return internal LB element ID.",
 "message.ip.address.changes.effect.after.vm.restart": "IP address changes takes effect only after Instance restart.",
 "message.ip.v6.prefix.delete": "IPv6 prefix deleted",

ui/src/views/tools/ManageInstances.vue

@@ -238,6 +238,7 @@
                   </a-form-item>
                   <a-form-item v-if="isDestinationKVM && isMigrateFromVmware && clusterId != undefined">
                     <SelectVmwareVcenter
+                      @onVcenterTypeChanged="updateVmwareVcenterType"
                       @loadingVmwareUnmanagedInstances="() => this.unmanagedInstancesLoading = true"
                       @listedVmwareUnmanagedInstances="($e) => onListUnmanagedInstancesFromVmware($e)"
                     />
@@ -322,8 +323,8 @@
             <a-col v-if="!isDiskImport" :md="24" :lg="(!isMigrateFromVmware && showManagedInstances) ? 12 : 24">
               <a-card class="instances-card">
                 <template #title>
-                  {{ $t('label.unmanaged.instances') }}
-                  <a-tooltip :title="$t('message.instances.unmanaged')">
+                  {{ (isMigrateFromVmware && vmwareVcenterType === 'existing') ? $t('label.instances') : $t('label.unmanaged.instances') }}
+                  <a-tooltip :title="(isMigrateFromVmware && vmwareVcenterType === 'existing') ? $t('message.instances.migrate.vmware') : $t('message.instances.unmanaged')">
                     <info-circle-outlined />
                   </a-tooltip>
                   <a-button
@@ -731,6 +732,7 @@ export default {
       showUnmanageForm: false,
       selectedUnmanagedInstance: {},
       query: {},
+      vmwareVcenterType: undefined,
       selectedVmwareVcenter: undefined
     }
   },
@@ -1409,6 +1411,9 @@ export default {
       this.unmanagedInstances = obj.response.unmanagedinstance
       this.itemCount.unmanaged = obj.response.count
       this.unmanagedInstancesLoading = false
+    },
+    updateVmwareVcenterType (type) {
+      this.vmwareVcenterType = type
     }
   }
 }

ui/src/views/tools/SelectVmwareVcenter.vue

@@ -28,7 +28,8 @@
           <a-radio-group
             style="text-align: center; width: 100%"
             v-model:value="vcenterSelectedOption"
-            buttonStyle="solid">
+            buttonStyle="solid"
+            @change="onVcenterTypeChange">
             <a-radio-button value="existing" style="width: 50%; text-align: center">
               {{ $t('label.existing') }}
             </a-radio-button>
@@ -256,6 +257,9 @@ export default {
     },
     onSelectExistingVmwareDatacenter (value) {
       this.selectedExistingVcenterId = value
+    },
+    onVcenterTypeChange () {
+      this.$emit('onVcenterTypeChanged', this.vcenterSelectedOption)
     }
   }
 }