!260 UI supprot profiling feature (2nd commit)

Merge pull request !260 from 潘慧/master_ph2

mindinsight/ui/src/components/header.vue

@@ -157,13 +157,11 @@ export default {
     getActive() {
       const str = this.$route.path.split('/');
       if (str.length > 2) {
-        if (str[1] === 'train-manage') {
+        if (str[1] === 'train-manage' || str[1] === 'profiling') {
           return '/summary-manage';
         } else {
           return '/' + str[1];
         }
-      } else if (this.$route.path === '/profiler') {
-        return '/summary-manage';
       } else {
         return this.$route.path;
       }

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

@@ -207,7 +207,7 @@
     "finish": "完成",
     "dataTooLarge": "节点和边的数量过多，导致打开失败"
   },
-  "profiler": {
+  "operator": {
     "titleText": "性能分析",
     "currentCard": "当前卡片",
     "pie": "饼图",
@@ -220,6 +220,54 @@
     "searchByType": "请输入算子类型搜索",
     "searchByName": "请输入算子名称搜索"
   },
+  "profiling": {
+    "profilingDashboard": "性能看板",
+    "selectStep": "请选择step",
+    "showAverage": "展示平均值",
+    "iterationGapTime": "迭代间隙时间",
+    "time": "时间",
+    "inputNum": "请输入卡编号",
+    "path": "路径",
+    "number": "卡编号",
+    "distribution": "分布图",
+    "queueEmptyRatio": "队列空比例",
+    "queueFullRatio": "队列满比例",
+    "dataQueueDis": "数据队列分布图",
+    "operatorTimeConAnalysis": "算子耗时分析",
+    "timeConStastic": "耗时统计",
+    "avgCost": "平均总耗时",
+    "getCost": "平均取数据耗时",
+    "pushCost": "平均push耗时",
+    "lterationGap": "迭代间隙",
+    "lterationTail": "迭代拖尾",
+    "propertion": "占比",
+    "title": "迭代间隙流程分析",
+    "dataDeal": "数据处理",
+    "dataQueue": "数据队列",
+    "errorTip": "个step出现异常",
+    "pipelineError": "Pipeline异常step",
+    "deviceQueueError": "device_queue_op异常step",
+    "getNextError": "get_next异常step",
+    "smartHelper":"小助手",
+    "suggestions":"优化建议",
+    "stepSelect":"Step选择",
+    "curCard":"当前卡片",
+    "stepTrace":"迭代轨迹",
+    "mindData":"数据准备",
+    "timeLine":"时间线",
+    "rankOfOperator":"算子耗时统计排名",
+    "stepTraceDetail":"迭代轨迹详情",
+    "viewDetail":"查看详情",
+    "stepNum":"耗时step数",
+    "iterGapTimeLabel":"迭代间隙时长",
+    "iterGapRateLabel":"迭代间隙占比",
+    "fpBpTimeLabel":"FP+BP时长",
+    "fpBpRateLabel":"FP+BP占比",
+    "tailTimeLabel":"迭代拖尾时长",
+    "tailRateLabel":"迭代拖尾占比",
+    "operatorDetail": "算子详情",
+    "times": "次"  
+  },
   "components": {
     "summaryTitle": "训练选择",
     "tagSelectTitle": "标签选择",
@@ -233,7 +281,6 @@
     "50540001": "参数类型错误，请检查请求参数类型是否都符合要求",
     "50540002": "参数值错误，请检查请求参数值是否都符合要求",
     "50540003": "参数缺失必需的参数，请检查请求参数是否必填项都满足",
-
     "50545001": "API 路由资源不存在",
     "50545002": "请求API的HTTP方法错误",
     "50545005": "训练作业不存在",
@@ -250,6 +297,7 @@
     "50542215": "查询参数错误",
     "50542216": "Summary日志文件未找到",
     "50542217": "Summary日志路径错误",
-    "50542218": "筛选参数错误"
+    "50542218": "筛选参数错误",
+    "50546102": "step_id取值错误"
   }
 }

mindinsight/ui/src/router.js

@@ -67,11 +67,27 @@ export default new Router({
       component: () => import('./views/train-manage/data-traceback.vue'),
     },
     {
-      path: '/profiler',
-      component: () => import('./views/train-manage/profiler.vue'),
-    }, {
       path: '/compare-plate',
       component: () => import('./views/train-manage/compare-plate.vue'),
     },
+    {
+      path: '/profiling',
+      component: () => import('./views/train-manage/profiling.vue'),
+      redirect: '/profiling/profiling-dashboard',
+      children: [
+        {
+          path: 'profiling-dashboard',
+          component: () => import('./views/train-manage/profiling-dashboard.vue'),
+        },
+        {
+          path: 'step-trace',
+          component: () => import('./views/train-manage/step-trace.vue'),
+        },
+        {
+          path: 'operator',
+          component: () => import('./views/train-manage/operator.vue'),
+        },
+      ],
+    },
   ],
 });

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

@@ -171,6 +171,30 @@ export default {
       url: '/v1/mindinsight/profile/ops/search',
       params: params.params,
       data: params.body,
+      headers: {
+        ignoreError: true,
+      },
+    });
+  },
+  // query training trace
+  queryTrainingTrace(params) {
+    return axios({
+      method: 'get',
+      url: '/v1/mindinsight/profile/training-trace/graph',
+      params: params,
+      headers: {
+        ignoreError: true,
+      },
+    });
+  },
+  targetTimeInfo(params) {
+    return axios({
+      method: 'get',
+      url: '/v1/mindinsight/profile/training-trace/target-time-info',
+      params: params,
+      headers: {
+        ignoreError: true,
+      },
     });
   },
 };

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

@@ -168,11 +168,11 @@ export default {
     if (!this.$route.query || !this.$route.query.train_id) {
       this.trainJobID = '';
       this.$message.error(this.$t('trainingDashboard.invalidId'));
-      document.title = this.$t('trainingDashboard.dataMap') + '-MindInsight';
+      document.title = `${this.$t('trainingDashboard.dataMap')}-MindInsight`;
       return;
     }
     this.trainJobID = this.$route.query.train_id;
-    document.title = decodeURIComponent(this.trainJobID) + '-' + this.$t('trainingDashboard.dataMap') + '-MindInsight';
+    document.title = `${decodeURIComponent(this.trainJobID)}-${this.$t('trainingDashboard.dataMap')}-MindInsight`;
     this.$nextTick(() => {
       this.queryGraphData();
     });

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

@@ -108,7 +108,7 @@ export default {
   destroyed() {},
   activated() {},
   mounted() {
-    document.title = this.$t('summaryManage.summaryList') + '-MindInsight';
+    document.title = `${this.$t('summaryManage.summaryList')}-MindInsight`;
     this.$nextTick(() => {
       this.init();
     });
@@ -181,13 +181,17 @@ export default {
     goToProfiler(row) {
       const profilerDir = encodeURIComponent(row.profiler_dir);
       const trainId = encodeURIComponent(row.train_id);
-      this.$router.push({
-        path: '/profiler',
+      const path = encodeURIComponent(row.relative_path);
+
+      const routeUrl = this.$router.resolve({
+        path: '/profiling',
         query: {
           dir: profilerDir,
           id: trainId,
+          path: path,
         },
       });
+      window.open(routeUrl.href, '_blank');
     },
   },
   components: {},

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

@@ -146,10 +146,10 @@ limitations under the License.
         </div>
       </div>
       <div class="cl-dashboard-con-up no-data-hover">
-        <div class="comming-soon-content">
-          <div class="comming-soon-container">
-            <img :src="require('@/assets/images/comming-soon.png')" />
-            <p class='comming-soon-text'>
+        <div class="coming-soon-content">
+          <div class="coming-soon-container">
+            <img :src="require('@/assets/images/coming-soon.png')" />
+            <p class='coming-soon-text'>
               {{$t("public.stayTuned")}}
             </p>
           </div>
@@ -1888,14 +1888,14 @@ export default {
     }
   }
 
-  .comming-soon-content {
+  .coming-soon-content {
     width: 100%;
     height: 100%;
     text-align: center;
-    .comming-soon-container {
+    .coming-soon-container {
       position: relative;
       top: calc(50% - 88px);
-      .comming-soon-text {
+      .coming-soon-text {
         color: #000000;
         font-size: 16px;
       }