add alarm tags

src/graphql/fragments/alarm.ts

@@ -46,3 +46,14 @@ export const Alarm = {
       }
     }`,
 };
+export const AlarmTagKeys = {
+  variable: "$duration: Duration!",
+  query: `
+  tagKeys: queryAlarmTagAutocompleteKeys(duration: $duration)`,
+};
+
+export const AlarmTagValues = {
+  variable: "$tagKey: String!, $duration: Duration!",
+  query: `
+  tagValues: queryAlarmTagAutocompleteValues(tagKey: $tagKey, duration: $duration)`,
+};

src/graphql/query/alarm.ts

@@ -15,6 +15,8 @@
  * limitations under the License.
  */
 
-import { Alarm } from "../fragments/alarm";
+import { Alarm, AlarmTagKeys, AlarmTagValues } from "../fragments/alarm";
 
 export const queryAlarms = `query queryAlarms(${Alarm.variable}) {${Alarm.query}}`;
+export const queryAlarmTagValues = `query queryTagValues(${AlarmTagValues.variable}) {${AlarmTagValues.query}}`;
+export const queryAlarmTagKeys = `query queryTagKeys(${AlarmTagKeys.variable}) {${AlarmTagKeys.query}}`;

src/store/modules/alarm.ts

@@ -19,6 +19,7 @@ import { store } from "@/store";
 import graphql from "@/graphql";
 import type { AxiosResponse } from "axios";
 import type { Alarm } from "@/types/alarm";
+import { useAppStoreWithOut } from "@/store/modules/app";
 
 interface AlarmState {
   loading: boolean;
@@ -45,6 +46,20 @@ export const alarmStore = defineStore({
       }
       return res.data;
     },
+    async getAlarmTagKeys() {
+      const res: AxiosResponse = await graphql
+        .query("queryAlarmTagKeys")
+        .params({ duration: useAppStoreWithOut().durationTime });
+
+      return res.data;
+    },
+    async getAlarmTagValues(tagKey: string) {
+      const res: AxiosResponse = await graphql
+        .query("queryAlarmTagValues")
+        .params({ tagKey, duration: useAppStoreWithOut().durationTime });
+
+      return res.data;
+    },
   },
 });
 

src/views/alarm/Content.vue

@@ -132,7 +132,7 @@ limitations under the License. -->
     currentDetail.value = item;
     currentEvents.value = item.events;
     alarmTags.value = currentDetail.value.tags.map((d: { key: string; value: string }) => {
-      return `${d.key} = ${d.value}`;
+      return `${d.key}=${d.value}`;
     });
   }
 

src/views/components/ConditionTags.vue

@@ -68,6 +68,7 @@ limitations under the License. -->
   import { useI18n } from "vue-i18n";
   import { useTraceStore } from "@/store/modules/trace";
   import { useLogStore } from "@/store/modules/log";
+  import { useAlarmStore } from "@/store/modules/alarm";
   import { ElMessage } from "element-plus";
   import { useAppStoreWithOut } from "@/store/modules/app";
 
@@ -79,6 +80,7 @@ limitations under the License. -->
   const traceStore = useTraceStore();
   const logStore = useLogStore();
   const appStore = useAppStoreWithOut();
+  const alarmStore = useAlarmStore();
   const { t } = useI18n();
   const tags = ref<string>("");
   const tagsList = ref<string[]>([]);
@@ -121,10 +123,15 @@ limitations under the License. -->
     let resp: Recordable = {};
     if (props.type === "TRACE") {
       resp = await traceStore.getTagKeys();
-    } else {
+    }
+    if (props.type === "LOG") {
       resp = await logStore.getLogTagKeys();
     }
 
+    if (props.type === "ALARM") {
+      resp = await alarmStore.getAlarmTagKeys();
+    }
+
     if (resp.errors) {
       ElMessage.error(resp.errors);
       return;
@@ -140,9 +147,13 @@ limitations under the License. -->
     let resp: Recordable = {};
     if (props.type === "TRACE") {
       resp = await traceStore.getTagValues(param);
-    } else {
+    }
+    if (props.type === "LOG") {
       resp = await logStore.getLogTagValues(param);
     }
+    if (props.type === "ALARM") {
+      resp = await alarmStore.getAlarmTagValues(param);
+    }
 
     if (resp.errors) {
       ElMessage.error(resp.errors);

src/views/dashboard/related/log/LogTable/LogDetail.vue

@@ -50,7 +50,7 @@ limitations under the License. -->
       return [];
     }
     return props.currentLog.tags.map((d: { key: string; value: string }) => {
-      return `${d.key} = ${d.value}`;
+      return `${d.key}=${d.value}`;
     });
   });
 

src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue

@@ -110,7 +110,7 @@ limitations under the License. -->
       <div>
         <span class="grey title">Tags:</span>
         <div class="mb-5" v-for="(tag, index) in currentEvent.tags || []" :key="index" style="white-space: pre-wrap">
-          {{ tag.key + "=" + tag.value }};
+          {{ `${tag.key}=${tag.value}` }};
         </div>
       </div>
     </div>