UI the message indicating that the specifications are exceeded is

dispalyed in the table area
UI fix an issue where the table hearder could not be restored after
being dragged
UI fix an issue where the tensor page is dispalyed when you drag a table
on the dashboard page

mindinsight/ui/src/components/gridTableSimple.vue

@@ -20,7 +20,11 @@ limitations under the License.
            class="error-msg-container">
         {{$t('components.gridIncorrectDataError')}}
       </div>
-      <div v-show="!fullData.length && updated && !incorrectData"
+      <div v-show="!incorrectData && requestError"
+           class="error-msg-container">
+        {{errorMsg}}
+      </div>
+      <div v-show="!fullData.length && updated && !incorrectData && !requestError"
            class="error-msg-container">
         {{$t('components.gridTableNoData')}}
       </div>
@@ -29,7 +33,7 @@ limitations under the License.
            class="grid-item"></div>
     </div>
     <div class="operate-container"
-         v-if="showOperate && fullData.length">
+         v-if="(showOperate && fullData.length) || requestError">
       <div class="filter-container"
            @keyup.enter="filterChange">
         <div v-for="(item, itemIndex) in filterArr"
@@ -114,6 +118,8 @@ export default {
       updated: false, // Updated
       scrollTop: false, // Wheather scroll to the top
       filterCorrect: true, // Wheather the dimension input is correct
+      requestError: false, // Exceeded the specification
+      errorMsg: '', // Error message
       viewResizeFlag: false, // Size reset flag
       // Accuray options
       accuracyArr: [
@@ -126,6 +132,7 @@ export default {
       ],
       // Table configuration items
       optionObj: {
+        enableColumnReorder: false,
         enableCellNavigation: true,
         frozenColumn: 0,
         frozenRow: 0,
@@ -348,6 +355,7 @@ export default {
      */
     updateGridData(newDataFlag, dimension, statistics, filterStr) {
       this.updated = true;
+      this.requestError = false;
       this.$nextTick(() => {
         if (!this.fullData || !this.fullData.length) {
           return;
@@ -369,7 +377,7 @@ export default {
      */
     resizeView() {
       if (this.gridObj) {
-        if (this.incorrectData) {
+        if (this.incorrectData || this.requestError) {
           this.viewResizeFlag = true;
         } else {
           this.$nextTick(() => {
@@ -385,6 +393,19 @@ export default {
     toggleFullScreen() {
       this.$emit('toggleFullScreen');
     },
+    /**
+     * Show Error message
+     * @param {String} errorMsg Error message
+     * @param {Array} dimension Array of dimension
+     * @param {String} filterStr String of dimension selection
+     */
+    showRequestErrorMessage(errorMsg, dimension, filterStr) {
+      this.errorMsg = errorMsg;
+      if (!this.filterArr.length) {
+        this.initializeFilterArr(dimension, filterStr);
+      }
+      this.requestError = true;
+    },
   },
   destroyed() {},
 };

mindinsight/ui/src/services/fetcher.js

@@ -61,6 +61,9 @@ axios.interceptors.response.use(
         } else if ( router.currentRoute.path === '/profiling/profiling-dashboard' &&
         error.config.headers.ignoreError ) {
           return Promise.reject(error);
+        } else if ( error.response.data.error_code.toString() === '50545013' &&
+        router.currentRoute.path === '/train-manage/tensor') {
+          return Promise.reject(error);
         }
         if (errorData[error.response.data.error_code]) {
           Vue.prototype.$message.error(errorData[error.response.data.error_code]);

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

@@ -117,6 +117,9 @@ limitations under the License.
                               :viewName="curViewName"
                               :axisName="curAxisName"
                               :fullData="sampleItem.curData"></histogramUntil>
+              <div class="loading-cover"
+                   v-if="sampleItem.showLoading">
+                <i class="el-icon-loading"></i></div>
             </div>
             <!-- Information display area -->
             <div class="sample-data-show"
@@ -378,6 +381,7 @@ export default {
                   tagName: tagName,
                   summaryName: this.trainingJobId,
                   show: false,
+                  showLoading: false,
                   sliderValue: 0,
                   newDataFlag: true,
                   totalStepNum: 0,
@@ -415,6 +419,7 @@ export default {
      * @param {Object} sampleItem The object that is being operated
      */
     filterChange(data, sampleItem) {
+      sampleItem.showLoading = true;
       sampleItem.filterStr = `[${data.toString()}]`;
       sampleItem.newDataFlag = true;
       this.freshtMartixData(sampleItem);
@@ -517,24 +522,30 @@ export default {
         tag: sampleItem.tagName,
         detail: 'histogram',
       };
-      RequestService.getTensorsSample(params).then((res) => {
-        if (!res || !res.data || !this.curDataType) {
-          return;
-        }
-        if (!res.data.tensors || !res.data.tensors.length) {
-          return;
-        }
-        const resData = JSON.parse(JSON.stringify(res.data.tensors[0]));
-        sampleItem.summaryName = resData.train_id;
-        // sampleItem.fullData = resData;
-        sampleItem.curData = this.formHistogramOriData(resData);
-        this.$nextTick(() => {
-          const elementItem = this.$refs[sampleItem.ref];
-          if (elementItem) {
-            elementItem[0].updateHistogramData();
-          }
-        });
-      });
+      RequestService.getTensorsSample(params).then(
+          (res) => {
+            sampleItem.showLoading = false;
+            if (!res || !res.data || !this.curDataType) {
+              return;
+            }
+            if (!res.data.tensors || !res.data.tensors.length) {
+              return;
+            }
+            const resData = JSON.parse(JSON.stringify(res.data.tensors[0]));
+            sampleItem.summaryName = resData.train_id;
+            // sampleItem.fullData = resData;
+            sampleItem.curData = this.formHistogramOriData(resData);
+            this.$nextTick(() => {
+              const elementItem = this.$refs[sampleItem.ref];
+              if (elementItem) {
+                elementItem[0].updateHistogramData();
+              }
+            });
+          },
+          () => {
+            sampleItem.showLoading = false;
+          },
+      );
     },
     /**
      * Obtain table data
@@ -549,9 +560,11 @@ export default {
       RequestService.getTensorsSample(params).then(
           (res) => {
             if (!res || !res.data || this.curDataType) {
+              sampleItem.showLoading = false;
               return;
             }
             if (!res.data.tensors.length) {
+              sampleItem.showLoading = false;
               return;
             }
             const resData = JSON.parse(JSON.stringify(res.data.tensors[0]));
@@ -567,6 +580,7 @@ export default {
               sampleItem.sliderValue = 0;
               sampleItem.totalStepNum = 0;
               this.clearMartixData(sampleItem);
+              sampleItem.showLoading = false;
               return;
             }
             const oldTotalStepNum = sampleItem.totalStepNum;
@@ -610,6 +624,7 @@ export default {
             sampleItem.sliderValue = 0;
             sampleItem.totalStepNum = 0;
             this.clearMartixData(sampleItem);
+            sampleItem.showLoading = false;
           },
       );
     },
@@ -628,6 +643,7 @@ export default {
       sampleItem.curMartixShowSliderValue = sampleItem.sliderValue;
       RequestService.getTensorsSample(params).then(
           (res) => {
+            sampleItem.showLoading = false;
             if (!res || !res.data || this.curDataType) {
               return;
             }
@@ -660,16 +676,27 @@ export default {
               sampleItem.newDataFlag = false;
             });
           },
-          () => {
-            this.clearMartixData(sampleItem);
+          (e) => {
+            let showLimitError = false;
+            if (
+              e.response &&
+            e.response.data &&
+            e.response.data.error_code &&
+            e.response.data.error_code.toString() === '50545013'
+            ) {
+              showLimitError = true;
+            }
+            this.clearMartixData(sampleItem, showLimitError);
+            sampleItem.showLoading = false;
           },
       );
     },
     /**
      * Clear table display
      * @param {Object} sampleItem The object that is being operated
+     * @param {Boolean} showLimitError Display request error message
      */
-    clearMartixData(sampleItem) {
+    clearMartixData(sampleItem, showLimitError) {
       sampleItem.curData = [];
       sampleItem.newDataFlag = true;
       let elementItem = null;
@@ -677,6 +704,13 @@ export default {
         elementItem = this.$refs[sampleItem.ref];
         if (elementItem) {
           elementItem[0].updateGridData();
+          if (showLimitError) {
+            elementItem[0].showRequestErrorMessage(
+                this.$t('error.50545013'),
+                sampleItem.formateData.value.dims,
+                sampleItem.filterStr,
+            );
+          }
         }
       });
     },
@@ -917,6 +951,7 @@ export default {
             tagName: tagName,
             summaryName: this.trainingJobId,
             show: false,
+            showLoading: false,
             sliderValue: 0,
             newDataFlag: true,
             totalStepNum: 0,
@@ -981,6 +1016,7 @@ export default {
         return;
       }
       sampleItem.sliderChangeTimer = setTimeout(() => {
+        sampleItem.showLoading = true;
         this.freshtMartixData(sampleItem);
       }, 500);
     },
@@ -1112,6 +1148,19 @@ export default {
           position: relative;
           background: #f0f3fa;
           overflow-x: hidden;
+          .loading-cover {
+            width: 100%;
+            height: 100%;
+            z-index: 9;
+            position: absolute;
+            top: 0;
+            left: 0;
+            display: flex;
+            background: white;
+            opacity: 0.5;
+            align-items: center;
+            justify-content: center;
+          }
         }
         .sample-data-show {
           padding: 32px 16px;

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

@@ -148,7 +148,9 @@ limitations under the License.
       </div>
       <div class="cl-dashboard-con-up"
            :class="!!tensorTag && !wrongPlugin ? '' : 'no-data-hover'"
-           @click="viewMoreTensors">
+           @mousedown="viewMoreTensors($event)"
+           @mouseup="viewMoreTensors($event)"
+           @click="viewMoreTensors($event)">
         <div class="cl-dashboard-title">{{$t("tensors.titleText")}}</div>
         <div class="cl-module">
           <div class="tensor-char-container"
@@ -220,6 +222,18 @@ export default {
       fileTag: '',
       tensorData: [],
       tensorTag: '',
+      tensorNewDataFlag: true,
+      tensorMouseData: {
+        timeStamp: 0,
+        pageX: 0,
+        pageY: 0,
+        isClick: false,
+      },
+      mouseEventKey: {
+        click: 'click',
+        mousedown: 'mousedown',
+        mouseup: 'mouseup',
+      },
     };
   },
   computed: {
@@ -413,17 +427,39 @@ export default {
     },
     /**
      * Viewing more tensors information
+     * @param {Object} event Mouse event
      */
-    viewMoreTensors() {
+    viewMoreTensors(event) {
       if (!this.tensorTag) {
         return;
       }
-      this.$router.push({
-        path: '/train-manage/tensor',
-        query: {
-          train_id: this.trainingJobId,
-        },
-      });
+      if (event.type === this.mouseEventKey.mousedown) {
+        this.tensorMouseData.isClick = false;
+        this.tensorMouseData.pageX = event.pageX;
+        this.tensorMouseData.pageY = event.pageY;
+      } else if (event.type === this.mouseEventKey.mouseup) {
+        // offset buffer is 3
+        const offsetBuffer = 3;
+        if (
+          Math.abs(event.pageX - this.tensorMouseData.pageX) <= offsetBuffer &&
+          Math.abs(event.pageY - this.tensorMouseData.pageY) <= offsetBuffer
+        ) {
+          this.tensorMouseData.isClick = true;
+          this.tensorMouseData.timeStamp = event.timeStamp;
+        }
+      } else if (event.type === this.mouseEventKey.click) {
+        if (
+          this.tensorMouseData.isClick &&
+          event.timeStamp === this.tensorMouseData.timeStamp
+        ) {
+          this.$router.push({
+            path: '/train-manage/tensor',
+            query: {
+              train_id: this.trainingJobId,
+            },
+          });
+        }
+      }
     },
     /**
      * Go to data.
@@ -828,11 +864,17 @@ export default {
       this.getSampleRandomly();
     },
     dealTensorData(tags) {
+      const oldTag = this.tensorTag;
       if (tags.length) {
         this.tensorTag = tags[0];
       } else {
         this.tensorTag = '';
       }
+      if (this.tensorTag !== oldTag) {
+        this.tensorNewDataFlag = true;
+      } else {
+        this.tensorNewDataFlag = false;
+      }
       if (this.tensorTag) {
         this.getTensorGridData();
       }
@@ -920,7 +962,7 @@ export default {
               const elementItem = this.$refs.tensorChart;
               if (elementItem) {
                 elementItem.updateGridData(
-                    true,
+                    this.tensorNewDataFlag,
                     curStepData.value.dims,
                     statistics,
                 );