github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-05-14 09:00:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

update tags component

Browse Source
This commit is contained in:
Qiuxia Fan 2022-07-25 15:45:58 +08:00
parent c7079ea17c
commit 7c924c75c1
1 changed files with 23 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/views/components/ConditionTags.vue
View File

@ -39,18 +39,19 @@ limitations under the License. -->
v-model="tags" v-model="tags"
class="trace-new-tag" class="trace-new-tag"
@click="showClick" @click="showClick"
@input="searchTags"
/> />
<el-dropdown <el-dropdown
ref="dropdownTag" ref="dropdownTag"
trigger="contextmenu" trigger="contextmenu"
:hide-on-click="false" :hide-on-click="false"
style="margin: 20px 0 0 -130px" style="margin: 20px 0 0 -130px"
v-if="tagArr.length" v-if="tagList.length"
:max-height="400" :max-height="400"
> >
<template #dropdown> <template #dropdown>
<el-dropdown-menu> <el-dropdown-menu>
<el-dropdown-item v-for="(item, index) in tagArr" :key="index"> <el-dropdown-item v-for="(item, index) in tagList" :key="index">
<span @click="selectTag(item)" class="tag-item"> <span @click="selectTag(item)" class="tag-item">
{{ item }} {{ item }}
</span> </span>
@ -98,6 +99,7 @@ const { t } = useI18n();
const tags = ref<string>(""); const tags = ref<string>("");
const tagsList = ref<string[]>([]); const tagsList = ref<string[]>([]);
const tagArr = ref<string[]>([]); const tagArr = ref<string[]>([]);
const tagList = ref<string[]>([]);
const tagKeys = ref<string[]>([]); const tagKeys = ref<string[]>([]);
const tipsMap = { const tipsMap = {
LOG: "logTagsTip", LOG: "logTagsTip",
@ -144,6 +146,7 @@ async function fetchTagKeys() {
} }
tagArr.value = resp.data.tagKeys; tagArr.value = resp.data.tagKeys;
tagKeys.value = resp.data.tagKeys; tagKeys.value = resp.data.tagKeys;
searchTags();
} }
async function fetchTagValues() { async function fetchTagValues() {
@ -160,20 +163,36 @@ async function fetchTagValues() {
return; return;
} }
tagArr.value = resp.data.tagValues; tagArr.value = resp.data.tagValues;
searchTags();
} }
function selectTag(item: string) { function selectTag(item: string) {
dropdownTag.value.handleClose();
if (tags.value.includes("=")) { if (tags.value.includes("=")) {
tags.value += item; tags.value += item;
addLabels(); addLabels();
tagArr.value = tagKeys.value; tagArr.value = tagKeys.value;
dropdownTag.value.handleClose(); searchTags();
return; return;
} }
tags.value = item + "="; tags.value = item + "=";
fetchTagValues(); fetchTagValues();
} }
function searchTags() {
if (!tags.value) {
tagList.value = tagArr.value;
return;
}
let search = "";
if (tags.value.includes("=")) {
search = tags.value.split("=")[1];
} else {
search = tags.value;
}
tagList.value = tagArr.value.filter((d: string) => d.includes(search));
}
function showClick() { function showClick() {
if (dropdownTag.value) { if (dropdownTag.value) {
dropdownTag.value.handleOpen(); dropdownTag.value.handleOpen();
@ -211,6 +230,7 @@ watch(
padding: 2px 5px; padding: 2px 5px;
border-radius: 3px; border-radius: 3px;
width: 250px; width: 250px;
z-index: 999;
} }
.remove-icon { .remove-icon {