From 67019a3c346f210eff6e22a27346027d9e0e42da Mon Sep 17 00:00:00 2001
From: ph <panhui3@huawei.com>
Date: Tue, 8 Sep 2020 11:00:27 +0800
Subject: [PATCH] UI remove hardware visual

---
 mindinsight/ui/src/assets/images/cpu-bg.svg   |  22 -
 mindinsight/ui/src/assets/images/occupy.svg   |  11 -
 .../ui/src/components/gridTableSimple.vue     |  57 +-
 mindinsight/ui/src/components/header.vue      |  92 +-
 .../ui/src/components/histogramUnit.vue       |   2 +-
 mindinsight/ui/src/locales/en-us.json         |  43 -
 mindinsight/ui/src/locales/zh-cn.json         |  43 -
 mindinsight/ui/src/router.js                  |   4 -
 .../ui/src/services/request-service.js        |   6 -
 mindinsight/ui/src/store.js                   |  13 -
 .../views/train-manage/hardware-visual.vue    | 969 ------------------
 .../ui/src/views/train-manage/histogram.vue   |   2 +-
 12 files changed, 44 insertions(+), 1220 deletions(-)
 delete mode 100644 mindinsight/ui/src/assets/images/cpu-bg.svg
 delete mode 100644 mindinsight/ui/src/assets/images/occupy.svg
 delete mode 100644 mindinsight/ui/src/views/train-manage/hardware-visual.vue

diff --git a/mindinsight/ui/src/assets/images/cpu-bg.svg b/mindinsight/ui/src/assets/images/cpu-bg.svg
deleted file mode 100644
index eee390c..0000000
--- a/mindinsight/ui/src/assets/images/cpu-bg.svg
+++ /dev/null
@@ -1,22 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="1920px" height="1080px" viewBox="0 0 1920 1080" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 63.1 (92452) - https://sketch.com -->
-    <title>矩形</title>
-    <desc>Created with Sketch.</desc>
-    <defs>
-        <polygon id="path-1" points="0 0 1920 0 1920 1080 0 1080"></polygon>
-        <pattern id="pattern-3" width="16.4850993" height="16.4850993" x="-16.4850993" y="-16.4850993" patternUnits="userSpaceOnUse">
-            <use xlink:href="#image-4" transform="scale(0.34343957,0.34343957)"></use>
-        </pattern>
-        <image id="image-4" width="48" height="48" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAEGWlDQ1BrQ0dDb2xvclNwYWNlR2VuZXJpY1JHQgAAOI2NVV1oHFUUPrtzZyMkzlNsNIV0qD8NJQ2TVjShtLp/3d02bpZJNtoi6GT27s6Yyc44M7v9oU9FUHwx6psUxL+3gCAo9Q/bPrQvlQol2tQgKD60+INQ6Ium65k7M5lpurHeZe58853vnnvuuWfvBei5qliWkRQBFpquLRcy4nOHj4g9K5CEh6AXBqFXUR0rXalMAjZPC3e1W99Dwntf2dXd/p+tt0YdFSBxH2Kz5qgLiI8B8KdVy3YBevqRHz/qWh72Yui3MUDEL3q44WPXw3M+fo1pZuQs4tOIBVVTaoiXEI/MxfhGDPsxsNZfoE1q66ro5aJim3XdoLFw72H+n23BaIXzbcOnz5mfPoTvYVz7KzUl5+FRxEuqkp9G/Ajia219thzg25abkRE/BpDc3pqvphHvRFys2weqvp+krbWKIX7nhDbzLOItiM8358pTwdirqpPFnMF2xLc1WvLyOwTAibpbmvHHcvttU57y5+XqNZrLe3lE/Pq8eUj2fXKfOe3pfOjzhJYtB/yll5SDFcSDiH+hRkH25+L+sdxKEAMZahrlSX8ukqMOWy/jXW2m6M9LDBc31B9LFuv6gVKg/0Szi3KAr1kGq1GMjU/aLbnq6/lRxc4XfJ98hTargX++DbMJBSiYMIe9Ck1YAxFkKEAG3xbYaKmDDgYyFK0UGYpfoWYXG+fAPPI6tJnNwb7ClP7IyF+D+bjOtCpkhz6CFrIa/I6sFtNl8auFXGMTP34sNwI/JhkgEtmDz14ySfaRcTIBInmKPE32kxyyE2Tv+thKbEVePDfW/byMM1Kmm0XdObS7oGD/MypMXFPXrCwOtoYjyyn7BV29/MZfsVzpLDdRtuIZnbpXzvlf+ev8MvYr/Gqk4H/kV/G3csdazLuyTMPsbFhzd1UabQbjFvDRmcWJxR3zcfHkVw9GfpbJmeev9F08WW8uDkaslwX6avlWGU6NRKz0g/SHtCy9J30o/ca9zX3Kfc19zn3BXQKRO8ud477hLnAfc1/G9mrzGlrfexZ5GLdn6ZZrrEohI2wVHhZywjbhUWEy8icMCGNCUdiBlq3r+xafL549HQ5jH+an+1y+LlYBifuxAvRN/lVVVOlwlCkdVm9NOL5BE4wkQ2SMlDZU97hX86EilU/lUmkQUztTE6mx1EEPh7OmdqBtAvv8HdWpbrJS6tJj3n0CWdM6busNzRV3S9KTYhqvNiqWmuroiKgYhshMjmhTh9ptWhsF7970j/SbMrsPE1suR5z7DMC+P/Hs+y7ijrQAlhyAgccjbhjPygfeBTjzhNqy28EdkUh8C+DU9+z2v/oyeH791OncxHOs5y2AtTc7nb/f73TWPkD/qwBnjX8BoJ98VQNcC+8AAAFFSURBVGgF7djbDYMwDAXQBjEMYqyqY1WMxTppLiJIQIA8ariWkp8IPuweO60am67r7MstY8wwjuPH7dMz3uUua63p+/7r9rePIRW/9QmQzCV9ub0YgSIgzhxvQkjFb1EZBAdEKolkfJTqtnb7bv/zOJm58moRE0AzYgFoRawAGhE7gDZEEKAJcQjQgjgFaEBcAtgRUQBmRDSAFZEEYEQkA9gQWQAmRDaABVEEYEAUAx5H4EaGOyw+SMl66mbXzNOD4k6gCPNUY/CFwF1YOn5zRxJJRINqaUbUuZA/79sd3wm3xIdbdS60rXzo2XVCbO60/HxKJgFKKv4CkEziuyKBWAE0InYAbYggQBPiEKAFcQrQgLgEsCOiAMyIaAArIgnAiEgGsCGyAEyIbAALogjAgCgGPI7AX9w6F3JtqHMhnMWLFSrSD9jOnakVHpZYAAAAAElFTkSuQmCC"></image>
-    </defs>
-    <g id="硬件资源可视-特性文档" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <mask id="mask-2" fill="white">
-            <use xlink:href="#path-1"></use>
-        </mask>
-        <g id="矩形">
-            <use fill="#F2F5FC" xlink:href="#path-1"></use>
-            <use fill-opacity="0.2" fill="url(#pattern-3)" style="mix-blend-mode: multiply;" xlink:href="#path-1"></use>
-        </g>
-    </g>
-</svg>
\ No newline at end of file
diff --git a/mindinsight/ui/src/assets/images/occupy.svg b/mindinsight/ui/src/assets/images/occupy.svg
deleted file mode 100644
index 5964b1e..0000000
--- a/mindinsight/ui/src/assets/images/occupy.svg
+++ /dev/null
@@ -1,11 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="197px" height="197px" viewBox="0 0 197 197" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 63.1 (92452) - https://sketch.com -->
-    <title>设备占比</title>
-    <desc>Created with Sketch.</desc>
-    <g id="硬件资源可视-特性文档" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="设备占比" fill="#FA9841" fill-rule="nonzero">
-            <path d="M98.4375,0.1375 C44.1479091,0.1375 0.1375,44.1479091 0.1375,98.4375 C0.1375,152.727091 44.1479091,196.7375 98.4375,196.7375 C152.727091,196.7375 196.7375,152.727091 196.7375,98.4375 C196.682379,44.1707574 152.704243,0.192621163 98.4375,0.1375 Z M103.4375,15.4375 C121.974914,16.606052 139.582848,23.9661683 153.4375,36.3375 L103.4375,86.3375 L103.4375,15.3375 L103.4375,15.4375 Z M15.1374914,98.4375 C15.2134747,54.4129965 49.495318,18.0295843 93.4375,15.3375 L93.4375,98.4375 C93.46687,99.7540728 94.0043749,101.008251 94.9375,101.9375 L153.637491,160.6375 C129.148862,182.422768 94.1517029,187.800527 64.2521242,174.372702 C34.3525455,160.944877 15.1226403,131.21388 15.1374914,98.4375 Z M160.7375,153.6375 L105.5375,98.4375 L160.7375,43.2375 C188.850198,74.6684524 188.850198,122.206548 160.7375,153.6375 Z" id="形状"></path>
-        </g>
-    </g>
-</svg>
\ No newline at end of file
diff --git a/mindinsight/ui/src/components/gridTableSimple.vue b/mindinsight/ui/src/components/gridTableSimple.vue
index 3a26b4c..5bee123 100644
--- a/mindinsight/ui/src/components/gridTableSimple.vue
+++ b/mindinsight/ui/src/components/gridTableSimple.vue
@@ -67,7 +67,7 @@ limitations under the License.
              :title="$t('scalar.fullScreen')"
              @click="toggleFullScreen"
              :class="fullScreen ? 'active-color' : ''">
-          <span><i class="el-icon-full-screen"></i></span>
+          <i class="el-icon-full-screen"></i>
         </div>
       </div>
     </div>
@@ -159,6 +159,7 @@ export default {
      * @param {String} filterStr Dimension String
      */
     initializeFilterArr(dimension, filterStr) {
+      this.filterCorrect = true;
       if (!filterStr) {
         this.filterArr = [];
         return;
@@ -223,11 +224,13 @@ export default {
       ) {
         return value;
       } else if (value < 0) {
-        return `<span class="table-item-span" style="background:rgba(94, 124, 224, ${value /
-          this.statistics.min})">${value}</span>`;
+        return `<span class="table-item-span" style="background:rgba(227, 125, 41, ${
+          value / this.statistics.min
+        })">${value}</span>`;
       } else {
-        return `<span class="table-item-span" style="background:rgba(246, 111, 106, ${value /
-          this.statistics.max})">${value}</span>`;
+        return `<span class="table-item-span" style="background:rgba(0, 165, 167, ${
+          value / this.statistics.max
+        })">${value}</span>`;
       }
     },
     /**
@@ -292,9 +295,8 @@ export default {
     },
     /**
      * accuracy changed
-     * @param {Number} value The value after changed
      */
-    accuracyChange(value) {
+    accuracyChange() {
       this.formateGridArray();
       if (!this.requestError && !this.incorrectData) {
         this.updateGrid();
@@ -416,7 +418,6 @@ export default {
 </script>
 <style lang="scss">
 .cl-slickgrid-container {
-  width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
@@ -426,6 +427,36 @@ export default {
     .grid-item {
       width: 100%;
       height: 100%;
+      ::-webkit-scrollbar-button {
+        z-index: 200;
+        width: 10px;
+        height: 10px;
+        background: #fff;
+        cursor: pointer;
+      }
+      ::-webkit-scrollbar-button:horizontal:single-button:start {
+        background-image: url('../assets/images/scroll-btn-left.png');
+        background-position: center;
+      }
+      ::-webkit-scrollbar-button:horizontal:single-button:end {
+        background-image: url('../assets/images/scroll-btn-right.png');
+        background-position: center;
+      }
+      ::-webkit-scrollbar-button:vertical:single-button:start {
+        background-image: url('../assets/images/scroll-btn-up.png');
+        background-position: center;
+      }
+      ::-webkit-scrollbar-button:vertical:single-button:end {
+        background-image: url('../assets/images/scroll-btn-down.png');
+        background-position: center;
+      }
+      ::-webkit-scrollbar-thumb {
+        background-color: #bac5cc;
+      }
+      ::-webkit-scrollbar {
+        width: 10px;
+        height: 10px;
+      }
     }
     .error-msg-container {
       width: 100%;
@@ -496,15 +527,7 @@ export default {
   border-left: none;
   text-align: center;
 }
-.slick-viewport-left {
-  overflow: hidden !important;
-}
-.slick-viewport-left .slick-row {
-  background-color: white !important;
-  ::-webkit-scrollbar {
-    width: 0px;
-  }
-}
+
 .ui-widget-content {
   background: none;
 }
diff --git a/mindinsight/ui/src/components/header.vue b/mindinsight/ui/src/components/header.vue
index a59e33c..6d1ee75 100644
--- a/mindinsight/ui/src/components/header.vue
+++ b/mindinsight/ui/src/components/header.vue
@@ -44,10 +44,6 @@ limitations under the License.
                         :title='$t("summaryManage.comparePlate")'>
             {{$t("summaryManage.comparePlate")}}
           </el-menu-item>
-          <el-menu-item index="/hardware-visual"
-                        :title='$t("summaryManage.hardwareVisual")'>
-            {{$t("summaryManage.hardwareVisual")}}
-          </el-menu-item>
         </el-menu>
       </div>
     </div>
@@ -58,15 +54,8 @@ limitations under the License.
          || this.$route.path.indexOf('/histogram') > 0
          || this.$route.path.indexOf('/tensor') > 0
          || this.$route.path.indexOf('/training-dashboard') > 0
-         || !this.$route.path.indexOf('/compare-plate')
-         || !this.$route.path.indexOf('/hardware-visual')">
-      <div class="reload-training"
-           v-if="this.$route.path.indexOf('/scalar') > 0
-          || this.$route.path.indexOf('/image') > 0
-          || this.$route.path.indexOf('/histogram') > 0
-          || this.$route.path.indexOf('/tensor') > 0
-          || this.$route.path.indexOf('/training-dashboard') > 0
-          || !this.$route.path.indexOf('/compare-plate')">
+         || !this.$route.path.indexOf('/compare-plate')">
+      <div class="reload-training">
         <!-- automatic refresh switch -->
         <el-switch v-model="isTimeReload"
                    :active-text="$t('header.timeReload')+$t('symbols.leftbracket')+
@@ -89,31 +78,6 @@ limitations under the License.
            v-if="isTimeReload && isShowInp"
            @click="cancelTimeValue"></i>
       </div>
-      <div class="reload-hardware"
-           v-if="!this.$route.path.indexOf('/hardware-visual')">
-        <!-- automatic refresh switch -->
-        <el-switch v-model="isHardwareTimeReload"
-                   :active-text="$t('header.timeReload')+$t('symbols.leftbracket')+
-                  hardwareTimeReloadValue+$t('header.timeSecond')+$t('symbols.rightbracket')"
-                   @change="hardwareTimeReload"></el-switch>
-        <i class="el-icon-edit"
-           :title="$t('header.timeReloadScope')"
-           v-if="isHardwareTimeReload && !isShowHardwareInp"
-           @click="editHardwareTime"></i>
-
-        <el-input v-if="isHardwareTimeReload && isShowHardwareInp"
-                  v-model="newHardwareReloadValue"
-                  type="text"
-                  @input="hardwareTimeValueChange"></el-input>
-
-        <i class="el-icon-check"
-           v-if="isHardwareTimeReload && isShowHardwareInp"
-           @click="saveHardwareTimeValue"></i>
-        <i class="el-icon-close"
-           v-if="isHardwareTimeReload && isShowHardwareInp"
-           @click="cancelHardwareTimeValue"></i>
-      </div>
-
       <!-- manual refresh switch -->
       <img src="../assets/images/reload.png"
            alt=""
@@ -154,9 +118,6 @@ export default {
       isLanguage: true,
       timeReloadValue: this.$store.state.timeReloadValue,
       newReloadValue: this.$store.state.timeReloadValue,
-      isShowHardwareInp: false,
-      hardwareTimeReloadValue: this.$store.state.hardwareTimeReloadValue,
-      newHardwareReloadValue: this.$store.state.hardwareTimeReloadValue,
     };
   },
   computed: {
@@ -183,13 +144,6 @@ export default {
       }
       return isChinese;
     },
-    // set and get isHardwareTimeReload status
-    isHardwareTimeReload: {
-      get() {
-        return this.$store.state.isHardwareTimeReload;
-      },
-      set(val) {},
-    },
   },
   watch: {},
   mounted() {},
@@ -244,48 +198,6 @@ export default {
           .replace(/\./g, '');
       this.newReloadValue = Number(this.newReloadValue);
     },
-    // hardware reload setting
-    hardwareTimeReload(val) {
-      localStorage.isHardwareTimeReload = val;
-      this.$store.commit('setIsHardwareTimeReload', val);
-    },
-
-    editHardwareTime() {
-      this.isShowHardwareInp = true;
-    },
-
-    saveHardwareTimeValue() {
-      if (this.newHardwareReloadValue >= 0) {
-        this.newHardwareReloadValue =
-          this.newHardwareReloadValue < 3
-            ? 3
-            : this.newHardwareReloadValue > 300
-            ? 300
-            : this.newHardwareReloadValue;
-        const timeValue = this.newHardwareReloadValue;
-        this.hardwareTimeReloadValue = timeValue;
-        localStorage.hardwareTimeReloadValue = timeValue;
-        this.$store.commit('setHardwareTimeReloadValue', timeValue);
-        this.isShowHardwareInp = false;
-      } else {
-        this.cancelHardwareTimeValue();
-      }
-    },
-    cancelHardwareTimeValue() {
-      this.isShowHardwareInp = false;
-      this.newHardwareReloadValue = this.hardwareTimeReloadValue;
-    },
-    hardwareTimeValueChange() {
-      if (this.newHardwareReloadValue === '') {
-        return;
-      }
-      this.newHardwareReloadValue = this.newHardwareReloadValue
-          .toString()
-          .replace(/[^\.\d]/g, '')
-          .replace(/\./g, '');
-      this.newHardwareReloadValue = Number(this.newHardwareReloadValue);
-    },
-
     // get active menu item
     getActive() {
       const str = this.$route.path.split('/');
diff --git a/mindinsight/ui/src/components/histogramUnit.vue b/mindinsight/ui/src/components/histogramUnit.vue
index 77d7417..4ef5291 100644
--- a/mindinsight/ui/src/components/histogramUnit.vue
+++ b/mindinsight/ui/src/components/histogramUnit.vue
@@ -525,7 +525,7 @@ export default {
         }</td><td style="text-align:center;">${this.formateNUmber(
             hoveredItem.step,
         )}</td><td>${this.formateNUmber(
-            (hoveredItem.relative_time / 1000).toFixed(3),
+            (hoveredItem.relative_time).toFixed(3),
         )}${unit}</td><td>${this.dealrelativeTime(
             new Date(hoveredItem.wall_time * 1000).toString(),
         )}</td>`;
diff --git a/mindinsight/ui/src/locales/en-us.json b/mindinsight/ui/src/locales/en-us.json
index 6c8de30..d45df4f 100644
--- a/mindinsight/ui/src/locales/en-us.json
+++ b/mindinsight/ui/src/locales/en-us.json
@@ -400,49 +400,6 @@
     "gpuunit": "us/time",
     "chartTitle": "Average Time Consumption Ranking"
   },
-  "hardwareVisual": {
-    "processor": "Ascend AI Processor",
-    "ram": "Memory",
-    "selectedCpu": "Selected CPUs:",
-    "allCpu": "Total CPUs:",
-    "chipNameTip": "Chip name",
-    "deviceIdTip": "Chip ID",
-    "availableTip": "Is chip available(for reference only)",
-    "healthTip": "Chip health status",
-    "ipTip": "Chip IP address",
-    "hbmTip": "Chip HBM usage",
-    "powerTip": "Chip real-time power",
-    "temperatureTip": "Chip real-time temperature",
-    "cpuUserTip": "Time for running in user mode (%)",
-    "cpuSystemTip": "Time for running in kernel mode (%)",
-    "cpuIdleTip": "Idle time (%)",
-    "cpuNiceTip": "Time for running low-priority processes (%)",
-    "cpuIowaitTip": "Time for waiting for I/O (%)",
-    "cpuIrqTip": "Time for processing hardware interrupts (%)",
-    "cpuSoftirqTip": "Time for processing software interrupts (%)",
-    "cpuStealTip": "Time occupied by other VMs (%)",
-    "cpuGuestTip": "Time for running the VM (%)",
-    "cpuGuestniceTip": "Time for running low-priority VMs (%)",
-    "cpuInterruptTip": "Time for processing hardware interrupts (%)",
-    "cpuDpcTip": "Time for remote calling (%)",
-    "noNpuInfo": "No Ascend AI processor information",
-    "normal": "Normal",
-    "generalWarn": "Minor warning",
-    "importantWarn": "Major warning",
-    "emergencyWarn": "Critical warning",
-    "noChip": "The chip does not exist or is not started.",
-    "availableFree": "The chip is available.",
-    "availableBusy": "The chip is occupied or unavailable.",
-    "failQueryChip": "An error occurs during chip information query.",
-    "name": "Name",
-    "npu": "ID",
-    "available": "Available",
-    "health": "Health",
-    "ipAddress": "IP Address",
-    "hbmUsage": "HBM-Usage(MB)",
-    "power": "Power(W)",
-    "temp": "Temp(℃)"
-  },
   "components": {
     "summaryTitle": "Training selection",
     "tagSelectTitle": "Tag Selection",
diff --git a/mindinsight/ui/src/locales/zh-cn.json b/mindinsight/ui/src/locales/zh-cn.json
index a3ce7f9..a94d682 100644
--- a/mindinsight/ui/src/locales/zh-cn.json
+++ b/mindinsight/ui/src/locales/zh-cn.json
@@ -399,49 +399,6 @@
     "gpuunit": "us/次",
     "chartTitle": "平均耗时排行"
   },
-  "hardwareVisual": {
-    "processor": "昇腾AI处理器",
-    "ram": "内存",
-    "selectedCpu": "CPU-选中：",
-    "allCpu": "CPU-总计：",
-    "chipNameTip": "芯片名称",
-    "deviceIdTip": "芯片编号",
-    "availableTip": "芯片是否空闲（仅供参考）",
-    "healthTip": "芯片健康状态",
-    "ipTip": "芯片IP地址",
-    "hbmTip": "芯片已用HBM内存",
-    "powerTip": "芯片实时功率",
-    "temperatureTip": "芯片实时温度",
-    "cpuUserTip": "运行于用户态的时间百分比",
-    "cpuSystemTip": "运行于内核态的时间百分比",
-    "cpuIdleTip": "处于空闲状态的时间百分比",
-    "cpuNiceTip": "运行低优先级进程的时间百分比",
-    "cpuIowaitTip": "等待IO的时间百分比",
-    "cpuIrqTip": "处理硬中断的时间百分比",
-    "cpuSoftirqTip": "处理软中断的时间百分比",
-    "cpuStealTip": "被其他虚拟机抢夺的时间百分比",
-    "cpuGuestTip": "运行虚拟机的时间百分比",
-    "cpuGuestniceTip": "运行低优先级虚拟机的时间百分比",
-    "cpuInterruptTip": "处理硬中断的时间百分比",
-    "cpuDpcTip": "远程调用的时间百分比",
-    "noNpuInfo": "暂无昇腾AI处理器信息",
-    "normal": "正常",
-    "generalWarn": "一般警告",
-    "importantWarn": "重要警告",
-    "emergencyWarn": "紧急警告",
-    "noChip": "芯片不存在或未启动",
-    "availableFree": "芯片空闲",
-    "availableBusy": "芯片已被占用或不可用",
-    "failQueryChip": "芯片信息查询有误",
-    "name": "名称",
-    "npu": "编号",
-    "available": "是否空闲",
-    "health": "健康状态",
-    "ipAddress": "IP 地址",
-    "hbmUsage": "已用HBM内存(MB)",
-    "power": "功率(W)",
-    "temp": "温度(℃)"
-  },
   "components": {
     "summaryTitle": "训练选择",
     "tagSelectTitle": "标签选择",
diff --git a/mindinsight/ui/src/router.js b/mindinsight/ui/src/router.js
index c835de9..85ac294 100644
--- a/mindinsight/ui/src/router.js
+++ b/mindinsight/ui/src/router.js
@@ -117,9 +117,5 @@ export default new Router({
         },
       ],
     },
-    {
-      path: '/hardware-visual',
-      component: () => import('./views/train-manage/hardware-visual.vue'),
-    },
   ],
 });
diff --git a/mindinsight/ui/src/services/request-service.js b/mindinsight/ui/src/services/request-service.js
index 1cf4314..64bbac8 100644
--- a/mindinsight/ui/src/services/request-service.js
+++ b/mindinsight/ui/src/services/request-service.js
@@ -288,10 +288,4 @@ export default {
       },
     });
   },
-  getMetricsData() {
-    return axios({
-      method: 'get',
-      url: 'v1/mindinsight/sysmetric/current',
-    });
-  },
 };
diff --git a/mindinsight/ui/src/store.js b/mindinsight/ui/src/store.js
index d9a9842..ca7ca4b 100644
--- a/mindinsight/ui/src/store.js
+++ b/mindinsight/ui/src/store.js
@@ -30,12 +30,6 @@ export default new Vuex.Store({
     timeReloadValue: localStorage.timeReloadValue
       ? localStorage.timeReloadValue
       : 10,
-    // Scheduled hardware reload flag
-    isHardwareTimeReload: localStorage.isHardwareTimeReload === 'false' ? false : true,
-    // hardware reload time
-    hardwareTimeReloadValue: localStorage.hardwareTimeReloadValue
-      ? localStorage.hardwareTimeReloadValue
-      : 5,
     // multiSelevtGroup component count
     multiSelectedGroupCount: 0,
     tableId: 0,
@@ -81,13 +75,6 @@ export default new Vuex.Store({
     setTimeReloadValue: (state, val) => {
       state.timeReloadValue = val;
     },
-    // set isHardwareTimeReload
-    setIsHardwareTimeReload: (state, val) => {
-      state.isHardwareTimeReload = val;
-    },
-    setHardwareTimeReloadValue: (state, val) => {
-      state.hardwareTimeReloadValue = val;
-    },
     multiSelectedGroupComponentNum(state) {
       state.multiSelectedGroupCount++;
     },
diff --git a/mindinsight/ui/src/views/train-manage/hardware-visual.vue b/mindinsight/ui/src/views/train-manage/hardware-visual.vue
deleted file mode 100644
index 4a64b8a..0000000
--- a/mindinsight/ui/src/views/train-manage/hardware-visual.vue
+++ /dev/null
@@ -1,969 +0,0 @@
-<!--
-Copyright 2020 Huawei Technologies Co., Ltd.All Rights Reserved.
-
-Licensed 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="cl-hardware-visual">
-    <div class="cl-hardware-content"
-         v-if="!(chipTableData.length === 0 && cpuList.length===0)">
-      <div class="cl-hardware-top"
-           v-if="chipTableData.length">
-        <div class="cl-hardware-left">
-          <div class="cl-sub-title"
-               v-if="chipTableData.length">
-            {{$t('hardwareVisual.processor')}}
-          </div>
-          <div class="cl-chip-wrap">
-            <el-table v-if="chipTableData.length"
-                      :data="chipTableData"
-                      width="100%"
-                      height="100%"
-                      :row-class-name="tableRowClassName">
-              <el-table-column width="120">
-                <template slot="header">
-                  <span class="cl-text-center">
-                    {{ $t('hardwareVisual.name') }}
-                    <el-tooltip class="item"
-                                effect="light"
-                                :content="$t('hardwareVisual.chipNameTip')"
-                                placement="top-start">
-                      <i class="el-icon-info"></i>
-                    </el-tooltip>
-                  </span>
-                </template>
-                <template slot-scope="scope">
-                  <span class="cl-text-center">{{ scope.row.chip_name }}</span>
-                </template>
-              </el-table-column>
-              <el-table-column width="80">
-                <template slot="header">
-                  <span class="cl-text-center">
-                    {{ $t('hardwareVisual.npu') }}
-                    <el-tooltip class="item"
-                                effect="light"
-                                :content="$t('hardwareVisual.deviceIdTip')"
-                                placement="top-start">
-                      <i class="el-icon-info"></i>
-                    </el-tooltip>
-                  </span>
-                </template>
-                <template slot-scope="scope">
-                  <span class="cl-text-center">{{ scope.row.device_id }}</span>
-                </template>
-              </el-table-column>
-              <el-table-column width="110">
-                <template slot="header">
-                  <span class="cl-text-center">
-                    {{ $t('hardwareVisual.available') }}
-                    <el-tooltip class="item"
-                                effect="light"
-                                :content="$t('hardwareVisual.availableTip')"
-                                placement="top-start">
-                      <i class="el-icon-info"></i>
-                    </el-tooltip>
-                  </span>
-                </template>
-                <template slot-scope="scope">
-                  <span class="cl-text-center">
-                    <i class="el-icon-success"
-                       v-if="scope.row.available"
-                       :title="$t('hardwareVisual.availableFree')"></i>
-                    <i class="available-fail"
-                       :title="$t('hardwareVisual.availableBusy')"
-                       v-else></i>
-                  </span>
-                </template>
-              </el-table-column>
-              <el-table-column width="100">
-                <template slot="header">
-                  <span class="cl-text-center">
-                    {{ $t('hardwareVisual.health') }}
-                    <el-tooltip class="item"
-                                effect="light"
-                                :content="$t('hardwareVisual.healthTip')"
-                                placement="top-start">
-                      <i class="el-icon-info"></i>
-                    </el-tooltip>
-                  </span>
-                </template>
-                <template slot-scope="scope">
-                  <span class="cl-text-center">
-                    <i class="el-icon-success"
-                       v-if="scope.row.health===0"
-                       :title="$t('hardwareVisual.normal')"></i>
-                    <i class="el-icon-warning normal"
-                       v-if="scope.row.health===1"
-                       :title="$t('hardwareVisual.generalWarn')"></i>
-                    <i class="el-icon-warning important"
-                       v-if="scope.row.health===2"
-                       :title="$t('hardwareVisual.importantWarn')"></i>
-                    <i class="el-icon-warning emergency"
-                       v-if="scope.row.health===3"
-                       :title="$t('hardwareVisual.emergencyWarn')"></i>
-                    <i class="el-icon-remove"
-                       v-if="scope.row.health=== 0xffffffff"
-                       :title="$t('hardwareVisual.noChip')"></i>
-                  </span>
-                </template>
-              </el-table-column>
-              <el-table-column width="130">
-                <template slot="header">
-                  <span class="cl-text-center">
-                    {{ $t('hardwareVisual.ipAddress') }}
-                    <el-tooltip class="item"
-                                effect="light"
-                                :content="$t('hardwareVisual.ipTip')"
-                                placement="top-start">
-                      <i class="el-icon-info"></i>
-                    </el-tooltip>
-                  </span>
-                </template>
-                <template slot-scope="scope">
-                  <span class="cl-text-center">{{ scope.row.ip_address }}</span>
-                </template>
-              </el-table-column>
-              <el-table-column prop="hbm_usage"
-                               min-width="100">
-                <template slot="header">
-                  {{ $t('hardwareVisual.hbmUsage') }}
-                  <el-tooltip class="item"
-                              effect="light"
-                              :content="$t('hardwareVisual.hbmTip')"
-                              placement="top-start">
-                    <i class="el-icon-info"></i>
-                  </el-tooltip>
-                </template>
-                <template slot-scope="scope">
-                  <div class="hbs-wrap">
-                    <el-progress :percentage="scope.row.hbm_info.memory_size?
-                    parseInt(scope.row.hbm_info.memory_usage/scope.row.hbm_info.memory_size*100):0"
-                                 :format="formatHbm(scope.row.hbm_info)"></el-progress>
-                  </div>
-                </template>
-              </el-table-column>
-              <el-table-column prop="power">
-                <template slot="header">
-                  {{ $t('hardwareVisual.power') }}
-                  <el-tooltip class="item"
-                              effect="light"
-                              :content="$t('hardwareVisual.powerTip')"
-                              placement="top-start">
-                    <i class="el-icon-info"></i>
-                  </el-tooltip>
-                </template>
-                <template slot-scope="scope">
-                  <div class="power-wrap">
-                    <div class="power"
-                         :style="{width:`${scope.row.power/powerMax*100}%`}">{{scope.row.power}}</div>
-                  </div>
-                </template>
-
-              </el-table-column>
-              <el-table-column prop="temp"
-                               width="150">
-                <template slot="header">
-                 {{ $t('hardwareVisual.temp') }}
-                  <el-tooltip class="item"
-                              effect="light"
-                              :content="$t('hardwareVisual.temperatureTip')"
-                              placement="top-start">
-                    <i class="el-icon-info"></i>
-                  </el-tooltip>
-                </template>
-                <template slot-scope="scope">
-                  <div class="temp-wrap">
-                    <div class="circle"
-                         :class="{zero:!scope.row.temperature}"></div>
-                    <div class="process-wrap">
-                      <div class="process-cover"
-                           :style="{width:temperatureMax?scope.row.temperature/temperatureMax*100+'%':0}"></div>
-                    </div>
-                    <span>{{scope.row.temperature}}</span>
-                  </div>
-                </template>
-              </el-table-column>
-            </el-table>
-            <div class="image-noData"
-                 v-if="chipTableData.length === 0">
-              <div>
-                <img :src="require('@/assets/images/nodata.png')"
-                     alt="" />
-              </div>
-              <p>{{$t("hardwareVisual.noNpuInfo")}}</p>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="cl-hardware-bottom"
-           :class="{noNpu:!chipTableData.length}">
-        <div class="cl-hardware-left">
-          <div class="cl-sub-title">
-            CPU
-          </div>
-          <div class="cl-cpu-wrap">
-            <div class="cpu-items">
-              <div class="cpu-item"
-                   v-for="(item,key) in cpuList"
-                   :key="key">
-                <div class="cpu"
-                     :class="{selected:item.selected}"
-                     :style="{backgroundColor:item.idle!==undefined?
-                     `rgba(250,152,65,${(100-item.idle).toFixed(2)/100}`:'#ccc'}"
-                     :title="item.idle!==undefined?`Core ${key}`:''"
-                     @click="viewPerCpuInfo(key)">
-                  {{ item.idle!==undefined?(100-item.idle).toFixed(2):'' }}
-                </div>
-              </div>
-            </div>
-            <div class="cpu-detail">
-              <div class="all-cpu-info">
-                <span>{{$t('hardwareVisual.allCpu')}}</span>
-                <div class="info-item"
-                     v-for="(item,index) in overallCpuInfo"
-                     :key="index">
-                  <el-tooltip class="item"
-                              effect="light"
-                              :content="item.tips"
-                              placement="top-start">
-                    <span>
-                      <span class="label">{{item.label}}</span>
-                      <span class="value">{{`${item.value}%`}}</span>
-                    </span>
-                  </el-tooltip>
-                </div>
-              </div>
-              <div class="selected-cpu-info"
-                   v-if="selectedCpuIndex!==null">
-                <span>{{$t('hardwareVisual.selectedCpu')}}</span>
-                <div class="info-item"
-                     v-for="(item,index) in selectedCpuInfo"
-                     :key="index">
-                  <el-tooltip class="item"
-                              effect="light"
-                              :content="item.tips"
-                              placement="top-start">
-                    <span>
-                      <span class="label">{{item.label}}</span>
-                      <span class="value">{{`${item.value}%`}}</span>
-                    </span>
-                  </el-tooltip>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="cl-hardware-right">
-          <div class="cl-sub-title ram">
-            {{$t('hardwareVisual.ram')}}
-          </div>
-          <div class="cl-ram-wrap">
-            <div class="virtual-wrap">
-              <div id="virtual"></div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="image-noData"
-         v-if="chipTableData.length === 0 && cpuList.length===0">
-      <div>
-        <img :src="require('@/assets/images/nodata.png')"
-             alt="" />
-      </div>
-      <p>{{initOver?$t("public.noData"):$t('public.dataLoading')}}</p>
-    </div>
-  </div>
-</template>
-
-<script>
-import echarts from 'echarts';
-import RequestService from '../../services/request-service';
-export default {
-  data() {
-    return {
-      chipTableData: [],
-      powerMax: null,
-      temperatureMax: null,
-      virtualChart: {
-        id: 'virtual',
-        chartDom: null,
-        data: [],
-        legend: [],
-        totalValue: null,
-      },
-      defaultCpuNum: 96,
-      cpuList: [],
-      overallCpuInfo: [],
-      selectedCpuInfo: [],
-      selectedCpuIndex: null,
-      pieColorArr: ['#5e7ce0', '#ccc', '#a6dd82'],
-      autoUpdateTimer: null, // Automatic refresh timer
-      isReloading: false, // Manually refresh
-      legendSelected: {},
-      initOver: false,
-      mark: false,
-    };
-  },
-  computed: {
-    /**
-     * Global refresh switch
-     * @return {Boolean}
-     */
-    isReload() {
-      return this.$store.state.isReload;
-    },
-    /**
-     * Automatic hardware refresh switch
-     * @return {Boolean}
-     */
-    isHardwareTimeReload() {
-      return this.$store.state.isHardwareTimeReload;
-    },
-    /**
-     * Automatic hardware refresh value
-     * @return {Boolean}
-     */
-    hardwareTimeReloadValue() {
-      return this.$store.state.hardwareTimeReloadValue;
-    },
-  },
-  watch: {
-    /**
-     * Global refresh switch Listener
-     * @param {Boolean} newVal Value After Change
-     * @param {Boolean} oldVal Value Before Change
-     */
-    isReload(newVal, oldVal) {
-      if (newVal) {
-        this.isReloading = true;
-        if (this.isHardwareTimeReload) {
-          this.autoUpdateSamples();
-        }
-        this.init();
-      }
-    },
-    /**
-     * Automatic refresh switch Listener
-     * @param {Boolean} newVal Value After Change
-     * @param {Boolean} oldVal Value Before Change
-     */
-    isHardwareTimeReload(newVal, oldVal) {
-      if (newVal) {
-        this.autoUpdateSamples();
-      } else {
-        this.stopUpdateSamples();
-      }
-    },
-    /**
-     * The refresh time is changed.
-     */
-    hardwareTimeReloadValue() {
-      this.autoUpdateSamples();
-    },
-  },
-  destroyed() {
-    // Disable the automatic refresh function
-    if (this.autoUpdateTimer) {
-      clearInterval(this.autoUpdateTimer);
-      this.autoUpdateTimer = null;
-    }
-    // Stop Refreshing
-    if (this.isReloading) {
-      this.$store.commit('setIsReload', false);
-      this.isReloading = false;
-    }
-  },
-  mounted() {
-    document.title = this.$t('summaryManage.hardwareVisual') + '-MindInsight';
-    // Automatic refresh
-    if (this.isHardwareTimeReload) {
-      this.autoUpdateSamples();
-    }
-    this.init();
-  },
-
-  methods: {
-    /**
-     * Initialization data
-     */
-    init() {
-      this.mark = false;
-      RequestService.getMetricsData().then(
-          (res) => {
-            this.mark = true;
-            this.initOver = true;
-            if (this.isReloading) {
-              this.$store.commit('setIsReload', false);
-              this.isReloading = false;
-            }
-            if (res && res.data) {
-              this.chipTableData = res.data.npu || [];
-              if (this.chipTableData.length === 0) {
-                this.defaultCpuNum = 192;
-              }
-              this.powerMax =
-              Math.max(...this.chipTableData.map((val) => val.power)) * 1.2;
-              this.temperatureMax =
-              Math.max(...this.chipTableData.map((val) => val.temperature)) *
-              1.2;
-              // 1.2 In order to Demonstrated effect
-              if (res.data.memory && res.data.memory.virtual) {
-                this.dealChartData(this.virtualChart, res.data.memory.virtual);
-                this.setOption(this.virtualChart);
-              }
-              if (res.data.cpu) {
-                const overall = res.data.cpu.overall || {};
-                this.overallCpuInfo = Object.keys(overall).map((val) => {
-                  return {
-                    label: val,
-                    value: overall[val],
-                  };
-                });
-                this.addtips(this.overallCpuInfo);
-                this.cpuList = (res.data.cpu.percpu || []).map((val) => {
-                  return {...val, selected: false};
-                });
-                while (this.cpuList.length < this.defaultCpuNum) {
-                  this.cpuList.push({});
-                }
-                if (this.selectedCpuIndex !== null) {
-                  this.viewPerCpuInfo(this.selectedCpuIndex);
-                } else {
-                  this.selectedCpuInfo = [];
-                }
-                this.$nextTick(() => {
-                  const doms = document.querySelectorAll('.fail-row');
-                  if (doms) {
-                    for (let i = 0; i < doms.length; i++) {
-                      doms[i].setAttribute(
-                          'title',
-                          this.$t('hardwareVisual.failQueryChip'),
-                      );
-                    }
-                  }
-                });
-              }
-            }
-          },
-          (err) => {
-            this.mark = true;
-            this.chipTableData = [];
-            this.cpuList = [];
-            this.initOver = true;
-            if (this.isReloading) {
-              this.$store.commit('setIsReload', false);
-              this.isReloading = false;
-            }
-          },
-      );
-    },
-    tableRowClassName({row, rowIndex}) {
-      if (!row.success) {
-        return 'fail-row';
-      }
-      return '';
-    },
-    /**
-     * add tips
-     * @param {Array} arr cpu Info
-     */
-    addtips(arr) {
-      arr.forEach((val) => {
-        switch (val.label) {
-          case 'user':
-            val.tips = this.$t('hardwareVisual.cpuUserTip');
-            break;
-          case 'nice':
-            val.tips = this.$t('hardwareVisual.cpuNiceTip');
-            break;
-          case 'system':
-            val.tips = this.$t('hardwareVisual.cpuSystemTip');
-            break;
-          case 'idle':
-            val.tips = this.$t('hardwareVisual.cpuIdleTip');
-            break;
-          case 'iowait':
-            val.tips = this.$t('hardwareVisual.cpuIowaitTip');
-            break;
-          case 'irq':
-            val.tips = this.$t('hardwareVisual.cpuIrqTip');
-            break;
-          case 'softirq':
-            val.tips = this.$t('hardwareVisual.cpuSoftirqTip');
-            break;
-          case 'steal':
-            val.tips = this.$t('hardwareVisual.cpuStealTip');
-            break;
-          case 'guest':
-            val.tips = this.$t('hardwareVisual.cpuGuestTip');
-            break;
-          case 'guest_nice':
-            val.tips = this.$t('hardwareVisual.cpuGuestniceTip');
-            break;
-          case 'interrupt':
-            val.tips = this.$t('hardwareVisual.cpuInterruptTip');
-            break;
-          case 'dpc':
-            val.tips = this.$t('hardwareVisual.cpuDpcTip');
-            break;
-        }
-      });
-    },
-    /**
-     * View the information of each cpu
-     * @param {Number} index index
-     */
-    viewPerCpuInfo(index) {
-      this.cpuList.forEach((val, key) => {
-        if (val.idle !== undefined) {
-          if (index === key) {
-            this.selectedCpuIndex = key;
-            val.selected = !val.selected;
-            if (val.selected) {
-              this.selectedCpuInfo = Object.keys(this.cpuList[index]).map(
-                  (val) => {
-                    return {
-                      label: val,
-                      value: this.cpuList[index][val],
-                    };
-                  },
-              );
-              this.selectedCpuInfo.pop();
-            } else {
-              this.selectedCpuIndex = null;
-              this.selectedCpuInfo = [];
-            }
-          } else {
-            if (this.cpuList[index].idle !== undefined) {
-              val.selected = false;
-            }
-          }
-        }
-      });
-      this.addtips(this.selectedCpuInfo);
-    },
-    /**
-     * Handling pie chart data
-     * @param {Object} chart chart obejct
-     * @param {Object} data chart data
-     */
-    dealChartData(chart, data) {
-      if (data.others === 0) {
-        chart.legend = ['used', 'available'];
-        this.pieColorArr = ['#5e7ce0', '#a6dd82'];
-      } else {
-        chart.legend = ['used', 'others', 'available'];
-        this.pieColorArr = ['#5e7ce0', '#ccc', '#a6dd82'];
-      }
-      chart.data = chart.legend.map((val) => {
-        return {
-          value: data[val],
-          name: val,
-        };
-      });
-      chart.totalValue = 0;
-      chart.data.forEach((val) => {
-        chart.totalValue += val.value;
-      });
-    },
-    /**
-     * Data unit conversion
-     * @param {Number} n chart obejct
-     * @param {Boolean} type format type
-     * @return {String}
-     */
-    bytesHuman(n, type) {
-      const symbols = 'KMG'
-          .split('')
-          .map((symbol, index) => [symbol, 1 << ((index + 1) * 10)]);
-      for (const [symbol, prefix] of symbols.reverse()) {
-        if (n >= prefix) {
-          if (type) {
-            return `${n}(${(n / prefix).toFixed(1)}${symbol})`;
-          } else {
-            return `${(n / prefix).toFixed(1)}${symbol}`;
-          }
-        }
-      }
-      return `${n}`;
-    },
-    formatHbm(hbmInfo) {
-      return function() {
-        return `${hbmInfo.memory_usage}/${hbmInfo.memory_size}`;
-      };
-    },
-    /**
-     * Enable automatic hardware refresh
-     */
-    autoUpdateSamples() {
-      if (this.autoUpdateTimer) {
-        clearInterval(this.autoUpdateTimer);
-        this.autoUpdateTimer = null;
-      }
-      this.autoUpdateTimer = setInterval(() => {
-        if (this.mark) {
-          this.$store.commit('clearToken');
-          this.init();
-        }
-      }, this.hardwareTimeReloadValue * 1000);
-    },
-    /**
-     * Disable automatic refresh
-     */
-    stopUpdateSamples() {
-      if (this.autoUpdateTimer) {
-        clearInterval(this.autoUpdateTimer);
-        this.autoUpdateTimer = null;
-      }
-    },
-    setOption(chart) {
-      const option = {
-        tooltip: {
-          trigger: 'item',
-          formatter: (params) => {
-            return `${params.name}<br>
-            ${params.marker}${this.bytesHuman(params.value, true)}`;
-          },
-          confine: true,
-        },
-        legend: {
-          orient: 'vertical',
-          left: '50%',
-          top: '35%',
-          icon: 'circle',
-          data: chart.legend,
-          formatter: (params) => {
-            let legendStr = '';
-            for (let i = 0; i < chart.data.length; i++) {
-              if (chart.data[i].name === params) {
-                const name = chart.data[i].name;
-                legendStr = `{a|${this.bytesHuman(
-                    chart.data[i].value,
-                    true,
-                )}}\n{b|${name}}`;
-              }
-            }
-            return legendStr;
-          },
-          selected: this.legendSelected,
-          textStyle: {
-            rich: {
-              a: {
-                fontSize: 14,
-              },
-              b: {
-                color: '#aeb2bf',
-              },
-            },
-          },
-        },
-        series: [
-          {
-            name: '',
-            center: ['25%', '50%'],
-            type: 'pie',
-            radius: this.chipTableData.length ? ['40%', '60%'] : ['30%', '40%'],
-            avoidLabelOverlap: false,
-            label: {
-              show: true,
-              formatter: () => {
-                return `{a|${this.bytesHuman(chart.totalValue)}}{b|All}`;
-              },
-              position: 'center',
-              textStyle: {
-                rich: {
-                  a: {
-                    fontSize: 20,
-                    color: '#000',
-                  },
-                  b: {
-                    color: '#aeb2bf',
-                  },
-                },
-              },
-            },
-            labelLine: {
-              show: false,
-            },
-            data: chart.data,
-            itemStyle: {
-              normal: {
-                color: (params) => {
-                  return this.pieColorArr[params.dataIndex];
-                },
-              },
-            },
-          },
-        ],
-      };
-      this.$nextTick(() => {
-        const cpuDom = document.getElementById(chart.id);
-        if (cpuDom) {
-          chart.chartDom = echarts.init(cpuDom, null);
-          chart.chartDom.setOption(option, true);
-          chart.chartDom.resize();
-          chart.chartDom.on('legendselectchanged', (obj) => {
-            this.legendSelected = obj.selected;
-          });
-        }
-      });
-    },
-  },
-};
-</script>
-<style lang="scss" >
-.cl-hardware-visual {
-  height: 100%;
-  background-color: #fff;
-
-  .cl-hardware-content {
-    height: 100%;
-    padding: 0 24px 24px 24px;
-    .cl-hardware-top {
-      height: calc(100% - 372px);
-      padding-top: 16px;
-      & > div {
-        width: 100%;
-        .cl-text-center {
-          display: inline-block;
-          text-align: center;
-          width: 100%;
-        }
-        .el-table::before {
-          height: 0px;
-        }
-      }
-    }
-    .cl-hardware-bottom {
-      height: 360px;
-      .cl-hardware-left {
-        width: calc(100% - 466px);
-        margin-right: 16px;
-      }
-      .cl-hardware-right {
-        width: 450px;
-      }
-    }
-    & > div {
-      height: calc(50% - 8px);
-      margin-bottom: 16px;
-      & > div {
-        float: left;
-        height: 100%;
-        border: 1px solid #eee;
-        border-radius: 4px;
-        padding: 16px;
-        .cl-sub-title {
-          font-weight: bold;
-          font-size: 16px;
-          margin-bottom: 15px;
-        }
-        .cl-sub-title.ram {
-          margin-bottom: 10px;
-        }
-        .cl-chip-wrap {
-          height: calc(100% - 36px);
-          overflow: auto;
-          .available-fail {
-            display: inline-block;
-            width: 12px;
-            height: 12px;
-            border-radius: 12px;
-            background-image: url('../../assets/images/occupy.svg');
-            background-size: 100% 100%;
-          }
-          .el-icon-success:before {
-            color: #57d7ac;
-          }
-          .el-icon-error:before {
-            color: #e37783;
-          }
-          .el-icon-warning.normal:before {
-            color: #6f81e4;
-          }
-          .el-icon-warning.important:before {
-            color: #faa048;
-          }
-          .el-icon-warning.emergency:before {
-            color: #f06281;
-          }
-          .el-icon-remove:before {
-            color: #8b8e95;
-          }
-          .temp-wrap {
-            .circle {
-              width: 10px;
-              height: 10px;
-              border-radius: 5px;
-              background: #ffaa00;
-              display: inline-block;
-              position: absolute;
-              left: 1px;
-              top: 50%;
-              margin-top: -4px;
-            }
-            .circle.zero {
-              background: #e6ebf5;
-            }
-            .process-wrap {
-              background: #e6ebf5;
-              width: calc(100% - 50px);
-              height: 6px;
-              display: inline-block;
-              border-top-right-radius: 50px;
-              border-bottom-right-radius: 50px;
-              margin-right: 5px;
-              .process-cover {
-                height: 6px;
-                border-top-right-radius: 50px;
-                border-bottom-right-radius: 50px;
-                background: #ff5100;
-                background-image: linear-gradient(to right, #ffaa00, #ff5100);
-              }
-            }
-          }
-          .hbs-wrap {
-            .el-progress-bar {
-              padding-right: 140px;
-              margin-right: -145px;
-            }
-          }
-          .core-wrap {
-            .el-progress-bar {
-              padding-right: 80px;
-              margin-right: -85px;
-            }
-          }
-          .power {
-            background: #e5f6f6;
-            padding-left: 10px;
-          }
-        }
-        .cl-ram-wrap {
-          height: calc(100% - 36px);
-          .virtual-wrap {
-            height: 100%;
-            overflow: auto;
-            #virtual {
-              height: 100%;
-              overflow: hidden;
-            }
-          }
-        }
-        .cl-disk-wrap {
-          height: calc(100% - 36px);
-          overflow: auto;
-        }
-        .cl-cpu-wrap {
-          height: 201px;
-          .cpu-items {
-            height: 100%;
-            overflow: auto;
-            background: url('../../assets/images/cpu-bg.svg') repeat;
-            padding: 3px 0 0 3px;
-            .cpu-item {
-              float: left;
-              width: calc(6.25% - 3px);
-              height: 30px;
-              text-align: center;
-              background: #fff;
-              margin-right: 3px;
-              margin-bottom: 3px;
-              cursor: pointer;
-              .cpu {
-                height: 100%;
-                line-height: 30px;
-              }
-              .cpu.selected {
-                line-height: 30px;
-                outline: 3px solid #00a5a7;
-              }
-            }
-          }
-          .cpu-detail {
-            & > div {
-              margin-top: 10px;
-              & > span {
-                margin-right: 5px;
-                color: #b2b4bb;
-              }
-              & > div {
-                display: inline-block;
-                padding: 0 7px;
-                border-right: 1px solid #ccc;
-                &:last-child {
-                  border-right: none;
-                }
-                .label {
-                  margin-right: 5px;
-                  cursor: pointer;
-                }
-                .value {
-                  display: inline-block;
-                  width: 40px;
-                  text-align: right;
-                  cursor: pointer;
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-    .cl-hardware-bottom.noNpu {
-      padding-top: 16px;
-      height: 570px;
-      .cl-cpu-wrap {
-        height: 399px;
-      }
-    }
-    .el-table thead tr {
-      background: #f0f3fa;
-    }
-    .el-table th.is-leaf .cell {
-      border-left: 1px solid #d4d9e6;
-    }
-    .el-table th.is-leaf:first-child .cell {
-      border-left: none;
-    }
-    .el-pagination {
-      margin: 7px 0;
-      float: right;
-    }
-  }
-  .el-table th {
-    height: 32px;
-  }
-  .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-icon-info:before {
-    color: #6c7280;
-  }
-  .el-table .fail-row {
-    opacity: 0.24;
-    filter: grayscale(1);
-  }
-}
-</style>
diff --git a/mindinsight/ui/src/views/train-manage/histogram.vue b/mindinsight/ui/src/views/train-manage/histogram.vue
index 4bfe670..5e2e3ad 100644
--- a/mindinsight/ui/src/views/train-manage/histogram.vue
+++ b/mindinsight/ui/src/views/train-manage/histogram.vue
@@ -787,7 +787,7 @@ export default {
         }</td><td style="text-align:center;">${this.formateNUmber(
             hoveredItem.step,
         )}</td><td>${this.formateNUmber(
-            (hoveredItem.relative_time / 1000).toFixed(3),
+            (hoveredItem.relative_time).toFixed(3),
         )}${unit}</td><td>${this.dealrelativeTime(
             new Date(hoveredItem.wall_time * 1000).toString(),
         )}</td>`;
-- 
GitLab