!263 Resize configuration and nodata display on the step-trace, profiling, and...

!263 Resize configuration and nodata display on the step-trace, profiling, and profiling-dashboard pages 
Merge pull request !263 from WeiFeng-mindinsight/myMaster

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

@@ -65,7 +65,9 @@
             </div>
             <el-table v-show="!statisticType && opTypeCol && opTypeCol.length"
                       :data="opTypeList"
+                      ref="expandTable"
                       @expand-change="expandTypeItem"
+                      @sort-change="opTypeSortChange"
                       stripe
                       height="calc(100% - 75px)"
                       width="100%">
@@ -74,6 +76,7 @@
                   <div class="expand-table">
                     <el-table :data="props.row.opDetailList"
                               stripe
+                              ref="expandChild"
                               width="100%"
                               tooltip-effect="light"
                               @cell-click="showInfoDetail"
@@ -294,6 +297,11 @@ export default {
       }, // operator type filter
       initOver: false,
       objectType: 'object',
+      curActiveRow: {
+        rowItem: null,
+        childProp: null,
+        childOrder: null,
+      },
     };
   },
   watch: {
@@ -313,12 +321,11 @@ export default {
   destroyed() {
     // Remove the listener of window size change
     window.removeEventListener('resize', this.resizeCallback);
-    this.$bus.$off('resize');
+    this.$bus.$off('collapse');
   },
   methods: {
     init() {
       this.getCoreTypeList();
-      this.$bus.$on('resize', this.resizeEchart);
     },
     resizeEchart() {
       if (this.coreCharts.chartDom) {
@@ -340,6 +347,14 @@ export default {
         this.getCpuList(true);
       }
     },
+    opTypeSortChange() {
+      this.$nextTick(() => {
+        const item = this.$refs['expandChild'];
+        if (item && this.curActiveRow.rowItem) {
+          item.sort(this.curActiveRow.childProp, this.curActiveRow.childOrder);
+        }
+      });
+    },
     /**
      * clear cpu data
      */
@@ -426,6 +441,15 @@ export default {
                   });
                   this.opTypeList.push(object);
                 });
+                this.$nextTick(() => {
+                  const elementItem = this.$refs['expandTable'];
+                  if (elementItem) {
+                    elementItem.sort(
+                        this.op_sort_condition.name,
+                        this.op_sort_condition.type,
+                    );
+                  }
+                });
                 if (
                   !this.coreCharts.device_id ||
                 this.coreCharts.device_id !== this.currentCard
@@ -486,6 +510,20 @@ export default {
           .then((res) => {
             if (res && res.data) {
               this.formatterDetailData(row, res.data);
+              this.$nextTick(() => {
+                const item = this.$refs['expandChild'];
+                if (item) {
+                  this.curActiveRow = {
+                    rowItem: row,
+                    childProp: row.op_sort_condition.name,
+                    childOrder: row.op_sort_condition.type,
+                  };
+                  item.sort(
+                      row.op_sort_condition.name,
+                      row.op_sort_condition.type,
+                  );
+                }
+              });
             }
           })
           .catch(() => {});
@@ -580,6 +618,13 @@ export default {
         } else {
           this.op_filter_condition = {};
         }
+        if (this.curActiveRow.rowItem) {
+          this.curActiveRow = {
+            rowItem: null,
+            childProp: null,
+            childOrder: null,
+          };
+        }
         this.getCoreTypeList();
       }
     },
@@ -653,12 +698,30 @@ export default {
     expandTypeItem(row) {
       row.isExpanded = !row.isExpanded;
       if (row.isExpanded) {
+        if (this.curActiveRow.rowItem) {
+          this.curActiveRow.rowItem.isExpanded = false;
+          const item = this.$refs['expandTable'];
+          if (item) {
+            item.toggleRowExpansion(this.curActiveRow.rowItem, false);
+          }
+        }
+        this.curActiveRow = {
+          rowItem: row,
+          childProp: null,
+          childOrder: null,
+        };
         row.opDetailList = [];
         row.opDetailCol = [];
         row.opDetailPage.offset = 0;
         row.pageTotal = 0;
         row.op_sort_condition = {name: 'execution_time', type: 'descending'};
         this.getCoreDetailList(row);
+      } else {
+        this.curActiveRow = {
+          rowItem: null,
+          childProp: null,
+          childOrder: null,
+        };
       }
     },
     /**
@@ -949,11 +1012,16 @@ export default {
   },
   mounted() {
     if (this.train_id) {
-      document.title = `${decodeURIComponent(this.train_id)}-${this.$t('profiling.operatorDetail')}-MindInsight`;
+      document.title = `${decodeURIComponent(this.train_id)}-${this.$t(
+          'profiling.operatorDetail',
+      )}-MindInsight`;
     } else {
       document.title = `${this.$t('profiling.operatorDetail')}-MindInsight`;
     }
     window.addEventListener('resize', this.resizeCallback, false);
+    setTimeout(() => {
+      this.$bus.$on('collapse', this.resizeEchart);
+    }, 500);
   },
 };
 </script>

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

@@ -195,10 +195,18 @@ export default {
       },
     };
   },
-  mounted() {},
+  mounted() {
+    setTimeout(() => {
+      this.$bus.$on('collapse', this.resizeTrace);
+    }, 500);
+  },
   watch: {
     '$parent.curDashboardInfo': {
       handler(newValue, oldValue) {
+        if (newValue.curCardNum === '') {
+          this.pieChart.noData = true;
+          this.svg.noData = true;
+        }
         if (newValue.query.dir && newValue.query.id && newValue.query.path) {
           this.summaryPath = newValue.query.dir;
           this.trainingJobId = newValue.query.id;
@@ -226,7 +234,6 @@ export default {
       this.queryTrainingTrace();
       this.initPieChart();
       window.addEventListener('resize', this.resizeTrace, false);
-      this.$bus.$on('resize', this.resizeTrace);
     },
     viewDetail(path) {
       this.$router.push({
@@ -393,10 +400,13 @@ export default {
                 svg.insertBefore(dashedLine, svg.querySelector('g'));
                 row.forEach((i) => {
                   if (i.duration) {
-                    const tempDom = i.name
-                      ? this.createRect(i, index)
-                      : this.createArrow(i, index);
+                    if (i.name) {
+                      const tempDom = this.createRect(i, index);
                       svg.insertBefore(tempDom, svg.querySelector('g'));
+                    } else {
+                      const tempDom = this.createArrow(i, index);
+                      svg.appendChild(tempDom);
+                    }
                   }
                 });
               }
@@ -488,7 +498,13 @@ export default {
       const text = document.createElementNS(this.svg.namespaceURI, 'text');
       text.textContent = `${data.duration.toFixed(4)}ms`;
       const textWidth = this.getTextWidth(text.textContent);
-      text.setAttribute('x', Math.max(0, (x2 - x1) / 2 + x1 - textWidth / 2));
+      text.setAttribute(
+          'x',
+          Math.min(
+              this.svg.svgPadding * 2 + this.svg.totalWidth - textWidth,
+              Math.max(0, (x2 - x1) / 2 + x1 - textWidth / 2),
+          ),
+      );
       text.setAttribute('y', y - 6);
       text.setAttribute('font-size', 12);
       text.setAttribute('fill', '#6c7280');
@@ -555,7 +571,7 @@ export default {
   },
   destroyed() {
     window.removeEventListener('resize', this.resizeTrace, false);
-    this.$bus.$off('resize');
+    this.$bus.$off('collapse');
   },
 };
 </script>

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

@@ -36,7 +36,8 @@ limitations under the License.
             {{$t("profiling.smartHelper")}}
           </div>
         </div>
-        <div class="collapse-btn" :class="{collapse:collapse}"
+        <div class="collapse-btn"
+             :class="{collapse:collapse}"
              @click="collapseLeft()">
         </div>
       </div>
@@ -121,9 +122,12 @@ export default {
     },
     collapseLeft() {
       this.collapse = !this.collapse;
-      this.$bus.$emit('resize');
+      this.$bus.$emit('collapse');
     },
   },
+  destroyed() {
+    this.$bus.$off('collapse');
+  },
 };
 </script>
 <style lang="scss">

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

@@ -84,8 +84,9 @@ limitations under the License.
            class="chart-wrap">
         <div class="title">{{ item.name }}</div>
         <div class="rate-wrap">
-          <div v-if="item.timeSummary.total_time !== undefined">
-            <span>{{item.timeLabel}}:</span>{{item.timeSummary.total_time}}ms</div>
+          <div v-if="item.timeSummary.total_time !== undefined && item.timeSummary[item.rate] !== undefined">
+            <span>{{item.timeLabel}}:</span>
+            {{(item.timeSummary.total_time*parseFloat(item.timeSummary[item.rate])/100).toFixed(4)}}ms</div>
           <div v-if="item.timeSummary[item.rate] !== undefined">
             <span>{{item.rateLabel}}:</span>{{item.timeSummary[item.rate]}}</div>
           <div v-if="item.timeSummary.total_steps !== undefined">
@@ -205,13 +206,18 @@ export default {
     },
   },
   computed: {},
-  mounted() {},
+  mounted() {
+    setTimeout(() => {
+      this.$bus.$on('collapse', () => {
+        this.resizeTrace();
+        this.resizeEchart();
+      });
+    }, 500);
+  },
   methods: {
     init() {
       window.addEventListener('resize', this.resizeTrace, false);
-      this.$bus.$on('resize', this.resizeTrace);
       window.addEventListener('resize', this.resizeEchart, false);
-      this.$bus.$on('resize', this.resizeEchart);
       if (this.charts.length) {
         this.charts.forEach((val) => {
           val.clear();
@@ -395,10 +401,13 @@ export default {
               svg.insertBefore(dashedLine, svg.querySelector('g'));
               row.forEach((i) => {
                 if (i.duration) {
-                  const tempDom = i.name
-                    ? this.createRect(i, index)
-                    : this.createArrow(i, index);
+                  if (i.name) {
+                    const tempDom = this.createRect(i, index);
                     svg.insertBefore(tempDom, svg.querySelector('g'));
+                  } else {
+                    const tempDom = this.createArrow(i, index);
+                    svg.appendChild(tempDom);
+                  }
                 }
               });
             }
@@ -489,7 +498,13 @@ export default {
       const text = document.createElementNS(this.svg.namespaceURI, 'text');
       text.textContent = `${data.duration.toFixed(4)}ms`;
       const textWidth = this.getTextWidth(text.textContent);
-      text.setAttribute('x', Math.max(0, (x2 - x1) / 2 + x1 - textWidth / 2));
+      text.setAttribute(
+          'x',
+          Math.min(
+              this.svg.svgPadding * 2 + this.svg.totalWidth - textWidth,
+              Math.max(0, (x2 - x1) / 2 + x1 - textWidth / 2),
+          ),
+      );
       text.setAttribute('y', y - 6);
       text.setAttribute('font-size', 12);
       text.setAttribute('fill', '#6c7280');
@@ -559,7 +574,7 @@ export default {
   destroyed() {
     window.removeEventListener('resize', this.resizeTrace, false);
     window.removeEventListener('resize', this.resizeEchart, false);
-    this.$bus.$off('resize');
+    this.$bus.$off('collapse');
   },
 };
 </script>