Feat: Support tag conditions for trace (#339)

src/assets/lang/en.ts

@@ -149,6 +149,10 @@ const m = {
   increaseOrder: 'Increase Order',
   chartType: 'Chart Type',
   currentDepth: 'Current Depth',
+  traceTagsTip:
+    'Only tags defined in the core/default/searchableTagKeys are searchable. Check more details on the Configuration Vocabulary page',
+  traceLink: 'Configuration Vocabulary page',
+  traceAddTag: 'Please add a tag',
 };
 
 export default m;

src/assets/lang/zh.ts

@@ -149,6 +149,9 @@ const m = {
   increaseOrder: '递增顺序',
   chartType: '图表类型',
   currentDepth: '当前深度',
+  traceTagsTip: '只有core/default/searchableTagKeys中定义的标记才可搜索。查看配置词汇表页面上的更多详细信息。',
+  traceLink: '配置词汇页',
+  traceAddTag: '请添加标签',
 };
 
 export default m;

src/graph/fragments/trace.ts

@@ -18,8 +18,8 @@
 export const Traces = {
   variable: '$condition: TraceQueryCondition',
   query: `
-  traces: queryBasicTraces(condition: $condition) {
-    data: traces {
+  data: queryBasicTraces(condition: $condition) {
+    traces {
       key: segmentId
       endpointNames
       duration

src/store/modules/trace/index.ts

@@ -139,8 +139,8 @@ const actions: ActionTree<State, any> = {
       .query('queryTraces')
       .params({ condition: context.state.traceForm })
       .then((res: AxiosResponse) => {
-        context.commit(types.SET_TRACELIST, res.data.data.traces.data);
-        context.commit(types.SET_TRACELIST_TOTAL, res.data.data.traces.total);
+        context.commit(types.SET_TRACELIST, res.data.data.data.traces);
+        context.commit(types.SET_TRACELIST_TOTAL, res.data.data.data.total);
       });
   },
   GET_TRACE_SPANS(context: { commit: Commit }, params: any): Promise<void> {

src/views/components/trace/trace-search.vue

@@ -59,22 +59,53 @@ limitations under the License. -->
         </div>
       </div>
     </div>
-    <div class="rk-trace-search-more flex-h" v-show="status">
-      <div class="mr-15">
-        <span class="sm b grey mr-10">{{ this.$t('traceID') }}:</span>
-        <input type="text" v-model="traceId" class="rk-trace-search-input dib" />
-      </div>
-      <div class="mr-15">
-        <span class="sm b grey mr-10">{{ this.$t('duration') }}:</span>
-        <div class="rk-trace-search-range dib">
-          <input class="vm tc" v-model="minTraceDuration" />
-          <span class="grey vm">-</span>
-          <input class="vm tc" v-model="maxTraceDuration" />
+    <div class="rk-trace-search-more" v-show="status">
+      <div class="flex-h">
+        <div class="mr-15">
+          <span class="sm b grey mr-10">{{ this.$t('traceID') }}:</span>
+          <input type="text" v-model="traceId" class="rk-trace-search-input dib" />
+        </div>
+        <div class="mr-15">
+          <span class="sm b grey mr-10">{{ this.$t('duration') }}:</span>
+          <div class="rk-trace-search-range dib">
+            <input class="vm tc" v-model="minTraceDuration" />
+            <span class="grey vm">-</span>
+            <input class="vm tc" v-model="maxTraceDuration" />
+          </div>
+        </div>
+        <div>
+          <span class="sm b grey mr-5">{{ this.$t('timeRange') }}:</span>
+          <RkDate class="sm" v-model="time" position="bottom" format="YYYY-MM-DD HH:mm:ss" />
         </div>
       </div>
-      <div>
-        <span class="sm b grey mr-5">{{ this.$t('timeRange') }}:</span>
-        <RkDate class="sm" v-model="time" position="bottom" format="YYYY-MM-DD HH:mm:ss" />
+      <div class="flex-h">
+        <div class="mr-10" style="padding-top: 5px">
+          <span class="sm grey">{{ this.$t('tags') }}: </span>
+          <span class="rk-trace-tags">
+            <span class="selected" v-for="(item, index) in tagsList" :key="index">
+              <span>{{ item }}</span>
+              <span class="remove-icon" @click="removeTags(index)">×</span>
+            </span>
+          </span>
+          <input
+            type="text"
+            :placeholder="this.$t('traceAddTag')"
+            v-model="tags"
+            class="rk-trace-new-tag"
+            @keyup="addLabels"
+          />
+          <span class="trace-tips" v-tooltip:bottom="{ content: this.$t('traceTagsTip') }">
+            <a
+              target="blank"
+              href="https://github.com/apache/skywalking/blob/master/docs/en/setup/backend/configuration-vocabulary.md"
+            >
+              {{ this.$t('traceLink') }}
+            </a>
+            <svg class="icon mr-5 vm">
+              <use xlink:href="#help"></use>
+            </svg>
+          </span>
+        </div>
       </div>
     </div>
   </div>
@@ -108,7 +139,26 @@ limitations under the License. -->
     private endpointName: string = localStorage.getItem('endpointName') || '';
     private traceId: string = localStorage.getItem('traceId') || '';
     private traceState: Option = { label: 'All', key: 'ALL' };
+    private tags: string = '';
+    private tagsList: string[] = [];
 
+    private created() {
+      this.endpointName = this.$route.query.endpointname
+        ? this.$route.query.endpointname.toString()
+        : this.endpointName;
+      this.traceId = this.$route.query.traceid ? this.$route.query.traceid.toString() : this.traceId;
+      this.time = [this.rocketbotGlobal.durationRow.start, this.rocketbotGlobal.durationRow.end];
+      this.tagsList = localStorage.getItem('traceTags') ? JSON.parse(localStorage.getItem('traceTags') || '') : [];
+    }
+    private mounted() {
+      this.getTraceList();
+      if (this.service && this.service.key) {
+        this.GET_INSTANCES({
+          duration: this.durationTime,
+          serviceId: this.service.key,
+        });
+      }
+    }
     private dateFormat(date: Date, step: string) {
       const year = date.getFullYear();
       const monthTemp = date.getMonth() + 1;
@@ -216,6 +266,17 @@ limitations under the License. -->
         temp.traceId = this.traceId;
         localStorage.setItem('traceId', this.traceId);
       }
+      if (this.tagsList.length) {
+        const tagsMap = this.tagsList.map((item: string) => {
+          const t = item.split('=');
+          return {
+            key: t[0],
+            value: t[1],
+          };
+        });
+        temp.tags = tagsMap;
+        localStorage.setItem('traceTags', JSON.stringify(this.tagsList));
+      }
       this.SET_TRACE_FORM(temp);
 
       this.$eventBus.$emit('SET_LOADING_TRUE', () => {
@@ -236,33 +297,30 @@ limitations under the License. -->
       this.instance = { label: 'All', key: '' };
       this.endpointName = '';
       localStorage.removeItem('endpointName');
+      this.tagsList = [];
+      localStorage.removeItem('traceTags');
       this.traceId = '';
       localStorage.removeItem('traceId');
       this.traceState = { label: 'All', key: 'ALL' };
       this.SET_TRACE_FORM_ITEM({ type: 'queryOrder', data: '' });
       this.getTraceList();
     }
 
-    @Watch('rocketbotGlobal.durationRow')
-    private durationRowWatch(value: Duration) {
-      this.time = [value.start, value.end];
+    private addLabels(event: KeyboardEvent) {
+      if (event.keyCode !== 13 || !this.tags) {
+        return;
+      }
+      this.tagsList.push(this.tags);
+      this.tags = '';
     }
 
-    private created() {
-      this.endpointName = this.$route.query.endpointname
-        ? this.$route.query.endpointname.toString()
-        : this.endpointName;
-      this.traceId = this.$route.query.traceid ? this.$route.query.traceid.toString() : this.traceId;
-      this.time = [this.rocketbotGlobal.durationRow.start, this.rocketbotGlobal.durationRow.end];
+    private removeTags(index: number) {
+      this.tagsList.splice(index, 1);
     }
-    private mounted() {
-      this.getTraceList();
-      if (this.service && this.service.key) {
-        this.GET_INSTANCES({
-          duration: this.durationTime,
-          serviceId: this.service.key,
-        });
-      }
+
+    @Watch('rocketbotGlobal.durationRow')
+    private durationRowWatch(value: Duration) {
+      this.time = [value.start, value.end];
     }
   }
 </script>
@@ -274,6 +332,22 @@ limitations under the License. -->
     color: #eee;
     width: 100%;
     padding: 3px 15px 8px;
+    .selected {
+      display: inline-block;
+      padding: 0 3px;
+      border-radius: 3px;
+      overflow: hidden;
+      color: rgba(0, 0, 0, 0.65);
+      border: 1px dashed #aaa;
+      color: #eee;
+      font-size: 12px;
+      margin: 0 2px;
+    }
+    .remove-icon {
+      display: inline-block;
+      margin-left: 3px;
+      cursor: pointer;
+    }
   }
 
   .rk-trace-search-input {
@@ -282,6 +356,21 @@ limitations under the License. -->
     padding: 2px 5px;
     border-radius: 3px;
   }
+  .rk-trace-new-tag {
+    border-style: unset;
+    outline: 0;
+    padding: 2px 5px;
+    border-radius: 3px;
+    width: 175px;
+    margin-right: 3px;
+  }
+  .rk-trace-tags {
+    padding: 1px 5px 0 0;
+    border-radius: 3px;
+    height: 24px;
+    display: inline-block;
+    vertical-align: top;
+  }
 
   .rk-trace-search-range,
   .rk-auto-select {

src/views/containers/topology/trace/index.vue

@@ -26,7 +26,7 @@ limitations under the License. -->
   import { Option } from '@/types/global';
   import { Component, Vue, Prop, PropSync, Watch } from 'vue-property-decorator';
   import { State, Action, Mutation } from 'vuex-class';
-  import TraceSearch from './trace-search.vue';
+  import TraceSearch from '@/views/components/trace/trace-search.vue';
   import TraceTable from '@/views/components/trace/trace-table.vue';
   import TraceDetail from '@/views/components/trace/trace-detail.vue';
   @Component({