Merge pull request #1045 from votdev/issue_5974_display_labels_on_vm

Add `Labels` tab to `Virtual Machines` resource page
harvester · Feb 4, 2025 · c2fe0cd · c2fe0cd
2 parents e7fec76 + 42793a7
commit c2fe0cd
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 2 deletions.
diff --git a/pkg/harvester/edit/kubevirt.io.virtualmachine/index.vue b/pkg/harvester/edit/kubevirt.io.virtualmachine/index.vue
@@ -812,6 +812,53 @@ export default {
           </span>
         </Banner>
       </Tab>
+
+      <Tab
+        name="labels"
+        :label="t('generic.labels')"
+        :weight="-98"
+      >
+        <KeyValue
+          key="labels"
+          :value="value.labels"
+          :add-label="t('labels.addLabel')"
+          :mode="mode"
+          :read-allowed="false"
+          :value-can-be-empty="true"
+          :description="t(`harvester.virtualMachine.labels.description`)"
+          @input="value.setLabels($event)"
+        />
+      </Tab>
+
+      <Tab
+        name="instanceLabel"
+        :label="t('harvester.tab.instanceLabel')"
+        :weight="-99"
+      >
+        <Labels
+          :default-container-class="'labels-and-annotations-container'"
+          :value="value"
+          :mode="mode"
+          :display-side-by-side="false"
+          :show-annotations="false"
+          :show-label-title="false"
+          :label-description="t(`harvester.virtualMachine.instanceLabels.description`)"
+        >
+          <template #labels="{toggler}">
+            <KeyValue
+              key="labels"
+              :value="value.instanceLabels"
+              :protected-keys="value.systemLabels || []"
+              :toggle-filter="toggler"
+              :add-label="t('labels.addLabel')"
+              :mode="mode"
+              :read-allowed="false"
+              :value-can-be-empty="true"
+              @input="value.setInstanceLabels($event)"
+            />
+          </template>
+        </Labels>
+      </Tab>
     </Tabbed>
 
     <RestartVMDialog

diff --git a/pkg/harvester/l10n/en-us.yaml b/pkg/harvester/l10n/en-us.yaml
@@ -742,6 +742,10 @@ harvester:
         inNamespaces: "Workloads in these namespaces"
       namespaces:
         label: Namespaces
+    labels:
+      description: ""
+    instanceLabels:
+      description: These labels are automatically synchronized to the Virtual Machine instance.
 
   volume:
     label: Volumes

diff --git a/shell/components/form/KeyValue.vue b/shell/components/form/KeyValue.vue
@@ -251,6 +251,10 @@ export default {
       default: false,
       type:    Boolean
     },
+    description: {
+      default: '',
+      type:    String,
+    },
   },
   data() {
     const rows = this.getRows(this.value);
@@ -565,6 +569,11 @@ export default {
         </h3>
       </slot>
     </div>
+    <div v-if="description">
+      <p class="mt-10 mb-10">
+        {{ description }}
+      </p>
+    </div>
     <div
       class="kv-container"
       :style="containerStyle"

diff --git a/shell/components/form/Labels.vue b/shell/components/form/Labels.vue
@@ -53,6 +53,16 @@ export default {
       type:    Boolean,
       default: true,
     },
+
+    showLabelDescription: {
+      type:    Boolean,
+      default: true,
+    },
+
+    labelDescription: {
+      type:    String,
+      default: '',
+    },
   },
 
   data() {
@@ -89,8 +99,15 @@ export default {
             :on-label="t('labels.labels.show')"
           />
         </div>
-        <p class="mt-10 mb-10">
-          <t k="labels.labels.description" />
+        <p
+          v-if="showLabelDescription"
+          class="mt-10 mb-10"
+        >
+          <span v-if="labelDescription">{{ labelDescription }}</span>
+          <t
+            v-if="!labelDescription"
+            k="labels.labels.description"
+          />
         </p>
         <div :class="columnsClass">
           <slot