feat: add queries for alarm tags (#417)

Author: Fine0830

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;
@@ -35,7 +36,9 @@ export const alarmStore = defineStore({
   }),
   actions: {
     async getAlarms(params: Recordable) {
+      this.loading = true;
       const res: AxiosResponse = await graphql.query("queryAlarms").params(params);
+      this.loading = false;
       if (res.data.errors) {
         return res.data;
       }
@@ -45,6 +48,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

@@ -13,7 +13,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
-  <div class="timeline-table clear">
+  <div class="timeline-table clear" v-loading="alarmStore.loading">
     <div v-for="(i, index) in alarmStore.alarms" :key="index" class="clear timeline-item">
       <div class="g-sm-3 grey sm hide-xs time-line tr">
         {{ dateFormat(parseInt(i.startTime)) }}
@@ -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

@@ -21,15 +21,7 @@ limitations under the License. -->
         <span class="remove-icon" @click="removeTags(index)">×</span>
       </span>
     </span>
-    <el-input
-      v-if="type === 'ALARM'"
-      size="small"
-      v-model="tags"
-      class="trace-new-tag"
-      @change="addLabels"
-      :placeholder="t('addTags')"
-    />
-    <el-popover v-else trigger="click" :visible="visible" width="300px">
+    <el-popover trigger="click" :visible="visible" width="300px">
       <template #reference>
         <el-input
           size="small"
@@ -47,7 +39,7 @@ limitations under the License. -->
         </span>
       </div>
     </el-popover>
-    <span class="tags-tip" :class="type !== 'ALARM' && tagArr.length ? 'link-tips' : ''">
+    <span class="tags-tip" :class="tagArr.length ? 'link-tips' : ''">
       <a
         target="blank"
         href="https://github.com/apache/skywalking/blob/master/docs/en/setup/backend/configuration-vocabulary.md"
@@ -68,6 +60,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 +72,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 +115,18 @@ 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.data) {
+      return;
+    }
     if (resp.errors) {
       ElMessage.error(resp.errors);
       return;
@@ -140,10 +142,17 @@ 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.data) {
+      return;
+    }
     if (resp.errors) {
       ElMessage.error(resp.errors);
       return;

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>