feat: support adding VM display name in creation page (#912)

* feat: add VM display name annotation support in edit and list views

Signed-off-by: Andy Lee <andy.lee@suse.com>

* refactor: add display name checkbox and input field

Signed-off-by: Andy Lee <andy.lee@suse.com>

---------

Signed-off-by: Andy Lee <andy.lee@suse.com>

pkg/harvester/config/labels-annotations.js

@@ -19,6 +19,7 @@ export const HCI = {
   NETWORK_TYPE:                     'network.harvesterhci.io/type',
   VM_NAME:                          'harvesterhci.io/vmName',
   VM_NAME_PREFIX:                   'harvesterhci.io/vmNamePrefix',
+  VM_DISPLAY_NAME:                  'harvesterhci.io/vmDisplayName',
   VM_RESERVED_MEMORY:               'harvesterhci.io/reservedMemory',
   MAINTENANCE_STATUS:               'harvesterhci.io/maintain-status',
   HOST_CUSTOM_NAME:                 'harvesterhci.io/host-custom-name',

pkg/harvester/edit/kubevirt.io.virtualmachine/index.vue

@@ -93,6 +93,8 @@ export default {
 
     const hostname = this.value.spec.template.spec.hostname || '';
 
+    const customizeDisplayName = !!(this.value.metadata?.annotations?.[HCI_ANNOTATIONS.VM_DISPLAY_NAME]);
+
     return {
       cloneVM,
       count:                2,
@@ -103,12 +105,24 @@ export default {
       isOpen:               false,
       hostname,
       isRestartImmediately,
+      customizeDisplayName,
     };
   },
 
   computed: {
     ...mapGetters({ t: 'i18n/t' }),
 
+    // VM display name is stored as an annotation; bind a dedicated input to it
+    // so we don't have to mutate metadata.name (which would break the k8s PUT).
+    displayName: {
+      get() {
+        return this.value.metadata?.annotations?.[HCI_ANNOTATIONS.VM_DISPLAY_NAME] || '';
+      },
+      set(val) {
+        this.value.setAnnotation(HCI_ANNOTATIONS.VM_DISPLAY_NAME, val);
+      },
+    },
+
     to() {
       return {
         name:   'harvester-c-cluster-resource',
@@ -294,6 +308,12 @@ export default {
         this.getInitConfig({ value: this.value, init: this.isCreate });
       }
     },
+
+    customizeDisplayName(neu) {
+      if (!neu) {
+        this.value.setAnnotation(HCI_ANNOTATIONS.VM_DISPLAY_NAME, '');
+      }
+    },
   },
 
   created() {
@@ -616,6 +636,33 @@ export default {
       </template>
     </NameNsDescription>
 
+    <div v-if="isSingle">
+      <div class="row mb-20">
+        <div class="col span-12">
+          <Checkbox
+            v-model:value="customizeDisplayName"
+            class="check"
+            type="checkbox"
+            :label="t('harvester.virtualMachine.input.customizeDisplayName')"
+            :mode="mode"
+          />
+        </div>
+      </div>
+      <div
+        v-if="customizeDisplayName"
+        class="row mb-20"
+      >
+        <div class="col span-6">
+          <LabeledInput
+            v-model:value="displayName"
+            :mode="mode"
+            :label="t('harvester.virtualMachine.input.displayName')"
+            :placeholder="t('harvester.virtualMachine.input.displayNamePlaceholder')"
+          />
+        </div>
+      </div>
+    </div>
+
     <Checkbox
       v-if="isCreate"
       v-model:value="useTemplate"

pkg/harvester/l10n/en-us.yaml

@@ -818,6 +818,9 @@ harvester:
       username: Username
       password: Password
       reservedMemory: Reserved Memory
+      customizeDisplayName: Customize virtual machine display name
+      displayNamePlaceholder: Virtual machine alias name
+      displayName: Display Name
     filesystem:
       description: Harvester supports filesystem volumes for VM via virtiofs.
       type: Filesystem Type

pkg/harvester/list/kubevirt.io.virtualmachine.vue

@@ -22,6 +22,8 @@ export const VM_HEADERS = [
   {
     ...NAME,
     width: 350,
+    value: 'nameDisplay',
+    sort:  ['nameDisplay'],
   },
   NAMESPACE,
   {
@@ -244,7 +246,7 @@ export default {
             v-if="scope.row.type !== HCI.VMI"
             :to="scope.row.detailLocation"
           >
-            {{ scope.row.metadata.name }}
+            {{ scope.row.nameDisplay }}
             <i
               v-if="scope.row.encryptedVolumeType !== 'none'"
               v-tooltip="lockIconTooltipMessage(scope.row)"
@@ -253,7 +255,7 @@ export default {
             />
           </router-link>
           <span v-else>
-            {{ scope.row.metadata.name }}
+            {{ scope.row.nameDisplay }}
           </span>
           <ConsoleBar
             :resource-type="scope.row"

pkg/harvester/models/kubevirt.io.virtualmachine.js

@@ -1274,6 +1274,10 @@ export default class VirtVm extends HarvesterResource {
     return this.$rootGetters['harvester-common/getFeatureEnabled']('schedulingVMBackup');
   }
 
+  get nameDisplay() {
+    return this.metadata?.annotations?.[HCI_ANNOTATIONS.VM_DISPLAY_NAME] || this.metadata?.name || this.id;
+  }
+
   get volumeEncryptionFeatureEnabled() {
     return this.$rootGetters['harvester-common/getFeatureEnabled']('volumeEncryption');
   }