!138 UI support Profiler(2nd commit)

Merge pull request !138 from 潘慧/master_ph2

mindinsight/ui/src/components/header.vue

@@ -161,6 +161,8 @@ export default {
         } else {
           return '/' + str[1];
         }
+      } else if (this.$route.path === '/profiler') {
+        return '/summary-manage';
       } else {
         return this.$route.path;
       }

mindinsight/ui/src/components/multiselectGroup.vue

@@ -48,7 +48,8 @@ limitations under the License.
                         popper-class="tooltip-show-content"
                         :content="item.label"
                         placement="top">
-              <span class="select-disable">{{item.label}}</span>
+              <span class="select-disable"><i title="CACHING" v-if="item.loading"
+                   class="el-icon-loading"></i>{{item.label}}</span>
             </el-tooltip>
           </span>
         </div>
@@ -78,7 +79,8 @@ limitations under the License.
                       popper-class="tooltip-show-content"
                       :content="item.label"
                       placement="top">
-            <span class="select-disable">{{item.label}}</span>
+            <span class="select-disable">><i title="CACHING" v-if="item.loading"
+                 class="el-icon-loading"></i>{{item.label}}</span>
           </el-tooltip>
         </span>
       </div>
@@ -134,8 +136,8 @@ export default {
      */
     init() {
       this.itemId =
-      `${new Date().getTime()}` +
-      `${this.$store.state.multiSelectedGroupCount}`;
+        `${new Date().getTime()}` +
+        `${this.$store.state.multiSelectedGroupCount}`;
       this.$store.commit('multiSelectedGroupComponentNum');
       this.$nextTick(() => {
         this.resizeCallback();
@@ -412,6 +414,19 @@ export default {
       white-space: nowrap;
       overflow: hidden;
       text-align: left;
+      position: relative;
+      .loading-icon {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        text-align: center;
+        background: rgba(255, 255, 255, 0.5);
+        i {
+          font-weight: bold;
+        }
+      }
     }
   }
   .item-disable {

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

@@ -8,7 +8,17 @@
     "tagFilterPlaceHolder": "请输入需要的标签(支持正则表达式)",
     "dataError": "获取到的数据异常",
     "regIllegal": "请输入正确的检索条件",
-    "stayTuned": "敬请期待"
+    "stayTuned": "敬请期待",
+   
+    "select": "请选择",
+    "search": "请搜索",
+    "enter": "请输入",
+    "remark": "备注",
+    "sure": "确定",
+    "clear": "清空",
+    "cancel": "取消",
+    "selectAll": "全选",
+    "deselectAll": "取消全选"
   },
   "symbols": {
     "leftbracket": "(",
@@ -31,7 +41,9 @@
     "viewDashboard": "训练看板",
     "viewProfiler": "性能分析",
     "modelTraceback": "模型溯源",
-    "dataTraceback": "数据溯源"
+    "dataTraceback": "数据溯源",
+    "comparePlate": "对比看板",
+    "disableProfilerTip": "无profiler日志，无法查看性能分析"
   },
   "modelTraceback": {
     "summaryPath": "训练日志路径",
@@ -51,7 +63,19 @@
     "userDefined": "自定义数据",
     "metric": "度量指标",
     "deviceNum": "device数目",
-    "mixedItemMessage": "该参数含有多种类型数据，无法筛选展示"
+    "mixedItemMessage": "该参数含有多种类型数据，无法筛选展示",
+    "displayColumn": "请选择展示列",
+    "hide": "隐藏记录",
+    "unhide": "取消隐藏",
+    "hideData": "条数据",
+    "totalHide": "本页共隐藏{n}条数据",
+    "mustExist":"必选项",
+    "remarkValidation": "备注为英文字母、数字、中文、下划线、中划线、点的组合，长度范围为[1,128]字符",
+    "changeSuccess": "修改成功",
+    "metricLabel": "Metric",
+    "userDefinedLabel": "User Defined",
+    "hyperLabel": "Hyper",
+    "otherLabel": "其他"
   },
   "dataTraceback": {
     "details": "详情",
@@ -93,7 +117,7 @@
     "open": "展开",
     "close": "折叠",
     "invalidData": "存在无效数据",
-    "restore":"还原"
+    "restore": "还原"
   },
 
   "images": {
@@ -160,9 +184,22 @@
     "next": "下一步",
     "finish": "完成"
   },
+  "profiler": {
+    "titleText": "性能分析",
+    "currentCard": "当前卡片",
+    "pie": "饼图",
+    "bar": "柱状图",
+    "operatorStatistics": "算子统计",
+    "operatorTypeStatistics": "算子类别统计",
+    "allOperator": "全部",
+    "ClassificationOperator": "分类",
+    "card": "卡",
+    "searchByType": "请输入算子类型搜索",
+    "searchByName": "请输入算子名称搜索"
+  },
   "components": {
-    "summaryTitle":"run选择",
-    "tagTitle":"tag选择",
+    "summaryTitle":"训练作业选择",
+    "tagTitle":"标签选择",
     "tagSelectTitle": "标签选择",
     "selectAll": "全选",
     "tagFilterPlaceHolder": "请输入需要的标签(支持正则表达式)",

mindinsight/ui/src/router.js

@@ -67,6 +67,9 @@ 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'),
     },

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

@@ -33,6 +33,15 @@ export default {
       data: params.body,
     });
   },
+  // API for model and data source tracing
+  putLineagesData(params) {
+    return axios({
+      method: 'put',
+      url: '/v1/mindinsight/lineagemgr/lineages?train_id='+params.train_id,
+      data: params.body,
+    });
+  },
+
 
   // query summary list
   querySummaryList(params) {
@@ -158,4 +167,18 @@ export default {
       params: params,
     });
   },
+  getProfilerDeviceData(params) {
+    return axios({
+      method: 'get',
+      url: '/v1/mindinsight/profiler_device',
+      params: params,
+    });
+  },
+  getProfilerOpTypeList(params) {
+    return axios({
+      method: 'get',
+      url: '/v1/mindinsight/profiler_device',
+      params: params,
+    });
+  },
 };

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

@@ -58,12 +58,15 @@ limitations under the License.
             <!--operate   -->
             <el-table-column prop="operate"
                              :label="$t('summaryManage.operation')"
-                             width="170">
+                             width="220">
               <template slot-scope="scope">
-                <el-button type="text"
-                           class="cursor-type"
-                           @click.stop="goToTrainDashboard(scope.row)">
+                <el-button type="text" @click.stop="goToTrainDashboard(scope.row)">
                   {{$t('summaryManage.viewDashboard')}} </el-button>
+                <el-button type="text" class="operate-btn" v-if="scope.row.viewProfiler"
+                  @click.stop="goToProfiler(scope.row)">
+                  {{$t('summaryManage.viewProfiler')}} </el-button>
+                <el-button type="text" class="operate-btn" disabled :title="$t('summaryManage.disableProfilerTip')"
+                v-if="!scope.row.viewProfiler">{{$t('summaryManage.viewProfiler')}} </el-button>
               </template>
             </el-table-column>
           </el-table>
@@ -135,6 +138,7 @@ export default {
                     i.relative_path = i.relative_path ? i.relative_path : '--';
                     i.create_time = i.create_time ? i.create_time : '--';
                     i.update_time = i.update_time ? i.update_time : '--';
+                    i.viewProfiler = i.profiler_dir && i.profiler_dir.length;
                   });
                   this.currentFolder = res.data.name ? res.data.name : '--';
                   this.pagination.total = res.data.total;
@@ -170,6 +174,21 @@ export default {
       });
       window.open(routeUrl.href, '_blank');
     },
+    /**
+     * go to Profiler
+     * @param {Object} row select row
+     */
+    goToProfiler(row) {
+      const profilerDir = encodeURIComponent(row.profier_dir);
+      const trainId = encodeURIComponent(row.train_id);
+      this.$router.push({
+        path: '/profiler',
+        query: {
+          dir: profilerDir,
+          id: trainId,
+        },
+      });
+    },
   },
   components: {},
 };
@@ -212,5 +231,8 @@ export default {
     margin-top: 16px;
     text-align: right;
   }
+  .operate-btn {
+    margin-left: 20px;
+  }
 }
 </style>