From a010d04314cda091215f46b0108066055c1b3f9a Mon Sep 17 00:00:00 2001
From: Qiuxia Fan <fine0830@outlook.com>
Date: Thu, 12 May 2022 11:20:29 +0800
Subject: [PATCH] update tags

---
 src/views/components/ConditionTags.vue | 119 ++++++++++++-------------
 1 file changed, 59 insertions(+), 60 deletions(-)

diff --git a/src/views/components/ConditionTags.vue b/src/views/components/ConditionTags.vue
index 46dca4ac..e34ac5f6 100644
--- a/src/views/components/ConditionTags.vue
+++ b/src/views/components/ConditionTags.vue
@@ -13,66 +13,64 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
-  <div class="flex-h" :class="{ light: theme === 'light' }">
-    <div class="mr-5">
-      <span class="sm grey" v-show="theme === 'dark'">{{ t("tags") }}: </span>
-      <span
-        class="trace-tags"
-        :style="type === 'LOG' ? `min-width: 122px;` : ''"
-      >
-        <span class="selected" v-for="(item, index) in tagsList" :key="index">
-          <span>{{ item }}</span>
-          <span class="remove-icon" @click="removeTags(index)">×</span>
-        </span>
+  <div>
+    <span class="grey">{{ t("tags") }}: </span>
+    <span
+      v-if="tagsList.length"
+      class="trace-tags"
+      :style="type === 'LOG' ? `min-width: 122px;` : ''"
+    >
+      <span class="selected" v-for="(item, index) in tagsList" :key="index">
+        <span>{{ item }}</span>
+        <span class="remove-icon" @click="removeTags(index)">×</span>
       </span>
+    </span>
+    <el-input
+      v-if="type === 'ALARM'"
+      size="small"
+      v-model="tags"
+      class="trace-new-tag"
+      @change="addLabels"
+      :placeholder="t('addTags')"
+    />
+    <span v-else>
       <el-input
-        v-if="type === 'ALARM'"
         size="small"
         v-model="tags"
         class="trace-new-tag"
-        @change="addLabels"
         :placeholder="t('addTags')"
+        @click="showClick"
       />
-      <span v-else>
-        <el-input
-          size="small"
-          v-model="tags"
-          class="trace-new-tag"
-          :placeholder="t('addTags')"
-          @click="showClick"
-          :autofocus="true"
-        />
-        <el-dropdown
-          ref="dropdownTag"
-          trigger="contextmenu"
-          style="margin: 20px 0 0 -130px"
-        >
-          <template #dropdown>
-            <el-dropdown-menu>
-              <el-dropdown-item v-for="(item, index) in tagArr" :key="index">
-                <span @click="selectTag(item)" class="tag-item">
-                  {{ item }}
-                </span>
-              </el-dropdown-item>
-            </el-dropdown-menu>
-          </template>
-        </el-dropdown>
-      </span>
-      <span class="tags-tip">
-        <a
-          target="blank"
-          href="https://github.com/apache/skywalking/blob/master/docs/en/setup/backend/configuration-vocabulary.md"
-        >
-          {{ t("tagsLink") }}
-        </a>
-        <el-tooltip :content="t(tipsMap[type])">
-          <span>
-            <Icon class="icon-help mr-5" iconName="help" size="middle" />
-          </span>
-        </el-tooltip>
-        <b v-if="type !== 'LOG'">{{ t("noticeTag") }}</b>
-      </span>
-    </div>
+      <el-dropdown
+        ref="dropdownTag"
+        trigger="contextmenu"
+        style="margin: 20px 0 0 -130px"
+      >
+        <template #dropdown>
+          <el-dropdown-menu>
+            <el-dropdown-item v-for="(item, index) in tagArr" :key="index">
+              <span @click="selectTag(item)" class="tag-item">
+                {{ item }}
+              </span>
+            </el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
+    </span>
+    <span class="tags-tip" :class="type === 'ALARM' ? '' : 'link-tips'">
+      <a
+        target="blank"
+        href="https://github.com/apache/skywalking/blob/master/docs/en/setup/backend/configuration-vocabulary.md"
+      >
+        {{ t("tagsLink") }}
+      </a>
+      <el-tooltip :content="t(tipsMap[type])">
+        <span>
+          <Icon class="icon-help mr-5" iconName="help" size="middle" />
+        </span>
+      </el-tooltip>
+      <b v-if="type !== 'LOG'">{{ t("noticeTag") }}</b>
+    </span>
   </div>
 </template>
 <script lang="ts" setup>
@@ -90,7 +88,6 @@ const props = defineProps({
 const traceStore = useTraceStore();
 const logStore = useLogStore();
 const { t } = useI18n();
-const theme = ref<string>("dark");
 const tags = ref<string>("");
 const tagsList = ref<string[]>([]);
 const tagArr = ref<string[]>([]);
@@ -102,6 +99,8 @@ const tipsMap = {
 };
 const dropdownTag = ref();
 
+fetchTagKeys();
+
 function removeTags(index: number) {
   tagsList.value.splice(index, 1);
   updateTags();
@@ -170,11 +169,6 @@ function selectTag(item: string) {
 
 function showClick() {
   dropdownTag.value.handleOpen();
-  if (tags.value.includes("=")) {
-    fetchTagValues();
-    return;
-  }
-  fetchTagKeys();
 }
 </script>
 <style lang="scss" scoped>
@@ -186,6 +180,10 @@ function showClick() {
   vertical-align: top;
 }
 
+.link-tips {
+  margin-right: 120px;
+}
+
 .selected {
   display: inline-block;
   padding: 0 3px;
@@ -202,7 +200,6 @@ function showClick() {
   padding: 2px 5px;
   border-radius: 3px;
   width: 250px;
-  margin-right: 3px;
 }
 
 .remove-icon {
@@ -218,6 +215,8 @@ function showClick() {
 
 .tags-tip {
   color: #a7aebb;
+  display: inline-block;
+  margin-right: 130px;
 }
 
 .light {