add trace tags

src/graphql/fragments/trace.ts

@@ -74,3 +74,14 @@ export const TraceSpans = {
   }
   `,
 };
+export const TraceTagKeys = {
+  variable: "$duration: Duration!",
+  query: `
+  tagKeys: queryTraceTagAutocompleteKeys(duration: $duration)`,
+};
+
+export const TraceTagValues = {
+  variable: "tagKey: String!, $duration: Duration!",
+  query: `
+  tagValues: queryTraceTagAutocompleteValues(tagKey: $tagKey, duration: $duration)`,
+};

src/graphql/query/trace.ts

@@ -15,8 +15,17 @@
  * limitations under the License.
  */
 
-import { Traces, TraceSpans } from "../fragments/trace";
+import {
+  Traces,
+  TraceSpans,
+  TraceTagKeys,
+  TraceTagValues,
+} from "../fragments/trace";
 
 export const queryTraces = `query queryTraces(${Traces.variable}) {${Traces.query}}`;
 
 export const queryTrace = `query queryTrace(${TraceSpans.variable}) {${TraceSpans.query}}`;
+
+export const queryTraceTagKeys = `query queryTraceTagKeys(${TraceTagKeys.variable}) {${TraceTagKeys.query}}`;
+
+export const queryTraceTagValues = `query queryTraceTagValues(${TraceTagValues.variable}) {${TraceTagValues.query}}`;

src/store/modules/trace.ts

@@ -161,6 +161,20 @@ export const traceStore = defineStore({
       this.traceSpanLogsTotal = res.data.data.queryLogs.total;
       return res.data;
     },
+    async getTagKeys() {
+      const res: AxiosResponse = await graphql
+        .query("queryTraceTagKeys")
+        .params({ duration: useAppStoreWithOut().durationTime });
+
+      return res.data;
+    },
+    async getTagValues(tagKey: string) {
+      const res: AxiosResponse = await graphql
+        .query("queryTraceTagValues")
+        .params({ tagKey, duration: useAppStoreWithOut().durationTime });
+
+      return res.data;
+    },
   },
 });
 

src/views/components/ConditionTags.vue

@@ -26,12 +26,22 @@ limitations under the License. -->
         </span>
       </span>
       <el-input
+        v-if="type === 'ALARM'"
         size="small"
         v-model="tags"
         class="trace-new-tag"
         @change="addLabels"
         :placeholder="t('addTags')"
       />
+      <span v-else>
+        <el-input
+          size="small"
+          v-model="tags"
+          class="trace-new-tag"
+          @change="addLabels"
+          :placeholder="t('addTags')"
+        />
+      </span>
       <span class="tags-tip">
         <a
           target="blank"
@@ -62,17 +72,24 @@ limitations under the License. -->
 <script lang="ts" setup>
 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 */
 const emit = defineEmits(["update"]);
 defineProps({
   type: { type: String, default: "TRACE" },
 });
+const traceStore = useTraceStore();
 const { t } = useI18n();
 const theme = ref<string>("dark");
 const tags = ref<string>("");
 const tagsList = ref<string[]>([]);
+const tagKeys = ref<Option[]>([]);
+const tagValues = ref<Option[]>([]);
 
+fetchTagKeys();
 function removeTags(index: number) {
   tagsList.value.splice(index, 1);
   updateTags();
@@ -95,6 +112,35 @@ function updateTags() {
   });
   emit("update", { tagsMap, tagsList: tagsList.value });
 }
+async function fetchTagKeys() {
+  const resp = await traceStore.getTagKeys();
+
+  if (resp.errors) {
+    ElMessage.error(resp.errors);
+    return;
+  }
+  tagKeys.value = resp.data.tagKeys.map((d: string) => {
+    return {
+      label: d,
+      value: d,
+    };
+  });
+}
+
+async function fetchTagValues() {
+  const resp = await traceStore.getTagValues(tagKeys.value);
+
+  if (resp.errors) {
+    ElMessage.error(resp.errors);
+    return;
+  }
+  tagValues.value = resp.data.tagValues.map((d: string) => {
+    return {
+      label: d,
+      value: d,
+    };
+  });
+}
 </script>
 <style lang="scss" scoped>
 .trace-tags {

src/views/dashboard/related/trace/Filter.vue

@@ -109,10 +109,6 @@ const state = reactive<any>({
   service: { value: "", label: "" },
 });
 
-// const dateTime = computed(() => [
-//   appStore.durationRow.start,
-//   appStore.durationRow.end,
-// ]);
 init();
 async function init() {
   if (dashboardStore.entity === EntityType[1].value) {