github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-07-18 16:45:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

add tag list

Browse Source
This commit is contained in:
Qiuxia Fan 2022-05-11 19:48:00 +08:00
parent 126e259a70
commit 1551fb6194
2 changed files with 46 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/graphql/fragments/trace.ts
View File

@ -81,7 +81,7 @@ export const TraceTagKeys = {
}; };
export const TraceTagValues = { export const TraceTagValues = {
variable: "tagKey: String!, $duration: Duration!", variable: "$tagKey: String!, $duration: Duration!",
query: ` query: `
tagValues: queryTraceTagAutocompleteValues(tagKey: $tagKey, duration: $duration)`, tagValues: queryTraceTagAutocompleteValues(tagKey: $tagKey, duration: $duration)`,
}; };

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

@ -40,7 +40,25 @@ limitations under the License. -->
class="trace-new-tag" class="trace-new-tag"
@change="addLabels" @change="addLabels"
:placeholder="t('addTags')" :placeholder="t('addTags')"
@click="showClick"
/> />
<el-dropdown
ref="dropdown1"
trigger="contextmenu"
style="margin: 20px 0 0 -130px"
>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item
v-for="(item, index) in tagArr"
:key="index"
@click="selectTag(item)"
>
<span class="tag-item">{{ item }}</span>
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</span> </span>
<span class="tags-tip"> <span class="tags-tip">
<a <a
@ -63,7 +81,6 @@ limitations under the License. -->
import { ref } from "vue"; import { ref } from "vue";
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
import { useTraceStore } from "@/store/modules/trace"; import { useTraceStore } from "@/store/modules/trace";
import { Option } from "@/types/app";
import { ElMessage } from "element-plus"; import { ElMessage } from "element-plus";
/*global defineEmits, defineProps */ /*global defineEmits, defineProps */
@ -76,13 +93,13 @@ const { t } = useI18n();
const theme = ref<string>("dark"); const theme = ref<string>("dark");
const tags = ref<string>(""); const tags = ref<string>("");
const tagsList = ref<string[]>([]); const tagsList = ref<string[]>([]);
const tagKeys = ref<Option[]>([]); const tagArr = ref<string[]>([]);
const tagValues = ref<Option[]>([]);
const tipsMap = { const tipsMap = {
LOG: "logTagsTip", LOG: "logTagsTip",
TRACE: "traceTagsTip", TRACE: "traceTagsTip",
ALARM: "alarmTagsTip", ALARM: "alarmTagsTip",
}; };
const dropdown1 = ref();
fetchTagKeys(); fetchTagKeys();
function removeTags(index: number) { function removeTags(index: number) {
@ -114,27 +131,34 @@ async function fetchTagKeys() {
ElMessage.error(resp.errors); ElMessage.error(resp.errors);
return; return;
} }
tagKeys.value = resp.data.tagKeys.map((d: string) => { tagArr.value = resp.data.tagKeys;
return {
label: d,
value: d,
};
});
} }
async function fetchTagValues() { async function fetchTagValues() {
const resp = await traceStore.getTagValues(tagKeys.value); const param = tags.value.split("=")[0];
const resp = await traceStore.getTagValues(param);
if (resp.errors) { if (resp.errors) {
ElMessage.error(resp.errors); ElMessage.error(resp.errors);
return; return;
} }
tagValues.value = resp.data.tagValues.map((d: string) => { tagArr.value = resp.data.tagValues;
return { }
label: d,
value: d, function selectTag(item: string) {
}; if (tags.value.includes("=")) {
}); tags.value = tags.value + item;
fetchTagValues();
} else {
tags.value = item + "=";
}
}
function showClick() {
dropdown1.value.handleOpen();
if (tags.value.includes("=")) {
fetchTagValues();
}
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -171,6 +195,11 @@ async function fetchTagValues() {
cursor: pointer; cursor: pointer;
} }
.tag-item {
display: inline-block;
width: 210px;
}
.tags-tip { .tags-tip {
color: #a7aebb; color: #a7aebb;
} }