diff --git a/src/assets/lang/en.ts b/src/assets/lang/en.ts
index 574a51d..a218839 100644
--- a/src/assets/lang/en.ts
+++ b/src/assets/lang/en.ts
@@ -222,6 +222,8 @@
   hide: 'Hide',
   message: 'Message',
   tooltipsContent: 'Tooltip Content',
+  alarmDetail: 'Alarm Detail',
+  scope: 'Scope',
 };
 
 export default m;
diff --git a/src/assets/lang/zh.ts b/src/assets/lang/zh.ts
index e6d6594..9901404 100644
--- a/src/assets/lang/zh.ts
+++ b/src/assets/lang/zh.ts
@@ -220,6 +220,8 @@
   hide: '隐藏',
   message: '信息',
   tooltipsContent: '提示内容',
+  alarmDetail: '警告详情',
+  scope: '范围',
 };
 
 export default m;
diff --git a/src/graph/fragments/alarm.ts b/src/graph/fragments/alarm.ts
index 16878ec..1643676 100644
--- a/src/graph/fragments/alarm.ts
+++ b/src/graph/fragments/alarm.ts
@@ -16,15 +16,18 @@
  */
 
 export const Alarm = {
-  variable:
-    '$keyword: String, $scope: Scope, $duration:Duration!, $paging: Pagination!',
+  variable: '$keyword: String, $scope: Scope, $duration:Duration!, $tags:[AlarmTag], $paging: Pagination!',
   query: `
-    getAlarm(keyword: $keyword, scope: $scope, duration: $duration, paging: $paging) {
+    getAlarm(keyword: $keyword, scope: $scope, duration: $duration, paging: $paging, tags: $tags) {
       items: msgs {
         key: id
         message
         startTime
         scope
+        tags {
+          key
+          value
+        }
       }
       total
     }`,
diff --git a/src/types/alarm.d.ts b/src/types/alarm.d.ts
index b537e32..93b8cdc 100644
--- a/src/types/alarm.d.ts
+++ b/src/types/alarm.d.ts
@@ -24,4 +24,6 @@
   message: string;
   key: string;
   startTime: string;
+  scope: string;
+  tags: Array<{ key: string; value: string }>;
 }
diff --git a/src/views/components/alarm/alarm-table.vue b/src/views/components/alarm/alarm-table.vue
index 588757c..4cf62c1 100644
--- a/src/views/components/alarm/alarm-table.vue
+++ b/src/views/components/alarm/alarm-table.vue
@@ -14,7 +14,7 @@
 limitations under the License. -->
 <template>
   <div class="rk-alarm-table clear">
-    <div v-for="(i, index) in data" :key="index" class="mb-10 clear">
+    <div v-for="(i, index) in data" :key="index" class="mb-10 clear alarm-item" @click="showDetails(i)">
       <div class="g-sm-3 grey sm hide-xs rk-alarm-time-line tr">
         {{ parseInt(i.startTime) | dateformat }}
       </div>
@@ -37,16 +37,64 @@
         </div>
       </div>
     </div>
+    <rk-sidebox :width="'50%'" :show.sync="isShowDetails" :title="$t('alarmDetail')">
+      <div class="mb-10 clear rk-flex" v-for="(item, index) in AlarmDetailCol" :key="index">
+        <template>
+          <span class="g-sm-4 grey">{{ $t(item.value) }}:</span>
+          <span v-if="item.label === 'startTime'" class="g-sm-8">{{ currentDetail[item.label] | dateformat }}</span>
+          <span v-else-if="item.label === 'tags'" class="g-sm-8">
+            <div v-for="(d, index) in alarmTags" :key="index">{{ d }}</div>
+          </span>
+          <span v-else class="g-sm-8">{{ currentDetail[item.label] }}</span>
+        </template>
+      </div>
+    </rk-sidebox>
   </div>
 </template>
 
 <script lang="ts">
   import Vue from 'vue';
   import { Component, Prop } from 'vue-property-decorator';
+  import { Alarm } from '@/types/alarm';
 
   @Component
   export default class AlarmTable extends Vue {
-    @Prop({ default: () => [] }) private data: any;
+    @Prop({ default: () => [] }) private data!: Alarm[];
+    private isShowDetails: boolean = false;
+    private currentDetail: Alarm = {
+      tags: [],
+      scope: 'All',
+      message: '',
+      key: '',
+      startTime: '',
+    };
+    private alarmTags: string[] = [];
+    private AlarmDetailCol = [
+      {
+        label: 'scope',
+        value: 'scope',
+      },
+      {
+        label: 'startTime',
+        value: 'startTime',
+      },
+      {
+        label: 'tags',
+        value: 'tags',
+      },
+      {
+        label: 'message',
+        value: 'message',
+      },
+    ];
+
+    private showDetails(item: Alarm) {
+      this.currentDetail = item;
+      this.alarmTags = this.currentDetail.tags.map((d: { key: string; value: string }) => {
+        return `${d.key} = ${d.value}`;
+      });
+      this.isShowDetails = true;
+    }
   }
 </script>
 
@@ -96,4 +144,7 @@
     margin-top: -1px;
     border-radius: 4px;
   }
+  .alarm-item {
+    cursor: pointer;
+  }
 </style>
diff --git a/src/views/components/alarm/alarm-tool.vue b/src/views/components/alarm/alarm-tool.vue
index 04f13e1..306bc37 100644
--- a/src/views/components/alarm/alarm-tool.vue
+++ b/src/views/components/alarm/alarm-tool.vue
@@ -14,26 +14,28 @@
 limitations under the License. -->
 <template>
   <nav class="rk-alarm-tool flex-h">
-    <AlarmSelect
-      :title="$t('filterScope')"
-      :value="alarmOption"
-      @input="
-        (option) => {
-          alarmOption = option;
-          handleRefresh(1);
-        }
-      "
-      :data="alarmOptions"
-    />
-    <div class="mr-10" style="padding: 3px 15px 0">
-      <div class="sm grey">{{ $t('searchKeyword') }}</div>
-      <input type="text" v-model="keyword" class="rk-alarm-tool-input" @input="handleRefresh(1)" />
+    <div class="flex-h alarm-conditions">
+      <AlarmSelect
+        :title="$t('filterScope')"
+        :value="alarmOption"
+        @input="
+          (option) => {
+            alarmOption = option;
+            handleRefresh({ pageNum: 1 });
+          }
+        "
+        :data="alarmOptions"
+      />
+      <div class="mr-10 ml-10">
+        <span class="sm grey">{{ $t('searchKeyword') }}: </span>
+        <input type="text" v-model="keyword" class="rk-alarm-tool-input" @input="handleRefresh({ pageNum: 1 })" />
+      </div>
+      <ConditionTags :type="'ALARM'" @updateTags="(data) => handleRefresh({ pageNum: 1, tagsMap: data.tagsMap })" />
     </div>
     <RkPage
-      class="mt-15"
       :currentSize="20"
       :currentPage="pageNum"
-      @changePage="(pageNum) => handleRefresh(pageNum)"
+      @changePage="(pageNum) => handleRefresh({ pageNum })"
       :total="total"
     />
   </nav>
@@ -44,15 +46,12 @@
   import { Component, Prop } from 'vue-property-decorator';
   import { Action, Mutation, Getter } from 'vuex-class';
   import AlarmSelect from './alarm-select.vue';
+  import { Option, DurationTime } from '@/types/global';
+  import { ConditionTags } from '../common/index';
 
-  interface Option {
-    key: string | number;
-    label: string | number;
-  }
-
-  @Component({ components: { AlarmSelect } })
+  @Component({ components: { AlarmSelect, ConditionTags } })
   export default class AlarmTool extends Vue {
-    @Getter('durationTime') private durationTime: any;
+    @Getter('durationTime') private durationTime!: DurationTime;
     @Mutation('SET_EVENTS') private SET_EVENTS: any;
     @Action('rocketAlarm/GET_ALARM') private GET_ALARM: any;
     @Prop() private total!: number;
@@ -69,15 +68,24 @@
     ];
     private keyword: string = '';
 
-    private handleRefresh(pageNum: number) {
-      this.pageNum = pageNum;
+    private beforeMount() {
+      this.SET_EVENTS([
+        () => {
+          this.handleRefresh({ pageNum: 1 });
+        },
+      ]);
+      this.handleRefresh({ pageNum: 1 });
+    }
+    private handleRefresh(param: { pageNum: number; tagsMap?: Array<{ key: string; value: string }> }) {
+      this.pageNum = param.pageNum;
       const params: any = {
         duration: this.durationTime,
         paging: {
-          pageNum,
+          pageNum: param.pageNum,
           pageSize: 20,
           needTotal: true,
         },
+        tags: param.tagsMap,
       };
       if (this.alarmOption.key) {
         params.scope = this.alarmOption.key;
@@ -87,22 +95,13 @@
       }
       this.GET_ALARM(params);
     }
-
-    private beforeMount() {
-      this.SET_EVENTS([
-        () => {
-          this.handleRefresh(1);
-        },
-      ]);
-      this.handleRefresh(1);
-    }
     private beforeDestroy() {
       this.SET_EVENTS([]);
     }
   }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
   .rk-alarm-tool {
     border-bottom: 1px solid #c1c5ca41;
     height: 52px;
@@ -110,6 +109,7 @@
     padding: 0 15px;
     color: #efefef;
     flex-shrink: 0;
+    justify-content: space-between;
   }
 
   .rk-alarm-tool-input {
@@ -118,4 +118,7 @@
     padding: 2px 5px;
     border-radius: 3px;
   }
+  .alarm-conditions {
+    height: 100%;
+  }
 </style>
diff --git a/src/views/components/common/condition-tags.vue b/src/views/components/common/condition-tags.vue
new file mode 100644
index 0000000..b27fc18
--- /dev/null
+++ b/src/views/components/common/condition-tags.vue
@@ -0,0 +1,132 @@
+<!-- Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements.  See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+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="flex-h">
+    <div class="mr-10 pt-5">
+      <span class="sm grey">{{ $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="$t('addTag')" v-model="tags" class="rk-trace-new-tag" @keyup="addLabels" />
+      <span class="tags-tip" v-tooltip:bottom="{ content: $t('traceTagsTip') }">
+        <a
+          target="blank"
+          href="https://github.com/apache/skywalking/blob/master/docs/en/setup/backend/configuration-vocabulary.md"
+        >
+          {{ $t('tagsLink') }}
+        </a>
+        <rk-icon icon="help" class="mr-5" />
+      </span>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+  import { Vue, Component, Prop, Watch } from 'vue-property-decorator';
+  @Component
+  export default class ConditionTags extends Vue {
+    @Prop() private type!: string;
+    @Prop() private clearTags!: boolean;
+    private tagsList: string[] = [];
+    private tags: string = '';
+
+    private created() {
+      if (this.type === 'LOG') {
+        this.tagsList = localStorage.getItem('logTags') ? JSON.parse(localStorage.getItem('logTags') || '') : [];
+      } else if (this.type === 'TRACE') {
+        this.tagsList = localStorage.getItem('traceTags') ? JSON.parse(localStorage.getItem('traceTags') || '') : [];
+      }
+      // else { // ALARM
+      //   this.tagsList = localStorage.getItem('alarmTags') ? JSON.parse(localStorage.getItem('alarmTags') || '') : [];
+      // }
+
+      this.updateTags();
+    }
+    private removeTags(index: number) {
+      this.tagsList.splice(index, 1);
+      this.updateTags();
+      localStorage.setItem('traceTags', JSON.stringify(this.tagsList));
+    }
+    private addLabels(event: KeyboardEvent) {
+      if (event.keyCode !== 13 || !this.tags) {
+        return;
+      }
+      this.tagsList.push(this.tags);
+      this.tags = '';
+      this.updateTags();
+    }
+    private updateTags() {
+      const tagsMap = this.tagsList.map((item: string) => {
+        const key = item.substring(0, item.indexOf('='));
+        return {
+          key,
+          value: item.substring(item.indexOf('=') + 1, item.length),
+        };
+      });
+      this.$emit('updateTags', { tagsMap, tagsList: this.tagsList });
+    }
+    @Watch('clearTags')
+    private clearTagsWatch() {
+      if (this.clearTags) {
+        this.tagsList = [];
+      }
+    }
+  }
+</script>
+<style lang="scss" scoped>
+  .rk-trace-tags {
+    padding: 1px 5px 0 0;
+    border-radius: 3px;
+    height: 24px;
+    display: inline-block;
+    vertical-align: top;
+  }
+  .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;
+  }
+  .rk-trace-tags {
+    padding: 1px 5px 0 0;
+    border-radius: 3px;
+    height: 24px;
+    display: inline-block;
+    vertical-align: top;
+  }
+  .rk-trace-new-tag {
+    border-style: unset;
+    outline: 0;
+    padding: 2px 5px;
+    border-radius: 3px;
+    width: 175px;
+    margin-right: 3px;
+  }
+  .remove-icon {
+    display: inline-block;
+    margin-left: 3px;
+    cursor: pointer;
+  }
+  .tags-tip {
+    color: #a7aebb;
+  }
+</style>
diff --git a/src/views/components/common/index.ts b/src/views/components/common/index.ts
index 9a70b81..ae93b4f 100644
--- a/src/views/components/common/index.ts
+++ b/src/views/components/common/index.ts
@@ -16,5 +16,6 @@
  */
 
 import TraceDetailChartTable from './trace-detail-chart-table.vue';
+import ConditionTags from './condition-tags.vue';
 
-export { TraceDetailChartTable };
+export { TraceDetailChartTable, ConditionTags };
diff --git a/src/views/components/log/log-conditions.vue b/src/views/components/log/log-conditions.vue
index b497c8b..01c70dd 100644
--- a/src/views/components/log/log-conditions.vue
+++ b/src/views/components/log/log-conditions.vue
@@ -82,31 +82,7 @@
         </span>
       </div>
     </div>
-    <div class="mr-10" style="padding-top: 10px" v-show="rocketLog.type.key === cateGoryService">
-      <span class="sm grey">{{ $t('tags') }}: </span>
-      <span class="rk-log-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="$t('addTag')"
-        v-model="tags"
-        class="rk-log-new-tag"
-        @keyup="addLabels($event, LogConditionsOpt.Tags)"
-      />
-      <span class="log-tips" v-tooltip:bottom="{ content: $t('logsTagsTip') }">
-        <a
-          target="blank"
-          href="https://github.com/apache/skywalking/blob/master/docs/en/setup/backend/configuration-vocabulary.md"
-        >
-          {{ $t('tagsLink') }}
-        </a>
-        <rk-icon icon="help" class="mr-5" />
-      </span>
-    </div>
+    <ConditionTags :type="'LOG'" :clearTags="clearAllTags" @updateTags="updateTags" />
   </div>
 </template>
 
@@ -116,9 +92,10 @@
   import { State as globalState } from '@/store/modules/global/index';
   import { State as logState } from '@/store/modules/log/index';
   import dateFormatStep from '@/utils/dateFormat';
+  import { ConditionTags } from '../common/index';
 
   @Component({
-    components: {},
+    components: { ConditionTags },
   })
   export default class LogConditions extends Vue {
     @State('rocketbot') private rocketbotGlobal!: globalState;
@@ -129,8 +106,6 @@
     @Mutation('SET_EXCLUDING_KEYWORDS_CONTENT') private SET_EXCLUDING_KEYWORDS_CONTENT: any;
     private keywordsOfContent: string = '';
     private excludingKeywordsOfContent: string = '';
-    private tagsList: string[] = [];
-    private tags: string = '';
     private searchTime: Date[] = [];
     private traceId: string = '';
     private LogConditionsOpt = {
@@ -141,10 +116,9 @@
       Date: 'date',
     };
     private cateGoryService = 'service';
+    private clearAllTags: boolean = false;
     private created() {
       this.searchTime = [this.rocketbotGlobal.durationRow.start, this.rocketbotGlobal.durationRow.end];
-      (this.tagsList = localStorage.getItem('logTags') ? JSON.parse(localStorage.getItem('logTags') || '') : []),
-        this.updateTags();
       this.traceId = localStorage.getItem('logTraceId') || '';
     }
     private changeConditions(item: any, type: string) {
@@ -159,20 +133,13 @@
       if (event.keyCode !== 13) {
         return;
       }
-      if (type === this.LogConditionsOpt.Tags && !this.tags) {
-        return;
-      }
       if (type === this.LogConditionsOpt.KeywordsOfContent && !this.keywordsOfContent) {
         return;
       }
       if (type === this.LogConditionsOpt.ExcludingKeywordsOfContent && !this.excludingKeywordsOfContent) {
         return;
       }
-      if (type === this.LogConditionsOpt.Tags) {
-        this.tagsList.push(this.tags);
-        this.tags = '';
-        this.updateTags();
-      } else if (type === this.LogConditionsOpt.KeywordsOfContent) {
+      if (type === this.LogConditionsOpt.KeywordsOfContent) {
         const keywordsOfContentList = this.rocketLog.conditions.keywordsOfContent || [];
         keywordsOfContentList.push(this.keywordsOfContent);
         this.SET_LOG_CONDITIONS({
@@ -212,24 +179,12 @@
       this.excludingKeywordsOfContent = '';
       this.updateContent(this.LogConditionsOpt.ExcludingKeywordsOfContent);
     }
-    private removeTags(index: number) {
-      this.tagsList.splice(index, 1);
-      this.updateTags();
-    }
-    private updateTags() {
-      const tagsMap = this.tagsList.map((item: string) => {
-        const key = item.substring(0, item.indexOf('='));
-
-        return {
-          key,
-          value: item.substring(item.indexOf('=') + 1, item.length),
-        };
-      });
+    private updateTags(data: { tagsMap: Array<{ key: string; value: string }>; tagsList: string[] }) {
       this.SET_LOG_CONDITIONS({
         label: this.LogConditionsOpt.Tags,
-        key: tagsMap,
+        key: data.tagsMap,
       });
-      localStorage.setItem('logTags', JSON.stringify(this.tagsList));
+      localStorage.setItem('logTags', JSON.stringify(data.tagsList));
     }
     private updateContent(type: string) {
       let list = [];
@@ -263,7 +218,8 @@
     @Watch('rocketLog.conditions')
     private clearTags() {
       if (!this.rocketLog.conditions.tags) {
-        this.tagsList = [];
+        localStorage.removeItem('logTags');
+        this.clearAllTags = true;
       }
       if (!this.rocketLog.conditions.traceId) {
         this.traceId = '';
diff --git a/src/views/components/log/log-service-detail.vue b/src/views/components/log/log-service-detail.vue
index 0a521a6..0c2e82e 100644
--- a/src/views/components/log/log-service-detail.vue
+++ b/src/views/components/log/log-service-detail.vue
@@ -44,7 +44,7 @@
   import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
   import LogTable from './log-table/log-table.vue';
   import { ServiceLogDetail } from './log-table/log-constant';
-  import { formatJson } from '../../../utils/formatJson';
+  import { formatJson } from '@/utils/formatJson';
 
   @Component({
     components: { LogTable },
diff --git a/src/views/components/trace/trace-search.vue b/src/views/components/trace/trace-search.vue
index 67aa4d7..75d8de4 100644
--- a/src/views/components/trace/trace-search.vue
+++ b/src/views/components/trace/trace-search.vue
@@ -15,7 +15,7 @@
 
 <template>
   <div class="rk-trace-search">
-    <div class="pb-5 pt-5">
+    <div>
       <a class="rk-trace-clear-btn r" @click="status = !status">
         <span class="mr-5 vm">{{ $t('more') }}</span>
         <svg class="icon trans vm" :style="`transform: rotate(${status ? 180 : 0}deg);`">
@@ -34,7 +34,7 @@
         </svg>
         <span class="vm">{{ $t('clear') }}</span>
       </a>
-      <div class="flex-h">
+      <div class="flex-h trace-select">
         <TraceSelect
           :hasSearch="true"
           :title="$t('service')"
@@ -81,27 +81,7 @@
           <RkDate class="sm" v-model="time" position="bottom" format="YYYY-MM-DD HH:mm" />
         </div>
       </div>
-      <div class="flex-h">
-        <div class="mr-10" style="padding-top: 5px">
-          <span class="sm grey">{{ $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="$t('addTag')" v-model="tags" class="rk-trace-new-tag" @keyup="addLabels" />
-          <span class="trace-tips" v-tooltip:bottom="{ content: $t('traceTagsTip') }">
-            <a
-              target="blank"
-              href="https://github.com/apache/skywalking/blob/master/docs/en/setup/backend/configuration-vocabulary.md"
-            >
-              {{ $t('tagsLink') }}
-            </a>
-            <rk-icon icon="help" class="mr-5" />
-          </span>
-        </div>
-      </div>
+      <ConditionTags :type="'TRACE'" :clearTags="clearTags" @updateTags="updateTags" />
     </div>
   </div>
 </template>
@@ -111,10 +91,11 @@
   import { Component, Vue, Watch } from 'vue-property-decorator';
   import { Action, Getter, Mutation, State } from 'vuex-class';
   import TraceSelect from '../common/trace-select.vue';
+  import { ConditionTags } from '../common/index';
   import { State as traceState } from '@/store/modules/trace/index';
   import { State as globalState } from '@/store/modules/global/index';
   import dateFormatStep from '@/utils/dateFormat';
-  @Component({ components: { TraceSelect } })
+  @Component({ components: { TraceSelect, ConditionTags } })
   export default class TraceSearch extends Vue {
     @State('rocketbot') private rocketbotGlobal!: globalState;
     @State('rocketTrace') private rocketTrace!: traceState;
@@ -139,12 +120,13 @@
     private endpoint: Option = { label: 'All', key: '' };
     private traceId: string = localStorage.getItem('traceId') || '';
     private traceState: Option = { label: 'All', key: 'ALL' };
-    private tags: string = '';
+    private tagsMap: Array<{ key: string; value: string }> = [];
     private tagsList: string[] = [];
+    private clearTags: boolean = false;
+
     private created() {
       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();
@@ -197,6 +179,10 @@
     private chooseEndpoint(i: Option) {
       this.endpoint = i;
     }
+    private updateTags(data: { tagsMap: Array<{ key: string; value: string }>; tagsList: string[] }) {
+      this.tagsList = data.tagsList;
+      this.tagsMap = data.tagsMap;
+    }
     private getTraceList() {
       this.GET_SERVICES({ duration: this.durationTime });
       const temp: any = {
@@ -235,17 +221,8 @@
         temp.traceId = this.traceId;
       }
       localStorage.setItem('traceId', this.traceId);
-      if (this.tagsList.length) {
-        const tagsMap = this.tagsList.map((item: string) => {
-          const key = item.substring(0, item.indexOf('='));
-          return {
-            key,
-            value: item.substring(item.indexOf('=') + 1, item.length),
-          };
-        });
-        temp.tags = tagsMap;
-        localStorage.setItem('traceTags', JSON.stringify(this.tagsList));
-      }
+      temp.tags = this.tagsMap;
+      localStorage.setItem('traceTags', JSON.stringify(this.tagsList));
       this.SET_TRACE_FORM(temp);
       this.$eventBus.$emit('SET_LOADING_TRUE', () => {
         this.GET_TRACELIST().then(() => {
@@ -263,25 +240,17 @@
       this.service = { label: 'All', key: '' };
       this.instance = { label: 'All', key: '' };
       this.endpoint = { label: 'All', key: '' };
-      this.tagsList = [];
       localStorage.removeItem('traceTags');
+      this.clearTags = true;
+      this.tagsMap = [];
+      this.tagsList = [];
       this.traceId = '';
       localStorage.removeItem('traceId');
       this.traceState = { label: 'All', key: 'ALL' };
       this.SET_TRACE_FORM_ITEM({ type: 'queryOrder', data: '' });
       this.getTraceList();
     }
-    private addLabels(event: KeyboardEvent) {
-      if (event.keyCode !== 13 || !this.tags) {
-        return;
-      }
-      this.tagsList.push(this.tags);
-      this.tags = '';
-    }
-    private removeTags(index: number) {
-      this.tagsList.splice(index, 1);
-      localStorage.setItem('traceTags', JSON.stringify(this.tagsList));
-    }
+
     @Watch('rocketbotGlobal.durationRow')
     private durationRowWatch(value: Duration) {
       this.time = [value.start, value.end];
@@ -290,6 +259,9 @@
 </script>
 
 <style lang="scss">
+  .trace-select {
+    height: 52px;
+  }
   .rk-trace-search {
     flex-shrink: 0;
     background-color: #333840;
@@ -372,7 +344,6 @@
     background-color: #484b55;
     padding: 4px 10px;
     border-radius: 3px;
-    margin-top: 8px;
     position: relative;
     box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
     &:after {