Update: ui polish for host tags

weizhouapache · May 1, 2024 · 9740025 · 9740025
1 parent 4482154
commit 9740025
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 13 deletions.
diff --git 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
@@ -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
@@ -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>