feat: add queries for alarm tags (#417)

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>