From 97400254ecabca99241920bc7cd68de3844763ff Mon Sep 17 00:00:00 2001
From: Wei Zhou <weizhou@apache.org>
Date: Wed, 1 May 2024 10:18:52 +0200
Subject: [PATCH] Update: ui polish for host tags

---
 ui/public/locales/en.json         |  4 ++++
 ui/src/views/infra/HostInfo.vue   | 38 +++++++++++++++++++++----------
 ui/src/views/infra/HostUpdate.vue |  2 +-
 3 files changed, 31 insertions(+), 13 deletions(-)

diff --git a/ui/public/locales/en.json b/ui/public/locales/en.json
index 79d21b763b1c..90d8619168c1 100644
--- a/ui/public/locales/en.json
+++ b/ui/public/locales/en.json
@@ -932,7 +932,11 @@
 "label.hosts": "Hosts",
 "label.hosttags": "Host tags",
 "label.hosttags.explicit": "API-defined Host tags",
+"label.hosttags.explicit.abbr": "api-defined",
+"label.hosttags.explicit.description": "The host tags defined by CloudStack APIs",
 "label.hosttags.implicit": "Agent-defined Host tags",
+"label.hosttags.implicit.abbr": "agent-defined",
+"label.hosttags.implicit.description": "The host tags defined by CloudStack Agent",
 "label.hourly": "Hourly",
 "label.hypervisor": "Hypervisor",
 "label.hypervisor.capabilities": "Hypervisor capabilities",
diff --git a/ui/src/views/infra/HostInfo.vue b/ui/src/views/infra/HostInfo.vue
index bfbd43323e29..146da8ec8764 100644
--- a/ui/src/views/infra/HostInfo.vue
+++ b/ui/src/views/infra/HostInfo.vue
@@ -48,19 +48,17 @@
           </div>
         </div>
       </a-list-item>
-      <a-list-item v-if="host.explicithosttags">
+      <a-list-item v-if="host.hosttags">
         <div>
-          <strong>{{ $t('label.hosttags.explicit') }}</strong>
-          <div>
-            {{ host.explicithosttags }}
-          </div>
-        </div>
-      </a-list-item>
-      <a-list-item v-if="host.implicithosttags">
-        <div>
-          <strong>{{ $t('label.hosttags.implicit') }}</strong>
-          <div>
-            {{ host.implicithosttags }}
+          <strong>{{ $t('label.hosttags') }}</strong>
+          <div v-for="hosttag in host.allhosttags" :key="hosttag.tag">
+            {{ hosttag.tag }}
+            <span v-if="hosttag.isexplicit">
+              <a-tag color="blue">{{ $t('label.hosttags.explicit.abbr') }}</a-tag>
+            </span>
+            <span v-if="hosttag.isimplicit">
+              <a-tag color="orange">{{ $t('label.hosttags.implicit.abbr') }}</a-tag>
+            </span>
           </div>
         </div>
       </a-list-item>
@@ -166,6 +164,22 @@ export default {
       this.fetchLoading = true
       api('listHosts', { id: this.resource.id }).then(json => {
         this.host = json.listhostsresponse.host[0]
+        const hosttags = this.host.hosttags.split(',') || []
+        const explicithosttags = this.host.explicithosttags.split(',') || []
+        const implicithosttags = this.host.implicithosttags.split(',') || []
+        const allHostTags = []
+        for (const hosttag of hosttags) {
+          var isexplicit = false
+          var isimplicit = false
+          if (explicithosttags.includes(hosttag)) {
+            isexplicit = true
+          }
+          if (implicithosttags.includes(hosttag)) {
+            isimplicit = true
+          }
+          allHostTags.push({ tag: hosttag, isexplicit: isexplicit, isimplicit: isimplicit })
+        }
+        this.host.allhosttags = allHostTags
       }).catch(error => {
         this.$notifyError(error)
       }).finally(() => {
diff --git a/ui/src/views/infra/HostUpdate.vue b/ui/src/views/infra/HostUpdate.vue
index 8b6a3b6528cd..d3026899c444 100644
--- a/ui/src/views/infra/HostUpdate.vue
+++ b/ui/src/views/infra/HostUpdate.vue
@@ -35,7 +35,7 @@
       </a-form-item>
       <a-form-item name="hosttags" ref="hosttags">
         <template #label>
-          <tooltip-label :title="$t('label.hosttags.explicit')" :tooltip="$t('label.hosttags.explicit')"/>
+          <tooltip-label :title="$t('label.hosttags')" :tooltip="$t('label.hosttags.explicit.description')"/>
         </template>
         <a-input v-model:value="form.hosttags" />
       </a-form-item>