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

feat: enhance tags component to search tags with the input value (#184)

Browse Source
This commit is contained in:
Fine0830 2022-11-17 17:57:23 +08:00 committed by GitHub
parent ed6fb0448b
commit 882828b04a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 31 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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