!333 UI fix bug of step trace, optimize data-process and profiling-dashboard display

Merge pull request !333 from 黄伟锋/myMaster

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

@@ -134,7 +134,7 @@
     "lessThan": "小于",
     "applyAllSelectTag": "应用到当前所选标签",
     "placeHolderNumber": "请输入数值",
-    "noSpace":"请勿输入空格",
+    "noSpace": "请勿输入空格",
     "sameCompare": "不能有相同的比较运算符",
     "unreasonable": "逻辑不合理",
     "info": "提示",
@@ -318,7 +318,7 @@
     "pipelineTopTitle": "算子间队列平均使用率",
     "pipelineMiddleTitle": "算子间队列关系",
     "deviceQueueOp": "数据发送",
-    "deviceQueueOpTip": "前向+后向",
+    "deviceQueueOpTip": "前向+反向",
     "getNext": "取数据算子",
     "connectorQuene": "主机队列",
     "getData": "数据获取",
@@ -356,9 +356,12 @@
     "queueTip2": "队列为空比例：",
     "totalCapacity": "总容量",
     "averageCapacity": "平均使用容量",
-    "FPMessage": "FP起始算子：",
-    "BPMessage": "BP终止算子：",
-    "approximateTime": "总时长 ≈ "
+    "FPMessage": "前向起始算子：",
+    "BPMessage": "反向终止算子：",
+    "approximateTime": "总时长 ≈ ",
+    "stepInputTip": "请输入step值(1~{max}的正整数)",
+    "inputError": "输入参数异常，请输入一个1~{max}的正整数",
+    "defaultTip": "默认展示平均值"
   },
   "components": {
     "summaryTitle": "训练选择",

mindinsight/ui/src/router.js

@@ -16,6 +16,10 @@
 import Vue from 'vue';
 import Router from 'vue-router';
 Vue.use(Router);
+const VueRouterPush = Router.prototype.push;
+Router.prototype.push = function push(to) {
+  return VueRouterPush.call(this, to).catch((err) => err);
+};
 
 export default new Router({
   base: process.env.BASE_URL,
@@ -77,7 +81,8 @@ export default new Router({
       children: [
         {
           path: 'profiling-dashboard',
-          component: () => import('./views/train-manage/profiling-dashboard.vue'),
+          component: () =>
+            import('./views/train-manage/profiling-dashboard.vue'),
         },
         {
           path: 'step-trace',

mindinsight/ui/src/views/train-manage/data-process.vue

@@ -543,10 +543,13 @@ export default {
       };
       option.dataZoom = [
         {
-          startValue: 0,
+          start: 0,
+          end: 100,
           bottom: 0,
         },
         {
+          start: 0,
+          end: 100,
           type: 'inside',
           bottom: 0,
         },
@@ -756,11 +759,10 @@ export default {
                     },
                   ],
                   dataZoom: [
+                    {start: 0, end: 100, orient: 'vertical', right: 10},
                     {
-                      orient: 'vertical',
-                      right: 10,
-                    },
-                    {
+                      start: 0,
+                      end: 100,
                       type: 'inside',
                       orient: 'vertical',
                       right: 10,
@@ -840,13 +842,11 @@ export default {
             },
             dataZoom: [
               {
-                startValue: 0,
-                bottom: 10,
-              },
-              {
-                type: 'inside',
+                start: 0,
+                end: 100,
                 bottom: 10,
               },
+              {start: 0, end: 100, type: 'inside', bottom: 10},
             ],
           };
           echart.setOption(option);
@@ -1354,15 +1354,14 @@ export default {
         height: calc(100% - 25px);
       }
     }
-    .queue-step-wrap.single{
+    .queue-step-wrap.single {
       height: 100%;
-      .chart-content{
-        .chart-wrap{
+      .chart-content {
+        .chart-wrap {
           width: 100%;
         }
       }
     }
-
   }
   .pipeline-wrap {
     height: 100%;
@@ -1378,6 +1377,7 @@ export default {
         #average-rate {
           height: 100%;
           min-height: 180px;
+          overflow: hidden;
         }
       }
     }
@@ -1441,6 +1441,7 @@ export default {
             height: 100%;
             width: 100%;
             min-height: 220px;
+            overflow: hidden;
           }
         }
         .right {

mindinsight/ui/src/views/train-manage/operator.vue

@@ -528,6 +528,7 @@ export default {
                       row.op_sort_condition.type,
                   );
                 }
+                this.$refs.expandTable.doLayout();
               });
             }
           })

mindinsight/ui/src/views/train-manage/profiling-dashboard.vue

@@ -704,6 +704,21 @@ export default {
         rowIndex * this.svg.rowHeight + (this.svg.rowHeight - height) / 2;
       const g = document.createElementNS(this.svg.namespaceURI, 'g');
       const gChild = document.createElementNS(this.svg.namespaceURI, 'g');
+      let name = '';
+      switch (data.name) {
+        case 'iteration_interval':
+          name = this.$t('profiling.lterationGap');
+          break;
+        case 'fp_and_bp':
+          name = this.$t('profiling.deviceQueueOpTip');
+          break;
+        case 'tail':
+          name = this.$t('profiling.lterationTail');
+          break;
+        default:
+          name = data.name;
+          break;
+      }
 
       const rect = document.createElementNS(this.svg.namespaceURI, 'rect');
       rect.setAttribute('x', x1);
@@ -725,10 +740,10 @@ export default {
           `overflow:hidden;text-align:center;text-overflow:ellipsis;` +
           `white-space:nowrap;font-size:12px;line-height:${height}px;color:${color[0]}`,
       );
-      foreignObject.textContent = `${data.name}: ${data.duration.toFixed(4)}ms`;
+      foreignObject.textContent = `${name}: ${data.duration.toFixed(4)}ms`;
 
       const title = document.createElementNS(this.svg.namespaceURI, 'title');
-      title.textContent = `${data.name}: ${data.duration.toFixed(4)}ms`;
+      title.textContent = `${name}: ${data.duration.toFixed(4)}ms`;
 
       gChild.appendChild(rect);
       gChild.appendChild(foreignObject);

mindinsight/ui/src/views/train-manage/step-trace.vue

@@ -16,21 +16,32 @@ limitations under the License.
 <template>
   <div class="step-trace">
     <div class="step-trace-title">{{$t('profiling.stepTraceDetail')}}
+      <el-tooltip class="item"
+                  effect="light"
+                  :content="$t('profiling.defaultTip')"
+                  placement="top">
+        <span class="el-icon-question"></span>
+      </el-tooltip>
+
       <div class="pf-content-right">
         <div class="input-wrap">
-          <label>{{$t('profiling.stepSelect')}}</label>
-          <el-select v-model="selectedStep"
-                     filterable
-                     :placeholder="$t('profiling.selectStep')"
-                     @change="changeStep">
-            <el-option v-for="item in steps"
-                       :key="item.value"
-                       :label="item.label"
-                       :value="item.value">
-            </el-option>
-          </el-select>
+          <label>{{steps.label}}</label>
+          <el-input ref="step"
+                    v-model.number="steps.step"
+                    :disabled="steps.disabled"
+                    @keyup.native.enter="changeStep">
+          </el-input>
+          <el-button @click="changeStep"
+                     :disabled="steps.disabled">
+            {{$t('public.sure')}}
+          </el-button>
         </div>
       </div>
+      <el-button class="show-average"
+                 @click="changeStep(0)"
+                 :disabled="steps.disabled">
+        {{$t('profiling.showAverage')}}
+      </el-button>
     </div>
     <div class="step-message">
       <div class="step-left-padding-right">
@@ -137,8 +148,12 @@ export default {
       relativePath: this.$route.query.path,
       fp_start: '--',
       bp_end: '--',
-      steps: [],
-      selectedStep: '',
+      steps: {
+        step: null,
+        max: 0,
+        disabled: true,
+        label: this.$t('profiling.stepInputTip'),
+      },
       charts: [],
       svg: {
         data: [],
@@ -172,7 +187,7 @@ export default {
           percent: 'iteration_interval_percent',
         },
         {
-          name: 'Fp+bp',
+          name: this.$t('profiling.deviceQueueOpTip'),
           id: 'fp-bp',
           timeSummary: {},
           rate: 'fp_and_bp',
@@ -238,17 +253,33 @@ export default {
           val.clear();
         });
       }
-      this.setStep();
+      this.steps = {
+        step: null,
+        max: 0,
+        disabled: true,
+        label: this.$t('profiling.stepInputTip'),
+      };
+
       this.getTimeInfo('fp-bp', 'fp_and_bp');
       this.getTimeInfo('iter-gap', 'iteration_interval');
       this.getTimeInfo('tailing', 'tail');
       this.queryTrainingTrace(0);
     },
     changeStep(value) {
-      if (value === this.$t('profiling.showAverage')) {
-        value = 0;
+      if (value === 0) {
+        this.steps.step = null;
+        this.queryTrainingTrace(0);
+      } else if (
+        /^[0-9]*[1-9][0-9]*$/.test(this.steps.step) &&
+        this.steps.step <= this.steps.max
+      ) {
+        this.queryTrainingTrace(this.steps.step);
+      } else {
+        this.steps.step = null;
+        this.$message.error(
+            this.$t('profiling.inputError').replace('{max}', this.steps.max),
+        );
       }
-      this.queryTrainingTrace(value);
     },
     getTimeInfo(id, type) {
       const params = {
@@ -270,8 +301,18 @@ export default {
               });
             }
             if (res.data && res.data.info) {
-              if (this.steps.length <= 1) {
-                this.setStep(res.data.size);
+              if (res.data.size && !this.steps.max) {
+                this.steps.max = res.data.size;
+                this.steps.disabled = false;
+                this.steps.label = this.steps.label.replace(
+                    '{max}',
+                    this.steps.max,
+                );
+              }
+
+              const xAxisData = [];
+              for (let i = 1; i <= this.steps.max; i++) {
+                xAxisData.push(i);
               }
               const timeInfo = [];
               Object.keys(res.data.info).forEach((val) => {
@@ -285,9 +326,9 @@ export default {
                 const option = {
                   xAxis: {
                     type: 'category',
-                    data: this.steps.map((val, index) => index + 1),
+                    data: xAxisData,
                     name: 'step',
-                    max: this.steps.length,
+                    max: this.steps.max,
                   },
                   yAxis: {
                     type: 'value',
@@ -321,24 +362,23 @@ export default {
                   option.yAxis.name = `${this.$t(
                       'profiling.iterationGapTime',
                   )}(ms)`;
-                  this.tabsArr[0].noData = this.steps.length ? false : true;
+                  this.tabsArr[0].noData = this.steps.max ? false : true;
                 } else if (type === 'fp_and_bp') {
-                  option.yAxis.name = `fp+bp${this.$t('profiling.time')}(ms)`;
-                  this.tabsArr[1].noData = this.steps.length ? false : true;
+                  option.yAxis.name = `${this.$t(
+                      'profiling.deviceQueueOpTip',
+                  )}${this.$t('profiling.time')}(ms)`;
+                  this.tabsArr[1].noData = this.steps.max ? false : true;
                 } else if (type === 'tail') {
-                  option.yAxis.name = `tail${this.$t('profiling.time')}(ms)`;
-                  this.tabsArr[2].noData = this.steps.length ? false : true;
+                  option.yAxis.name = `${this.$t(
+                      'profiling.lterationTail',
+                  )}${this.$t('profiling.time')}(ms)`;
+                  this.tabsArr[2].noData = this.steps.max ? false : true;
                 }
                 this.initChart(option, id);
-              } else {
-                this.steps = [];
-                this.selectedStep = '';
               }
             }
           },
           (error) => {
-            this.steps = [];
-            this.selectedStep = '';
             if (type === 'iteration_interval') {
               this.tabsArr[0].noData = true;
             } else if (type === 'fp_and_bp') {
@@ -349,20 +389,6 @@ export default {
           },
       );
     },
-    setStep(step = 0) {
-      this.steps = [];
-      this.steps.push({
-        label: this.$t('profiling.showAverage'),
-        value: this.$t('profiling.showAverage'),
-      });
-      for (let i = 1; i <= step; i++) {
-        this.steps.push({
-          label: i,
-          value: i,
-        });
-      }
-      this.selectedStep = this.$t('profiling.showAverage');
-    },
     initChart(option, id) {
       this.$nextTick(() => {
         const chart = echarts.init(document.getElementById(id));
@@ -485,6 +511,21 @@ export default {
         rowIndex * this.svg.rowHeight + (this.svg.rowHeight - height) / 2;
       const g = document.createElementNS(this.svg.namespaceURI, 'g');
       const gChild = document.createElementNS(this.svg.namespaceURI, 'g');
+      let name = '';
+      switch (data.name) {
+        case 'iteration_interval':
+          name = this.$t('profiling.lterationGap');
+          break;
+        case 'fp_and_bp':
+          name = this.$t('profiling.deviceQueueOpTip');
+          break;
+        case 'tail':
+          name = this.$t('profiling.lterationTail');
+          break;
+        default:
+          name = data.name;
+          break;
+      }
 
       const rect = document.createElementNS(this.svg.namespaceURI, 'rect');
       rect.setAttribute('x', x1);
@@ -506,10 +547,10 @@ export default {
           `overflow:hidden;text-align:center;text-overflow:ellipsis;` +
           `white-space:nowrap;font-size:12px;line-height:${height}px;color:${color[0]}`,
       );
-      foreignObject.textContent = `${data.name}: ${data.duration.toFixed(4)}ms`;
+      foreignObject.textContent = `${name}: ${data.duration.toFixed(4)}ms`;
 
       const title = document.createElementNS(this.svg.namespaceURI, 'title');
-      title.textContent = `${data.name}: ${data.duration.toFixed(4)}ms`;
+      title.textContent = `${name}: ${data.duration.toFixed(4)}ms`;
 
       gChild.appendChild(rect);
       gChild.appendChild(foreignObject);
@@ -630,15 +671,36 @@ export default {
     padding: 0 15px;
     font-size: 16px;
     font-weight: bold;
+    .el-icon-question {
+      cursor: pointer;
+    }
     .pf-content-right {
       display: inline-block;
       margin-left: 35px;
-      label {
-        margin-right: 10px;
+      .input-wrap {
+        font-weight: normal;
+        label {
+          margin-right: 20px;
+        }
+        .el-input {
+          width: 150px;
+          margin-right: 16px;
+        }
+      }
+    }
+    .el-button {
+      border: 1px solid #00a5a7;
+      border-radius: 2px;
+      background-color: white;
+      color: #00a5a7;
+      padding: 7px 15px;
+      &:hover {
+        background: rgb(230, 246, 246);
       }
     }
-    .input-wrap {
-      font-weight: normal;
+    .show-average {
+      float: right;
+      margin-right: 20px;
     }
   }
   .step-message {
@@ -698,6 +760,7 @@ export default {
       .chart {
         height: calc(100% - 85px);
         min-height: 180px;
+        overflow: hidden;
       }
       .title {
         margin: 0 0 15px 20px;