diff --git a/mindinsight/ui/src/locales/en-us.json b/mindinsight/ui/src/locales/en-us.json
index 428516552f79350dc888cde86e615f4559ce1991..b42c3ecbb2b714ba27990dafdcf8ca73384b3504 100644
--- a/mindinsight/ui/src/locales/en-us.json
+++ b/mindinsight/ui/src/locales/en-us.json
@@ -232,10 +232,10 @@
     "card": " ",
     "searchByType": "Enter operator type",
     "searchByName": "Enter operator name",
-    "operatorInfo":"Operator",
-    "kernelInfo":"Kernel",
-    "searchByCoreName":"Enter kernel name",
-    "searchByCoreFullName":"Enter operator full name"
+    "operatorInfo": "Operator",
+    "kernelInfo": "Kernel",
+    "searchByCoreName": "Enter kernel name",
+    "searchByCoreFullName": "Enter operator full name"
   },
   "profiling": {
     "profilingDashboard": "Profiling Dashboard",
@@ -392,8 +392,10 @@
       "content31": "You can analyze whether the flow tiling policy is proper and whether the step interval and tail time are too long based on the timeline information.",
       "content32": "You can also locate an operator and view and analyze its execution time."
     },
+    "countUnit": "times",
     "unit": "ms/time",
-    "gpuunit": "us/time"
+    "gpuunit": "us/time",
+    "chartTitle": "Average Time Consumption Ranking"
   },
   "hardwareVisual": {
     "processor": "Ascend AI Processor",
@@ -449,7 +451,7 @@
     "gridAccuracy": "Decimal places are reserved.",
     "inCorrectInput": "Invalid input.",
     "gridTableNoData": "No data in the table.",
-    "cache":"CACHING"
+    "cache": "CACHING"
   },
   "error": {
     "50540000": "System error.",
diff --git a/mindinsight/ui/src/locales/zh-cn.json b/mindinsight/ui/src/locales/zh-cn.json
index 781389b059dfc8efbbd54690f7190c6a1e0236f9..20f054d6e662e0f94cdfd777f653507c47944e4d 100644
--- a/mindinsight/ui/src/locales/zh-cn.json
+++ b/mindinsight/ui/src/locales/zh-cn.json
@@ -391,8 +391,10 @@
       "content31": "您可以通过时间线信息分析流切分方法是否合理、迭代间隙和拖尾时间是否过长等；",
       "content32": "也可以具体定位到某个算子，查看分析它的执行时间。"
     },
+    "countUnit": "次",
     "unit": "ms/次",
-    "gpuunit": "us/次"
+    "gpuunit": "us/次",
+    "chartTitle": "平均耗时排行"
   },
   "hardwareVisual": {
     "processor": "昇腾AI处理器",
@@ -428,14 +430,14 @@
     "availableFree": "芯片空闲",
     "availableBusy": "芯片已被占用或不可用",
     "failQueryChip": "芯片信息查询有误",
-    "name":"名称",
-    "npu":"编号",
-    "available":"是否空闲",
-    "health":"健康状态",
-    "ipAddress":"IP 地址",
-    "hbmUsage":"已用HBM内存(MB)",
-    "power":"功率(W)",
-    "temp":"温度(℃)"
+    "name": "名称",
+    "npu": "编号",
+    "available": "是否空闲",
+    "health": "健康状态",
+    "ipAddress": "IP 地址",
+    "hbmUsage": "已用HBM内存(MB)",
+    "power": "功率(W)",
+    "temp": "温度(℃)"
   },
   "components": {
     "summaryTitle": "训练选择",
@@ -448,7 +450,7 @@
     "gridAccuracy": "保留小数位",
     "inCorrectInput": "无效输入",
     "gridTableNoData": "表格无数据",
-    "cache":"正在加载"
+    "cache": "正在加载"
   },
   "error": {
     "50540000": "系统错误",
diff --git a/mindinsight/ui/src/views/profiling-gpu/operator.vue b/mindinsight/ui/src/views/profiling-gpu/operator.vue
index 36cd2953e64d11ec12b804b831af95cb1057473f..46153af0148c6b2672d29b839b3341ba690c8757 100644
--- a/mindinsight/ui/src/views/profiling-gpu/operator.vue
+++ b/mindinsight/ui/src/views/profiling-gpu/operator.vue
@@ -25,6 +25,7 @@ limitations under the License.
                :class="{fullScreen:fullScreen}"
                v-if="operatorCharts.data.length">
             <div>
+              <div class="chart-title">{{$t('profiling.chartTitle')}}</div>
               <el-radio-group class="chart-radio-group"
                               v-model="operatorCharts.type"
                               @change="operatorChartChange"
@@ -99,13 +100,14 @@ limitations under the License.
                                        :property="ele"
                                        :key="key"
                                        :sortable="ele === 'op_info' ? false : 'custom'"
-                                       show-overflow-tooltip>
+                                       :min-width="(ele === 'op_type') ? 100 : (ele === 'op_name') ?
+                                       120 : (ele === 'op_full_name') ? 150 : '' "
+                                       :show-overflow-tooltip="(ele === 'op_full_name'||ele === 'op_name'
+                                       ||ele==='op_type') ? false : true">
                         <template slot="header">
                           <div class="custom-label"
-                               :title="(ele==='op_total_time'||ele==='op_avg_time'||ele==='cuda_activity_cost_time')
-                               ?`${ele} (${$t('profiling.gpuunit')})`:ele">
-                            {{(ele==='op_total_time'||ele==='op_avg_time'||ele==='cuda_activity_cost_time')
-                            ?`${ele} (${$t('profiling.gpuunit')})`:ele}}
+                               :title="getHeaderField(ele)">
+                            {{getHeaderField(ele)}}
                           </div>
                         </template>
                       </el-table-column>
@@ -126,8 +128,8 @@ limitations under the License.
                                sortable>
                 <template slot="header">
                   <div class="custom-label"
-                       :title="(item==='total_time'||item==='avg_time')?`${item} (${$t('profiling.gpuunit')})`:item">
-                    {{(item==='total_time'||item==='avg_time')?`${item} (${$t('profiling.gpuunit')})`:item}}
+                       :title="getHeaderField(item)">
+                    {{getHeaderField(item)}}
                   </div>
                 </template>
               </el-table-column>
@@ -144,13 +146,14 @@ limitations under the License.
                                :property="item"
                                :key="$index"
                                :sortable="item === 'op_info' ? false : 'custom'"
-                               show-overflow-tooltip>
+                               :min-width="(item === 'op_type') ? 100 : (item === 'op_name')
+                               ? 120 : (item === 'op_full_name') ? 150 : '' "
+                               :show-overflow-tooltip="(item === 'op_full_name' || item === 'op_name'
+                               || item === 'op_type') ? false : true">
                 <template slot="header">
                   <div class="custom-label"
-                       :title="(item==='op_total_time'||item==='op_avg_time'||item==='cuda_activity_cost_time')
-                       ?`${item} (${$t('profiling.gpuunit')})`:item">
-                    {{(item==='op_total_time'||item==='op_avg_time'||item==='cuda_activity_cost_time')
-                    ?`${item} (${$t('profiling.gpuunit')})`:item}}
+                       :title="getHeaderField(item)">
+                    {{getHeaderField(item)}}
                   </div>
                 </template>
               </el-table-column>
@@ -180,6 +183,7 @@ limitations under the License.
                :class="{fullScreen:fullScreenKernel}"
                v-if="coreCharts.data.length">
             <div>
+              <div class="chart-title">{{$t('profiling.chartTitle')}}</div>
             </div>
             <div class="cl-profiler-echarts">
               <div class
@@ -225,13 +229,14 @@ limitations under the License.
                                :property="item"
                                :key="$index"
                                sortable="custom"
-                               show-overflow-tooltip>
+                               :min-width="(item === 'type') ? 100 : (item === 'name' || item === 'op_full_name')
+                                ? 150 : '' "
+                               :show-overflow-tooltip="(item === 'op_full_name' || item === 'name'
+                               ||item === 'type') ? false : true">
                 <template slot="header">
                   <div class="custom-label"
-                       :title="(item==='total_duration'||item==='avg_duration'||item==='max_duration'
-                       || item==='min_duration')?`${item} (${$t('profiling.gpuunit')})`:item">
-                    {{(item==='total_duration'||item==='avg_duration'||item==='max_duration'||item==='min_duration')
-                    ?`${item} (${$t('profiling.gpuunit')})`:item}}
+                       :title="getHeaderField(item)">
+                    {{getHeaderField(item)}}
                   </div>
                 </template>
               </el-table-column>
@@ -363,6 +368,29 @@ export default {
     this.$bus.$off('collapse');
   },
   methods: {
+    getHeaderField(key) {
+      const maps = {
+        total_time: 'total_time (us)',
+        avg_time: `avg_time (${this.$t('profiling.gpuunit')})`,
+        op_total_time: 'op_total_time (us)',
+        op_avg_time: `op_avg_time (${this.$t('profiling.gpuunit')})`,
+        max_duration: 'max_duration (us)',
+        min_duration: 'min_duration (us)',
+        avg_duration: 'avg_duration (us)',
+        total_duration: 'total_duration (us)',
+        proportion: 'total_time_proportion (%)',
+        cuda_activity_cost_time: 'cuda_activity_cost_time (us)',
+        cuda_activity_call_count: `cuda_activity_call_count (${this.$t(
+            'profiling.countUnit',
+        )})`,
+        type_occurrences: `type_occurrences (${this.$t(
+            'profiling.countUnit',
+        )})`,
+        op_occurrences: `op_occurrences (${this.$t('profiling.countUnit')})`,
+        occurrences: `occurrences (${this.$t('profiling.countUnit')})`,
+      };
+      return maps[key] ? maps[key] : key;
+    },
     resizeEchart() {
       if (this.operatorCharts.chartDom) {
         setTimeout(() => {
@@ -400,7 +428,16 @@ export default {
         this.getCoreList(true);
       }
     },
-    opTypeSortChange() {
+    /**
+     * Operators type sort
+     * @param {Object} sort Sort data
+     */
+    opTypeSortChange(sort) {
+      this.op_sort_condition = {
+        name: sort.prop,
+        type: sort.order,
+      };
+
       this.$nextTick(() => {
         const item = this.$refs['expandChild'];
         if (item && this.curActiveRow.rowItem) {
@@ -856,6 +893,8 @@ export default {
     setOption(chart) {
       const option = {};
       const maxLabelLength = 20;
+      const maxTooltipLen = 50;
+
       if (!chart.type) {
         option.legend = {
           data: [],
@@ -871,17 +910,25 @@ export default {
                     : chart.data[i].name;
                 legendStr = `{a|${i + 1}}{b|${name}  ${chart.data[
                     i
-                ].value.toFixed(3)}}\n{c|${
-                  chart.data[i].percent
-                    ? chart.data[i].percent.toFixed(2) + '%'
-                    : ''
-                }}`;
+                ].value.toFixed(3)}}\n{c|}`;
               }
             }
             return legendStr;
           },
           tooltip: {
             show: true,
+            formatter: (params) => {
+              let name = params.name;
+              name = name.replace(/</g, '< ');
+
+              const breakCount = Math.ceil(name.length / maxTooltipLen);
+              let str = '';
+              for (let i = 0; i < breakCount; i++) {
+                const temp = name.substr(i * maxTooltipLen, maxTooltipLen);
+                str += str ? '<br/>' + temp : temp;
+              }
+              return str;
+            },
           },
           itemWidth: 18,
           itemHeight: 18,
@@ -912,7 +959,16 @@ export default {
         option.tooltip = {
           trigger: 'item',
           formatter: (params) => {
-            return `${params.marker} ${params.data.name} ${params.percent}%`;
+            const name = params.data.name.replace(/</g, '< ');
+            const strTemp = `${name} ${params.percent.toFixed(2) + '%'}`;
+
+            const breakCount = Math.ceil(strTemp.length / maxTooltipLen);
+            let str = '';
+            for (let i = 0; i < breakCount; i++) {
+              const temp = strTemp.substr(i * maxTooltipLen, maxTooltipLen);
+              str += str ? '<br/>' + temp : temp;
+            }
+            return str;
           },
           confine: true,
         };
@@ -1049,225 +1105,228 @@ export default {
 <style lang="scss">
 .operator {
   height: 100%;
-}
-.clear {
-  clear: both;
-}
-.el-tabs__item {
-  color: #6c7280;
-  font-size: 16px;
-  line-height: 36px;
-  height: 36px;
-}
-.el-tabs__item.is-active {
-  color: #00a5a7;
-  font-weight: bold;
-}
-.operator-title {
-  padding: 0 15px;
-  font-size: 16px;
-  font-weight: bold;
-}
-.cl-profiler {
-  height: calc(100% - 21px);
-  overflow-y: auto;
-  width: 100%;
-  background: #fff;
-  padding: 0 16px;
-  overflow: hidden;
-  .custom-label {
-    max-width: calc(100% - 25px);
-    padding: 0;
-    vertical-align: middle;
-  }
-  .el-tabs {
-    height: 100%;
-    .el-tabs__header {
-      margin-bottom: 10px;
-    }
-  }
-  .el-tabs__content {
-    height: calc(100% - 46px);
-  }
-  .el-tab-pane {
-    height: 100%;
+  .clear {
+    clear: both;
   }
-  .cl-search-box {
-    float: right;
-    margin-bottom: 10px;
-    margin-right: 20px;
+  .el-tabs__item {
+    color: #6c7280;
+    line-height: 36px;
+    height: 36px;
   }
-  .cl-profiler-top {
-    height: 45%;
+  .el-tabs__item.is-active {
+    color: #00a5a7;
+    font-weight: bold;
   }
-  .cl-profiler-top.fullScreen {
-    display: none;
-  }
-  .cl-profiler-bottom {
-    height: 55%;
-    padding-top: 10px;
-    .fullScreen {
-      float: right;
-      margin-top: 5px;
-      cursor: pointer;
-    }
+  .operator-title {
+    padding: 0 15px;
+    font-size: 16px;
+    font-weight: bold;
   }
-  .cl-profiler-bottom.fullScreen {
-    height: 100%;
-  }
-  .core-search-type {
-    float: right;
-    width: 130px;
-    margin-right: 10px;
-  }
-  .cl-profiler-echarts {
+  .cl-profiler {
+    height: calc(100% - 21px);
+    overflow-y: auto;
     width: 100%;
-    height: calc(100% - 32px);
-    display: inline-block;
-    position: relative;
-    overflow: auto;
-    #core-echarts,
-    #operator-echarts {
-      width: 100%;
+    background: #fff;
+    padding: 0 16px;
+    overflow: hidden;
+    .custom-label {
+      max-width: calc(100% - 25px);
+      padding: 0;
+      vertical-align: middle;
+    }
+    .el-tabs {
       height: 100%;
-      min-width: 1300px;
-      min-height: 306px;
-      overflow: hidden;
+      .el-tabs__header {
+        margin-bottom: 10px;
+      }
+    }
+    .el-tabs__content {
+      height: calc(100% - 46px);
+    }
+    .el-tab-pane {
+      height: 100%;
+    }
+    .cl-search-box {
+      float: right;
+      margin-bottom: 10px;
+      margin-right: 20px;
     }
-  }
-  .core-tab {
     .cl-profiler-top {
-      height: calc(45% - 40px);
+      height: 45%;
+      .chart-title {
+        float: left;
+        font-weight: bold;
+      }
     }
-    .cl-profiler-bottom {
-      height: calc(55% + 40px);
+    .cl-profiler-top.fullScreen {
+      display: none;
     }
-    .cl-profiler-echarts {
-      height: 100%;
+    .cl-profiler-bottom {
+      height: 55%;
+      padding-top: 10px;
+      .fullScreen {
+        float: right;
+        margin-top: 5px;
+        cursor: pointer;
+      }
     }
     .cl-profiler-bottom.fullScreen {
       height: 100%;
     }
-  }
-  .chart-radio-group {
-    float: right;
-  }
-  .el-radio-group {
-    .el-radio-button--small .el-radio-button__inner {
-      height: 30px;
-      width: 70px;
-      font-size: 14px;
-      line-height: 10px;
+    .core-search-type {
+      float: right;
+      width: 130px;
+      margin-right: 10px;
     }
-  }
-  .cl-profiler-bar {
-    display: inline-block;
-    width: calc(100% - 400px);
-    vertical-align: top;
-    height: 100%;
-    padding: 20px;
-  }
-  .cl-profiler-table-type {
-    display: inline-block;
-    width: calc(100% - 400px);
-    vertical-align: top;
-    height: 100%;
-  }
-  .el-pagination {
-    margin: 7px 0;
-    float: right;
-  }
-  .details-data-list {
-    .el-table {
-      th {
-        padding: 10px 0;
-        border-top: 1px solid #ebeef5;
-        .cell {
-          border-left: 1px solid #d9d8dd;
-          height: 14px;
-          line-height: 14px;
-        }
+    .cl-profiler-echarts {
+      width: 100%;
+      height: calc(100% - 32px);
+      display: inline-block;
+      position: relative;
+      overflow: auto;
+      #core-echarts,
+      #operator-echarts {
+        width: 100%;
+        height: 100%;
+        min-width: 1300px;
+        min-height: 306px;
+        overflow: hidden;
       }
-      th:first-child {
-        .cell {
-          border-left: none;
-        }
+    }
+    .core-tab {
+      .cl-profiler-top {
+        height: 45%;
       }
-      th:nth-child(2),
-      td:nth-child(2) {
-        max-width: 30%;
+      .cl-profiler-bottom {
+        height: 55%;
       }
-      td {
-        padding: 8px 0;
+      .cl-profiler-echarts {
+        height: calc(100% - 32px);
+      }
+      .cl-profiler-bottom.fullScreen {
+        height: 100%;
       }
     }
-    .el-table__row--level-0 td:first-child:after {
-      width: 20px;
-      height: 1px;
-      background: #ebeef5;
-      z-index: 11;
-      position: absolute;
-      left: 0;
-      bottom: -1px;
-      content: '';
-      display: block;
+    .chart-radio-group {
+      float: right;
     }
-    .el-table__row--level-1 {
-      td {
-        padding: 4px 0;
-        position: relative;
+    .el-radio-group {
+      .el-radio-button--small .el-radio-button__inner {
+        height: 30px;
+        width: 70px;
+        font-size: 14px;
+        line-height: 10px;
       }
-      td:first-child::before {
-        width: 42px;
-        background: #f0fdfd;
-        border-right: 2px #00a5a7 solid;
-        z-index: 10;
+    }
+    .cl-profiler-bar {
+      display: inline-block;
+      width: calc(100% - 400px);
+      vertical-align: top;
+      height: 100%;
+      padding: 20px;
+    }
+    .cl-profiler-table-type {
+      display: inline-block;
+      width: calc(100% - 400px);
+      vertical-align: top;
+      height: 100%;
+    }
+    .el-pagination {
+      margin: 7px 0;
+      float: right;
+    }
+    .details-data-list {
+      .el-table {
+        th {
+          padding: 10px 0;
+          border-top: 1px solid #ebeef5;
+          .cell {
+            border-left: 1px solid #d9d8dd;
+            height: 14px;
+            line-height: 14px;
+          }
+        }
+        th:first-child {
+          .cell {
+            border-left: none;
+          }
+        }
+        th:nth-child(2),
+        td:nth-child(2) {
+          max-width: 30%;
+        }
+        td {
+          padding: 8px 0;
+        }
+      }
+      .el-table__row--level-0 td:first-child:after {
+        width: 20px;
+        height: 1px;
+        background: #ebeef5;
+        z-index: 11;
         position: absolute;
         left: 0;
-        top: -1px;
-        bottom: 0px;
+        bottom: -1px;
         content: '';
         display: block;
       }
-    }
+      .el-table__row--level-1 {
+        td {
+          padding: 4px 0;
+          position: relative;
+        }
+        td:first-child::before {
+          width: 42px;
+          background: #f0fdfd;
+          border-right: 2px #00a5a7 solid;
+          z-index: 10;
+          position: absolute;
+          left: 0;
+          top: -1px;
+          bottom: 0px;
+          content: '';
+          display: block;
+        }
+      }
 
-    .el-table__row--level-1:first-child {
-      td:first-child::before {
-        bottom: 0;
+      .el-table__row--level-1:first-child {
+        td:first-child::before {
+          bottom: 0;
+        }
       }
     }
-  }
-  .el-table__expanded-cell[class*='cell'] {
-    padding: 0;
-  }
-  .expand-table {
-    position: relative;
-    padding-left: 44px;
-  }
-  .expand-table::before {
-    content: '';
-    position: absolute;
-    left: 0;
-    top: 0;
-    height: 100%;
-    background: #f0fdfd;
-    width: 42px;
-    border-right: 2px #00a5a7 solid;
-  }
-  .el-radio-button:last-child .el-radio-button__inner,
-  .el-radio-button:first-child .el-radio-button__inner {
-    border-radius: 0;
-  }
-  .image-noData {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-    p {
-      font-size: 16px;
-      padding-top: 10px;
+    .el-table__expanded-cell[class*='cell'] {
+      padding: 0;
+    }
+    .expand-table {
+      position: relative;
+      padding-left: 44px;
+    }
+    .expand-table::before {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 0;
+      height: 100%;
+      background: #f0fdfd;
+      width: 42px;
+      border-right: 2px #00a5a7 solid;
+    }
+    .el-radio-button:last-child .el-radio-button__inner,
+    .el-radio-button:first-child .el-radio-button__inner {
+      border-radius: 0;
+    }
+    .image-noData {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-direction: column;
+      p {
+        font-size: 16px;
+        padding-top: 10px;
+      }
     }
   }
 }
diff --git a/mindinsight/ui/src/views/profiling/data-process.vue b/mindinsight/ui/src/views/profiling/data-process.vue
index 8728450e7409c916c826245208a7823e2079d065..663f5d4e4332fe3651cf409985619bab4ca89081 100644
--- a/mindinsight/ui/src/views/profiling/data-process.vue
+++ b/mindinsight/ui/src/views/profiling/data-process.vue
@@ -1293,7 +1293,7 @@ export default {
 .md-wrap {
   height: 100%;
   background: #fff;
-  padding: 0 32px;
+  padding: 0 16px;
   .title {
     font-size: 16px;
     font-weight: bold;
@@ -1308,6 +1308,10 @@ export default {
       height: 100%;
     }
   }
+  .el-tabs__item.is-active {
+    color: #00a5a7;
+    font-weight: bold;
+  }
   .md-top {
     height: 20%;
     font-size: 0;
diff --git a/mindinsight/ui/src/views/profiling/operator.vue b/mindinsight/ui/src/views/profiling/operator.vue
index e2b284eaae77c9acd6d55c5cef3647d0f021bbda..b5549537466344eca1ad1fa40cbc0eeb6646dca9 100644
--- a/mindinsight/ui/src/views/profiling/operator.vue
+++ b/mindinsight/ui/src/views/profiling/operator.vue
@@ -25,6 +25,7 @@ limitations under the License.
                :class="{fullScreen:fullScreen}"
                v-if="coreCharts.data.length">
             <div>
+              <div class="chart-title">{{$t('profiling.chartTitle')}}</div>
               <el-radio-group class="chart-radio-group"
                               v-model="coreCharts.type"
                               @change="coreChartChange"
@@ -105,8 +106,8 @@ limitations under the License.
                                        show-overflow-tooltip>
                         <template slot="header">
                           <div class="custom-label"
-                               :title="ele==='avg_execution_time'?`${ele} (${$t('profiling.unit')})`:ele">
-                            {{ele==='avg_execution_time'?`${ele} (${$t('profiling.unit')})`:ele}}
+                               :title="getHeaderField(ele)">
+                            {{getHeaderField(ele)}}
                           </div>
                         </template>
                       </el-table-column>
@@ -127,8 +128,8 @@ limitations under the License.
                                sortable>
                 <template slot="header">
                   <div class="custom-label"
-                       :title="item==='execution_time'?`${item} (${$t('profiling.unit')})`:item">
-                    {{item==='execution_time'?`${item} (${$t('profiling.unit')})`:item}}
+                       :title="getHeaderField(item)">
+                    {{getHeaderField(item)}}
                   </div>
                 </template>
               </el-table-column>
@@ -151,8 +152,8 @@ limitations under the License.
                                show-overflow-tooltip>
                 <template slot="header">
                   <div class="custom-label"
-                       :title="item==='avg_execution_time'?`${item} (${$t('profiling.unit')})`:item">
-                    {{item==='avg_execution_time'?`${item} (${$t('profiling.unit')})`:item}}
+                       :title="getHeaderField(item)">
+                    {{getHeaderField(item)}}
                   </div>
                 </template>
               </el-table-column>
@@ -209,10 +210,8 @@ limitations under the License.
                                show-overflow-tooltip>
                 <template slot="header">
                   <div class="custom-label"
-                       :title="(item==='total_time' || item==='dispatch_time')?
-                               `${item} (${$t('profiling.unit')})`:item">
-                    {{(item==='total_time' || item==='dispatch_time')?
-                               `${item} (${$t('profiling.unit')})`:item}}
+                       :title="getHeaderField(item)">
+                    {{getHeaderField(item)}}
                   </div>
                 </template>
               </el-table-column>
@@ -359,6 +358,19 @@ export default {
     this.$bus.$off('collapse');
   },
   methods: {
+    getHeaderField(key) {
+      const maps = {
+        execution_time: `execution_time (${this.$t('profiling.unit')})`,
+        avg_execution_time: `avg_execution_time (${this.$t('profiling.unit')})`,
+        execution_frequency: `execution_frequency (${this.$t(
+            'profiling.countUnit',
+        )})`,
+        percent: 'percent (%)',
+        total_time: 'total_time (ms)',
+        dispatch_time: 'dispatch_time (ms)',
+      };
+      return maps[key] ? maps[key] : key;
+    },
     resizeEchart() {
       if (this.coreCharts.chartDom) {
         setTimeout(() => {
@@ -387,7 +399,15 @@ export default {
         this.getCpuList(true);
       }
     },
-    opTypeSortChange() {
+    /**
+     * Operators type sort
+     * @param {Object} sort Sort data
+     */
+    opTypeSortChange(sort) {
+      this.op_sort_condition = {
+        name: sort.prop,
+        type: sort.order,
+      };
       this.$nextTick(() => {
         const item = this.$refs['expandChild'];
         if (item && this.curActiveRow.rowItem) {
@@ -837,6 +857,8 @@ export default {
     setOption(chart) {
       const option = {};
       const maxLabelLength = 20;
+      const maxTooltipLen = 50;
+
       if (!chart.type) {
         option.legend = {
           data: [],
@@ -859,6 +881,18 @@ export default {
           },
           tooltip: {
             show: true,
+            formatter: (params) => {
+              let name = params.name;
+              name = name.replace(/</g, '< ');
+
+              const breakCount = Math.ceil(name.length / maxTooltipLen);
+              let str = '';
+              for (let i = 0; i < breakCount; i++) {
+                const temp = name.substr(i * maxTooltipLen, maxTooltipLen);
+                str += str ? '<br/>' + temp : temp;
+              }
+              return str;
+            },
           },
           itemWidth: 18,
           itemHeight: 18,
@@ -889,7 +923,16 @@ export default {
         option.tooltip = {
           trigger: 'item',
           formatter: (params) => {
-            return `${params.marker} ${params.data.name} ${params.percent}%`;
+            const name = params.data.name.replace(/</g, '< ');
+            const strTemp = `${name} ${params.percent.toFixed(2) + '%'}`;
+
+            const breakCount = Math.ceil(strTemp.length / maxTooltipLen);
+            let str = '';
+            for (let i = 0; i < breakCount; i++) {
+              const temp = strTemp.substr(i * maxTooltipLen, maxTooltipLen);
+              str += str ? '<br/>' + temp : temp;
+            }
+            return str;
           },
           confine: true,
         };
@@ -1101,225 +1144,228 @@ export default {
 <style lang="scss">
 .operator {
   height: 100%;
-}
-.clear {
-  clear: both;
-}
-.el-tabs__item {
-  color: #6c7280;
-  font-size: 16px;
-  line-height: 36px;
-  height: 36px;
-}
-.el-tabs__item.is-active {
-  color: #00a5a7;
-  font-weight: bold;
-}
-.operator-title {
-  padding: 0 15px;
-  font-size: 16px;
-  font-weight: bold;
-}
-.cl-profiler {
-  height: calc(100% - 21px);
-  overflow-y: auto;
-  width: 100%;
-  background: #fff;
-  padding: 0 16px;
-  overflow: hidden;
-  .custom-label {
-    max-width: calc(100% - 25px);
-    padding: 0;
-    vertical-align: middle;
-  }
-  .el-tabs {
-    height: 100%;
-    .el-tabs__header {
-      margin-bottom: 10px;
-    }
-  }
-  .el-tabs__content {
-    height: calc(100% - 46px);
-  }
-  .el-tab-pane {
-    height: 100%;
+  .clear {
+    clear: both;
   }
-  .cl-search-box {
-    float: right;
-    margin-bottom: 10px;
-    margin-right: 20px;
+  .el-tabs__item {
+    color: #6c7280;
+    line-height: 36px;
+    height: 36px;
   }
-  .cl-profiler-top {
-    height: 45%;
+  .el-tabs__item.is-active {
+    color: #00a5a7;
+    font-weight: bold;
   }
-  .cl-profiler-top.fullScreen {
-    display: none;
+  .operator-title {
+    padding: 0 15px;
+    font-size: 16px;
+    font-weight: bold;
   }
-  .cl-profiler-bottom {
-    height: 55%;
-    padding-top: 10px;
-    .fullScreen {
+  .cl-profiler {
+    height: calc(100% - 21px);
+    overflow-y: auto;
+    width: 100%;
+    background: #fff;
+    padding: 0 16px;
+    overflow: hidden;
+    .custom-label {
+      max-width: calc(100% - 25px);
+      padding: 0;
+      vertical-align: middle;
+    }
+    .el-tabs {
+      height: 100%;
+      .el-tabs__header {
+        margin-bottom: 10px;
+      }
+    }
+    .el-tabs__content {
+      height: calc(100% - 46px);
+    }
+    .el-tab-pane {
+      height: 100%;
+    }
+    .cl-search-box {
       float: right;
-      margin-top: 5px;
-      cursor: pointer;
+      margin-bottom: 10px;
+      margin-right: 20px;
     }
-  }
-  .cl-profiler-bottom.fullScreen {
-    height: 100%;
-  }
-  .cpu-tab {
     .cl-profiler-top {
-      height: calc(36% + 32px);
+      height: 45%;
+      .chart-title {
+        float: left;
+        font-weight: bold;
+      }
+    }
+    .cl-profiler-top.fullScreen {
+      display: none;
     }
     .cl-profiler-bottom {
-      height: 100%;
+      height: 55%;
+      padding-top: 10px;
+      .fullScreen {
+        float: right;
+        margin-top: 5px;
+        cursor: pointer;
+      }
     }
-  }
-  .cl-profiler-echarts {
-    width: 100%;
-    height: calc(100% - 32px);
-    display: inline-block;
-    position: relative;
-    overflow: auto;
-    #cpu-echarts,
-    #core-echarts {
-      width: 100%;
+    .cl-profiler-bottom.fullScreen {
       height: 100%;
-      min-width: 1300px;
-      min-height: 306px;
-      overflow: hidden;
-    }
-  }
-  .chart-radio-group {
-    float: right;
-  }
-  .el-radio-group {
-    .el-radio-button--small .el-radio-button__inner {
-      height: 30px;
-      width: 70px;
-      font-size: 14px;
-      line-height: 10px;
     }
-  }
-  .cl-profiler-bar {
-    display: inline-block;
-    width: calc(100% - 400px);
-    vertical-align: top;
-    height: 100%;
-    padding: 20px;
-  }
-  .cl-profiler-table-type {
-    display: inline-block;
-    width: calc(100% - 400px);
-    vertical-align: top;
-    height: 100%;
-  }
-  .el-pagination {
-    margin: 7px 0;
-    float: right;
-  }
-  .details-data-list {
-    .el-table {
-      th {
-        padding: 10px 0;
-        border-top: 1px solid #ebeef5;
-        .cell {
-          border-left: 1px solid #d9d8dd;
-          height: 14px;
-          line-height: 14px;
-        }
+    .cpu-tab {
+      .cl-profiler-top {
+        height: calc(36% + 32px);
       }
-      th:first-child {
-        .cell {
-          border-left: none;
-        }
+      .cl-profiler-bottom {
+        height: 100%;
       }
-      th:nth-child(2),
-      td:nth-child(2) {
-        max-width: 30%;
+    }
+    .cl-profiler-echarts {
+      width: 100%;
+      height: calc(100% - 32px);
+      display: inline-block;
+      position: relative;
+      overflow: auto;
+      #cpu-echarts,
+      #core-echarts {
+        width: 100%;
+        height: 100%;
+        min-width: 1300px;
+        min-height: 306px;
+        overflow: hidden;
       }
-      td {
-        padding: 8px 0;
+    }
+    .chart-radio-group {
+      float: right;
+    }
+    .el-radio-group {
+      .el-radio-button--small .el-radio-button__inner {
+        height: 30px;
+        width: 70px;
+        font-size: 14px;
+        line-height: 10px;
       }
     }
-    .el-table__row--level-0 td:first-child:after {
-      width: 20px;
-      height: 1px;
-      background: #ebeef5;
-      z-index: 11;
-      position: absolute;
-      left: 0;
-      bottom: -1px;
-      content: '';
-      display: block;
+    .cl-profiler-bar {
+      display: inline-block;
+      width: calc(100% - 400px);
+      vertical-align: top;
+      height: 100%;
+      padding: 20px;
+    }
+    .cl-profiler-table-type {
+      display: inline-block;
+      width: calc(100% - 400px);
+      vertical-align: top;
+      height: 100%;
+    }
+    .el-pagination {
+      margin: 7px 0;
+      float: right;
     }
-    .el-table__row--level-1 {
-      td {
-        padding: 4px 0;
-        position: relative;
+    .details-data-list {
+      .el-table {
+        th {
+          padding: 10px 0;
+          border-top: 1px solid #ebeef5;
+          .cell {
+            border-left: 1px solid #d9d8dd;
+            height: 14px;
+            line-height: 14px;
+          }
+        }
+        th:first-child {
+          .cell {
+            border-left: none;
+          }
+        }
+        th:nth-child(2),
+        td:nth-child(2) {
+          max-width: 30%;
+        }
+        td {
+          padding: 8px 0;
+        }
       }
-      td:first-child::before {
-        width: 42px;
-        background: #f0fdfd;
-        border-right: 2px #00a5a7 solid;
-        z-index: 10;
+      .el-table__row--level-0 td:first-child:after {
+        width: 20px;
+        height: 1px;
+        background: #ebeef5;
+        z-index: 11;
         position: absolute;
         left: 0;
-        top: -1px;
-        bottom: 0px;
+        bottom: -1px;
         content: '';
         display: block;
       }
-    }
+      .el-table__row--level-1 {
+        td {
+          padding: 4px 0;
+          position: relative;
+        }
+        td:first-child::before {
+          width: 42px;
+          background: #f0fdfd;
+          border-right: 2px #00a5a7 solid;
+          z-index: 10;
+          position: absolute;
+          left: 0;
+          top: -1px;
+          bottom: 0px;
+          content: '';
+          display: block;
+        }
+      }
 
-    .el-table__row--level-1:first-child {
-      td:first-child::before {
-        bottom: 0;
+      .el-table__row--level-1:first-child {
+        td:first-child::before {
+          bottom: 0;
+        }
+      }
+      .el-dialog__title {
+        font-weight: bold;
+      }
+      .el-dialog__body {
+        max-height: 500px;
+        padding-top: 10px;
+        overflow: auto;
+        .details-data-title {
+          margin-bottom: 20px;
+        }
       }
     }
-    .el-dialog__title {
-      font-weight: bold;
+    .el-table__expanded-cell[class*='cell'] {
+      padding: 0;
     }
-    .el-dialog__body {
-      max-height: 500px;
-      padding-top: 10px;
-      overflow: auto;
-      .details-data-title {
-        margin-bottom: 20px;
-      }
+    .expand-table {
+      position: relative;
+      padding-left: 44px;
     }
-  }
-  .el-table__expanded-cell[class*='cell'] {
-    padding: 0;
-  }
-  .expand-table {
-    position: relative;
-    padding-left: 44px;
-  }
-  .expand-table::before {
-    content: '';
-    position: absolute;
-    left: 0;
-    top: 0;
-    height: 100%;
-    background: #f0fdfd;
-    width: 42px;
-    border-right: 2px #00a5a7 solid;
-  }
-  .el-radio-button:last-child .el-radio-button__inner,
-  .el-radio-button:first-child .el-radio-button__inner {
-    border-radius: 0;
-  }
-  .image-noData {
-    width: 100%;
-    height: 450px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-    p {
-      font-size: 16px;
-      padding-top: 10px;
+    .expand-table::before {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 0;
+      height: 100%;
+      background: #f0fdfd;
+      width: 42px;
+      border-right: 2px #00a5a7 solid;
+    }
+    .el-radio-button:last-child .el-radio-button__inner,
+    .el-radio-button:first-child .el-radio-button__inner {
+      border-radius: 0;
+    }
+    .image-noData {
+      width: 100%;
+      height: 450px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-direction: column;
+      p {
+        font-size: 16px;
+        padding-top: 10px;
+      }
     }
   }
 }
diff --git a/mindinsight/ui/src/views/train-manage/summary-manage.vue b/mindinsight/ui/src/views/train-manage/summary-manage.vue
index 5aef9f9350b517ea6ee418f87fd806687713eb75..254db56c8f972fa27de1a88d2e4b3d116b77ed66 100644
--- a/mindinsight/ui/src/views/train-manage/summary-manage.vue
+++ b/mindinsight/ui/src/views/train-manage/summary-manage.vue
@@ -44,7 +44,8 @@ limitations under the License.
                     stripe
                     height="100%"
                     tooltip-effect="light"
-                    class="list-el-table">
+                    class="list-el-table"
+                    ref="table">
             <el-table-column width="50"
                              type=index
                              :label="$t('summaryManage.sorting')">
@@ -132,12 +133,19 @@ export default {
         data: null,
         type: 0,
       },
+      tableDom: null,
     };
   },
   computed: {},
   watch: {},
   destroyed() {
+    window.removeEventListener('resize', this.closeMenu);
+    window.removeEventListener('mousewheel', this.closeMenu);
+    if (this.tableDom) {
+      this.tableDom.removeEventListener('scroll', this.closeMenu);
+    }
     document.onclick = null;
+    document.onscroll = null;
   },
   activated() {},
   mounted() {
@@ -145,6 +153,12 @@ export default {
     this.$nextTick(() => {
       this.init();
     });
+    setTimeout(() => {
+      window.addEventListener('resize', this.closeMenu, false);
+      window.addEventListener('mousewheel', this.closeMenu, false);
+      this.tableDom = this.$refs.table.bodyWrapper;
+      this.tableDom.addEventListener('scroll', this.closeMenu, false);
+    }, 300);
   },
 
   methods: {
@@ -152,6 +166,9 @@ export default {
       document.onclick = () => {
         this.contextMenu.show = false;
       };
+      document.onscroll = () => {
+        this.contextMenu.show = false;
+      };
 
       const params = {
         limit: this.pagination.pageSize,
@@ -238,10 +255,13 @@ export default {
     },
 
     rightClick(row, event, type) {
+      const maxWidth = 175;
       this.contextMenu.data = row;
       this.contextMenu.type = type;
-      this.contextMenu.left = event.x + 'px';
-      this.contextMenu.top = event.y + 'px';
+      const width = document.getElementById('cl-summary-manage').clientWidth;
+      const left = Math.min(width - maxWidth, event.clientX + window.scrollX);
+      this.contextMenu.left = left + 'px';
+      this.contextMenu.top = event.clientY + window.scrollY + 'px';
       this.contextMenu.show = true;
     },
 
@@ -277,6 +297,9 @@ export default {
         window.open(routeUrl.href, '_blank');
       }
     },
+    closeMenu() {
+      this.contextMenu.show = false;
+    },
   },
   components: {},
 };