ui: Show vm name in info card in deployvm

Author: davidjumani

ui/src/components/view/InfoCard.vue

@@ -713,7 +713,6 @@ export default {
   },
   data () {
     return {
-      name: '',
       ipaddress: '',
       resourceType: '',
       annotationType: '',
@@ -769,10 +768,14 @@ export default {
   created () {
     this.setData()
   },
+  computed: {
+    name () {
+      return this.resource.displayname || this.resource.displaytext || this.resource.name || this.resource.username ||
+        this.resource.ipaddress || this.resource.virtualmachinename || this.resource.templatetype
+    }
+  },
   methods: {
     setData () {
-      this.name = this.resource.displayname || this.resource.displaytext || this.resource.name || this.resource.username ||
-        this.resource.ipaddress || this.resource.virtualmachinename || this.resource.templatetype
       if (this.resource.nic && this.resource.nic.length > 0) {
         this.ipaddress = this.resource.nic.filter(e => { return e.ipaddress }).map(e => { return e.ipaddress }).join(', ')
       } else {

ui/src/views/compute/DeployVM.vue

@@ -603,7 +603,7 @@
       </a-col>
       <a-col :md="24" :lg="7" v-if="!isMobile()">
         <a-affix :offsetTop="75">
-          <info-card class="vm-info-card" :resource="vm" :title="vm.name ? this.$t('label.yourinstance') + ' : ' + vm.name : this.$t('label.yourinstance')" />
+          <info-card class="vm-info-card" :resource="vm" :title="this.$t('label.yourinstance')" />
         </a-affix>
       </a-col>
     </a-row>