!431 Add hardware resource visualization

Merge pull request !431 from 冯学峰/myhardware01

mindinsight/ui/src/assets/images/cpu-bg.svg

+<?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

mindinsight/ui/src/components/header.vue

@@ -32,6 +32,7 @@ limitations under the License.
           <el-menu-item index="/model-traceback">{{$t("summaryManage.modelTraceback")}}</el-menu-item>
           <el-menu-item index="/data-traceback">{{$t("summaryManage.dataTraceback")}}</el-menu-item>
           <el-menu-item index="/compare-plate">{{$t("summaryManage.comparePlate")}}</el-menu-item>
+          <el-menu-item index="/hardware-visual">{{$t("summaryManage.hardwareVisual")}}</el-menu-item>
         </el-menu>
       </div>
     </div>
@@ -42,28 +43,61 @@ 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')">
-      <!-- automatic refresh switch -->
-      <el-switch v-model="isTimeReload"
-                 :active-text="$t('header.timeReload')+$t('symbols.leftbracket')+
-                 timeReloadValue+$t('header.timeSecond')+$t('symbols.rightbracket')"
-                 @change="timeReload"></el-switch>
-      <i class="el-icon-edit"
-         :title="$t('header.timeReloadScope')"
-         v-if="isTimeReload && !isShowInp"
-         @click="editTime"></i>
+         || !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('/training-dashboard') > 0
+          || !this.$route.path.indexOf('/compare-plate')">
+        <!-- automatic refresh switch -->
+        <el-switch v-model="isTimeReload"
+                  :active-text="$t('header.timeReload')+$t('symbols.leftbracket')+
+                  timeReloadValue+$t('header.timeSecond')+$t('symbols.rightbracket')"
+                  @change="timeReload"></el-switch>
+        <i class="el-icon-edit"
+          :title="$t('header.timeReloadScope')"
+          v-if="isTimeReload && !isShowInp"
+          @click="editTime"></i>
 
-      <el-input v-if="isTimeReload && isShowInp"
-                v-model="newReloadValue"
-                type="text"
-                @input="timeValueChange"></el-input>
+        <el-input v-if="isTimeReload && isShowInp"
+                  v-model="newReloadValue"
+                  type="text"
+                  @input="timeValueChange"></el-input>
+
+        <i class="el-icon-check"
+          v-if="isTimeReload && isShowInp"
+          @click="saveTimeValue"></i>
+        <i class="el-icon-close"
+          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>
 
-      <i class="el-icon-check"
-         v-if="isTimeReload && isShowInp"
-         @click="saveTimeValue"></i>
-      <i class="el-icon-close"
-         v-if="isTimeReload && isShowInp"
-         @click="cancleTimeValue"></i>
 
       <!-- manual refresh switch -->
       <img src="../assets/images/reload.png"
@@ -90,6 +124,9 @@ export default {
       isShowInp: false,
       timeReloadValue: this.$store.state.timeReloadValue,
       newReloadValue: this.$store.state.timeReloadValue,
+      isShowHardwareInp: false,
+      hardwareTimeReloadValue: this.$store.state.hardwareTimeReloadValue,
+      newHardwareReloadValue: this.$store.state.hardwareTimeReloadValue,
     };
   },
   computed: {
@@ -104,6 +141,13 @@ export default {
       },
       set(val) {},
     },
+    // set and get isHardwareTimeReload status
+    isHardwareTimeReload: {
+      get() {
+        return this.$store.state.isHardwareTimeReload;
+      },
+      set(val) {},
+    },
   },
   watch: {},
   mounted() {},
@@ -117,7 +161,7 @@ export default {
     relPath(path) {
       this.$router.push(path);
     },
-    // save isTimeReload status
+    // training reload setting
     timeReload(val) {
       localStorage.isTimeReload = val;
       this.$store.commit('setIsTimeReload', val);
@@ -128,7 +172,7 @@ export default {
     },
 
     saveTimeValue() {
-      if (this.newReloadValue) {
+      if (this.newReloadValue >= 0) {
         this.newReloadValue =
           this.newReloadValue < 3
             ? 3
@@ -141,10 +185,10 @@ export default {
         this.$store.commit('setTimeReloadValue', timeValue);
         this.isShowInp = false;
       } else {
-        this.cancleTimeValue();
+        this.cancelTimeValue();
       }
     },
-    cancleTimeValue() {
+    cancelTimeValue() {
       this.isShowInp = false;
       this.newReloadValue = this.timeReloadValue;
     },
@@ -155,6 +199,45 @@ 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.timeReloadValue;
+    },
+    hardwareTimeValueChange() {
+      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('/');
@@ -217,6 +300,13 @@ export default {
     .el-icon-close {
       color: #f56c6c;
     }
+    .el-input {
+      width: 45px;
+      input {
+        padding: 0;
+        text-align: center;
+      }
+    }
   }
 
   // reload style
@@ -232,16 +322,10 @@ export default {
       transform: rotate(1turn);
     }
   }
-  .cl-header-right .el-input {
-    width: 45px;
-    input {
-      padding: 0;
-      text-align: center;
-    }
-  }
+
   .cl-header-nav {
     margin-left: 50px;
-    flex: 1;
+    flex: 1.5;
 
     .el-menu {
       border-bottom: none;

mindinsight/ui/src/locales/zh-cn.json

@@ -45,7 +45,8 @@
     "modelTraceback": "模型溯源",
     "dataTraceback": "数据溯源",
     "comparePlate": "对比看板",
-    "disableProfilerTip": "无profiler日志，无法查看性能分析"
+    "disableProfilerTip": "无profiler日志，无法查看性能分析",
+    "hardwareVisual": "硬件资源"
   },
   "modelTraceback": {
     "summaryPath": "训练日志路径",
@@ -367,7 +368,7 @@
     "FPMessage": "前向起始算子：",
     "BPMessage": "反向终止算子：",
     "approximateTime": "总时长 ≈ ",
-    "stepInputTip": "请输入step值(1~{max}的正整数)",
+    "stepInputTip": "请输入step值(1~{max}的正整数，值为空时展示平均值)",
     "inputError": "输入参数异常，请输入一个1~{max}的正整数",
     "defaultTip": "默认展示平均值",
     "downloadTimeline": "下载",
@@ -383,7 +384,35 @@
       "title3": "如何使用时间线：",
       "content31": "您可以通过时间线信息分析流切分方法是否合理、迭代间隙和拖尾时间是否过长等；",
       "content32": "也可以具体定位到某个算子，查看分析它的执行时间。"
-    }
+    },
+    "unit": "ms/次"
+  },
+  "hardwareVisual": {
+    "processor": "昇腾AI处理器",
+    "ram": "内存",
+    "selectedCpu": "CPU-选中：",
+    "allCpu": "CPU-总计：",
+    "chipNameTip": "芯片名称",
+    "deviceIdTip": "芯片号",
+    "availableTip": "芯片是否空闲",
+    "healthTip": "芯片健康指数（正常、一般警告、重要警告、紧急警告）",
+    "ipTip": "芯片IP地址",
+    "aicoreTip": "芯片利用率",
+    "hbmTip": "芯片已用HBM内存",
+    "powerTip": "芯片功耗",
+    "temperatureTip": "芯片温度",
+    "cpuUserTip": "运行于用户态的时间百分比",
+    "cpuSystemTip": "运行于内核态的时间百分比",
+    "cpuIdleTip": "处于空闲状态的时间百分比",
+    "cpuNiceTip": "运行低优先级进程的时间百分比",
+    "cpuIowaitTip": "等待IO的时间百分比",
+    "cpuIrqTip": "处理硬中断的时间百分比",
+    "cpuSoftirqTip": "处理软中断的时间百分比",
+    "cpuStealTip": "被其他虚拟机抢夺的时间百分比",
+    "cpuGuestTip": "运行虚拟机的时间百分比",
+    "cpuGuestniceTip": "运行低优先级虚拟机的时间百分比",
+    "cpuInterruptTip": "处理硬中断的时间百分比",
+    "cpuDpcTip": "远程调用的时间百分比"
   },
   "components": {
     "summaryTitle": "训练选择",
@@ -423,4 +452,4 @@
     "50545013": "请求的数据过大，无法返回，请使用其他维度重试。",
     "50545014": "查询的张量数据已被新数据替换，请刷新。"
   }
-}
\ No newline at end of file
+}

mindinsight/ui/src/router.js

@@ -102,5 +102,9 @@ export default new Router({
         },
       ],
     },
+    {
+      path: '/hardware-visual',
+      component: () => import('./views/train-manage/hardware-visual.vue'),
+    },
   ],
 });

mindinsight/ui/src/services/request-service.js

@@ -288,4 +288,13 @@ export default {
       },
     });
   },
+  getMetricsData() {
+    return axios({
+      method: 'get',
+      url: 'v1/mindinsight/resource_monitor/current/metrics',
+      headers: {
+        ignoreError: true,
+      },
+    });
+  },
 };

mindinsight/ui/src/store.js

@@ -30,6 +30,12 @@ export default new Vuex.Store({
     timeReloadValue: localStorage.timeReloadValue
       ? localStorage.timeReloadValue
       : 3,
+    // Scheduled hardware reload flag
+    isHardwareTimeReload: localStorage.isHardwareTimeReload === 'false' ? false : true,
+    // hardware reload time
+    hardwareTimeReloadValue: localStorage.hardwareTimeReloadValue
+      ? localStorage.hardwareTimeReloadValue
+      : 3,
     // multiSelevtGroup component count
     multiSelectedGroupCount: 0,
     tableId: 0,
@@ -75,6 +81,13 @@ 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++;
     },