diff --git a/src/assets/lang/en.ts b/src/assets/lang/en.ts
index 8529304..0e0ced9 100644
--- a/src/assets/lang/en.ts
+++ b/src/assets/lang/en.ts
@@ -230,6 +230,8 @@
   destService: 'Destination Service',
   destServiceInstance: 'Destination Service Instance',
   eventSource: 'Event Source',
+  modalTitle: 'Inspection',
+  selectRedirectPage: 'Do you want to inspect Traces or Logs of %s service?',
 };
 
 export default m;
diff --git a/src/assets/lang/zh.ts b/src/assets/lang/zh.ts
index 84ec613..5e13722 100644
--- a/src/assets/lang/zh.ts
+++ b/src/assets/lang/zh.ts
@@ -228,6 +228,8 @@
   destService: '终点服务',
   destServiceInstance: '终点实例',
   eventSource: '事件资源',
+  modalTitle: '查看',
+  selectRedirectPage: '查看 %s 服务的追踪或日志？',
 };
 
 export default m;
diff --git a/src/components/index.ts b/src/components/index.ts
index 67d83ec..a5f02e8 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -24,6 +24,7 @@
 import RkDate from './rk-date.vue';
 import RkPanel from './rk-panel.vue';
 import RkSidebox from './rk-sidebox.vue';
+import RkModal from './rk-modal.vue';
 import RkEcharts from './rk-echarts.vue';
 import RkSelect from './rk-select.vue';
 import RkPopper from './rk-popper.vue';
@@ -42,6 +43,7 @@
   RkEcharts,
   RkPage,
   RkSidebox,
+  RkModal,
   RkFooterTime,
   RkSelect,
   RkPopper,
diff --git a/src/components/rk-modal.vue b/src/components/rk-modal.vue
new file mode 100644
index 0000000..93357f2
--- /dev/null
+++ b/src/components/rk-modal.vue
@@ -0,0 +1,164 @@
+<!-- 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="rk-modal-bg" v-show="show" @mousemove="modalMove" @mouseup="cancelMove">
+        <div class="rk-modal-container">
+            <div class="rk-modal-header" @mousedown="setStartingPoint">
+                <span class="title">{{ this.title }}</span>
+                <div class="r rk-modal-close" @click="cancel">
+                    <svg class="icon">
+                        <use xlink:href="#close"></use>
+                    </svg>
+                </div>
+            </div>
+            <div class="rk-modal-main">
+                <slot></slot>
+            </div>
+            <div v-if="showButton" class="rk-modal-footer">
+                <rk-button class="cancel" @click="cancel">{{ $t('cancel') }}</rk-button>
+                <rk-button @click="confirm">{{ $t('confirm') }}</rk-button>
+            </div>
+        </div>
+    </div>
+</template>
+<script lang="js">
+    import RkButton from '@/components/rk-button';
+    export default {
+        name: 'RkModal',
+        components: {RkButton},
+        props: {
+            show: {
+                type: Boolean,
+                default: false,
+            },
+            showButton: {
+                type: Boolean,
+                default: false,
+            },
+            title: {
+                type: String,
+                default: '',
+            },
+        },
+        data() {
+            return {
+                x: 0,
+                y: 0,
+                node: null,
+                isCanMove: false,
+            };
+        },
+        mounted() {
+            this.node = document.querySelector('.rk-modal-container');
+        },
+        methods: {
+            cancel() {
+                this.$emit('update:show', false);
+                this.$emit('cancelModalCallback');
+            },
+
+            confirm() {
+                this.$emit('update:show', false);
+                this.$emit('confirmModalCallback');
+            },
+
+            setStartingPoint(e) {
+                this.x = e.clientX - this.node.offsetLeft;
+                this.y = e.clientY - this.node.offsetTop;
+                this.isCanMove = true;
+            },
+
+            modalMove(e) {
+                if (this.isCanMove) {
+                    this.node.style.left = e.clientX - this.x + 'px';
+                    this.node.style.top = e.clientY - this.y + 'px';
+                }
+            },
+
+            cancelMove() {
+                this.isCanMove = false;
+            },
+        },
+    };
+</script>
+
+<style lang="scss">
+    .rk-modal-bg {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: rgba(0, 0, 0, .5);
+        z-index: 10;
+    }
+
+    .rk-modal-container {
+        background: #fff;
+        border-radius: 10px;
+        overflow: hidden;
+        position: fixed;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+    }
+
+    .rk-modal-header {
+        height: 35px;
+        background: #333840;
+        color: #efefef;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: move;
+    }
+
+    .rk-modal-close {
+        position: absolute;
+        right: 10px;
+        top: 5px;
+        cursor: pointer;
+        color: #d8d8d8;
+        transition: color 0.3s;
+
+        .icon {
+            width: 18px;
+            height: 20px;
+        }
+
+        &:hover {
+            color: #3d92ff;
+        }
+    }
+
+    .rk-modal-main {
+        padding: 15px 40px;
+    }
+
+    .rk-modal-footer {
+        display: flex;
+        align-items: center;
+        justify-content: right;
+        height: 35px;
+        border-top: 1px solid #ddd;
+        padding-right: 10px;
+    }
+    .rk-modal-footer .cancel{
+        margin-right: 10px;
+        border: 1px solid #ddd;
+        color: #333;
+        background-color: #fff;
+    }
+</style>
diff --git a/src/views/components/dashboard/charts/chart-slow.vue b/src/views/components/dashboard/charts/chart-slow.vue
index 9f905e5..23bf084 100644
--- a/src/views/components/dashboard/charts/chart-slow.vue
+++ b/src/views/components/dashboard/charts/chart-slow.vue
@@ -22,11 +22,20 @@
         </svg>
         <div class="mb-5 ell" v-tooltip:top.ellipsis="i.name || ''">
           <span class="calls sm mr-10">{{ i.value }}</span>
-          <span class="cp link-hover">{{ i.name + getTraceId(i) }}</span>
+          <span class="cp link-hover" @click="handleLink(i)">{{ i.name + getTraceId(i) }}</span>
         </div>
         <RkProgress :precent="(i.value / maxValue) * 100" color="#bf99f8" />
       </div>
     </div>
+    <rk-modal :show.sync="showModal" :title="$t('modalTitle')">
+      <div>
+        {{ $t('selectRedirectPage').replace('%s', redirectData.name) }}
+      </div>
+      <div class="mt-15">
+        <router-link :to="redirectData.log" class="rk-chart-slow-link mr-20">{{ $t('log') }}</router-link>
+        <router-link :to="redirectData.trace" class="rk-chart-slow-link mr-20">{{ $t('trace') }}</router-link>
+      </div>
+    </rk-modal>
   </div>
 </template>
 
@@ -34,6 +43,7 @@
   import Vue from 'vue';
   import { Component, Prop } from 'vue-property-decorator';
   import copy from '@/utils/copy';
+  import {MetricsName} from '@/views/components/dashboard/charts/constant';
 
   @Component({})
   export default class ChartSlow extends Vue {
@@ -41,6 +51,37 @@
     @Prop() private item!: any;
     @Prop() private type!: any;
     @Prop() private intervalTime!: any;
+    private showModal: boolean = false;
+    private redirectData: any = {
+      name: '',
+      log: {
+        path: '',
+        query: {
+          service: '',
+        },
+      },
+      trace: {
+        path: '',
+        query: {
+          service: '',
+        },
+      },
+    };
+    private isServiceChart: boolean = false;
+
+    private created() {
+      const serviceMetricNames = [
+              MetricsName.SERVICE_RESP_TIME,
+              MetricsName.SERVICE_SLA,
+              MetricsName.SERVICE_CPM,
+              MetricsName.SERVICE_PERCENTILE,
+              MetricsName.SERVICE_APDEX,
+      ];
+      this.isServiceChart = 'Service' === this.item.entityType
+              && 'sortMetrics' === this.item.queryMetricType
+              && serviceMetricNames.includes(this.item.metricName);
+    }
+
     get maxValue() {
       if (!this.data.length) {
         return null;
@@ -54,6 +95,24 @@
     private handleClick(i: any) {
       copy(i);
     }
+    private handleLink(i: any) {
+      if (this.isServiceChart && i.name) {
+        this.redirectData.name = i.name;
+        this.redirectData.log = {
+          path: 'log',
+          query: {
+            service: encodeURIComponent(i.name),
+          },
+        };
+        this.redirectData.trace = {
+          path: 'trace',
+          query: {
+            service: encodeURIComponent(i.name),
+          },
+        };
+        this.showModal = true;
+      }
+    }
     get datas() {
       if (!this.data.length) {
         return [];
@@ -88,4 +147,13 @@
   .rk-chart-slow-i {
     padding: 6px 0;
   }
+  .rk-chart-slow-link {
+    padding: 4px 10px 7px 10px;
+    border-radius: 4px;
+    border: 1px solid #ddd;
+    color: #333;
+    background-color: #fff;
+    will-change: opacity, background-color;
+    transition: opacity 0.3s, background-color 0.3s;
+  }
 </style>
diff --git a/src/views/components/dashboard/charts/constant.ts b/src/views/components/dashboard/charts/constant.ts
index 5aa812f..ef2f80a 100644
--- a/src/views/components/dashboard/charts/constant.ts
+++ b/src/views/components/dashboard/charts/constant.ts
@@ -86,3 +86,11 @@
 ];
 
 export const MaxItemNum = 10;
+
+export enum MetricsName {
+  SERVICE_RESP_TIME = 'service_resp_time',
+  SERVICE_SLA = 'service_sla',
+  SERVICE_CPM = 'service_cpm',
+  SERVICE_PERCENTILE = 'service_percentile',
+  SERVICE_APDEX = 'service_apdex',
+}
diff --git a/src/views/components/log/log-bar.vue b/src/views/components/log/log-bar.vue
index 8216294..fe369e5 100644
--- a/src/views/components/log/log-bar.vue
+++ b/src/views/components/log/log-bar.vue
@@ -127,6 +127,15 @@
           this.QUERY_LOGS_BYKEYWORDS();
         })
         .then(() => {
+          const serviceName = this.$route.query.service ? this.$route.query.service.toString() : undefined;
+          if (serviceName) {
+            for (const s of this.rocketOption.services) {
+              if (s.label === serviceName) {
+                this.selectService(s);
+                break;
+              }
+            }
+          }
           this.queryLogs();
         });
     }
diff --git a/src/views/components/trace/trace-search.vue b/src/views/components/trace/trace-search.vue
index 92b0c4f..1882460 100644
--- a/src/views/components/trace/trace-search.vue
+++ b/src/views/components/trace/trace-search.vue
@@ -132,19 +132,32 @@
     private tagsMap: Array<{ key: string; value: string }> = [];
     private tagsList: string[] = [];
     private clearTags: boolean = false;
+    private serviceName: string = '';
 
     private created() {
       this.traceId = this.$route.query.traceid ? this.$route.query.traceid.toString() : this.traceId;
+      this.serviceName = this.$route.query.service ? this.$route.query.service.toString() : this.serviceName;
       this.time = [this.rocketbotGlobal.durationRow.start, this.rocketbotGlobal.durationRow.end];
     }
     private mounted() {
-      this.getTraceList();
-      if (this.service && this.service.key) {
-        this.GET_INSTANCES({
-          duration: this.durationTime,
-          serviceId: this.service.key,
+      this.GET_SERVICES({ duration: this.durationTime })
+        .then(() => {
+          if (this.serviceName) {
+            for (const s of this.rocketTrace.services) {
+              if (s.label === this.serviceName) {
+                this.service = s;
+                break;
+              }
+            }
+          }
+          this.getTraceList();
+          if (this.service && this.service.key) {
+            this.GET_INSTANCES({
+              duration: this.durationTime,
+              serviceId: this.service.key,
+            });
+          }
         });
-      }
     }
     private globalTimeFormat(time: Date[]) {
       const step = 'SECOND';
@@ -195,7 +208,6 @@
       this.tagsMap = data.tagsMap;
     }
     private getTraceList() {
-      this.GET_SERVICES({ duration: this.durationTime });
       const temp: any = {
         queryDuration: this.globalTimeFormat([
           new Date(
@@ -259,6 +271,7 @@
       localStorage.removeItem('traceId');
       this.traceState = { label: 'All', key: 'ALL' };
       this.SET_TRACE_FORM_ITEM({ type: 'queryOrder', data: '' });
+      this.GET_SERVICES({ duration: this.durationTime });
       this.getTraceList();
     }