!621 UI optimize timeline download

Merge pull request !621 from 潘慧/master_ph

mindinsight/ui/src/components/debuggerGridTableSimple.vue

@@ -394,7 +394,7 @@ export default {
      * Dimension selection changed
      */
     filterChange() {
-      // 校验检索条件
+      // filter condition
       let filterCorrect = true;
       let incorrectData = false;
       let limitCount = 2;

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

@@ -370,4 +370,11 @@ export default {
       params: params,
     });
   },
+  retrieveTensorHistory(params) {
+    return axios({
+      method: 'post',
+      url: 'v1/mindinsight/debugger/retrieve_tensor_history',
+      data: params,
+    });
+  },
 };

mindinsight/ui/src/views/profiling-gpu/operator.vue

@@ -472,6 +472,10 @@ export default {
       this.searchByTypeInput = '';
       this.searchByNameInput = '';
       this.op_filter_condition = {};
+      this.op_sort_condition = {
+        name: 'avg_time',
+        type: 'descending',
+      };
       this.opTypeCol = [];
       this.opTypeList = [];
       this.opAllTypeList = {

mindinsight/ui/src/views/profiling-gpu/profiling-dashboard.vue

@@ -98,10 +98,12 @@ limitations under the License.
         <div class="title-wrap">
           <div class="title">{{ $t('profiling.timeLine') }}</div>
           <div class="view-detail">
-            <button @click="downloadPerfetto()"
-                    :disabled="timeLine.waiting"
-                    :class="{disabled:timeLine.waiting}">{{ $t('profiling.downloadTimeline') }}
+            <button @click="downloadTimelineFile()"
+                    v-show="!timeLine.waiting"
+                    :disabled="timeLine.disable"
+                    :class="{disabled:timeLine.disable}">{{ $t('profiling.downloadTimeline') }}
             </button>
+            <div class="el-icon-loading loading-icon" v-show="timeLine.waiting"></div>
           </div>
           <div class="tip-icon">
             <el-tooltip placement="bottom"
@@ -191,6 +193,7 @@ export default {
         // Time line data
         data: null,
         waiting: true, // Is it waiting for interface return
+        disable: true,
       },
       timelineInfo: {
         // Time line information
@@ -212,6 +215,7 @@ export default {
           this.pieChart.noData = true;
           this.pieChart.initOver = true;
           this.timelineInfo.initOver = true;
+          this.timeLine.waiting = false;
         }
         if (newValue.query.dir && newValue.query.id && newValue.query.path) {
           this.summaryPath = newValue.query.dir;
@@ -369,23 +373,12 @@ export default {
             this.pieChart.initOver = true;
           });
     },
-    /**
-     * Converts a string to data in uint8array format
-     * @param {String} str The string to be converted
-     * @return {Array}
-     */
-    stringToUint8Array(str) {
-      const arr = [];
-      for (let i = 0, strLen = str.length; i < strLen; i++) {
-        arr.push(str.charCodeAt(i));
-      }
-      return new Uint8Array(arr);
-    },
     /**
      * Query the data of time line
      */
     queryTimeline() {
       this.timeLine.waiting = true;
+      this.timeLine.disable = true;
       const params = {
         dir: this.relativePath,
         device_id: this.currentCard,
@@ -417,17 +410,20 @@ export default {
           });
       RequestService.queryTimeline(params)
           .then((res) => {
+            this.timeLine.waiting = false;
             if (res && res.data && res.data.length) {
               this.timeLine.data = JSON.stringify(res.data);
-              this.timeLine.waiting = false;
+              this.timeLine.disable = false;
             }
           })
-          .catch(() => {});
+          .catch(() => {
+            this.timeLine.waiting = false;
+          });
     },
     /**
-     * Download Perfetto data file
+     * Download timeline data file
      */
-    downloadPerfetto() {
+    downloadTimelineFile() {
       const downloadLink = document.createElement('a');
       downloadLink.download = this.getDocName();
       downloadLink.style.display = 'none';
@@ -521,7 +517,6 @@ export default {
       .view-detail {
         float: right;
         cursor: pointer;
-        color: #00a5a7;
         font-size: 12px;
         height: 24px;
         line-height: 24px;
@@ -546,6 +541,9 @@ export default {
         display: block;
       }
     }
+    .loading-icon {
+      margin-left: 5px;
+    }
     .coming-soon-content {
       height: calc(100% - 50px);
       position: relative;

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

@@ -557,6 +557,10 @@ export default {
       this.searchByCpuTypeInput = '';
       this.searchAllByCpuTypeInput = '';
       this.op_cpu_filter_condition = {};
+      this.op_cpu_sort_condition = {
+        name: 'execution_time',
+        type: 'descending',
+      };
       this.opCpuTypeCol = [];
       this.opCpuTypeList = [];
       this.opCpuAllTypeList = {
@@ -578,6 +582,10 @@ export default {
       this.searchByTypeInput = '';
       this.searchByNameInput = '';
       this.op_filter_condition = {};
+      this.op_sort_condition = {
+        name: 'execution_time',
+        type: 'descending',
+      };
       this.opTypeCol = [];
       this.opTypeList = [];
       this.opAllTypeList = {

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

@@ -304,10 +304,12 @@ limitations under the License.
         <div class="title-wrap">
           <div class="title">{{ $t('profiling.timeLine') }}</div>
           <div class="view-detail">
-            <button @click="downloadPerfetto()"
-                    :disabled="timeLine.waiting"
-                    :class="{disabled:timeLine.waiting}">{{ $t('profiling.downloadTimeline') }}
+            <button @click="downloadTimelineFile()"
+                    v-show="!timeLine.waiting"
+                    :disabled="timeLine.disable"
+                    :class="{disabled:timeLine.disable}">{{ $t('profiling.downloadTimeline') }}
             </button>
+            <div class="el-icon-loading loading-icon" v-show="timeLine.waiting"></div>
           </div>
           <div class="tip-icon">
             <el-tooltip placement="bottom"
@@ -439,6 +441,7 @@ export default {
         // Time line data
         data: null,
         waiting: true, // Is it waiting for interface return
+        disable: true,
       },
       timelineInfo: {
         // Time line information
@@ -485,6 +488,7 @@ export default {
           this.pieChart.initOver = true;
           this.timelineInfo.initOver = true;
           this.processSummary.initOver = true;
+          this.timeLine.waiting = false;
         }
         if (
           newValue.query.dir &&
@@ -1094,23 +1098,12 @@ export default {
         this.svg.resizeTimer = null;
       }, 500);
     },
-    /**
-     * Converts a string to data in uint8array format
-     * @param {String} str The string to be converted
-     * @return {Array}
-     */
-    stringToUint8Array(str) {
-      const arr = [];
-      for (let i = 0, strLen = str.length; i < strLen; i++) {
-        arr.push(str.charCodeAt(i));
-      }
-      return new Uint8Array(arr);
-    },
     /**
      * Query the data of time line
      */
     queryTimeline() {
       this.timeLine.waiting = true;
+      this.timeLine.disable = true;
       const params = {
         dir: this.relativePath,
         device_id: this.currentCard,
@@ -1141,17 +1134,20 @@ export default {
           });
       RequestService.queryTimeline(params)
           .then((res) => {
+            this.timeLine.waiting = false;
             if (res && res.data && res.data.length) {
               this.timeLine.data = JSON.stringify(res.data);
-              this.timeLine.waiting = false;
+              this.timeLine.disable = false;
             }
           })
-          .catch(() => {});
+          .catch(() => {
+            this.timeLine.waiting = false;
+          });
     },
     /**
-     * Download Perfetto data file
+     * Download timeline data file
      */
-    downloadPerfetto() {
+    downloadTimelineFile() {
       const downloadLink = document.createElement('a');
       downloadLink.download = this.getDocName();
       downloadLink.style.display = 'none';
@@ -1281,7 +1277,6 @@ export default {
       .view-detail {
         float: right;
         cursor: pointer;
-        color: #00a5a7;
         font-size: 12px;
         height: 24px;
         line-height: 24px;
@@ -1306,6 +1301,9 @@ export default {
         display: block;
       }
     }
+    .loading-icon {
+      margin-left: 5px;
+    }
     .coming-soon-content {
       height: calc(100% - 50px);
       position: relative;