diff --git a/src/graphql/fragments/trace.ts b/src/graphql/fragments/trace.ts index c1492f94..04f718e0 100644 --- a/src/graphql/fragments/trace.ts +++ b/src/graphql/fragments/trace.ts @@ -81,7 +81,7 @@ export const TraceTagKeys = { }; export const TraceTagValues = { - variable: "tagKey: String!, $duration: Duration!", + variable: "$tagKey: String!, $duration: Duration!", query: ` tagValues: queryTraceTagAutocompleteValues(tagKey: $tagKey, duration: $duration)`, }; diff --git a/src/views/components/ConditionTags.vue b/src/views/components/ConditionTags.vue index 4bf83de3..16eadf00 100644 --- a/src/views/components/ConditionTags.vue +++ b/src/views/components/ConditionTags.vue @@ -40,7 +40,25 @@ limitations under the License. --> class="trace-new-tag" @change="addLabels" :placeholder="t('addTags')" + @click="showClick" /> + + + import { ref } from "vue"; import { useI18n } from "vue-i18n"; import { useTraceStore } from "@/store/modules/trace"; -import { Option } from "@/types/app"; import { ElMessage } from "element-plus"; /*global defineEmits, defineProps */ @@ -76,13 +93,13 @@ const { t } = useI18n(); const theme = ref("dark"); const tags = ref(""); const tagsList = ref([]); -const tagKeys = ref([]); -const tagValues = ref([]); +const tagArr = ref([]); const tipsMap = { LOG: "logTagsTip", TRACE: "traceTagsTip", ALARM: "alarmTagsTip", }; +const dropdown1 = ref(); fetchTagKeys(); function removeTags(index: number) { @@ -114,27 +131,34 @@ async function fetchTagKeys() { ElMessage.error(resp.errors); return; } - tagKeys.value = resp.data.tagKeys.map((d: string) => { - return { - label: d, - value: d, - }; - }); + tagArr.value = resp.data.tagKeys; } 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) { ElMessage.error(resp.errors); return; } - tagValues.value = resp.data.tagValues.map((d: string) => { - return { - label: d, - value: d, - }; - }); + tagArr.value = resp.data.tagValues; +} + +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(); + } }