From 882828b04ac2b8fba61a8d4b317f88a7f9463cc0 Mon Sep 17 00:00:00 2001
From: Fine0830 <fanxue0830@gmail.com>
Date: Thu, 17 Nov 2022 17:57:23 +0800
Subject: [PATCH] feat: enhance tags component to search tags with the input
 value (#184)

---
 src/views/components/ConditionTags.vue | 40 ++++++++++++++++++++------
 1 file changed, 31 insertions(+), 9 deletions(-)

diff --git a/src/views/components/ConditionTags.vue b/src/views/components/ConditionTags.vue
index 3eb86975..ef3dd2fe 100644
--- a/src/views/components/ConditionTags.vue
+++ b/src/views/components/ConditionTags.vue
@@ -35,9 +35,10 @@ limitations under the License. -->
           size="small"
           v-model="tags"
           class="trace-new-tag"
-          @input="searchTags"
+          @input="inputTags"
           @blur="visible = false"
           @focus="visible = true"
+          @change="addTags"
         />
       </template>
       <div class="content">
@@ -92,6 +93,7 @@ const tagsList = ref<string[]>([]);
 const tagArr = ref<string[]>([]);
 const tagList = ref<string[]>([]);
 const tagKeys = ref<string[]>([]);
+const keysList = ref<string[]>([]);
 const visible = ref<boolean>(false);
 const tipsMap = {
   LOG: "logTagsTip",
@@ -137,6 +139,7 @@ async function fetchTagKeys() {
   }
   tagArr.value = resp.data.tagKeys;
   tagKeys.value = resp.data.tagKeys;
+  keysList.value = resp.data.tagKeys;
   searchTags();
 }
 
@@ -157,13 +160,37 @@ async function fetchTagValues() {
   searchTags();
 }
 
+function inputTags() {
+  if (!tags.value) {
+    tagArr.value = keysList.value;
+    tagKeys.value = keysList.value;
+    tagList.value = tagArr.value;
+    return;
+  }
+  let search = "";
+  if (tags.value.includes("=")) {
+    search = tags.value.split("=")[1];
+    fetchTagValues();
+  } else {
+    search = tags.value;
+  }
+  tagList.value = tagArr.value.filter((d: string) => d.includes(search));
+}
+
+function addTags() {
+  if (!tags.value.includes("=")) {
+    return;
+  }
+  addLabels();
+  tagArr.value = tagKeys.value;
+  searchTags();
+}
+
 function selectTag(item: string) {
   if (tags.value.includes("=")) {
     const key = tags.value.split("=")[0];
     tags.value = key + "=" + item;
-    addLabels();
-    tagArr.value = tagKeys.value;
-    searchTags();
+    addTags();
     return;
   }
   tags.value = item + "=";
@@ -171,11 +198,6 @@ function selectTag(item: string) {
 }
 
 function searchTags() {
-  if (!tags.value) {
-    tagList.value = tagArr.value;
-    fetchTagKeys();
-    return;
-  }
   let search = "";
   if (tags.value.includes("=")) {
     search = tags.value.split("=")[1];