You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@skywalking.apache.org by wu...@apache.org on 2022/11/17 09:57:28 UTC
[skywalking-booster-ui] branch main updated: feat: enhance tags component to search tags with the input value (#184)
This is an automated email from the ASF dual-hosted git repository.
wusheng pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/skywalking-booster-ui.git
The following commit(s) were added to refs/heads/main by this push:
new 882828b feat: enhance tags component to search tags with the input value (#184)
882828b is described below
commit 882828b04ac2b8fba61a8d4b317f88a7f9463cc0
Author: Fine0830 <fa...@gmail.com>
AuthorDate: Thu Nov 17 17:57:23 2022 +0800
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 3eb8697..ef3dd2f 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];