!546 Add training log path to training panel sub-page and profiling page

Merge pull request !546 from 秦君艳/path

mindinsight/ui/src/views/profiling/profiling.vue

@@ -20,6 +20,10 @@ limitations under the License.
            :class="{collapse:collapse}">
         <div class="helper"
              v-show="!collapse">
+          <div class="summary-path">
+            {{$t('trainingDashboard.summaryDirPath')}}
+            <span>{{ summaryPath}}</span>
+          </div>
           <div class="cur-card">
             <label>{{$t('profiling.curCard')}}</label>
             <el-select v-model="curDashboardInfo.curCardNum"
@@ -61,6 +65,7 @@ import RequestService from '../../services/request-service';
 export default {
   data() {
     return {
+      summaryPath: this.$route.query.summaryPath,
       tipsArrayList: [
         'step_trace-iter_interval',
         'minddata_pipeline-general',
@@ -331,11 +336,26 @@ export default {
       }
       .helper {
         padding: 32px;
+        padding-top: 20px;
         height: 100%;
         overflow-y: auto;
         margin-left: 24px;
         background: #edf0f5;
         word-wrap: break-word;
+        .summary-path {
+          line-height: 24px;
+          font-size: 14px;
+          overflow: hidden;
+          font-weight: bold;
+          padding-bottom: 10px;
+          word-break: break-all;
+          text-overflow: -o-ellipsis-lastline;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: -webkit-box;
+          -webkit-line-clamp: 4;
+          -webkit-box-orient: vertical;
+        }
         .nowrap-style {
           white-space: nowrap;
         }

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

@@ -19,7 +19,14 @@ limitations under the License.
   <div class="cl-data-map-manage">
     <div class='data-map-p32'>
       <div class="cl-title cl-data-map-title">
-        <div class="cl-title-left">{{$t('dataMap.titleText')}}</div>
+        <div class="cl-title-left">{{$t('dataMap.titleText')}}
+          <div class="path-message">
+            <span>{{$t('symbols.leftbracket')}}</span>
+            <span>{{$t('trainingDashboard.summaryDirPath')}}</span>
+            <span>{{summaryPath}}</span>
+            <span>{{$t('symbols.rightbracket')}}</span>
+          </div>
+        </div>
         <div class="cl-title-right">
           <div class="cl-close-btn"
                @click="jumpToTrainDashboard">
@@ -162,6 +169,7 @@ export default {
       trainJobID: '',
       selectedNode: [],
       noData: false,
+      summaryPath: this.$route.query.summaryPath,
     };
   },
   mounted() {
@@ -213,8 +221,9 @@ export default {
       if (!data) {
         return;
       }
-      const key = `${parentKey ? parentKey + '/' : ''}${data.op_type ||
-        ''}_${index}`;
+      const key = `${parentKey ? parentKey + '/' : ''}${
+        data.op_type || ''
+      }_${index}`;
       const obj = {
         key: key,
         id: '',
@@ -329,9 +338,7 @@ export default {
           this.graphviz = null;
         }
       }, 100);
-      d3.select('#graph')
-          .selectAll('title')
-          .remove();
+      d3.select('#graph').selectAll('title').remove();
       this.startApp();
     },
     /**
@@ -631,6 +638,13 @@ export default {
   .cl-data-map-title {
     height: 56px;
     line-height: 56px;
+    .path-message {
+      display: inline-block;
+      line-height: 20px;
+      padding: 0px 4px 15px 4px;
+      font-weight: bold;
+      vertical-align: bottom;
+    }
   }
   .data-map-p32 {
     height: 100%;

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

@@ -59,6 +59,12 @@ limitations under the License.
       <div class="cl-title cl-graph-title">
         <div class="cl-title-left">
           {{ $t('graph.titleText') }}
+          <div class="path-message">
+            <span>{{$t('symbols.leftbracket')}}</span>
+            <span>{{$t('trainingDashboard.summaryDirPath')}}</span>
+            <span>{{summaryPath}}</span>
+            <span>{{$t('symbols.rightbracket')}}</span>
+          </div>
           <span @click="showUserGuide"
                 class="guide">
             <i class="guide-icon"></i>
@@ -421,6 +427,7 @@ const d3 = {select, selectAll, zoom};
 export default {
   data() {
     return {
+      summaryPath: this.$route.query.summaryPath,
       clickScope: {}, // Information about the node that is clicked for the first time.
       smallResize: {}, // The container of display area box.
       insideBox: {}, // Basic information about the display area box
@@ -2968,6 +2975,13 @@ export default {
   .cl-graph-title {
     height: 56px;
     line-height: 56px;
+    .path-message {
+      display: inline-block;
+      line-height: 20px;
+      padding: 0px 4px 15px 4px;
+      font-weight: bold;
+      vertical-align: bottom;
+    }
     .guide {
       cursor: pointer;
       margin-left: 10px;

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

@@ -18,7 +18,14 @@ limitations under the License.
     <div class="histogram-bk">
       <!-- Title area -->
       <div class="cl-title cl-histogram-title">
-        <div class="cl-title-left">{{$t('histogram.titleText')}}</div>
+        <div class="cl-title-left">{{$t('histogram.titleText')}}
+          <div class="path-message">
+            <span>{{$t('symbols.leftbracket')}}</span>
+            <span>{{$t('trainingDashboard.summaryDirPath')}}</span>
+            <span>{{summaryPath}}</span>
+            <span>{{$t('symbols.rightbracket')}}</span>
+          </div>
+        </div>
         <div class="cl-title-right">
           <div class="cl-close-btn"
                @click="jumpToTrainDashboard">
@@ -126,6 +133,7 @@ export default {
     return {
       tagList: [], // Tag list.
       trainingJobId: this.$route.query.train_id, // ID of the current training job.
+      summaryPath: this.$route.query.summaryPath,
       originDataArr: [], // List of all data.
       initOver: false, // Indicates whether the initialization is complete.
       curAxisName: 0, // Current time type.
@@ -263,7 +271,10 @@ export default {
         document.title = this.$t('histogram.titleText') + '-MindInsight';
         return;
       }
-      document.title = decodeURIComponent(this.$route.query.train_id) +'-' + this.$t('histogram.titleText') +
+      document.title =
+        decodeURIComponent(this.$route.query.train_id) +
+        '-' +
+        this.$t('histogram.titleText') +
         '-MindInsight';
       this.getOriginData();
       if (this.isTimeReload) {
@@ -810,25 +821,23 @@ export default {
               '.cl-histogram-show-data-content',
           ).offsetTop;
           if (height + e.event.y + 20 > screenHeight && screenHeight > height) {
-            document.querySelector('#echartTip').style.top = `${e.event.y +
-              scrollTop -
-              height -
-              20 -
-              offsetTop}px`;
+            document.querySelector('#echartTip').style.top = `${
+              e.event.y + scrollTop - height - 20 - offsetTop
+            }px`;
           } else {
-            document.querySelector('#echartTip').style.top = `${e.event.y +
-              scrollTop +
-              20 -
-              offsetTop}px`;
+            document.querySelector('#echartTip').style.top = `${
+              e.event.y + scrollTop + 20 - offsetTop
+            }px`;
           }
           // Blank area on the right of the chart is 80
           if (width + e.event.x + 80 > screenWidth && screenWidth > width) {
-            document.querySelector('#echartTip').style.left = `${e.event.x -
-              width -
-              20}px`;
+            document.querySelector('#echartTip').style.left = `${
+              e.event.x - width - 20
+            }px`;
           } else {
-            document.querySelector('#echartTip').style.left = `${e.event.x +
-              20}px`;
+            document.querySelector('#echartTip').style.left = `${
+              e.event.x + 20
+            }px`;
           }
         }
 
@@ -1377,6 +1386,13 @@ export default {
     .cl-histogram-title {
       height: 56px;
       line-height: 56px;
+      .path-message {
+        display: inline-block;
+        line-height: 20px;
+        padding: 0px 4px 15px 4px;
+        font-weight: bold;
+        vertical-align: bottom;
+      }
       .cl-close-btn {
         width: 20px;
         height: 20px;

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

@@ -18,7 +18,14 @@ limitations under the License.
   <div class="cl-image-manage">
     <div class="image-bk">
       <div class="cl-title cl-image-title">
-        <div class="cl-title-left">{{$t('images.titleText')}}</div>
+        <div class="cl-title-left">{{$t('images.titleText')}}
+          <div class="path-message">
+            <span>{{$t('symbols.leftbracket')}}</span>
+            <span>{{$t('trainingDashboard.summaryDirPath')}}</span>
+            <span>{{summaryPath}}</span>
+            <span>{{$t('symbols.rightbracket')}}</span>
+          </div>
+        </div>
         <div class="cl-title-right">
           <div class="cl-close-btn"
                @click="jumpToTrainDashboard">
@@ -138,6 +145,7 @@ export default {
       brightness: 50, // Brightness
       contrast: 50, // Contrast
       trainingJobId: this.$route.query.train_id, // ID of the current training job
+      summaryPath: this.$route.query.summaryPath,
       multiSelectedTagNames: {}, // Dictionary for storing the name of the selected tags
       curFilterSamples: [], // List of images that meet the current filter criteria
       tagOperateList: [], // Tag list
@@ -676,6 +684,13 @@ export default {
     .cl-image-title {
       height: 56px;
       line-height: 56px;
+      .path-message {
+        display: inline-block;
+        line-height: 20px;
+        padding: 0px 4px 15px 4px;
+        font-weight: bold;
+        vertical-align: bottom;
+      }
     }
   }
   .title {

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

@@ -19,7 +19,14 @@ limitations under the License.
     <div class="scalar-bk">
       <div class="cl-title cl-scalar-title"
            v-show="originDataArr.length>0">
-        <div class="cl-title-left">{{$t("scalar.titleText")}}</div>
+        <div class="cl-title-left">{{$t("scalar.titleText")}}
+          <div class="path-message">
+            <span>{{$t('symbols.leftbracket')}}</span>
+            <span>{{$t('trainingDashboard.summaryDirPath')}}</span>
+            <span>{{summaryPath}}</span>
+            <span>{{$t('symbols.rightbracket')}}</span>
+          </div>
+        </div>
         <div class="cl-title-right">
           <ScalarButton class="scalar-btn"
                         :right="scalarCompare"
@@ -291,6 +298,7 @@ export default {
       compare: false, // Comparison Page
       scalarCompare: this.$t('scalar')['comparison'],
       trainingJobId: this.$route.query.train_id, // ID of the current training job
+      summaryPath: this.$route.query.summaryPath,
       thresholdDialogVisible: false,
       delThresholdVisible: false,
       currentTagName: '',
@@ -298,8 +306,8 @@ export default {
       thresholdErrorMsg: '',
       thresholdRelational: '',
       thresholdValue: [
-        { filterCondition: this.$t('scalar.lessThan'), value: '' },
-        { filterCondition: this.$t('scalar.lessThan'), value: '' },
+        {filterCondition: this.$t('scalar.lessThan'), value: ''},
+        {filterCondition: this.$t('scalar.lessThan'), value: ''},
       ],
       filterOptions: [
         {
@@ -412,7 +420,7 @@ export default {
       return;
     }
     document.title = `${decodeURIComponent(
-      this.$route.query.train_id
+        this.$route.query.train_id,
     )}-${this.$t('scalar.titleText')}-MindInsight`;
     // Adding a Listener
     window.addEventListener('resize', this.resizeCallback, false);
@@ -440,7 +448,7 @@ export default {
       if (localStorage.getItem('thresholdCache')) {
         try {
           this.thresholdLocal = JSON.parse(
-            localStorage.getItem('thresholdCache')
+              localStorage.getItem('thresholdCache'),
           );
           this.clearCache();
         } catch (e) {
@@ -468,7 +476,7 @@ export default {
           delete this.thresholdLocal[this.decodeTrainingJobId];
           localStorage.setItem(
               'thresholdCache',
-            JSON.stringify(this.thresholdLocal)
+              JSON.stringify(this.thresholdLocal),
           );
         }
       }
@@ -679,7 +687,7 @@ export default {
               }
 
               sampleObject.charData.charOption = this.formateCharOption(
-              sampleIndex
+                  sampleIndex,
               );
               const tempOption = sampleObject.charData.charOption;
               if (
@@ -718,7 +726,7 @@ export default {
 
     setOnePoint(sampleObject) {
       const that = this;
-      sampleObject.charObj.on('datazoom', function (params) {
+      sampleObject.charObj.on('datazoom', function(params) {
         const xAxisObject = params.batch[0];
         const yAxisObject = params.batch[1];
         const charData = sampleObject.charData.charOption.series[0].data;
@@ -777,7 +785,7 @@ export default {
 
     setRestore(sampleObject) {
       const that = this;
-      sampleObject.charObj.on('restore', function (params) {
+      sampleObject.charObj.on('restore', function(params) {
         const charData = sampleObject.charData.charOption.series[0].data;
         const tempCharOption = sampleObject.charData.charOption;
 
@@ -846,12 +854,12 @@ export default {
       if (curOriData) {
         if (sampleObject.log) {
           dataObj.data = this.formateSmoothData(
-            curOriData.logData[this.curBenchX]
+              curOriData.logData[this.curBenchX],
           );
           dataObjBackend.data = curOriData.logData[this.curBenchX];
         } else {
           dataObj.data = this.formateSmoothData(
-            curOriData.valueData[this.curBenchX]
+              curOriData.valueData[this.curBenchX],
           );
           dataObjBackend.data = curOriData.valueData[this.curBenchX];
         }
@@ -981,23 +989,23 @@ export default {
           position: (point, params, dom, rect, size) => {
             const curDom = document.getElementById(sampleObject.domId);
             if (!curDom) {
-              return { left: 0, bottom: '100%' };
+              return {left: 0, bottom: '100%'};
             }
             if (sampleObject.fullScreen) {
               if (point[0] + size.contentSize[0] <= size.viewSize[0]) {
-                return { left: point[0], bottom: '10%' };
+                return {left: point[0], bottom: '10%'};
               } else {
-                return { right: size.viewSize[0] - point[0], bottom: '10%' };
+                return {right: size.viewSize[0] - point[0], bottom: '10%'};
               }
             } else {
               const parentNode = curDom.parentNode;
               if (!parentNode) {
-                return { left: 0, bottom: '100%' };
+                return {left: 0, bottom: '100%'};
               }
               if (parentNode.offsetLeft > size.contentSize[0]) {
-                return { right: '100%', bottom: 0 };
+                return {right: '100%', bottom: 0};
               } else {
-                return { left: '100%', bottom: 0 };
+                return {left: '100%', bottom: 0};
               }
             }
           },
@@ -1082,7 +1090,7 @@ export default {
                     `display:inline-block;"></td><td>${parma.seriesName}</td>` +
                     `<td>${that.formateYaxisValue(parma.value[1])}</td>` +
                     `<td>${that.formateYaxisValue(
-                      curSerieOriData.stepData[parma.dataIndex][1]
+                        curSerieOriData.stepData[parma.dataIndex][1],
                     )}</td>` +
                     `<td>${curSerieOriData.stepData[parma.dataIndex][0]}</td>` +
                     `<td>${curSerieOriData.relativeData[
@@ -1090,8 +1098,8 @@ export default {
                     ][0].toFixed(3)}${unit}</td>` +
                     `<td>${that.dealrelativeTime(
                         new Date(
-                        curSerieOriData.absData[parma.dataIndex][0] * 1000
-                      ).toString()
+                            curSerieOriData.absData[parma.dataIndex][0] * 1000,
+                        ).toString(),
                     )}</td>` +
                     `</tr>`;
                 }
@@ -1177,8 +1185,8 @@ export default {
       ) {
         const tempStorgeArr = JSON.parse(
             JSON.stringify(
-            this.thresholdLocal[this.decodeTrainingJobId][sampleObject.tagName]
-          )
+                this.thresholdLocal[this.decodeTrainingJobId][sampleObject.tagName],
+            ),
         );
         let pieceStr = '';
         pieceStr = this.formatePieceStr(tempStorgeArr);
@@ -1213,7 +1221,7 @@ export default {
         if (sampleObject.updateFlag) {
           sampleObject.charObj.setOption(
               sampleObject.charData.charOption,
-            sampleObject.dataRemove
+              sampleObject.dataRemove,
           );
           sampleObject.updateFlag = false;
           sampleObject.dataRemove = false;
@@ -1222,7 +1230,7 @@ export default {
         // creat chart
         sampleObject.charObj = echarts.init(
             document.getElementById(sampleObject.domId),
-          null
+            null,
         );
         sampleObject.charObj.setOption(sampleObject.charData.charOption, true);
         this.setOnePoint(sampleObject);
@@ -1328,13 +1336,13 @@ export default {
               const oriIndexData = sampleObject.charData.oriData[index];
               if (sampleObject.log) {
                 seriesData[index * 2].data = this.formateSmoothData(
-                  oriIndexData.logData[this.curBenchX]
+                    oriIndexData.logData[this.curBenchX],
                 );
                 seriesData[index * 2 + 1].data =
                   oriIndexData.logData[this.curBenchX];
               } else {
                 seriesData[index * 2].data = this.formateSmoothData(
-                  oriIndexData.valueData[this.curBenchX]
+                    oriIndexData.valueData[this.curBenchX],
                 );
                 seriesData[index * 2 + 1].data =
                   oriIndexData.valueData[this.curBenchX];
@@ -1705,13 +1713,13 @@ export default {
                 serie.data = this.formateSmoothData(
                     sampleObject.charData.oriData[index / 2].logData[
                         this.curBenchX
-                  ]
+                    ],
                 );
               } else {
                 serie.data = this.formateSmoothData(
                     sampleObject.charData.oriData[index / 2].valueData[
                         this.curBenchX
-                  ]
+                    ],
                 );
               }
             }
@@ -1807,13 +1815,13 @@ export default {
         tempOriData.forEach((originData, index) => {
           if (log) {
             tempOption.series[index * 2].data = this.formateSmoothData(
-              tempOriData[index].logData[this.curBenchX]
+                tempOriData[index].logData[this.curBenchX],
             );
             tempOption.series[index * 2 + 1].data =
               tempOriData[index].logData[this.curBenchX];
           } else {
             tempOption.series[index * 2].data = this.formateSmoothData(
-              tempOriData[index].valueData[this.curBenchX]
+                tempOriData[index].valueData[this.curBenchX],
             );
             tempOption.series[index * 2 + 1].data =
               tempOriData[index].valueData[this.curBenchX];
@@ -2267,7 +2275,7 @@ export default {
         }
         localStorage.setItem(
             'thresholdCache',
-          JSON.stringify(this.thresholdLocal)
+            JSON.stringify(this.thresholdLocal),
         );
 
         this.thresholdDialogVisible = false;
@@ -2384,7 +2392,7 @@ export default {
       this.clearCache();
       localStorage.setItem(
           'thresholdCache',
-        JSON.stringify(this.thresholdLocal)
+          JSON.stringify(this.thresholdLocal),
       );
       this.delThresholdVisible = false;
     },
@@ -2445,7 +2453,13 @@ export default {
     background-color: #fff;
     display: flex;
     flex-direction: column;
-
+    .path-message {
+      display: inline-block;
+      line-height: 20px;
+      padding: 0px 4px 15px 4px;
+      font-weight: bold;
+      vertical-align: bottom;
+    }
     .cl-scalar-title {
       height: 56px;
       line-height: 56px;

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

@@ -211,6 +211,7 @@ export default {
           dir: profilerDir,
           id: trainId,
           path: path,
+          summaryPath: row.train_id,
         },
       });
       window.open(routeUrl.href, '_blank');

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

@@ -18,7 +18,14 @@ limitations under the License.
     <div class="tensor-bk">
       <!-- Title area -->
       <div class="cl-title cl-tensor-title">
-        <div class="cl-title-left">{{$t('tensors.titleText')}}</div>
+        <div class="cl-title-left">{{$t('tensors.titleText')}}
+          <div class="path-message">
+            <span>{{$t('symbols.leftbracket')}}</span>
+            <span>{{$t('trainingDashboard.summaryDirPath')}}</span>
+            <span>{{summaryPath}}</span>
+            <span>{{$t('symbols.rightbracket')}}</span>
+          </div>
+        </div>
         <div class="cl-title-right">
           <div class="cl-close-btn"
                @click="jumpToTrainDashboard">
@@ -183,6 +190,7 @@ export default {
     return {
       tagList: [], // Tag list.
       trainingJobId: this.$route.query.train_id, // ID of the current training job.
+      summaryPath: this.$route.query.summaryPath,
       originDataArr: [], // List of all data.
       initOver: false, // Indicates whether the initialization is complete.
       curFullTagDic: {}, // Dictionary that contains all the current tags.
@@ -1092,6 +1100,13 @@ export default {
     .cl-tensor-title {
       height: 56px;
       line-height: 56px;
+      .path-message {
+        display: inline-block;
+        line-height: 20px;
+        padding: 0px 4px 15px 4px;
+        font-weight: bold;
+        vertical-align: bottom;
+      }
       .cl-close-btn {
         width: 20px;
         height: 20px;

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

@@ -474,6 +474,7 @@ export default {
         path: '/train-manage/scalar',
         query: {
           train_id: this.trainingJobId,
+          summaryPath: this.summaryPath,
         },
       });
     },
@@ -488,6 +489,7 @@ export default {
         path: '/train-manage/histogram',
         query: {
           train_id: this.trainingJobId,
+          summaryPath: this.summaryPath,
         },
       });
     },
@@ -522,6 +524,7 @@ export default {
             path: '/train-manage/tensor',
             query: {
               train_id: this.trainingJobId,
+              summaryPath: this.summaryPath,
             },
           });
         }
@@ -538,6 +541,7 @@ export default {
         path: '/train-manage/data-map',
         query: {
           train_id: this.trainingJobId,
+          summaryPath: this.summaryPath,
         },
       });
     },
@@ -552,6 +556,7 @@ export default {
         path: '/train-manage/graph',
         query: {
           train_id: this.trainingJobId,
+          summaryPath: this.summaryPath,
         },
       });
     },
@@ -1500,6 +1505,7 @@ export default {
         path: '/train-manage/image',
         query: {
           train_id: this.trainingJobId,
+          summaryPath: this.summaryPath,
         },
       });
     },
@@ -2085,8 +2091,9 @@ export default {
     .path-message {
       display: inline-block;
       line-height: 20px;
-      padding: 18px 16px;
+      padding: 21px 4px 0 4px;
       font-weight: bold;
+      vertical-align: bottom;
     }
     .loading-icon {
       margin-left: 5px;
@@ -2096,8 +2103,8 @@ export default {
       color: #000000;
       font-weight: bold;
       font-size: 20px;
-      line-height: 20px;
-      padding: 18px 0;
+      line-height: 56px;
+      padding: 0;
     }
   }
   .cl-dashboard-center {