!529 UI optimizing the display of profiling English pages and put profiling files together

Merge pull request !529 from 黄伟锋/myMaster

mindinsight/ui/src/locales/en-us.json

@@ -238,6 +238,8 @@
     "profilingDashboard": "Profiling Dashboard",
     "showAverage": "Average value",
     "iterationGapTime": "Step interval",
+    "fpBpTime": "Forward and Backward Propagation",
+    "tailTime": "Step Tail",
     "time": "Time",
     "operatorTimeConAnalysis": "Operator Time Consumption Analysis",
     "avgCost": "Average total consumed time:",
@@ -318,7 +320,7 @@
     "pipelineTopTitle": "Average usage of queues between operators",
     "pipelineMiddleTitle": "Queue relationship between operators",
     "deviceQueueOp": "Data Transmission",
-    "deviceQueueOpTip": "Data Transmission Operator",
+    "deviceQueueOpTip": "Forward and Backward Propagation",
     "getNext": "Data Obtaining Operator",
     "connectorQuene": "Host Queues",
     "getData": "Data Obtaining",
@@ -339,9 +341,9 @@
     "fpbpTimeRatio": "Ratio of time consumed by forward and backward propagation:",
     "iterationGapTimeRatio": "Ratio of time consumed by step interval:",
     "iterativeTailingTimeRatio": "Ratio of time consumed by step tail:",
-    "dataProcess": "This shows the data processing. Data is stored in the host queue during data processing, and then stored in the data queue on a chip during data transmission. Finally, the data transmission operator get_next transmits the data to forward propagation.",
+    "dataProcess": "This shows the data processing. Data is stored in the host queue during data processing, and then stored in the data queue on a chip during data transmission. Finally, the forward and backward propagation get_next transmits the data to forward propagation.",
     "dataProcessInfo": "By determining the empty host and data queues, you can preliminarily determine the stage where the performance is abnormal.",
-    "analysisOne": "1. If the step interval is long and some batches of the data queue on a chip are empty, the performance is abnormal during data processing and transmission. Otherwise, locate the internal problem of the data transmission operator get_next.",
+    "analysisOne": "1. If the step interval is long and some batches of the data queue on a chip are empty, the performance is abnormal during data processing and transmission. Otherwise, locate the internal problem of the forward and backward propagation get_next.",
     "analysisTwo": "2. If the performance is abnormal during data processing and transmission, check the host queue. If the host queue is empty at a high probability, the exception may occur during data transmission.",
     "higherAnalysis": "Note: You can perform advanced analysis based on the time consumed by operators.",
     "chipInfo": "Ratio of empty data queues on a chip:",

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

@@ -236,6 +236,8 @@
     "profilingDashboard": "性能看板",
     "showAverage": "展示平均值",
     "iterationGapTime": "迭代间隙时间",
+    "fpBpTime": "前向+反向时间",
+    "tailTime": "迭代拖尾时间",
     "time": "时间",
     "operatorTimeConAnalysis": "算子耗时分析",
     "avgCost": "平均总耗时：",

mindinsight/ui/src/router.js

@@ -80,25 +80,24 @@ export default new Router({
     },
     {
       path: '/profiling',
-      component: () => import('./views/train-manage/profiling.vue'),
+      component: () => import('./views/profiling/profiling.vue'),
       redirect: '/profiling/profiling-dashboard',
       children: [
         {
           path: 'profiling-dashboard',
-          component: () =>
-            import('./views/train-manage/profiling-dashboard.vue'),
+          component: () => import('./views/profiling/profiling-dashboard.vue'),
         },
         {
           path: 'step-trace',
-          component: () => import('./views/train-manage/step-trace.vue'),
+          component: () => import('./views/profiling/step-trace.vue'),
         },
         {
           path: 'operator',
-          component: () => import('./views/train-manage/operator.vue'),
+          component: () => import('./views/profiling/operator.vue'),
         },
         {
           path: 'data-process',
-          component: () => import('./views/train-manage/data-process.vue'),
+          component: () => import('./views/profiling/data-process.vue'),
         },
       ],
     },

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

@@ -902,7 +902,9 @@ export default {
             xAxis: {
               name: `${this.$t('profiling.sampleInterval')}/${
                 data.sample_interval
-              }ms`,
+              }ms`
+                  .split(' ')
+                  .join('\n'),
               data: dataY.map((val, index) => index + 1),
             },
             yAxis: {

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

@@ -108,8 +108,13 @@ limitations under the License.
                                        :sortable="ele === 'op_info' ? false : 'custom'"
                                        :width="(ele==='avg_execution_time'|| ele==='subgraph' ||
                                         ele==='op_name'|| ele==='op_type')?'220':''"
-                                       show-overflow-tooltip
-                                       :label="ele==='avg_execution_time'?`${ele} (${$t('profiling.unit')})`:ele">
+                                       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}}
+                          </div>
+                        </template>
                       </el-table-column>
                     </el-table>
                     <el-pagination :current-page="props.row.opDetailPage.offset + 1"
@@ -125,8 +130,13 @@ limitations under the License.
               <el-table-column v-for="(item, $index) in opTypeCol"
                                :property="item"
                                :key="$index"
-                               sortable
-                               :label="item==='execution_time'?`${item} (${$t('profiling.unit')})`:item">
+                               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}}
+                  </div>
+                </template>
               </el-table-column>
             </el-table>
             <el-table v-show="statisticType && opAllTypeList.opDetailCol && opAllTypeList.opDetailCol.length"
@@ -141,11 +151,16 @@ limitations under the License.
               <el-table-column v-for="(item, $index) in opAllTypeList.opDetailCol"
                                :property="item"
                                :key="$index"
-                               :label="item==='avg_execution_time'?`${item} (${$t('profiling.unit')})`:item"
                                :sortable="item === 'op_info' ? false : 'custom'"
                                :width="(item==='avg_execution_time'|| item==='subgraph' ||
                                 item==='op_name'|| item==='op_type')?'220':''"
                                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}}
+                  </div>
+                </template>
               </el-table-column>
             </el-table>
             <el-pagination v-show="statisticType"
@@ -204,10 +219,16 @@ limitations under the License.
               <el-table-column v-for="(item, $index) in opCpuList.opDetailCol"
                                :property="item"
                                :key="$index"
-                               :label="(item==='total_time' || item==='dispatch_time')?
-                               `${item} (${$t('profiling.unit')})`:item"
                                sortable="custom"
                                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}}
+                  </div>
+                </template>
               </el-table-column>
             </el-table>
             <el-pagination v-if="opCpuList.opDetailList.length"
@@ -829,6 +850,7 @@ export default {
      */
     setOption(chart) {
       const option = {};
+      const maxLabelLength = 20;
       if (!chart.type) {
         option.legend = {
           data: [],
@@ -885,13 +907,18 @@ export default {
         option.series = [
           {
             type: 'pie',
-            center: ['25%', '65%'],
+            center: ['23%', '60%'],
             data: chart.data,
             radius: '50%',
-            lable: {
+            label: {
               position: 'outer',
-              alignTo: 'none',
-              bleedMargin: 5,
+              alignTo: 'labelLine',
+              formatter: (params) => {
+                return params.data.name &&
+                  params.data.name.length > maxLabelLength
+                  ? `${params.data.name.slice(0, maxLabelLength)}...`
+                  : params.data.name;
+              },
             },
             itemStyle: {
               normal: {
@@ -1111,6 +1138,11 @@ export default {
   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 {

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

@@ -273,6 +273,7 @@ limitations under the License.
           <p v-show="!pieChart.initOver">{{$t("public.dataLoading")}}</p>
           <p v-show="pieChart.initOver">{{$t("public.noData")}}</p>
         </div>
+
         <div class="op-time-content">
           <div id="pieChart"
                class="pie-chart"
@@ -358,7 +359,6 @@ limitations under the License.
           <div class="info-line">
             <span>{{$t('profiling.opTimes')}}</span><span>{{timelineInfo.opTimes + $t('profiling.times')}}</span>
           </div>
-
         </div>
         <div class="image-noData"
              v-if="timelineInfo.noData">
@@ -369,6 +369,7 @@ limitations under the License.
           <p v-show="!timelineInfo.initOver">{{$t("public.dataLoading")}}</p>
           <p v-show="timelineInfo.initOver">{{$t("public.noData")}}</p>
         </div>
+
       </div>
     </div>
   </div>
@@ -485,7 +486,12 @@ export default {
           this.timelineInfo.initOver = true;
           this.processSummary.initOver = true;
         }
-        if (newValue.query.dir && newValue.query.id && newValue.query.path && newValue.curCardNum) {
+        if (
+          newValue.query.dir &&
+          newValue.query.id &&
+          newValue.query.path &&
+          newValue.curCardNum
+        ) {
           this.summaryPath = newValue.query.dir;
           this.trainingJobId = newValue.query.id;
           this.relativePath = newValue.query.path;
@@ -1114,13 +1120,17 @@ export default {
             this.timelineInfo.initOver = true;
             if (res && res.data) {
               this.timelineInfo.noData = false;
-              this.timelineInfo.totalTime = this.toFixedFun(
-                  res.data.total_time,
-                  4,
-              );
-              this.timelineInfo.streamNum = res.data.num_of_streams;
-              this.timelineInfo.opNum = res.data.num_of_ops;
-              this.timelineInfo.opTimes = res.data.op_exe_times;
+
+              this.timelineInfo.totalTime =
+              this.toFixedFun(res.data.total_time, 4) ||
+              (res.data.total_time === 0 ? 0 : '--');
+              this.timelineInfo.streamNum =
+              res.data.num_of_streams ||
+              (res.data.num_of_streams === 0 ? 0 : '--');
+              this.timelineInfo.opNum =
+              res.data.num_of_ops || (res.data.num_of_ops === 0 ? 0 : '--');
+              this.timelineInfo.opTimes =
+              res.data.op_exe_times || (res.data.op_exe_times === 0 ? 0 : '--');
             } else {
               this.timelineInfo.noData = true;
             }

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

@@ -122,20 +122,19 @@ export default {
       };
       RequestService.getProfilerDeviceData(params)
           .then((res) => {
-            if (res && res.data) {
+            if (res && res.data && res.data.length) {
               const deviceList = res.data;
-              if (deviceList.length) {
-                deviceList.forEach((item) => {
-                  this.CardNumArr.push({
-                    value: item,
-                  });
+              deviceList.forEach((item) => {
+                this.CardNumArr.push({
+                  value: item,
                 });
-                this.curDashboardInfo.curCardNum = this.CardNumArr[0].value;
-                this.getDataOfProfileHelper();
-              }
+              });
+              this.curDashboardInfo.curCardNum = this.CardNumArr[0].value;
+              this.getDataOfProfileHelper();
             } else {
               this.CardNumArr = [];
               this.curDashboardInfo.curCardNum = '';
+              this.curDashboardInfo.initOver = true;
             }
           })
           .catch(() => {

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

@@ -30,7 +30,9 @@ limitations under the License.
                     v-model.number="steps.step"
                     :disabled="steps.disabled"
                     @blur="resetStep"
-                    @keyup.native.enter="changeStep">
+                    @keyup.native.enter="changeStep"
+                    @clear="clearStep"
+                    clearable>
           </el-input>
           <el-button @click="changeStep"
                      :disabled="steps.disabled">
@@ -320,9 +322,18 @@ export default {
      */
     resetStep() {
       setTimeout(() => {
-        this.steps.step = this.steps.trueStep;
+        if (!this.$refs.step.focused) {
+          this.steps.step = this.steps.trueStep;
+        }
       }, 200);
     },
+    /**
+     * Clear the current step value
+     */
+    clearStep() {
+      this.steps.step = null;
+      this.$refs.step.focus();
+    },
     /**
      * Get different types of time information
      * @param {String} id Dom id
@@ -380,7 +391,8 @@ export default {
                     type: 'value',
                     name: '',
                     nameTextStyle: {
-                      padding: [0, 0, 0, 30],
+                      padding: [0, 0, 0, -30],
+                      align: 'left',
                     },
                   },
                   grid: {
@@ -411,15 +423,11 @@ export default {
                   this.tabsArr[0].noData = this.steps.max ? false : true;
                   this.tabsArr[0].initOver = true;
                 } else if (type === 'fp_and_bp') {
-                  option.yAxis.name = `${this.$t(
-                      'profiling.deviceQueueOpTip',
-                  )}${this.$t('profiling.time')}(ms)`;
+                  option.yAxis.name = `${this.$t('profiling.fpBpTime')}(ms)`;
                   this.tabsArr[1].noData = this.steps.max ? false : true;
                   this.tabsArr[1].initOver = true;
                 } else if (type === 'tail') {
-                  option.yAxis.name = `${this.$t(
-                      'profiling.lterationTail',
-                  )}${this.$t('profiling.time')}(ms)`;
+                  option.yAxis.name = `${this.$t('profiling.tailTime')}(ms)`;
                   this.tabsArr[2].noData = this.steps.max ? false : true;
                   this.tabsArr[2].initOver = true;
                 }
@@ -986,6 +994,7 @@ export default {
       .chart {
         height: calc(100% - 85px);
         min-height: 180px;
+        min-width: 250px;
         overflow: hidden;
       }
       .title {